Общий обзор

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

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

Однако для дублирования на всех остальных страницах сайта нужно более компактное средство навигации — на­вигационная панель с кнопками (хотя очень часто элементы панелей совсем не похожи на какие бы то ни было «кноп­ки», здесь я буду пользоваться именно этим интуитивно понятным термином). Такие панели чаще всего вытянуты в одном измерении (по горизонтали или вертикали), хотя на первой странице иногда можно увидеть иллюстрированные и даже анимированные двумерные «карты» содержимо­го сайта. Иногда, особенно для навигации в обширных многоуровневых иерархиях, используются выпадающие ме­ню, реализуемые либо с помощью HTML-форм, либо,

207

в последнее время, — с помощью динамического HTML (www.ibm.com ). На особо разветвленных древовидных сайтах (www.yahoo.com ) каждая страница ссылается на всех своих «родителей» — членов цепочки, ведущей от корня сайта к данной странице.

Для сайтов или фрагментов сайтов с линейной (а не дре­вовидной) структурой необходимый минимум навигации — пара ссылок, ведущих к предыдущему и следующему доку­менту в цепочке. Чаще, однако, линейная навигационная панель включает в себя строку ссылок на все страницы цепочки, указывая в этом ряду место текущей страницы (самый известный пример — ссылки на страницах с ре­зультатами в поисковых системах). Сходно устроены панели управления на сайтах, входящих в тематические «кольца» (web rings), с помощью которых можно перейти на следу­ющий или предыдущий сайт кольца, посмотреть полный список сайтов и даже выбрать один из них наугад (для этого используется перенаправление через специальную програм­му на сайте — хозяине кольца).

Семантика

Прежде чем анализировать дизайн навигационных систем, давайте посмотрим, какие именно ссылки имеет смысл включать в панель навигации верхнего уровня (т. е. панель первой страницы, обычно повторяемую в почти неизменном виде на большинстве остальных страниц сайта). Первое, на что стоит обратить внимание, — общее количество кнопок на панели, которое не должно превышать десяти, а еще лучше семи (как показывают исследования психологов, это «магическое число» — максимум одноуровневых объектов, в которых человек может ориентироваться с бессознатель­ной легкостью). Если количество разделов верхнего уровня на вашем сайте превышает 10, нужно постараться свести не­которые из них в один раздел или же ввести двухуровневую иерархию ссылок на самой панели, по-разному оформив ссылки на разделы и подразделы (как часто делается на богатых содержанием контент-сайтах). Другой выход — разбиение одной большой панели на не­сколько маленьких. Обычно для этого ссылки разводят на две категории: материалы и инструменты. Материалы — это тематические разделы с тем содержимым, ради ко­торого пользователи и приходят на ваш сайт: текстами, изображениями, коллекциями сетевых адресов и т. п. Ин­струменты же (обычно их меньше, чем материалов) — это ссылки, ведущие на различные вспомогательные страницы,

208

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

Привычнее всего выглядит вертикальное (как правило, слева от основного содержимого) расположение панели ма­териалов и горизонтальное (вверху или внизу страницы) — панели инструментов. Иногда на панель инструментов доба­вляют ссылку, ведущую с подчиненных страниц на первую страницу сайта (по-английски она называется «Ноте», по-русски — «В начало» или «К началу»), и кнопку со ссылкой на почтовый адрес автора или владельца сайта («Feedback», «Contact Us» или «Пишите нам»). Если эти две кнопки при­сутствуют, то они обычно занимают в панели крайне левое и крайне правое положение соответственно. Чаще, впрочем, почтовая ссылка включается не в навигационную панель, а в состав блока подписи внизу страницы; для ссылки же на первую страницу сайта нередко «по совместительству» используется изображение логотипа сайта или фирмы, ко­торое большинство сайтов размещают в одном и том же положении на каждой странице.

Дизайн

Главное, что стимулирует дизайнерскую мысль при со­здании навигационной системы сайта, — это противоречие между прикладной функцией этой системы и требованиями стилистического единства сайта и ненавязчивости его вспо­могательных элементов (еще одно проявление извечной диалектики формы и содержания, логической структуры и визуального представления). На элементарном уровне это противоречие сводится к вопросу: как сделать так, чтобы кнопка на панели как можно лучше вписывалась в компози­цию, не раздражала своим утилитарным предназначением — и в то же время была достаточно эффективной и интуитивно понятной? Как добиться того, чтобы даже самому неиску­шенному пользователю было ясно, что это именно кнопка, а не просто надпись или картинка?

Проблема эта не столь надуманна, как может показаться на первый взгляд. Конечно, трудно представить себе нави­гационную панель, о прикладной функции которой было бы вообще невозможно догадаться. Но большинство сай­тов просто не могут себе позволить иметь навигационную систему, которая бы хоть в какой-то мере противоре­чила интуиции пользователя. Идентификация «кликабельных» областей должна происходить мгновенно и абсолютно

209

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

Для текстовых ссылок автоматизм этот основан на при­вычке: короткие фрагменты текста, выделенные другим цветом и подчеркиванием, настолько прочно ассоциируют­ся в нашем сознании со ссылками, что на веб-сайтах уже нельзя пользоваться подчеркиванием как приемом выде­ления текста (хотя еще пару лет назад текстовые ссылки обычно включали в себя подсказки типа «Click here for...»). В навигационных панелях кнопки также строятся на основе текстовых надписей, но реализованы они в виде графиче­ских вставок, так что «ссылочность» в них подчеркивается (на сей раз «подчеркивается» фигурально, а не буквально) более разнообразными средствами. Совсем не обязательно делать кнопки выпуклыми и прямоугольными, наподобие кнопок интерфейса операционной системы, — однако хоть какой-то намек на особую роль этих элементов все же необходим.

Графические средства оформления кнопок обычно отно­сятся к одной из двух разновидностей: они либо от­деляют кнопки друг от друга (пример — рамки вокруг надписей или просто горизонтальные или вертикальные линии-разделители между ними), либо так или иначе ак­центируют внимание на каждой надписи (расположенные рядом с надписями кружки, треугольники, символические изображения). Нетрудно заметить, что не только рамки, но и любые другие «довески» к надписям вводят визу­альную решетку с одинаковыми по размеру ячейками для каждой из кнопок: хотя надписи обычно различаются по длине, однородные графические элементы навигационной панели обязаны располагаться равномерно и на одной прямой.

Рис. 49

Приемы выравни­вания навигационных кнопок с надписями неодинаковой длины