Мобильные навигационные меню сложно улучшить, особенно когда новая версия должна быть компактной, но при этом видимой и доступной. Горизонтальная панель, три точки в углу, боковая панель, отдельная страница для огромного меню и т. д. – типов меню предостаточно. Варианты бесконечны, как и дизайн. Конкретный выбор зависит от типа сайта, ассортимента товаров, количества посетителей и многих других факторов.
Говоря вкратце, для разных сайтов используются те решения, которые лучше всего помогают повысить конверсию. А чтобы понять, какое из решений лучше всего обеспечивает удовлетворенность пользователей, часто проводят A/B-тестирование.
Содержание
- Проблемы навигационного меню: 4 примера и решения
- Лучшие практики для оптимизации мобильной навигации
- Соответствие дизайна навигации целям пользователей
Проблемы навигационного меню: 4 примера и решения
1. Большие меню
Если навигационное меню напоминает каталог, оно вряд ли подойдет для простого и удобного представления товаров и услуг вашего сайта. Такое решение будет особенно неудачным для показа на мобильных устройствах, где пространство ограничено, а дизайн должен быть компактным.
В чем проблема? Избыточный выбор на вашем сайте может отпугнуть посетителей настолько, что в итоге они вообще ничего не выберут. Большое меню может стать точкой трения, из-за которой пользователи не будут переходить на другие страницы сайта.
Решение
Многие крупные e-commerce сайты, действительно нуждающиеся в обширных меню, добавляют в основные разделы подкатегории, в которых затем раскрываются списки доступных опций. Делается это с помощью боковой панели или отдельной страницы.
Пример 1. Microsoft использует боковую панель с подкатегориями:
Пример 2. На AliExpress используются отдельные страницы для категорий товаров:
Оба примера демонстрируют удачные решения для больших меню, но вариантов дизайна гораздо больше. Выбор подходящего варианта может оказаться игрой в угадайку. Именно поэтому мы советуем проводить такие масштабные улучшения с помощью A/B-тестирования. Так вы сможете опробовать несколько вариантов замены вашего текущего меню, и тот, который окажется наиболее эффективным в тестах, можно будет оставить на постоянной основе.
2. Мало взаимодействий и много выходов из мобильных меню
Несмотря на очень чистые и простые меню, на некоторых сайтах при анализе не видно ожидаемого взаимодействия пользователей с ними.
Инструменты для записи экрана, такие как Hotjar, могут показать, что пользователи нажимают на меню, но не кликают по дальнейшим опциям в нём. Это может означать, что меню имеет высокий процент выходов. И причин этому может быть много, в том числе эстетически более привлекательные меню у конкурентов. Но создание интерактивного и привлекательного мобильного меню требует много усилий, поскольку пространство для креативности ограничено.
В чем проблема? Низкая активность и высокий процент выходов из адаптивного мобильного меню ведут к росту показателя отказов. Это может означать, что пользователи либо не находят меню достаточно полезным, либо значительная часть посетителей не является вашей целевой аудиторией. Чтобы не упускать клиентов, важно заинтересовать их дизайном и удобством навигации.
Решение
В любом случае, вы должны использовать весь трафик в свою пользу. Меню должно привлекать внимание и мотивировать пользователей переходить на другие страницы. Для этого вы можете использовать иконки, изображения, сленг, креативные заголовки, цвета, шрифты или размеры, в зависимости от того, что лучше подходит для вашего сайта.
Пример 1. Duolingo использует иконки в навигационной панели меню:
Пример 2. Panda express использует изображения на отдельной странице для раскрытия других опций:
Поскольку вариантов бесконечное множество, вы можете выбрать наиболее подходящий с помощью A/B-тестирования. Это поможет найти тот вариант, который больше всего привлекает пользователей и, следовательно, повышает конверсию.
3. Меню не отображается сразу (гамбургер-меню)
Одним из самых популярных типов меню на мобильных устройствах является гамбургер-меню. Оно часто используется для создания минималистичного дизайна, особенно когда в панели вкладок невозможно уместить все продукты и опции. Однако многие сайты используют его просто потому, что это популярно, не задумываясь о его недостатках.
Гамбургер-меню не всегда видно сразу, и часто оно не выполняет функции, необходимые для того, чтобы пользователь понял:
- Где он находится
- Куда он может перейти
- Что он может сделать
Все это должно быть видно в меню с первого взгляда.
Согласно исследованию Baynard Institute о мобильной навигации, “у 42% мобильных e-commerce сайтов дизайн главных страниц не позволяет пользователям точно понять, на каком типе сайта они находятся”.
В чем проблема? Когда меню не видно без клика, процесс навигации затягивается. Для выполнения действий пользователю нужно делать не один, а два или больше кликов. Это снижает видимость мобильного меню.
Решение
Существует множество дизайнерских решений, которые хорошо сочетаются с гамбургер-меню, например, панель ссылок, панель вкладок, содержащая приоритетные действия, или навигационные блоки для большего вовлечения пользователей. A/B-тестирование гамбургер-меню — отличный способ понять, является ли оно лучшим вариантом для вашего сайта.
Пример. При улучшении интерфейса своего приложения Spotify заменил боковую панель с гамбургер-меню на нижнюю панель навигации (см. скриншот ниже). Это решение было принято после пользовательского тестирования. Выяснилось, что пользователи интерфейса с панелью вкладок кликают на 9% больше в целом и на 30% больше по меню.
4. Ограниченное пространство для отображения панели мобильного меню
К мобильной навигации сложно подходить творчески, поскольку пространства очень мало. Все должно быть достаточно маленьким, чтобы поместиться, но при этом достаточно большим, чтобы быть видимым. Перед тем как разместить всё в маленьком хедере, проведите A/B-тестирование панели меню, чтобы понять, как пользователи на это отреагируют.
В чем проблема? Перенос части товаров или услуг из основного меню в дополнительную навигацию (например, в футер) не всегда является лучшим решением. Это может привести к потерям конверсий, поскольку пользователи могут не дойти до футера, чтобы увидеть остальные опции.
Решение
Существует множество решений этой проблемы: уменьшение размера шрифта, общий дизайн, горизонтальная прокрутка, использование навигационных блоков, отдельные страницы меню, выпадающие списки и т. д. Гамбургер-меню, несмотря на свою неидеальность, тоже хорошо работает для сайтов с большим количеством товаров, но ограниченным пространством.
Пример. Горизонтальная прокрутка панели навигации от Quora:
Лучшие практики для оптимизации мобильной навигации
1. Навигационные шаблоны
Исходя из вышеописанных проблем, возможно, вы уже сможете выбрать дизайн меню, который их решает. Но если вы еще не изучили проблемы навигации и хотите поэкспериментировать с новым меню для мобильных устройств, вам стоит разобраться с шаблонами навигации для мобильных устройств.
Это могут быть нижние панели навигации, гамбургер-меню, боковые панели, плавающие меню, приоритетные разделы и другие варианты. Выберите оптимальный вариант после тестирования меню, разработанного специально для мобильных пользователей.
2. iOS и Android
Есть приложения, которые доступны только на iOS, только на Android или на обеих операционных системах. Поскольку операционные системы отличаются, это может повлиять на симметрию дизайна. Поэтому компании часто экспериментируют с разными дизайнами для каждой операционной системы. И лучше протестировать варианты перед тем, как вносить постоянные изменения.
Вот пример отображения Facebook на трёх различных платформах:
3. Мобильные сайты и приложения
Оптимальный дизайн сайта может быть разным для мобильной версии и приложения. Самый лучший способ узнать, что больше подходит пользователям — это собрать информацию об их предпочтениях, протестировав навигацию.
Вот ещё один пример: отображение Facebook в мобильной версии сайта и в приложении отличается:
Поскольку пользовательский опыт при использовании разных платформ может очень сильно отличаться, стоит провести A/B-тестирование, чтобы выяснить, какой вариант лучше подходит для вашей аудитории.
4. Размещение навигации
Существует множество шаблонов навигации, и лучше выбрать тот, который подходит большинству пользователей. Также всегда встаёт вопрос, должна ли навигация находиться внизу или вверху экрана.
Для улучшения процесса A/B-тестирования мы рекомендуем использовать записи экрана и тепловые карты. Также вы можете создать два или более варианта, чтобы понять, какой из них вызывает больший интерес.
5. Другие важные элементы навигационных меню
После пользовательского тестирования на мобильных устройствах вы сможете понять, какие элементы лучше всего помогают вашему сайту увеличивать конверсии и доход. К таким элементам могут относиться:
- Шрифт
- Цвет
- Иконки
- Изображения
- Размер
- Дизайн
- Функциональность
Список можно продолжать, но эти моменты стоит учесть перед тем, как двигаться дальше с идеями дизайна через A/B-тестирование.
Соответствие дизайна навигации целям пользователей
Прежде чем приступать к изменению важных элементов мобильных сайтов, следует определить портреты пользователей. Удобство сайта зависит от того, насколько хорошо он удовлетворяет потребности пользователей. Поэтому дизайн навигационного меню (или других элементов) должен соответствовать целям пользователей. Если посетителям сложно перемещаться по сайту из меню, значит, что-то в нём отсутствует, и это нужно исправлять.
Навигационное меню должно помогать пользователям легко перемещаться по сайту. Кроме того, оно может повлиять на первые впечатления и действия пользователей:
- Что есть на этом сайте?
- Какой товар мне нужен?
- Куда нажать, чтобы открыть меню?
- Какая иконка похожа на меню?
- Где находится кнопка «назад»?
- Почему эта кнопка такая маленькая?
Вы можете создать гипотетические пользовательские сценарии, чтобы разобраться с дизайном и решить реальные проблемы пользователей, улучшив навигационное меню.
При этом, если не тестировать новый дизайн, то вы никогда не узнаете, работает ли он так, как вы планировали. Эксперименты и сплит-тестирование мобильных меню не только подтверждают гипотезы, но и помогают проанализировать взаимодействие пользователей с меню.
Два совершенно разных дизайна мобильной навигации, предназначенные для одного типа продуктов, могут стать отличными кандидатами для A/B-тестирования мобильного меню вашего сайта.
Давайте рассмотрим пример.
Панель ссылок (Amazon) или отсутствие панели ссылок (Walmart)
Панель ссылок – это горизонтальная полоса меню, которая отображает основные продукты или услуги сайта. Вот пример с мобильной версией сайта BBC с выпадающим мега-меню в панели ссылок:
Существует много способов улучшить панель ссылок, чтобы она эффективнее увеличивала конверсии. В следующем примере с мобильной версией сайта Amazon используется гамбургер-меню (три параллельные линии в углу), а также панель ссылок для категоризации их услуг:
С другой стороны, в мобильной версии сайта Walmart нет панели ссылок на главной странице, но есть гамбургер-меню:
Если сравнивать, Amazon и Walmart различаются по ассортименту, но обе компании являются ведущими в сфере электронной коммерции. Несмотря на сходство, у них разные навигационные меню.
Выбирая подходящий вариант для своего сайта, нужно не копировать чью-то модель, а провести A/B-тестирование этих двух дизайнов мобильной навигации именно по вашему сайту. Лучший вариант можно будет использовать в будущем.
Перевод статьи «Mobile Navigation Menu A/B Testing: Examples and Best Practices».