Система навигации сайта должна быть понятной и удобной. Хорошей можно назвать навигацию, которой посетители ресурса пользуются в автоматическом режиме, не обращая на нее сознательного внимания. Примерно так вы пользуетесь мышкой: она привлекает внимание, только если работает некорректно. Как сделать навигацию удобной и не требующей сознательного внимания посетителей? Читайте ниже.
Соблюдайте порядок основных и второстепенных страниц
Если кнопки второстепенных страниц предшествуют кнопкам основных, это вводит пользователя в заблуждение. Например, один из вариантов дизайна сервиса Digg предполагал такое расположение кнопок:
Кнопка «Мои новости» ведет на второстепенную страницу, которая доступна только после регистрации или авторизации. Кнопка «Топ новости» ведет на основную страницу, поэтому она должна предшествовать кнопке «Мои новости».
Меню навигации: вертикальное или горизонтальное?
В некоторых ситуациях уместно использовать вертикальное меню, в других — горизонтальное. Дизайнеры должны понимать, какой тип меню подходит в той или иной ситуации.
Посетители быстрее воспринимают вертикальное меню. Благодаря небольшому расстоянию между элементами пользователи сканируют две или три кнопки за одну визуальную остановку. Вертикальное меню занимает левую колонку страницы, поэтому у вас остается меньше места для контента. Верхние элементы вертикальной навигации хорошо заметны пользователю, однако нижние остаются малозаметными.
Посетители медленнее воспринимают горизонтальное меню. Кнопки расположены слева направо, поэтому человеку привычнее их читать, а не сканировать паттерны. Пользователь воспринимает одну кнопку за одну визуальную остановку. Все элементы горизонтального меню хорошо заметны. Вертикальная навигация оставляет больше свободного пространства на странице. Это значит, что вы можете предложить пользователю больше контента без необходимости прокручивать.
Уберите вертикальные полосы из горизонтального меню
Дизайнеры используют вертикальные полосы в меню, чтобы визуально разделять элементы.
Существует более простой способ визуально разделить элементы меню. Достаточно увеличить пространство между ними. Этот способ разделения элементов меню увеличивает скорость восприятия, так как пользователь делает меньше визуальных остановок.
Меню-аккордеон: простой способ пагинации
Постраничная пагинация подходит, если вы предлагаете пользователю большое количество разных материалов. А когда вы публикуете один большой материал, лучше объединить меню-аккордеон с постраничной пагинацией:
Чтобы прочитать новый контент, пользователю не надо загружать следующую страницу. Благодаря AJAX-модулю аккордеон-меню загружает контент на открытой странице.
Как сделать бесконечную прокрутку удобной для пользователей
Следующие рекомендации помогут вам повысить эффективность страниц с бесконечным скроллингом:
- При бесконечной прокрутке верхнее меню навигации должно быть доступно пользователю. Эта рекомендация реализована в «Фейсбуке».
- Показывайте пользователю, что контент загружается.
- Сообщайте посетителю, сколько контента осталось.
- Позвольте возвращаться к исходной точке одним нажатием кнопки.
Где должна находиться кнопка «Контактная информация»
Все элементы меню объединяются в две категории: информационные и акционные. Действие следует после изучения информации. Поэтому первыми должны стоять информационные элементы: «о компании», «продукты», «блог» и т.п. Акционные элементы, например, «подписаться» или «связаться», должны завершать меню.
Карусели, ротаторы, слайдеры: избегайте типичных ошибок
Дизайнеры любят карусели за визуальную привлекательность. Ниже указаны типичные ошибки, уменьшающие эффективность этих элементов:
- Продолжение ротации контента, когда пользователь просматривает один из анонсов
При наведении курсора на карусель движение должно переключаться в ручной режим.
- Ротация одного элемента карусели
Пользователи воспринимают контент, отображаемый в карусели, кластерами по несколько элементов. Если человек не нашел интересующую его тему, он нажимает кнопку прокрутки, чтобы просмотреть новый контент. Если в ручном режиме прокрутки карусель отображает только один новый элемент, это приводит к потере времени.
При ручной прокрутке карусели должен меняться весь ряд.
- Отсутствие указателей прогресса
Пользователь хочет знать, сколько контента он уже просмотрел и сколько осталось. Поэтому в каруселях должны быть указатели прогресса.
- Бесконечная прокрутка
Пользователи не любят прокручивать карусель бесконечно. Поэтому при завершении просмотра кнопка навигации должна становиться неактивной.
Как вместить все необходимое в шапку сайта
Обычно шапка сайта включает логотип, кнопки меню, блок регистрации и авторизации и поле для поиска. Хедер занимает часть страницы, отнимая место у контента. Воспользовавшись рецептами ниже, вы сделаете шапку более компактной без потери функциональности и визуальной привлекательности:
- Используйте эластичное поле поиска
- Объедините кнопки регистрации и авторизации
- Поместите логотип на панель навигации
- Радикальный способ: спрячьте кнопки навигации
- Используйте эффект рыбьего глаза
Как сделать вертикальное меню удобным
Вертикальное меню удобно тем, что дизайнер может поместить в него сколько угодно ссылок. Пользователь может прокрутить страницу, чтобы увидеть элементы, расположенные в нижней части вертикального меню. Однако это справедливо только в том случае, если пользователь ищет что-то конкретное. Иначе он просто не прокручивает страницу.
Чтобы решить эту проблему, оставьте в вертикальном меню только ссылки первого порядка. Ссылки второго порядка должны отображаться по клику.
Внешние ссылки должны открываться в новой вкладке браузера
Внутренние ссылки должны открываться в существующей вкладке, а внешние в новой. Во-первых, это удобно для пользователя. Во-вторых, это удерживает пользователя на вашем сайте.
Объединяйте выпадающее меню
Стандартное выпадающее меню может запутать пользователя. Он вынужден выбирать каждую категорию и изучать ссылки второго порядка. Объединенное выпадающее меню отображает все элементы второго порядка при нажатии на любую категорию. Это делает навигацию более удобной.
Карусель должна иметь удобную навигацию
Средний CTR контента, отображаемого с помощью каруселей, составляет 1 %. Это слишком низкий показатель, так как карусели обычно являются наиболее визуально привлекательными элементами на главных страницах.
Проблема заключается в меню каруселей: оно часто бывает неудобным и малоинформативным. Элементы навигации должны быть большими, а пользователь должен знать, какой контент он выбирает.
Автоматический режим — главный критерий качества навигации
Если пользователи не задумываются, как найти необходимый раздел сайта, значит, вы сделали хорошее меню. Чтобы помочь посетителям путешествовать по ресурсу, выбирайте верный порядок главных и второстепенных элементов. Подумайте, какое меню подходит вашему ресурсу: вертикальное или горизонтальное. Сделайте шапку сайта небольшой и удобной. Используйте объединенное выпадающее меню, отображайте второстепенные элементы вертикального меню по клику.
По материалам сайта UX Movement.