Удобство интерфейса и его отображение на различных устройствах увеличивает показатель технической accessibility (доступности интерфейса для пользователей с различными техническими возможностями). На текущий момент проектировать и воплощать интерфейс под настольные мониторы (как это было в 2005-2010 годах), когда доступ в интернет был либо с ПК, либо с ноутбуков практически в 90% случаев, на сегодняшний день абсолютно неверно.
Большинство пользователей интернета сейчас — это пользователи мобильных устройств.
Что же такое адаптивный интерфейс?
Адаптивный интерфейс — интерфейс веб-сайта, который обеспечивает корректное отображение элементов дизайна страницы сайта на различных разрешениях окна интернет-браузера.
На текущий момент стандартами являются более 50-ти разрешений экрана с различными пропорциями. Теперь проектировщикам интерфейсов необходимо не только под основные разрешения экрана пользователей предусматривать и подстраивать свои дизайн-решения, но и закладывать минимальные отклонения (диапазоны разрешений). Это связано с огромным и различным количеством стандартов у производителей современных устройств.
Использование адаптации интерфейса позволяет сайту динамически «подстраиваться» под каждого пользователя несмотря на разрешение его устройства.
В Cyber Capital Technology минимальным тестом интерфейсов (даже если отдельно не были спроектированы 5 разрешений экрана) является тест на:
- 4к мониторы (3840 px в ширину)
- Full HD (1920 px в ширину)
- Планшет горизонтальный (1024-1180 px в ширину)
- Планшет вертикальный (768-820 px в ширину)
- Мобильная версия (320-393 px в ширину)
В случае, если бюджет заказчика позволяет сделать расширенные тесты, то у нашей компании есть софт, позволяющий протестировать готовый интерфейс на 70+ различных разрешениях и устройствах, смоделировать поведение пользователей и понять узкие места.
Почему такой подход не может быть дешёвым? Отвечаем!
Если у вас одностраничник (или landing page), то вам необходимо смоделировать функциональность 1 шаблона на 70+ устройств, выявить слабые места, устранить интерфейсные пробелы. Сама по себе эта задача требует погружения желательно 2-х специалистов на 1-2 дня.
Когда речь идёт об интернет-магазине, то помимо минимальных 15-20 уникальных шаблонов вывода, мы имеем различные функциональные особенности и воронки конверсии, которые стоит учесть при тестировании интерфейса. Такая работа может занять от нескольких недель, до месяца. При этом придётся привлекать веб-аналитика, помимо проектировщика и front-end разработчика проекта.
Отдельная мобильная версия, «за» и «против»
Однозначно «за»! Отдельное внимание в нашей компании мы уделяем мобильным версиям наших проектов. Более половины пользователей веб-сайтов приходится на пользователей мобильных устройств. Таким образом, при крайне не проработанной мобильной версии ваших веб-сайтов, вы теряете больше половину вашего трафика!
Отдельно стоит обратить внимание работу анимации и скорости загрузки для мобильных устройств. Мы рекомендуем кастомизировать (подстраивать) все элементы мобильной версии интернет-проекта под «мобильные реалии»:
- Управление интерфейсом происходит руками, а не мышкой
- На мобильном устройстве пользователь воспринимает информацию иначе, чем сидя перед монитором в кресле
- Время концентрации, чтения и изучения значительно меньше
- Информация выдается порционно, пользователь не видит всю страницу вашего сайта сразу
- Требуется адаптация навигации по проекту под все вышеперечисленные условия
В высоконагруженных проектах мы часто рекомендуем выносить мобильную версию на отдельный поддомен (как пример: m.examle.ru) и работать с данным проектом как с отдельным сайтом. С разделением потоков веб-аналитики, мониторинга и полной отдельной проектировкой интерфейса.
Отдельной строкой можно выделить принцип «mobile first». Такая модель подходит для мини-интерфейсов с минимальным количеством элементов на странице. Это подойдет для служебных публичных интерфейсов с 1-2 страницами. Выстраивать на этом принципе корпоративные сайты и интернет-магазины мы не рекомендуем.