На рисунке 1 указаны рекомендации для меню и навигации, сложность их реализации и влияние на метрики сайта.
Рисунок №1 — Рекомендации для меню
Немного поясним перечисленные рекомендации. Меню на мобильной версии сайта необходимо делать компактным, например, динамическое, выезжающее меню слева/справа. Высота самого блока меню не должна занимать больше ⅕ страницы. Для локального трафика или звонков желательно добавить кнопку, в области меню, на карту с розничными точками/контактный телефон. Не следует удалять или разделять категории в меню, лучше разместить там всю информацию, чтобы пользователю не пришлось заниматься поисками нужного раздела. Популярные категории лучше вынести выше остальных и разместить их по алфавиту, неплох будет вариант с иерархическим расположением категорий/подкатегорий. Ссылки на сервисы, которые нужны пользователю после совершения покупки, например информация о доставке и оплате, отзывы/жалобы, скидки и специальные предложения, вход в аккаунт тоже стоит расположить в единое меню для удобства использования.
Примеры зарубежных сайтов, которые придерживаются данных рекомендаций.
Данные сайты имеют:
- Компактное меню, иконка или строка поиска, корзина, логотип, на первом сайте еще кнопка для поиска розничных точек(рис. 2). Сама панель меню занимает не более ⅕ страницы.
Рисунок №2 — Панель меню
- Телефонные номера в меню или возможность позвонить/написать(рис. 3)
Рисунок №3 — Возможности для связи в меню
- Кнопка для поиска розничных точек(рис. 4).
Рисунок №4 — Кнопка поиска розничных точек
- Динамическое меню, содержащее в себе все категории/подкатегории, которые работают по принципу аккордеона (сворачиваются/разворачиваются) и помещаются на один экран устройства(рис. 5).
Рисунок №5 — Динамическое меню
- Меню содержит сервисы для пользователя(регистрация, вход в аккаунт, информация о доставке, об оплате, возврат товара и пр.)(рис. 6).
Рисунок №6 — Пост продажные сервисы для пользователя
- Бонус: фиксированное меню, остается видимым/невидимым при скролле страницы(рис. 7).
В первом варианте меню скрывается при скролле вниз и вновь появляется при скролле вверх, во втором — скролится вместе со страницей. По личному мнению, скрытие и появление меню не очень удобно для использования и может вводить в заблуждение.
Рисунок №7 — Фиксированное меню
- Бонус: навигация внизу страницы(рис. 8).
В первом варианте навигация располагается внизу экрана и выезжает вверх, во втором — меню сверху, но присутствует дополнительная навигация внизу.
Рисунок №8 — Навигация снизу
Личное мнение: лучше не менять стандартное представление посетителей о расположении меню, чтобы не вводить в заблуждение, особенно, если это отличается с десктопной версией сайта. Вариант с дополнительной навигацией может быть полезен, но не обязателен.
А теперь возьмем несколько примеров наших сайтов и опишем их юзабилити(рис. 9).
Рисунок №9 — Примеры меню украинских сайтов
Меню гамбургер, выезжает слева, содержит в себе:
- глобальную кнопку перехода в каталог;
- пост продажные ссылки(акции, скидки, корзина, желания, регистрация и пр.
- меню умещается на один экран
Меню гамбургер, выезжает слева, содержит в себе:
- сверху весь каталог продукции
- пост продажные сервисы для клиентов с переходом на полный список
- разместили строку поиска в меню
- телефон для связи
- смена языка сайта
- меню длинное, поэтому легко прокручивается
Меню гамбургер, выезжает слева, содержит в себе:
- смена города и языка сверху
- каталог товаров по принципу аккордеон, иерархическая структура каталога
- сервисы для клиентов
- телефон для связи
Самое наполненное меню из этих примеров получилось у Комфи и Золотого века, но опять же, наличие элементов в меню зависит от многих факторов и возможностей реализации. Стоит помнить, что меню в первую очередь должно быть удобным для пользователя!
Продолжение читайте в третьей главе Поиск…
Автор Ирина Старченко
практикующий веб разработчик
и seo-специалист