UX пособие:меню и навигация


Содержание:

  1. Главная страница
  2. Меню и навигация
  3. Поиск
  4. Категория и продукты(карточки товаров)
  5. Конверсия
  6. Оптимизация форм

Глава 2: Меню и навигация

На рисунке 1 указаны рекомендации для меню и навигации, сложность их реализации и влияние на метрики сайта.

Рекомендации для меню

Рисунок №1 — Рекомендации для меню

Немного поясним перечисленные рекомендации. Меню на мобильной версии сайта необходимо делать компактным, например, динамическое, выезжающее меню слева/справа. Высота самого блока меню не должна занимать больше ⅕ страницы. Для локального трафика или звонков желательно добавить кнопку, в области меню, на карту с розничными точками/контактный телефон. Не следует удалять или разделять категории в меню, лучше разместить там всю информацию, чтобы пользователю не пришлось заниматься поисками нужного раздела. Популярные категории лучше вынести выше остальных и разместить их по алфавиту, неплох будет вариант с иерархическим расположением категорий/подкатегорий. Ссылки на сервисы, которые нужны пользователю после совершения покупки, например информация о доставке и оплате, отзывы/жалобы, скидки и специальные предложения, вход в аккаунт тоже стоит расположить в единое меню для удобства использования.

Примеры зарубежных сайтов, которые придерживаются данных рекомендаций.

https://www.boots.com/

https://www.zumiez.com/

https://www.victorianplumbing.co.uk/

Данные сайты имеют:

  1. Компактное меню, иконка или строка поиска, корзина, логотип, на первом сайте еще кнопка для поиска розничных точек(рис. 2). Сама панель меню занимает не более ⅕ страницы.

 

Панель меню

Рисунок №2 — Панель меню

  1. Телефонные номера в меню или возможность позвонить/написать(рис. 3)

https://casper.com/home/

https://www.arrow.com/

Возможности для связи в меню

Рисунок №3 — Возможности для связи в меню

  1. Кнопка для поиска розничных точек(рис. 4).

https://www.boots.com/

https://m.sephora.com/

Кнопка поиска розничных точек

Рисунок №4 — Кнопка поиска розничных точек

  1. Динамическое меню, содержащее в себе все категории/подкатегории, которые работают по принципу аккордеона (сворачиваются/разворачиваются) и помещаются на один экран устройства(рис. 5).

https://www.dobell.co.uk/

https://www.farfetch.com/ua/

https://m.sephora.com/

Динамическое меню

Рисунок №5 — Динамическое меню

  1. Меню содержит сервисы для пользователя(регистрация, вход в аккаунт, информация о доставке, об оплате, возврат товара и пр.)(рис. 6).

https://www.dobell.co.uk/

https://www.net-a-porter.com/ua/en/

https://www.patagonia.com/home/

Пост продажные сервисы для пользователя

Рисунок №6 — Пост продажные сервисы для пользователя

  1. Бонус: фиксированное меню, остается видимым/невидимым при скролле страницы(рис. 7).

https://www.moo.com/eu/

https://www.lyst.com/

В первом варианте меню скрывается при скролле вниз и вновь появляется при скролле вверх, во втором — скролится вместе со страницей. По личному мнению, скрытие и появление меню не очень удобно для использования и может вводить в заблуждение.

Фиксированное меню

Рисунок №7 — Фиксированное меню

  1. Бонус: навигация внизу страницы(рис. 8).

https://wordery.com/

https://www.glossier.com/

В первом варианте навигация располагается внизу экрана и выезжает вверх, во втором — меню сверху, но присутствует дополнительная навигация внизу.

Навигация снизу

Рисунок №8 — Навигация снизу

Личное мнение: лучше не менять стандартное представление посетителей о расположении меню, чтобы не вводить в заблуждение, особенно, если это отличается с десктопной версией сайта. Вариант с дополнительной навигацией может быть полезен, но не обязателен.

А теперь возьмем несколько примеров наших сайтов и опишем их юзабилити(рис. 9).

Примеры меню украинских сайтов

Рисунок №9 — Примеры меню украинских сайтов

https://m.rozetka.com.ua/

Меню гамбургер, выезжает слева, содержит в себе:

  1. глобальную кнопку перехода в каталог;
  2. пост продажные ссылки(акции, скидки, корзина, желания, регистрация и пр.
  3. меню умещается на один экран

https://www.zolotoyvek.ua/ru/

Меню гамбургер, выезжает слева, содержит в себе:

  1. сверху весь каталог продукции
  2. пост продажные сервисы для клиентов с переходом на полный список
  3. разместили строку поиска в меню
  4. телефон для связи
  5. смена языка сайта
  6. меню длинное, поэтому легко прокручивается

https://comfy.ua/dnepropetrovsk/

Меню гамбургер, выезжает слева, содержит в себе:

  1. смена города и языка сверху
  2. каталог товаров по принципу аккордеон, иерархическая структура каталога
  3. сервисы для клиентов
  4. телефон для связи

Самое наполненное меню из этих примеров получилось у Комфи и Золотого века, но опять же, наличие элементов в меню зависит от многих факторов и возможностей реализации. Стоит помнить, что меню в первую очередь должно быть удобным для пользователя!

Продолжение читайте в третьей главе Поиск

Автор Ирина Старченко
практикующий Seo-специалист
и программист любитель

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *