Полезные статьи

Вернуться назад

Что такое адаптивный интерфейс?

Автор: Пятикоп Владислав

#Разработка сайтов
Что такое адаптивный интерфейс?

Удобство интерфейса и его отображение на различных устройствах увеличивает показатель технической 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 разработчика проекта.

Отдельная мобильная версия, «за» и «против»

Однозначно «за»! Отдельное внимание в нашей компании мы уделяем мобильным версиям наших проектов. Более половины пользователей веб-сайтов приходится на пользователей мобильных устройств. Таким образом, при крайне не проработанной мобильной версии ваших веб-сайтов, вы теряете больше половину вашего трафика!

Отдельно стоит обратить внимание работу анимации и скорости загрузки для мобильных устройств. Мы рекомендуем кастомизировать (подстраивать) все элементы мобильной версии интернет-проекта под «мобильные реалии»:

  1. Управление интерфейсом происходит руками, а не мышкой
  2. На мобильном устройстве пользователь воспринимает информацию иначе, чем сидя перед монитором в кресле
  3. Время концентрации, чтения и изучения значительно меньше
  4. Информация выдается порционно, пользователь не видит всю страницу вашего сайта сразу
  5. Требуется адаптация навигации по проекту под все вышеперечисленные условия

В высоконагруженных проектах мы часто рекомендуем выносить мобильную версию на отдельный поддомен (как пример: m.examle.ru) и работать с данным проектом как с отдельным сайтом. С разделением потоков веб-аналитики, мониторинга и полной отдельной проектировкой интерфейса.

Отдельной строкой можно выделить принцип «mobile first». Такая модель подходит для мини-интерфейсов с минимальным количеством элементов на странице. Это подойдет для служебных публичных интерфейсов с 1-2 страницами. Выстраивать на этом принципе корпоративные сайты и интернет-магазины мы не рекомендуем.

Статья была полезна? Поделись ею с подписчиками!