В меню нет визуального различия между разделами и подразделами

Критичность проблемы: Средняя | Сложность внедрения: Средняя | Встречаемость: Высокая

Открываю меню и не понимаю, где верхний уровень, а где нижний. Шрифты одинаковые, отступы совпадают, стрелки не помогают. Передо мной список имени списков.

Кликаю по «Услуги». Ожидаю раздел. Попадаю в конкретную услугу. Возвращаюсь. Снова список. Пальцем веду по строкам, ищу, что тут является заголовком, а что — пунктом внутри. Нет визуального языка.

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

Попадаю на «Цены». Кажется, это верхний уровень. Но рядом «Акции» выглядит так же. Может, это разделы одного уровня, а может — разные ветки. В моем сознании карта сайта распадается на крошки.

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

После пятого клика я понимаю только одно: это не лень, не невнимательность. Это отсутствие структуры в зоне внимания.

И я ухожу туда, где меня ведут, а не путают.

Когда проблема критична, а когда нет

Критична:

• Корпоративные порталы, госуслуги, маркетплейсы, знания/документации с 3+ уровнями.
• Новые пользователи, бренды без узнаваемости, задания с точной навигацией.
• Десктопные мегаменю и мобильные бургер-меню с глубокой иерархией.

Некритична:

• Одноуровневые сайты-визитки.
• Лэндинги с линейным скроллом, где меню — вторично.
• Сайты, где трафик приходит на глубинные страницы из поиска и редко пользуется меню.

Что об этом говорят пользователи

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

Бесполезные ответы

• Я редко пользуюсь меню, всегда жму поиск.
• Если приглядеться, разобраться можно.
• Ну, наверное, так и задумано.

Полезные ответы

• Не понял, что «Игровые» — подпункт «Ноутбуки»: шрифт и отступы одинаковые, подумал, что это отдельный раздел.
• На мобиле подпункты на таком же сером фоне, как разделы. Я не заметила, что перешла на уровень ниже. 
• Ожидал, что клик по разделу раскроет список, а меня уводит на страницу. Три раза жала «Назад», пока нашла нужное.
• Понимаю уровень только по хлебным крошкам после перехода. В самом меню подсказок нет.
• Сомневаюсь в момент выбора: стрелок, буллетов или отступов нет, приходится читать каждый пункт.

Решение проблемы

• Сделайте уровни видимыми. Раздел — крупнее и жирнее. Подпункт — меньше, обычный вес. Контраст достаточный.
• Дайте отступы. Подпункты сдвиньте вправо на заметную величину. Глаз должен видеть лестницу уровней.
• Добавьте маркеры уровня. Для подпунктов используйте буллеты или вторичный цвет фона. Для разделов — иконку или шеврон раскрытия.
• Разведите состояния. Ховер, фокус, активный пункт — разные и предсказуемые. Текущий раздел выделен постоянно.
• На мобильном используйте аккордеон. Клик по разделу раскрывает подпункты. Подпункты идут на ином фоне, с явной стрелкой «вперёд».
• Ограничьте глубину. В хедере оставьте максимум два уровня. Более глубокую навигацию перенесите на страницы разделов.
• Сгруппируйте пункты по смыслу. Добавьте короткие заголовки групп. Уберите дубли и пересечения.
• Подтвердите контекст. Заголовок страницы и хлебные крошки повторяют формулировку из меню. Пользователь всегда понимает, где он.
• Соблюдайте доступность. Роли nav/menu, aria-expanded, видимый фокус, контраст не ниже 4.5:1. Не полагайтесь только на цвет.
• Унифицируйте паттерн. Хедер, бургер и футер ведут себя одинаково. Термины совпадают во всех точках.
• Проверьте на задачах. Дайте людям типичные цели, замерьте время и ошибки, посмотрите записи. Оставьте только те детали, что помогают отличать уровни.

Гипотезы, как увеличить конверсии

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