Азбука E-Commerce: меню сайта

Время чтения: 3 минут
Количество прочтений: 605
04 мая 2021

Что такое меню сайта

Это объединенный по определенному признаку набор гиперссылок с названиями разделов и подразделов сайта, служащий для быстрой навигации по сайту.

Азбука E-Commerce: меню сайта

Гиперссылки — пункты меню. Они обозначаются либо текстом, либо иконками, но чаще комбинированным способом.

Веб-ресурс — особенно интернет-магазины и маркетплейсы — без меню просто не смогут работать. Благодаря ему пользователи легко перемещаются из одного раздела в другой и получают необходимую информацию. Чем быстрее пользователь ее получит, тем быстрее он примет решение о покупке. В противном случае можно просто потерять своего клиента.

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

Разновидности меню сайта

Благодаря разным группировкам пунктов меню решаются разные задачи. Исходя из этого проектируют два разных способа их организации.

Главное

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

Второстепенное

Также во многих интернет-магазинах есть второстепенное меню — как правило, это каталог с разделами:

Способы реализации меню

Выпадающее

Основная задача этого способа — экономия места на страницах. У маркетплейсов, например, сложная структура, которую надо грамотно «упаковать». Горизонтальное меню в 10 пунктов сегодня смотрится перегруженным, поэтому стоит сделать так, чтобы при наведении курсора на определенный пункт из него выпадали пункты, логически или семантически с ним связанные:

Раскрывающееся

Каталоги маркетплейсов очень сложные и в одной товарной группе могут быть десятки вложенных подгрупп.

В отличие от выпадающего, появление вложенной информации происходит не по наведению, а по клику:

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

И вертикальное:

Вертикальное меню, как правило, располагается с левой страницы сайта, но может быть и справа, и с обеих сторон.

Разновидности исполнения меню

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

Динамические эффекты при наведении

Пункты меню при наведении меняются определенным образом. Например, зачеркиваются:

Меню с иконками

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

Меню-аккордеон

Еще его называют раскрывающимся. При нажатии на «родительский» пункт открываются «дочерние»:

Критерии хорошего меню

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

Заметность 

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

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

Внешний вид

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

Единообразное оформление

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

Верстка

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

Конкурентоспособность

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

Если у вас до сих пор десятки категорий в основном меню и вы уже сами в нем путаетесь, а конкурент сделал меню-бутерброд, стоит сделать выводы и все привести в соответствие с требованиями времени и здравого смысла.

Подсветка или иное выделение пунктов меню

Пользователь, который перешел в определенный раздел меню, должен все время видеть, где он находится. На примере Wildberries можно понять, что сейчас пользователь видит список совершенных покупок, а не то, что у него в настоящее время только еще доставляется:

Простая и понятная навигация

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

Однозначно понимаемые названия пунктов меню

Лаконичные и в то же время несокращенные именования всегда будут лучше двух- и трехсловных названий и тем более не общепринятых англицизмов. Если у вас магазин электроники, не нужно называть разделы Mobile Technologies — пусть это будут «Смартфоны и планшеты» или «Мобильные телефоны и смартфоны». В противном случае получите большие показатели отказов и ухудшение поведенческих факторов.

Удобство использования

Да, вам не обойтись в большом интернет-магазине без многоуровневой структуры и выпадающих меню — мы сказали об этом выше. Но всегда продумывайте уровни вложенности (чем меньше, тем лучше), скорость их выпадения и время показа. Поверьте, пользователю не понравится игра, в которой он будет пытаться открыть нужный раздел, а он будет пропадать через 0,5 секунды после появления. 

Шрифтовое оформление

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

Действует и обратный совет — не делать огромными буквами пункты меню, когда выпадающее меню выпадает больше чем на один экран. Поверьте, лишняя прокрутка — лишнее раздражение для пользователей.

Мобильная верстка

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

Статичное оформление

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

Вместо заключения

Хотим показать вам пример того, как выглядит меню, нарушившее многие из описанных критериев. Чего стоит только название:

А вот как его изменили владельцы сайта, которые поняли важность оформления своего ресурса, в том числе и по части меню:


Давайте же все будем ориентироваться на лучшие решения и думать о своих покупателях не только в плане меню, а вообще во всех вопросах, касающихся электронной коммерции!

Информация придет на указанный Email в течение 10 минут!

А пока – присоединяйтесь к нашему Telegram-каналу об онлайн-продажах (маркетплейсы и интернет-магазины):

Присоединиться

Где находят поставщиков клиенты Кактуса?

  • Бесплатный каталог с топ-40 площадок
  • Данные по регионам (Россия, Европа, Азия, Африка)
  • Ссылки на сайты-каталоги поставщиков и описание их товарной специфики
  • Обновлен в сентябре 2023 года
Каталог кактуса
Заполняя форму, вы даете согласие на обработку персональных данных
Экскурсия для селлеров маркетплейсов на фулфилмент-склад Кактуса
Экскурсия для селлеров маркетплейсов на фулфилмент-склад Кактуса
Сильная WMS (система управления складом) — основа технологичного фулфилмент-оператора. Иначе склад не сможет вовремя, без пересорта, брака и потерь об...
Брендинг ОКВЭД Дизайн
сайта
Кибербезопасность Онлайн-
касса
Ниша Меню
сайта
Конструкторы Юзабилити Новые посты каждый день! Telegram-канал
для селлеров
Перейти
Навигация
по статье
Ответы на популярные вопросы
Сколько это стоит?

Цены считаются исходя из габаритов товара. Вы платите только за фактически оказанные складские услуги, а именно: хранение, комплектация, упаковка, доставка. Оставьте заявку, чтобы узнать подробнее.

Оставить заявку
Что такое FBO?

FBO (Fulfillment By Operator). Это схема, при которой продажа товара осуществляется со склада Маркетплейса. Продавцу необходимо разместить товар на наших складах. Мы упакуем, промаркируем товары в соответствии с требованиями и доставим до складов маркетплейсов.

Как ускорить регистрацию на маркетплейсах?

У нас есть прямые контакты с маркетплейсами , но они не повлияют на ускорение регистрации.


Калькуляторы для маркетплейсов: какие бывают, зачем нужны, обзор популярных инструментов расчета прибыли, юнит-экономики, логистики
29 мая 2023
3968
Калькуляторы для маркетплейсов: какие бывают, зачем нужны, обзор популярных инструментов расчета прибыли, юнит-экономики, логистики
До выхода на маркетплейсы, еще на этапе выбора товара продавцу нужно рассчитывать ряд показателей: юнит-экономику, комиссии, прибыльность, затраты на...

#Азбука e-commerce #Бизнес и продажи #Все о маркетплейсах
ЭДО для «Вайлдберриз»: что такое, зачем нужен и как все устроено
22 апреля 2023
4713
ЭДО для «Вайлдберриз»: что такое, зачем нужен и как все устроено
«Без бумажки я букашка, а с бумажкой — человек!» Прочитали? А теперь забудьте: обмениваться документами с Wildberries и другими маркетплейсы можно чер...

#Wildberries #Азбука e-commerce #Все о маркетплейсах #Документация
Комиссии «Мегамаркет» для продавцов и стоимость услуг: за что, сколько, примеры
14 апреля 2023
11210
Комиссии «Мегамаркет» для продавцов и стоимость услуг: за что, сколько, примеры
В 2021 году маркетплейс «Мегамаркет» показал самый высокий среди глобальных  интернет-магазинов рост — 234 %, обогнав Ozon, Wildberries и «Яндекс Марк...

#Азбука e-commerce #Все о маркетплейсах #Мегамаркет