2learn

Иерархия и навигация

Что это такое

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

Почему это важно

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

Ключевые идеи

Группируйте по задаче, а не по команде и не по типу контента

Пункты стоят вместе, когда они нужны одному человеку в один момент. Названия отделов и внутренние типы документов — две самые частые неверные оси.

По команде                По задаче
Платежи                   Ваши заказы
Доставка                  Ваш тариф и счета
Аккаунт                   Ваши данные
Настройки                 Помощь и поддержка

Правый столбец отвечает на вопрос «где я буду искать?» ещё до знакомства с организационной схемой.

Держите верхний уровень в пять-семь пунктов

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

Сделайте глубину предсказуемой

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

Дайте каждому новому пункту очевидный дом

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

Навигация показывает и положение, и варианты

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

Практика

Набросайте двухуровневую структуру

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

Готово, когда: вы можете поместить каждый пункт списка в группу, и ни одна группа не названа по команде.

Проверьте структуру задачей на находимость

Напишите десять вопросов вида «где бы вы искали…» и попросите трёх человек ответить на них по вашему черновому дереву, не прибегая к поиску.

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

Частые ошибки

  • Группировка по отделам — меню читается как организационная схема, и пользователи не могут угадать; исправить: группируйте по моменту, когда одному человеку нужны эти пункты.
  • Слишком много пунктов верхнего уровня — меню просматривают и никогда не выучивают; исправить: сведите его к пяти-семи.
  • Непредсказуемая глубина — страницы вкладываются, пока пользователь не потеряет нить; исправить: ограничьте глубину и сплющите почти одинаковые страницы.
  • Навигация, меняющаяся от страницы к странице — мысленная карта не складывается; исправить: держите основную навигацию одинаковой и подсвечивайте положение.
  • Нет дома для нового контента — каждый релиз добавляет новый пункт верхнего уровня; исправить: отказывайте добавлениям, которые нельзя поместить в существующую группу.

Что читать дальше

Разобранные примеры

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