Оформление навигационной структуры

Рассмотрим подробнее различные области навигации, их достоинства и недостатки.
В общем случае область навигации может быть вертикальной, горизонтальной или смешанной
Горизонтальная навигация
Горизонтальная панель разделов или основная навигация
Рассмотрим вариант, когда панель разделов представляет собой горизонтальную полосу навигации. В таком виде она часто располагается под шапкой страницы. Данный вариант вводит ограничение на длину текста ссылок, которые располагаются в ней, и их количество, поэтому он чаще всего используется как основная навигация на основные страницы или разделы сайта, которая присутствует на каждой странице сайта. Главное достоинство такого решения заключается в том, что все ссылки видны посетителю (при отсутствии горизонтальной полосы прокрутки). Кроме того, посетители привыкли к такому размещению основной навигации, поскольку именно так оформляется главное меню в обычных приложениях и программах. Горизонтальная полоса навигации хорошо воспринимается и потому, что при чтении текста ссылок взгляд посетителя перемещается горизонтально вдоль одной строки, слева направо. Она хорошо локализуется и отделяется от шапки и области основного текста страницы. Горизонтально расположенная шапка страницы своей формой подчеркивает и "горизонтальность" области навигации, что положительно сказывается на восприятии последней, поскольку не происходит перенастройка зрительной системы (подобие форм при близком расположении и одинаковой ориентации в пространстве). С другой стороны, шапка (при ее грамотном построении), в большинстве случаев, представляет собой графический элемент, который занимает значительную область страницы и волей-неволей привлекает взгляд посетителя. Основной задачей при таком размещении является обеспечение достаточного контраста области навигации и текста ссылок на ней с шапкой и фоном страницы. Поэтому в качестве фона для области навигации может использоваться как собственный фон, так и фон страницы.
Собственный фон, например, используется тогда, когда фон шапки и страницы различен, в качестве фона шапки используется текстура и др. В этом случае область навигации представляет собой отдельный элемент, который, находясь на границе шапки и остальной области страницы, должен хорошо контрастировать с ними.
Если в качестве фона шапки используется фон страницы, то полоса навигации уже не является ярко выраженным отдельным элементом, а рассматривается в общей композиции страницы. При оформлении полосы навигации с собственным фоном нужно следить за тем, чтобы она не разбивала композиционную целостность страницы на две области - шапку и остальную часть. Поэтому в этом случае для локализации полосы навигации используют контрастные горизонтальные линии, которые подчеркивают "легкость и воздушность" страницы.
Рассмотрим теперь порядок расположения и наименование ссылок на полосе навигации. В общем случае, ссылки располагаются слева-направо в порядке убывания значимости разделов, на которые они указывают. Из раздела "Визуальное восприятие" данного курса мы знаем, что область левого верхнего угла страницы - область повышенного внимания человека, поэтому в ней логично собрать ссылки на наиболее важные разделы сайта. Также используются и общепринятые соглашения, например: ссылку "Помощь" располагают правее всех остальных ссылок. И, хотя, данные соглашения имеют лишь рекомендательный характер, то следует на них обращать внимание, поскольку они соответствуют природе визуального восприятия человека, используются на многих сайтах и посетители уже привыкли к ним.
Рассмотрим несколько примеров.
В качестве первого элемента используется ссылка с названием "Главная" на главную страницу сайта. Использование прилагательного относится к самому объекту и определяет его качественную сторону. "Главная" страница - особенная среди остальных, которая играет главную роль. Если использовать в качестве названия ссылки слово "Домой", то сразу возникают вопрос - куда домой, а главное, зачем? И как будет называться страница, которая будет загружена при переходе по этой ссылке? А может быть это страница, которая задана в настройках браузера? "Домой" или "Дом"? Здесь мы сталкиваемся с различным пониманием словосочетания "Домашняя страница". Для русскоязычного Интернета данное словосочетание скорее воспринимается в смысле персональной или личной страницы, в отличие от зарубежного Интернета, где под этим словом также понимается сайт организации. Согласитесь, что фраза "Домашняя страница фирмы N" звучит достаточно непривычно.
"Обратная связь" - так называется ссылка на страницу сайта с почтовой формой, которая предназначена для составления и отправки письма автору. Данное название неплохо подходит для персональных страниц, но для организаций, как мне кажется, лучше использовать более солидное и общепринятове название - "Контакты". Естественно, что содержание таких страниц будет уже совсем другим.
"Скачать" - так называют страницу, на которой располагаются ссылки на файлы, которые можно загрузить с сайта. Данное название вызывает ассоциации со словом "халява". "Зона загрузки" звучит достаточно специфично. "Загрузить" неприемлемо с точки зрения действия. Из этого становится понятно, что названия ссылок должны быть не только понятными и общепринятыми, но и соответствовать уровню культуры всего информационного ресурса, поскольку вызвать доверие посетителя намного труднее, чем одной фразой его потерять.
Другие общепринятые названия - "Новости", "О фирме", "Помощь", "Вакансии".
Вертикально выпадающее меню
Идея данного вида навигации - отображение выпадающего подменю с ссылками на подразделы при наведении указателя на ссылку первого уровня. На рисунке ниже показана ситуация, когда курсор попал в область ссылки "Прайс-лист".
Вертикально выпадающее меню
Рис. 1. Вертикально выпадающее меню.
На первый взгляд может показаться, что это неплохая идея для навигации, поскольку механизм работы знаком посетителям, происходит экономия места и есть возможность работы с большим количеством ссылок. Но, как мы увидем дальше, реализация данной навигации на страницах сайта вызывает большие неудобства для пользователей причем как с визуальной, так и с функциональной точки зрения.
Основная проблема выпадающего меню заключается в неправильной реализации его механизма работы. Часто web-разработчики считают, что они могут за 30 минут сделать выпадающее меню "лучше" традиционного, "которое уже всем надоело". В результате получается то, что можно видеть не только на сайте nix.ru. Посмотрите на следующий рис. 2, в котором мы поместили указатель на ссылку "Где купить?"
Выпадающего меню нет
Рис. 2. Выпадающего меню нет.
Ничего не произошло. Хотя посетитель ожидает, что произойдет отображение подменю. Оказывается, что все элементы навигации первого уровня - ссылки! Хотя это понять невозможно без щелчка на них! Получается, что навигационные элементы первого уровня, которые должны работать как элементы выбора, работают как команды - это функциональная ошибка! ( к сожалению, данной ошибке на сайте nix.ru присутствует большое количество прочих ошибок, анализ которых проводится в заключительном разделе данного руководства).
Другая проблема заключается в том, что сама идея выпадающего меню на сайте противоречит основной идеи реализации этого механизма в Windows - стандартизация. Эта идея работает в Windows посколько она опирается на свойство визуальной памяти человека, а на сайтах это работать не будет, поскольку посетитель хочет быстро решить свою задачу, а не тратить свое время и усилия на поиски нужных ссылок.
Вкладки разделов (ярлыки)
Вкладки представляют собой дальнейшее развитие горизонтальной полосы основной навигации и имеют ряд интересных свойств.
Достоинства:
  • Текст вкладки может состоять из несколько слов и располагаться на нескольких строках, тогда как надписи на кнопках и в меню посетители привыкли видеть в одну строку
  • Вкладки можно расположить на нескольких рядах со смещением. Текстовые ссылки тоже можно располагать таким образом, но их различимость при этом будет значительно хуже
  • Вкладки неплохо сочетаются с горизонтальной полосой навигации
  • Вкладки могут достаточно эффектно смотреться на странице.
Недостатки:
  • Если вкладки реализуются в виде графики, то к ним относятся некоторые недостатки графических ссылок, которые были рассмотрены ранее
  • Вертикальный вариант вкладок вызывает трудности с их восприятием
  • Ограничение по расширению. Многорядные вкладки существенно снижают эффективность восприятия, поэтому они находят применение как элемент основной навигации. Кроме того, данный элемент является групповым, поэтому небольшое количество одиноко расположенных вкладок не окажет на посетителей необходимого воздействия, а будет восприниматься как группа непонятных кнопок
  • Если каждая вкладка реализуется как отдельный графический элемент, то их появление на странице при недостаточной скорости соединения с Интернетом будет последовательным, а не сразу, как в случае полосы навигации, выполненной с помощью таблицы
Замечание. Одна из вкладок должна быть всегда выбрана, иначе их восприятие сразу потеряется.
Навигационная цепочка ("Хлебные крошки")
Данный элемент используется во вспомогательной навигации. При этом используются текстовые ссылки, разделенные символом ">". Не следует текущий элемент цепочки оформлять большим размером шрифта, относительно остальных, поскольку для этого существует название страницы, да и нарушается иерархическая связь элементов цепочки, поскольку страница никак не может быть значительнее радительского раздела.
Вертикальная навигация
Пример вертикальной навигации показан ниже.
Вертикальная навигация
Рис. 3. Вертикальная навигация.
Основным достоинством такой области навигации является то, что она может содержать большое количество разделов. Поскольку фактор ограничения пространства здесь не играет главной роли, как в случае с горизонтальной навигацией, то для навигационных ссылок можно обеспечить необходимую пространственную различимость. Для улучшения восприятия ссылок их упорядочивают по тематическим разделам и сортируют по определенному критерию, например по алфавиту. Именно на этой основе и строятся рубрицированные каталоги. При этом необходимо учитывать: первое - в случае большого списка многие ссылки не будут находиться в видимой области экрана. Есть вероятность того, что некоторые важные пункты навигации не будут замечены посетителями без прокрутки. Поэтому здесь возникает вопрос о порядке раcположения ссылок. В общем случае, применяется подход, при котором пункты навигации располагаются с постепенным уменьшением их важности, т.е. вверху располагаются самые важные пункты, а внизу - вспомогательные. Но, как известно, производить поиск в каталоге, элементы которого располагаются в алфавитном порядке, намного проще, чем в неупорядоченном. Как же совместить простоту и удобство с важностью разделов? Неплохой вариант заключается в том, чтобы в верхней части создать небольшую область разделов с высоким рейтингом посещаемости, чтобы посетители сразу их видели, а ниже представить каталог разделов в алфавитном порядке. Грамотное упорядочивание больших каталогов и списков элементов является одой из основных задач. Думаю, что каждый может вспомнить примеры, когда пункты списков составлены непонятно каким образом так, что просто пропадает всякое желание их просматривать, и тем более искать в них что-то. К достоинствам вертикальной навигации относится и то, что оно позволяет использовать различное оформление. Это и само оформление ссылок, отступы, использование маркеров и разделителей, фона и др.
Горизонтально выпадающее меню.
Мне кажется такая навигация несколько надуманной и нарушающей иерархическую структуру и восприятие пунктов навигации. Честно говоря, я не могу вспомнить ни одно приложение, в котором бы использовалась такая структура. Поэтому лучше воздержаться от ее использования.
Давайте посмотрим на горизонтально выезжаещее меню на следующем примере сайта http://www.footballcup.ru
Горизонтально выпадающее меню
Рис. 4. Горизонтально выпадающее меню.
Работает оно так: при наведении курсора на ссылки происходит "выезжание" подменю. В нашем случае выехало подменю ссылки "Расписание матчей". В чем здесь проблема? Посмотрите на траекторию мыши, когда посетитель хочет щелкнуть на ссылке "Группа D". Она пересекает активную область ссылок навигации первого уровня - "О чемпионате", "Стадионы", "Трансляции" и "Видео". Поэтому при перемещении курсора к ссылке "Группа D" подменю "Расписание матчей" закрывается, но последовательно выезжают и заезжают обратно подменю для ссылок "О чемпионате", "Стадионы", "Трансляции" и "Видео". Но разве это было нужно посетителю? Нет, он хотел просто перейти к ссылке "Группа D", а вместо этого видит, как плавно выезжают и заезжают обратно какие-то непонятные панели. Удобство принесено в жертву "технологиям и креативу".
Раскрывающийся список без перезагрузки страницы
Раскрывающийся список - вертикальный элемент, который чаще применяется в двух вариантах: с раскрытием только одной ветви или произвольным раскрытием (как в проводнике Windows), что показана на рис. 5.
Навигация с произвольным открыванием ветвей
Рис. 5. Навигация с произвольным открыванием ветвей
Я слышал мнение, что раскрывающийся список является сложным элементом навигации для посетителей, поэтому лучше вместо них использовать списки. С эти можно поспорить, поскольку с раскрывающимися списками посетители сталкиваются каждый день - проводник Windows. Другое дело, если реализация работы этого элемента на сайте не соответствует общепринятому решению. Одно из главных достоинств данной навигации является то, что в ней иерархия элементов отображается пространственным расположением - отступами. И для выделения элементов не требуется какое-либо дополнительное оформление, как в случае со списками. Недостатком же является тот факт, что данная иерархическая взаимосвязь теряется, если ветвь дерева не помещается в видимой области экрана, Кроме того, работать с двумя развернутыми ветвями сложнее, приходится их постоянно закрывать. Для компенсации этих недостатков используют механизм отображения одной ветки, что также не является привычным для посетителей элементом.
Оглавление
Copyright © 2016