Урок юзабилити №7: Основные навигационные элементы

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


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



Постянная навигация

Постоянная (persistent) или глобальная (global) навигация - это навигационные элементы, которые появляются на каждой странице. Если навигационные элементы появляются в одном и том же месте на каждой странице и имеют при этом одинаковый вид, то пользователь будет уверен, что находится все время на том же сайте, - а это намного важнее, чем может показаться на первый взгляд. Унификация внешнего вида навигации дает пользователю возможность только один раз узнать, как на работает, и затем уже использовать ее не задумываясь.

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

Название сайта
Все основные разделы сайта
Сервисы:
Ссылка на начальную страницу
Ссылка на страницу поиска (поле поиска)
Как купить (если это интернет-магазин)
Для начальной страницы нужно сделать исключение, так как, во-первых, страница не должна ссылаться сама на себя, во-вторых, начальная страница выполняет отличные от других страниц задачи. (Дизайн начальных страниц будет рассмотрен в третьем уроке)

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

Логотип сайта

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

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

Замечание: Это касается только страниц, написанных на языках, читающихся слева направо. Читатели страниц на арабском или иврите рассчитывают, что логотип сайта будет находиться на правой стороне страницы.

Это объясняется тем, что логотип представляет весь сайт в целом, и, следовательно, занимает самую верхнюю позицию в логической иерархии сайта. В визуальной иерархии каждой страницы можно сохранить эту доминирующую позицию двумя способами: либо сделать логотип самым заметны объектом на странице, либо поместить его так, чтобы он выполнял роль "рамки" для содержимого страницы. Нет смысла делать логотип самым заметным элементом (кроме начальной страницы). Поэтому лучшее место для него - верхняя часть страницы, как бы ее заглавие.

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





Сервисы

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

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



Ссылка на главную страницу

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

В начале строки разделов
В начале строки сервисов
Добавить к логотипу подпись "На главную" и сделать его ссылкой

Указание местоположения

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

Поставить напротив ссылки специальный указатель
Изменить цвет текста
Использовать жирный шрифт
Применить инверсию цвета

Ссылки-цепочки ("Хлебные крошки")

Хлебные крошки (breadcrumbs) - это название, возникшее как напоминание о крошках хлеба, которые Ганс незаметно бросал в лесу, чтобы они с Гретой могли найти дорогу домой в сказке братьев Гримм.

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

Традиционно между уровнями используется символ "больше" (>), реже двоеточие или косая черта.



Вкладки

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