Юзабилити для чайников: какой должна быть навигация

Содержание

Система навигации сайта должна быть понятной и удобной. Хорошей можно назвать навигацию, которой посетители ресурса пользуются в автоматическом режиме, не обращая на нее сознательного внимания. Примерно так вы пользуетесь мышкой: она привлекает внимание, только если работает некорректно. Как сделать навигацию удобной и не требующей сознательного внимания посетителей? Читайте ниже.

2014-07-23-tex-01

Посетители вашего сайта не должны думать, куда идти дальше

Соблюдайте порядок основных и второстепенных страниц

Если кнопки второстепенных страниц предшествуют кнопкам основных, это вводит пользователя в заблуждение. Например, один из вариантов дизайна сервиса Digg предполагал такое расположение кнопок:

2014-07-23-tex-02

Кнопка «Мои новости» предшествует кнопке «Топ новости»

Кнопка «Мои новости» ведет на второстепенную страницу, которая доступна только после регистрации или авторизации. Кнопка «Топ новости» ведет на основную страницу, поэтому она должна предшествовать кнопке «Мои новости».

Представители западной культуры просматривают сайты слева направо сверху вниз. Кнопка, расположенная левее и/или выше, предшествует кнопке, расположенной правее и/или ниже.

Меню навигации: вертикальное или горизонтальное?

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

2014-07-23-tex-032

Вертикальное меню

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

2014-07-23-tex-04

Горизонтальное меню

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

Уберите вертикальные полосы из горизонтального меню

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

2014-07-23-tex-05

Вертикальные полосы

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

2014-07-23-tex-06

Пространство между элементами заменяет вертикальные линии

Меню-аккордеон: простой способ пагинации

Постраничная пагинация подходит, если вы предлагаете пользователю большое количество разных материалов. А когда вы публикуете один большой материал, лучше объединить меню-аккордеон с постраничной пагинацией:

2014-07-23-tex-07

Комбинация аккордеон-меню и постраничной пагинации

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

Как сделать бесконечную прокрутку удобной для пользователей

Следующие рекомендации помогут вам повысить эффективность страниц с бесконечным скроллингом:

  • При бесконечной прокрутке верхнее меню навигации должно быть доступно пользователю. Эта рекомендация реализована в «Фейсбуке».
2014-07-23-tex-08

Верхнее меню доступно при прокрутке
  • Показывайте пользователю, что контент загружается.
2014-07-23-tex-091

Пользователи хотят убедиться, что контент загружается
  • Сообщайте посетителю, сколько контента осталось.
2014-07-23-tex-10

Сколько можно крутить?
  • Позвольте возвращаться к исходной точке одним нажатием кнопки.
2014-07-23-tex-11

Кнопка возврата к исходной точке

Где должна находиться кнопка «Контактная информация»

Все элементы меню объединяются в две категории: информационные и акционные. Действие следует после изучения информации. Поэтому первыми должны стоять информационные элементы: «о компании», «продукты», «блог» и т.п. Акционные элементы, например, «подписаться» или «связаться», должны завершать меню.

2014-07-23-tex-12

Акционная кнопка «Контакты» находится в нижней части меню

Карусели, ротаторы, слайдеры: избегайте типичных ошибок

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

  • Продолжение ротации контента, когда пользователь просматривает один из анонсов

При наведении курсора на карусель движение должно переключаться в ручной режим.

2014-07-23-tex-13

Неприемлемая ситуация
  • Ротация одного элемента карусели

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

2014-07-23-tex-14

Пошаговая ротация неудобна

При ручной прокрутке карусели должен меняться весь ряд.

2014-07-23-tex-15

Приемлемый вариант ротации
  • Отсутствие указателей прогресса

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

2014-07-23-tex-16

Указатели прогресса
  • Бесконечная прокрутка

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

2014-07-23-tex-17

После завершения прокрутки правая кнопка навигации карусели стала неактивной

Как вместить все необходимое в шапку сайта

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

  • Используйте эластичное поле поиска
2014-07-23-tex-181

Эластичное поле поиска экономит пространство хедера
  • Объедините кнопки регистрации и авторизации
2014-07-23-tex-19

Объединение кнопок
  • Поместите логотип на панель навигации
2014-07-23-tex-201

Логотип должен помещаться на панели навигации
  • Радикальный способ: спрячьте кнопки навигации
2014-07-23-tex-21

Элементы навигации выпадают после клика по логотипу
  • Используйте эффект рыбьего глаза
2014-07-23-tex-22

Эффект рыбьего глаза: при наведении курсора элемент увеличивается

Как сделать вертикальное меню удобным

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

Чтобы решить эту проблему, оставьте в вертикальном меню только ссылки первого порядка. Ссылки второго порядка должны отображаться по клику.

2014-07-23-tex-23

Ссылки второго порядка отображаются по клику на ссылку первого порядка

Внешние ссылки должны открываться в новой вкладке браузера

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

Объединяйте выпадающее меню

Стандартное выпадающее меню может запутать пользователя. Он вынужден выбирать каждую категорию и изучать ссылки второго порядка. Объединенное выпадающее меню отображает все элементы второго порядка при нажатии на любую категорию. Это делает навигацию более удобной.

2014-07-23-tex-25

Объединенное выпадающее меню

Карусель должна иметь удобную навигацию

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

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

2014-07-23-tex-26

Как выглядят (слева) и как должны выглядеть карусели

Автоматический режим — главный критерий качества навигации

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

Автор: 

По материалам сайта UX Movement.