Большое меню каталога: как показать категории и не перегрузить посетителя

Категории важнее размера панели

Мегаменю полезно, когда покупателю нужно увидеть соседние направления каталога и выбрать своё. Его размер ничего не решает: большая панель с непонятными названиями заставит читать больше, но не приблизит к товару. Сравним раскрывающийся список, панель с группами и отдельную страницу каталога, чтобы выбрать навигацию под ассортимент, а затем принять её работу на телефоне и компьютере.

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

Что сравнивать до макета

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

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

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

Какой из трёх вариантов выдержит ваш каталог

Компактный список

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

Сначала оцените читаемость подписей. Количество строк не является универсальной нормой: одно короткое название и длинное техническое наименование занимают разное место и требуют разного времени на понимание.

Панель с группами

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

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

Отдельная страница каталога

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

Подписи и группы: что получает покупатель

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

Заголовок группы и ссылка — разные обязанности

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

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

В каждой группе уместна ссылка на весь раздел с ясной подписью. Она помогает, если покупатель не узнаёт ни одну из показанных подкатегорий, но уверен в общем направлении. WAI также предлагает дублировать ссылки подменю на странице родительского пункта. Это запасной способ пройти каталог для людей, которым трудно пользоваться раскрывающейся навигацией. Хорошая страница раздела поэтому остаётся частью решения даже при большом меню.

Что делать с акциями и новинками

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

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

Открытая панель должна оставаться управляемой

Мышь, касание и клавиатура

Для сенсорного экрана нужна кнопка раскрытия: посетитель сможет нажать её, перейти к ссылкам и закрыть список, а на компьютере тот же порядок сохранится для клавиатуры и мыши, даже если наведение дополнительно открывает панель для удобства. У телефона нет постоянного наведения. Поэтому меню, которое раскрывается только при движении указателя, нельзя принимать по одной компьютерной демонстрации.

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

Клавиатура выявляет скрытые ловушки. В примере APG клавиши Tab и Shift+Tab перемещают фокус между доступными элементами. Enter или Space переключают раскрытие кнопкой. Escape закрывает список и возвращает фокус на управляющую кнопку. Это конкретный образец поведения, который удобно обсуждать с исполнителем, а не требование буквально копировать демонстрационный код.

Состояние видно всем

Программа экранного доступа тоже должна узнавать, раскрыта панель или скрыта. В документации для этого используется состояние aria-expanded, а внешне человеку помогает поворот стрелки или другое понятное изменение кнопки. Для обычной навигации APG не требует превращать набор ссылок в сложное прикладное меню с ролью menu. Заказчику полезнее попросить показать переходы и озвучивание состояния, чем требовать технический атрибут по его названию.

Закрытая панель освобождает страницу. Если после закрытия остаётся невидимая область, которая перехватывает нажатия, посетитель не сможет перейти к товару или открыть поиск. Такой дефект заметен только при действиях, а не на макете.

Найдите категорию без знания устройства сайта

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

Пять действий на готовой странице

1. Откройте общий раздел и его подкатегорию. Текст и стрелка выполняют ожидаемые действия, а выбранный адрес соответствует подписи.
2. Переместите указатель к дальней ссылке. Панель не исчезает посреди движения и не перекрывается соседним выпадающим блоком.
3. Пройдите меню клавишей Tab, раскройте кнопку и закройте список Escape. Положение фокуса видно, дальнейшее движение понятно.
4. Повторите поиск на телефоне. Все группы доступны, длинные подписи читаются, кнопка закрытия не уезжает за край.
5. Вернитесь из категории и откройте другую. Меню не сохраняет чужое раскрытие так, что новая ветка становится недоступной.

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

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