UX\-навигация:\ как\ пользователь\ находит\ то,\ что\ искал
Навигация — это карта сайта, по которой пользователь ориентируется и принимает решение остаться или уйти. Плохо продуманное меню стоит дорого: люди не находят товары, звонят менеджерам с вопросом «где кнопка», а конверсия падает. В этой статье разберём, как сделать навигацию понятной с первого взгляда и какие инструменты для этого есть у дизайнера и разработчика.
Начните\ с\ структуры\ информации
Прежде\ чем\ рисовать\ меню,\ составьте\ карту\ того,\ как\ контент\ связан\ между\ собой:\ что\ является\ главным\ разделом,\ а\ что\ —\ второстепенным\.\ Эта\ карта\ определяет\ иерархию\ пунктов\ и\ то,\ сколько\ уровней\ глубины\ будет\ в\ интерфейсе\.\ Чем\ проще\ структура,\ тем\ быстрее\ человек\ находит\ нужный\ раздел\ без\ лишних\ кликов\.
- Иерархия\ контента — логическая\ группировка\ материалов\ от\ важного\ к\ второстепенному
- Глубина\ клика — количество\ переходов\ до\ нужной\ страницы;\ чем\ меньше,\ тем\ лучше
- Индексная\ страница — стартовый\ экран\ с\ явными\ разделами\ и\ призывом\ к\ действию
Проверьте\ навигацию\ на\ соответствие\ модели
Удобное\ меню\ обычно\ строится\ по\ одной\ из\ проверенных\ моделей:\ это\ даёт\ пользователю\ ощущение\ предсказуемости\ и\ уверенности\.\ Если\ пункты\ выглядят\ как\ единая\ система,\ человек\ не\ тратит\ силы\ на\ догадки\ о\ том,\ где\ искать\ то\ или\ иное\.
- Правило\ F — глаз\ сканирует\ страницу\ сверху\ вниз\ и\ слева\ направо,\ поэтому\ ключевые\ разделы\ размещают\ в\ верхнем\ левом\ углу
- Модель\ Z — взгляд\ движется\ по\ диагонали,\ что\ полезно\ для\ размещения\ заголовка\ и\ кнопок\ на\ длинных\ страницах
Меньше\ пунктов\ —\ меньше\ ошибок
В\ классической\ навигации\ рекомендуется\ держать\ от\ 5\ до\ 7\ основных\ разделов:\ больше\ пятидесяти\ пунктов\ усложняет\ выбор\ и\ повышает\ риск\ того,\ что\ пользователь\ вообще\ ничего\ не\ найдёт\.\ Слишком\ длинные\ меню\ перегружают\ интерфейс\ и\ заставляют\ скроллить\ даже\ в\ шапке\ сайта\.
- Правило\ 50/90 — при\ выборе\ из\ 50\ вариантов\ решение\ принимается\ вдвое\ дольше
- Раскрывающиеся\ списки — помогают\ уложить\ много\ пунктов,\ не\ теряя\ их\ для\ пользователя
- Магнитные\ области — расширяют\ активную\ зону\ кнопок,\ чтобы\ попасть\ по\ ним\ было\ проще
Пишите\ пункты\ на\ языке\ пользы
Текст\ меню\ должен\ сразу\ говорить\ о\ выгоде\ или\ о\ том,\ что\ именно\ находится\ внутри\ раздела\.\ Размытые\ названия\ вроде\ «О\ нас»\ заставляют\ задумываться,\ а\ конкретика\ типа\ «Доставка\ и\ оплата»\ мгновенно\ понятна\ с\ первого\ взгляда\.
- CTA — призыв\ к\ действию,\ который\ подталкивает\ посетителя\ к\ следующему\ шагу
- Микроразметка\ Schema\.org — стандартная\ структура\ данных,\ которую\ поисковики\ показывают\ как\ расширенный\ сниппет
- Аналитика\ кликов — отчёт\ по\ тому,\ какие\ разделы\ открывают\ чаще\ всего
Тестируйте\ и\ улучшайте\ результат
Готовую\ навигацию\ нужно\ проверить\ на\ живом\ трафике:\ где\ люди\ теряются,\ а\ где\ переходят\ дальше\.\ По\ этим\ данным\ вы\ видите\ реальные\ проблемы\ быстрее,\ чем\ по\ догадкам,\ и\ можете\ точечно\ исправить\ их\ за\ неделю\.
- Heatmap — тепловая\ карта,\ показывающая,\ куда\ чаще\ всего\ кликают\ пользователи
- А/B\-тестирование\ меню — сравнение\ двух\ вариантов\ навигации\ по\ конверсии