Как построить меню интернет-магазина

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

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

Какие задачи должно решать меню

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

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

Название первого уровня должно предсказывать содержимое. «Контейнеры» понятнее внутреннего отдела «Решения для организации». Работу с формулировками продолжает выбор названий категорий.

Первый уровень и служебные ссылки

Покажите основные товарные направления там, где человек начинает поиск. На смартфоне проверьте, не скрыты ли они за несколькими одинаково общими пунктами вроде «Магазин → Каталог → Товары». Дополнительное действие оправданно, если оно помогает разобраться, но не если только повторяет название раздела.

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

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

Как открывать вложенные разделы

У родительской категории две возможные задачи: показать весь раздел и раскрыть вложенность. Разведите их понятным способом. Например, название «Контейнеры» ведёт на обзор, а отдельная кнопка раскрывает «Для обеда», «Для круп», «Крышки». В мобильном вложенном экране можно дать явный пункт «Все контейнеры».

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

Элемент	Компьютер	Смартфон
Открытие	Понятная кнопка, доступная с клавиатуры	Кнопка с ясной подписью или знаком
Подразделы	Раскрытие без потери выбранного пути	Список или следующий уровень с названием
Родительский раздел	Отдельный понятный переход	Пункт «Все…» либо различимые действия
Возврат	Видимый текущий уровень	Кнопка назад внутри меню
Закрытие	Кнопка и ожидаемое управление клавиатурой	Доступное действие без точного попадания в край

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

Учебный маршрут: контейнер и крышка

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

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

Затем он ищет крышку. Если название «Аксессуары» не позволяет её обнаружить, проблема может быть в подписи или размещении. Зафиксируйте конкретный неверный переход. Не перестраивайте всё меню, если достаточно ясного названия и ссылки из нужного раздела.

В исправленном учебном варианте маршрут становится «Кухня → Хранение продуктов → Крышки для контейнеров». На странице группы человек выбирает совместимую крышку по данным товара. Повторите задание с тем же началом: проверка пройдена, если нужный раздел найден без подсказки и покупатель может вернуться к контейнерам. Если он снова выбирает «Аксессуары», уточните границы и подписи соседних пунктов.

Как проверить готовое меню

Дайте задания человеку, который не создавал дерево, и не подсказывайте названия пунктов. Записывайте, где он начал, что ожидал увидеть и где вернулся назад. Небольшой тест показывает конкретные затруднения, но не доказывает процент улучшения для всей аудитории.

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

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

Чек-лист меню

• Свяжите каждую покупательскую задачу с целевой страницей; путь можно пройти без знания внутреннего дерева.
• Проверьте первый уровень на смартфоне: основные товарные группы доступны и понятны.
• Разведите переход в категорию и раскрытие подразделов; оба действия различимы.
• Добавьте понятный возврат и название текущего уровня; пользователь не теряет место.
• Пройдите меню касанием и клавиатурой, включая длинные подписи и закрытие.
• Повторите задания после исправлений; неверные переходы устранены, целевые страницы доступны.