{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Как главное меню сайта увеличивает конверсию посетителя в покупателя?

В этой статье обсудим 5 базовых типов главного меню, которые могут повлиять на рост продаж с сайта. Только практический опыт от руководителя сервиса роста конверсий AskUsers и автора специализированного канала Pro юзабилити.

Как запутать посетителя и сделать всё, чтобы он не стал покупателем?!

Давайте подумаем, что мы можем для этого сделать:

  1. Превратим навигацию по сайту в лабиринт, чтобы посетитель заблудился едва ступив на главную страницу.

  2. Спрячем от посетителя все важные разделы из меню на внутренние страницы, тогда наверняка никто и никогда не найдёт их.

  3. Выведем в меню сразу все разделы сайта, пускай мучаются, тратят время на поиск нужного им раздела.

А теперь подумайте, вам ТОЧНО этого хочется?

Авторская иллюстрация от askusers.ru

Приблизительно такой полёт мысли виден в головах ошарашенных чрезвычайно творческим подходом к проектированию навигации по сайту.

При этом посетителю всего то и нужно, что понимать:

  1. Где он находится сейчас
  2. Где он был до этого
  3. И куда он может пойти дальше

В немалой степени, именно поэтому и были в своё время изобретены пять базовый типов навигации, которые на 99% закрывают потребности посетителей в простой и понятной структуре меню.

Не усложняйте там, где можно сделать проще и понятней!

5 основных типов главного меню

  1. Статичное меню вверху страницы
  2. Фиксированное меню
  3. Микс статичного и фиксированного меню
  4. Бургер-меню
  5. Многоуровневое меню

Статичное меню вверху страницы

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

Тут сразу бы хотел оговориться, что если у вас есть возможность не использовать этот тип меню — не используйте.

Там где для перемещения к меню требуются дополнительные действия — юзабилити явно хромает!

Пример статичного меню

Статичное меню на сайте: metalloy.ru

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

  1. Похоже на статичное, но всегда остается видимым на экране, даже когда посетители прокручивают страницу вниз. Это принципиальное функциональное отличие от статичного меню.
  2. Удобно тем, что пользователю нет необходимости прокручивать страницу вверх, если требуется перейти на другую страницу. Это как раз про юзабилити!)
  3. Вам сразу нужно продумать дизайн так, чтобы блок меню не мешал изучению контента.

Такой поход это первый шаг на встречу юзабилити, но на наш взгляд всё ещё недостаточный из-за своей громоздкости.

Используйте данный тип меню только тогда, когда уменьшить количество пунктов физически невозможно!

Пример фиксированного меню

Фиксированное меню до вертикальной прокрутки, на сайте: vkusvill.ru
Фиксированное меню после вертикальной прокрутки, на сайте: vkusvill.ru

Микс статичного и фиксированного меню

  1. Тип меню, внешне неотличимый от статичного, с большим количеством пунктов, остается вверху страницы. При вертикальной прокрутке страницы, появляется фиксированный вариант с наиболее важной информацией: логотип, контакты, кнопка с призывом к действию.
  2. Статичное, на входе, даёт максимум информации, со всеми важными разделами/подразделами.
  3. Фиксированное, содержащее выжимку самого ценного, без чего невозможно ориентироваться по сайту — помогает пользователю быстрее принять решение о заказе.

Идеально подходит для крупных интернет магазинов. Но в не меньшей степени было бы удобно и для сайтов услуг.

Пример микса статичного и фиксированного меню

Статичное и фиксированное меню до вертикальной прокрутки, на сайте: ozon.ru

Статичное и фиксированное меню после вертикальной прокрутки, на сайте: ozon.ru

Бургер-меню

  1. Можно рассматривать, как замену или дополнение к статичному меню. Часто выглядит как три короткие полоски, при клике на которые открывается список разделов. Именно в таком виде он знаком большинству посетителей сайта. Своего рода негласный визуальный стандарт.
  2. Изначально был спроектирован для мобильных версий сайта, но в последнее время всё чаще можно встретить и в десктопной версии.
  3. Как правило это решение применяется для крупных сайтов с большим количеством разделов и подразделов, на которых в необходимо выводить как можно больше пунктов.

Лично меня привлекает своей компактностью, а из-за частого, в последнее время применения на крупных интернет-площадках, становится новым стандартном визуализации раскрывающегося меню.

Применяйте бургер-меню не только для мобильных, но и для десктопных версий вашего сайта!

Пример бургер-меню

Бургер-меню до раскрытия, на сайте: wildberries.ru

Бургер-меню после раскрытия, на сайте: wildberries.ru

Многоуровневое меню

  1. Тип меню, в котором на виду остается компактный вариант с 4—7 пунктами максимум, а по клику на пункт раскрывается подменю с большим количеством подразделов.
  2. Тут сразу важно продумать, какие пункты выводить в раскрывающемся подменю, чтобы не перегружать страницу. Как правило выводятся только те пункты, которые имеют наибольшую ценность для владельцев сайта, с точки зрения бизнеса.
  3. Удобно тем, что подходит для сайтов, с множеством направлений деятельности, где требуется быстро сориентировать посетителя без перехода на уровень ниже.

Рекомендую использовать для сайтов-услуг и небольших или узкоспециализированных интернет-магазинах,чтобы посетитель мог выбирать сразу не из всего перечня разделов, а только из тех услуг, за которыми он пришёл на ваш сайт.

Мы же с вами хотим, чтобы посетитель заказывал, а не терялся в поисках товара/услуги — не так ли?!)

Пример многоуровнего меню

Многоуровневое меню на сайте: pixelplus.ru 

Так как же главное меню помогает увеличивать конверсию?

  1. Помогает посетителям быстро понять основную тематику сайта, без необходимости просмотра всех страниц.
  2. Благодаря удобному и интуитивно-понятному меню сайт выглядит логичным и упорядоченным, создавая ощущение комфорта у посетителя. А зачем куда-то ещё идти, если на этом сайте всё устраивает?)
  3. Удобная, не раздражающая навигация не только не отпугивает, но напротив — побуждает пользователя задержаться и совершить необходимое нам действие!

Смотрите видео снятое по мотивам статьи:

Источник видео: https://www.youtube.com/@AskUsers

Помогите посетителям стать заказчиками, сделав понятным и удобным главное меню сайта! Вместе с AskUsers)

Марьенко Юрий
Руководитель сервиса роста конверсий AskUsers
0
9 комментариев
Написать комментарий...
Irа

полезный материал🤝

Ответить
Развернуть ветку
AskUsers = Юзабилити
Автор

Ира, спасибо! будет ещё)

Ответить
Развернуть ветку
Камила Сайдумова

Очень доходчиво написали, класс!

Ответить
Развернуть ветку
AskUsers = Юзабилити
Автор

Камила, спасибо! Стараюсь писать так, чтобы в статье был только личный опыт и выводы основанные на нём. Будут ещё статьи, многие в производстве

Ответить
Развернуть ветку
LeoPulse - Веб Агентство

Очень часто замечаю, что меню действительно иногда путает) Статья Топ)

Ответить
Развернуть ветку
AskUsers = Юзабилити
Автор

спасибо, коллеги – будем дружить, помогать заказчикам видеть горизонты удобного)

Ответить
Развернуть ветку
Алексей Бриль

Спасибо за статью, очень интересно было причитать!

Ответить
Развернуть ветку
AskUsers = Юзабилити
Автор

Алексей, спасибо за высокую оценку нашей статьи!)

Ответить
Развернуть ветку
Siarhei P

Позволю себе не согласиться насчёт удобства бургер-меню на полноэкранном вэбе - пользователю приходится прилагать дополнительные усилия для навигации плюс он не видит основной структуры сайта без дополнительных телодвижений. Неопытные пользователи могут вообще не разобраться с этим типом меню и уйти на другой сайт где всё привычно.

Ответить
Развернуть ветку
6 комментариев
Раскрывать всегда