Адаптивный дизайн — это инновационное решение для правильного отображения сайта на экранах с разным разрешением. Но самый спорный вопрос в адаптивном дизайне – это решить, как должно выглядеть меню. В этом посте мы поговорим о 3 вариантах навигационного меню для адаптивного сайта.
Концепция адаптивного дизайна зарождалась как тренд, но сейчас стала просто необходимостью. Разработка Итана Маркотта попросту перевернула мир веб-дизайна еще в 2013 году. Именно это привело к кардинальным изменениям в навигации и интерфейсе и упростило взаимодействие пользователя сразу с несколькими устройствами.
Сейчас мы живем в эре пост-ПК, где использование смартфонов, планшетов и Smart TV стало неотъемлемой частью наших будней. Именно сейчас адаптивный дизайн становится обязательным. Он значительно упрощает регулярный серфинг в интернете независимо от того, какое устройство выбрали пользователи для доступа к интересующих их сайтам. Давайте разберемся в основных способах оптимизации навигационного меню для адаптивных сайтов.
Что такое адаптивный дизайн?
Адаптивность, это особый подход к разработке сайта, который позволяет уже действующим веб-ресурсам подстраиваться под разрешения экранов разных устройств. Это даже скорее философия дизайна, которая дает возможность дизайнерам контролировать внешний вид сайта на компьютере, ноутбуке, телефоне, планшете или Smart TV. Данная технология дизайна позволяет макету сайта приспосабливаться к размеру окна.
Адаптивные сайты появились в результате растущего спроса пользователей, которые хотят загружать веб-страницы с идеальной структурой на всех своих устройствах. Чтобы справиться с этим, дизайнеры используют адаптивный дизайн.
Популярные способы использования меню навигации на адаптивном сайте
Среди всех трендов веб-дизайна адаптивность стала мейнстримом. Ниже приведены некоторые популярные виды адаптивных меню навигации, которые удобны для пользователя и обеспечивают беспрепятственный доступ к информации.
Гамбургер-меню
Трудно не повстречать в интернете сайты с гамбургер-меню. Но стоит ли использовать гамбургер-меню для адаптивного сайта, остается предметом обсуждений UX-дизайнеров. Давайте узнаем, вокруг чего создается столько шума?
Как появилось гамбургер-меню?
Возникновение этого меню уходит корнями в середину 2000-х годов, когда гамбургер-меню нельзя было не появиться в связи с растущими потребностями UX-, UI веб-дизайнеров:
- оно позволяет не акцентировать внимание пользователя на отвлекающих факторах на главном экране, скрывая все опции под узнаваемым значком с тремя полосками;
- гамбургер-меню не перегружает пользователя большим выбором вариантов и не запутывает. Перед пользователем открывается просто чистый и ненавязчивый дисплей;
- это простая навигация, которая позволяет пользователям перемещаться по страницам сайта в соответствии с логикой легко и быстро.
Почему UX-дизайнеры стараются не использовать гамбургер-меню?
По результатам тестирований гамбургер-меню UX-специалисты обнаружили следующие проблемы:
- открываемость становится низкой: некоторые люди не могут найти иконку, если она не дополнена надписью «Меню» или подсказкой. Видимость контента резко сокращается, поскольку пользователи не знают, где искать информацию;
- гамбургер-меню несовместимо с навигацией по умолчанию на некоторых платформах, причем одна из них iOS. Например, есть сбои в опциях «Назад» и значке «Меню» для отображения в левом углу экрана;
- увеличение времени поиска нужной информации пользователем: человек должен сделать лишь несколько кликов для посещения желаемой страницы или доступа к требуемой опции. Просмотр нескольких страниц увеличивает общее время навигации по сайту и усложняет задачу, что крайне неудобно для конечного пользователя.
A/B тестирование гамбургер-меню: пример от Beamly
Чтобы узнать насколько эффективно гамбургер-меню по сравнению с другими распространенными типами навигации, посмотрим пример веб-сайта «Beamly» (ранее Zeebox), который проводил A/B тестирование пользовательского интерфейса в своих проектах:
A: веб-сайт с боковой панелью навигации (гамбургер-меню).
B: веб-сайт с верхней панелью навигации (видимая навигация).
- Изучив результаты A/B тестирования на этом сайте, эксперты пришли к выводу: замена верхней навигационной панели боковой панелью с изображением значка гамбургер-меню помогла посетителям получить только половину пользовательского опыта;
- Еженедельные результаты взаимодействия были значительно выше для верхней навигационной панели в сравнении с боковой панелью.
Хотя гамбургер-меню делает сайт более просторным и чистым, это не всегда лучший выбор для адаптивных веб-проектов. После успешного A/B тестирования Beamly продолжили разработку дизайна верхней панели навигации.
Когда использовать гамбургер-меню: лучшие практики внедрения
Использование гамбургер-меню всегда было предметом обсуждения для UX-экспертов. Несмотря на то, что некоторые предлагают использовать данное навигационное меню, другие стараются его избегать. Тем не менее, бывают случаи, когда гамбургер-меню оказывается идеальным выбором. Следующие пункты описывают лучшие практики использования гамбургер-меню:
- используйте CTA кнопку и дополнительную навигацию. Лучшим примером является Uber, который выделяет основные функции на экране и скрывает второстепенные в значке гамбургера:
- создайте иконку гамбургера таким образом, чтобы она была заметна и тонко намекала пользователям о вариантах навигации, скрытых внутри;
- сопроводите меню-гамбургер CTA. Этот способ поможет преодолеть проблему низкой открываемости иконки гамбургера;
- обратите внимание пользователя на гамбургер-меню, сделав его привлекательным. Используйте анимацию, яркие цвета или другие визуальные фишки. Оформление иконки как кнопки помогает пользователям понять, что это меню доступно для кликов.
Альтернативы гамбургер-меню: вне скрытой навигации
Чтобы быть выше критики UX-экспертов и избежать риска, связанного со скрытыми вариантами навигации, используйте альтернативные методы, которые также показывают неплохие результаты. Это нижняя панель навигации, экранное переключение и вертикальные меню. Оценить все превосходство таких методов можно на реальных примерах адаптивных шаблонов TemplateMonster.
Нижнее меню
Этот вид навигации разработан с учетом доступности функций, которые находятся в пределах досягаемости большого пальца. Создано оно с помощью «интеллектуального UX» и юзер-френдли интерфейса. Такая структура навигации облегчает пользователям понимание страницы, на которую они попали, и какие другие варианты передвижения на ней доступны.
Экранный переключатель
Если вы хотите оставить дополнительное место на экране, но так, чтобы пользователи все равно могли легко переключаться между подразделами и видеть их содержимое, экранный переключатель станет правильным выбором. Это меню обрабатывает простые двухуровневые навигационные структуры, используя небольшие видовые экраны. К тому же можно открывать и закрывать главное меню, не переходя на другую страницу. Это самый стабильный и управляемый способ навигации, где даже параметры подменю можно переключать с одной и той же страницы.
Вертикальное меню
Одно из самых лучших решений — вертикальное отображение меню для удобства пользователей. Такой тип адаптивной навигации не сложный и делает сайт чрезвычайно удобным в использовании и просмотре. Оно идеально подходит для сайтов, основное меню которых содержит подменю. Его можно удобно настроить для небольших размеров экрана. Маленький размер экрана делает горизонтальное меню сайта непрактичным и перегруженным. Вертикально вытянутое меню станет решением этой проблемы. Все параметры располагаются один под другим, эффективно используя весь экран.
Когда пункты меню отображаются вертикально, пользователям становится проще читать их. Простая структура сетки упрощает доступ к ссылкам и облегчает их просмотр.
Что стоит учитывать при выборе меню для адаптивного сайта?
Ниже приведен список вопросов, которые необходимо задать клиенту прежде чем перейти к созданию адаптивного дизайна сайта:
- Какой вы видите структуру своего сайта?
- Где основная область внимания на сайте? Это контент или изображения?
- Кто ваша целевая аудитория?
- Соответствует ли навигация целям пользователя при посещении сайта?
Смысл этих вопросов в том, чтобы определить основную цель создания сайта. Только когда она понятна, дизайнеры могут принять решение о навигации, мультимедиа и контенте. Структура навигационного меню должна быть такой, чтобы пользователи имели доступ к основным параметрам на экране независимо от того, на какой странице они находятся. Понимание цели навигации и значимости информационной архитектуры вашего сайта помогает решить, какой вид меню использовать. Хотя большинство компаний принимают решение о создании адаптивного сайта, вряд ли все они правильно его используют. Предоставление исключительного опыта для разных разрешений экрана требует внедрения наилучших методов навигации, ориентированных на веб-дизайн.
Вопрос о том, следует ли использовать гамбургер-меню для адаптивного сайта, остается нерешенным. Когда содержимое веб-страницы требует лучшей альтернативы, которая может упростить рабочий процесс пользователя, используйте другие виды меню. Альтернативы, обсуждаемые в этом посте, не являются единственными, поскольку существует еще множество различных решений. Хорошо продуманный сайт с соответствующей навигацией по меню обогащает эстетическую ценность и выделяет из множества проектов. Лучший способ оценить полезность адаптивного дизайна сайта — проанализировать легкость перехода между мобильной и десктопной версиями. Не стоит забывать, что поведение и потребности пользователей со временем меняются, поэтому сайт необходимо своевременно адаптировать к текущим тенденциям на рынке.
Нужно больше информации?
