Мобильные навигационные меню сложно улучшить, особенно когда новая версия должна быть компактной, но при этом видимой и доступной. Горизонтальная панель, три точки в углу, боковая панель, отдельная страница для огромного меню и т. д. – типов меню предостаточно. Варианты бесконечны, как и дизайн. Конкретный выбор зависит от типа сайта, ассортимента товаров, количества посетителей и многих других факторов.
Говоря вкратце, для разных сайтов используются те решения, которые лучше всего помогают повысить конверсию с помощью навигационного меню. Чтобы понять, какое из них лучше всего обеспечивает удовлетворенность пользователей, часто проводят A/B-тестирование. Такие тесты позволяют связать ваши идеи с реальными результатами для создания мобильного меню.
Именно поэтому мы всегда уделяем особое внимание анализу поведения пользователей, прежде чем приступать к разработке нового дизайна. Для успешной мобильной конверсии не существует определенных шаблонов и правил, поэтому эксперименты так важны — они помогают найти оптимальный вариант взаимодействия пользователя с конкретным сайтом.
В этой статье мы покажем несколько дизайнерских решений для типичных проблем мобильной навигации, основанных на лучших практиках и результатах тестов.
Содержание:
- Проблемы навигационного меню: 4 примера и решения
- Лучшие практики для оптимизации мобильной навигации
Проблемы навигационного меню: 4 примера и решения
1. Большие меню
Если навигационное меню напоминает каталог, оно вряд ли подходит для простого и удобного представления товаров и услуг вашего сайта. Пользователи скорее уйдут на другой сайт, где эта опция более доступна. Это создаёт особые трудности на мобильных устройствах, где пространство ограничено, а дизайн должен быть компактным.
Почему это проблема: Помимо ухода к конкурентам, избыточный выбор на вашем сайте может отпугнуть потребителей настолько, что в итоге они вообще ничего не выберут. Это мешает пользователю переходить на другие страницы сайта.
Решение
Многие крупные e-Commerce сайты, которым действительно необходимы обширные меню, используют проверенные подходы, включая использование нескольких подкатегорий в основных разделах, которые затем раскрывают список доступных опций. Сделать это можно с помощью боковой панели или отдельной страницы.
Пример: Боковое меню и отдельная страница меню:
Оба примера демонстрируют удачные решения для больших меню, но вариантов дизайна гораздо больше. Выбор подходящего варианта может оказаться игрой в угадайку. Именно поэтому мы советуем проводить такие масштабные улучшения с помощью A/B-тестирования.
Например, эти варианты могут стать заменой вашему текущему меню, и тот, который окажется наиболее эффективным в тестах, можно будет оставить на постоянной основе.
2. Меньше взаимодействий и больше выходов в мобильных меню
Несмотря на очень чистые и простые меню, на некоторых сайтах при анализе не видно ожидаемого взаимодействия пользователей с навигационным меню.
Инструменты для записи экрана, такие как Hotjar, могут показать, что пользователи нажимают на меню, но не кликают по дальнейшим опциям в нём. Это может означать, что меню имеет высокий процент выходов. И причин этому может быть много, в том числе эстетически более привлекательные меню у конкурентов. Однако создание интерактивного и привлекательного мобильного меню требует больше усилий, поскольку пространство для креативности ограничено.
Почему это проблема: Низкая активность и высокий процент выходов из адаптивного мобильного меню ведут к росту показателя отказов. Это может означать, что пользователи либо не находят меню достаточно полезным, либо значительная часть посетителей не является вашей целевой аудиторией. Чтобы не упускать клиентов, важно заинтересовать их дизайном и удобством навигации.
Решение
В любом случае, вы должны использовать весь трафик в свою пользу. Меню должно привлекать внимание и мотивировать пользователей переходить на другие страницы. Для этого вы можете использовать иконки, изображения, сленг, креативные заголовки, цвета, шрифты или размеры, в зависимости от того, что лучше подходит для вашего сайта.
Пример 1: Использование значков на панели меню:
Пример 2: Отображение изображений на отдельной странице для раскрытия других опций:
Поскольку вариантов бесконечное множество, вы можете выбрать наиболее подходящий с помощью A/B-тестирования. Это поможет найти тот вариант, который больше всего привлекает пользователей и, следовательно, повышает конверсию.
3. Меню не отображается сразу (гамбургер-меню)
Одним из самых популярных типов меню на мобильных устройствах является гамбургер-меню. Оно часто используется для создания минималистичного дизайна, особенно когда в панели вкладок невозможно уместить все продукты и опции. Однако многие сайты используют его просто потому, что это популярно, не задумываясь о его недостатках. Гамбургер-меню не всегда видно сразу, и часто оно не выполняет функции, необходимые для того, чтобы пользователь понял:
- Где он находится
- Куда он может перейти
- Что он может сделать.
Все это должно быть видно в меню с первого взгляда.
Согласно исследованию Baynard Institute о мобильной навигации, „42% мобильных e-Commerce сайтов не имеют дизайна главной страницы, который позволяет пользователям точно понять, на каком типе сайта они находятся“.
Почему это проблема: Когда меню не видно без клика, процесс навигации затягивается. Теперь для выполнения действий нужно делать не один, а два или больше кликов. Это снижает видимость мобильного меню.
Решение
Существует множества дизайнерских решений, которые хорошо сочетаются с гамбургер-меню, например, панель ссылок, панель вкладок, включающая приоритетные действия, или навигационные блоки для большего вовлечения пользователей. A/B-тестирование гамбургер-меню — отличный способ понять, является ли оно лучшим вариантом для вашего сайта.
Пример: Spotify
При улучшении интерфейса своего приложения 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-тестирование этих двух дизайнов мобильной навигации. Лучший вариант можно будет использовать в будущем, так как он оптимален для вашего мобильного сайта.
A/B тестирование навигационного меню с помощью Brillmark
Вот пример того, как Brillmark поможет вам разработать и провести сплит-тесты для мобильной навигации.
1. Генерация идей
Ваш маркетинговый отдел или агентство по оптимизации конверсий проводит аудит, чтобы выявить проблемные места и зоны для улучшения. В данном случае это меню мобильной навигации. Нужно собрать идеи, чтобы понять, какие варианты тестировать, и зафиксировать все известные технические требования.
2. Технические аспекты
Вы предоставляете нам технические параметры для теста, цели и т. д. Мы оцениваем объём работ, устанавливаем сроки и предлагаем смету. После вашего одобрения начнется работа над гипотезами и вайрфреймингом.
3. Разработка
Наша команда разработчиков приступает к работе, а при необходимости привлекает дизайнеров и других специалистов. Мы создаём тест в выбранных вами инструментах. Затем команда по обеспечению качества проверяет его на отсутствие ошибок и передаёт вам на утверждение.
4. Реализация и запуск
После утверждения теста мы запускаем его на вашем сайте в реальном времени. Мы также контролируем его производительность, чтобы убедиться, что всё работает, как задумано.
5. Повторение процесса
После завершения одного теста можно переходить к следующему, повторяя весь процесс шаг за шагом.
Свяжитесь с Brillmark, и давайте начнём экспериментировать.
Перевод статьи «Mobile Navigation Menu A/B Testing: Examples and Best Practices».