Прежде чем анализировать дизайн навигационных систем, давайте посмотрим, какие именно ссылки имеет смысл включать в панель навигации верхнего уровня (т. е. панель первой страницы, обычно повторяемую в почти неизменном виде на большинстве остальных страниц сайта). Первое, на что стоит обратить внимание, — общее количество кнопок на панели, которое не должно превышать десяти, а еще лучше семи (как показывают исследования психологов, это «магическое число» — максимум одноуровневых объектов, в которых человек может ориентироваться с бессознательной легкостью). Если количество разделов верхнего уровня на вашем сайте превышает 10, нужно постараться свести некоторые из них в один раздел или же ввести двухуровневую иерархию ссылок на самой панели, по-разному оформив ссылки на разделы и подразделы (как часто делается на богатых содержанием контент-сайтах). Другой выход — разбиение одной большой панели на несколько маленьких. Обычно для этого ссылки разводят на две категории: материалы и инструменты. Материалы — это тематические разделы с тем содержимым, ради которого пользователи и приходят на ваш сайт: текстами, изображениями, коллекциями сетевых адресов и т. п. Инструменты же (обычно их меньше, чем материалов) — это ссылки, ведущие на различные вспомогательные страницы,
облегчающие доступ к основной информации: карту сайта, страницу поиска, а для сетевых магазинов и других сайтов со сложным интерактивным интерфейсом — страницы помощи и инструкций.
Привычнее всего выглядит вертикальное (как правило, слева от основного содержимого) расположение панели материалов и горизонтальное (вверху или внизу страницы) — панели инструментов. Иногда на панель инструментов добавляют ссылку, ведущую с подчиненных страниц на первую страницу сайта (по-английски она называется «Ноте», по-русски — «В начало» или «К началу»), и кнопку со ссылкой на почтовый адрес автора или владельца сайта («Feedback», «Contact Us» или «Пишите нам»). Если эти две кнопки присутствуют, то они обычно занимают в панели крайне левое и крайне правое положение соответственно. Чаще, впрочем, почтовая ссылка включается не в навигационную панель, а в состав блока подписи внизу страницы; для ссылки же на первую страницу сайта нередко «по совместительству» используется изображение логотипа сайта или фирмы, которое большинство сайтов размещают в одном и том же положении на каждой странице.
Дизайн
Главное, что стимулирует дизайнерскую мысль при создании навигационной системы сайта, — это противоречие между прикладной функцией этой системы и требованиями стилистического единства сайта и ненавязчивости его вспомогательных элементов (еще одно проявление извечной диалектики формы и содержания, логической структуры и визуального представления). На элементарном уровне это противоречие сводится к вопросу: как сделать так, чтобы кнопка на панели как можно лучше вписывалась в композицию, не раздражала своим утилитарным предназначением — и в то же время была достаточно эффективной и интуитивно понятной? Как добиться того, чтобы даже самому неискушенному пользователю было ясно, что это именно кнопка, а не просто надпись или картинка?
Проблема эта не столь надуманна, как может показаться на первый взгляд. Конечно, трудно представить себе навигационную панель, о прикладной функции которой было бы вообще невозможно догадаться. Но большинство сайтов просто не могут себе позволить иметь навигационную систему, которая бы хоть в какой-то мере противоречила интуиции пользователя. Идентификация «кликабельных» областей должна происходить мгновенно и абсолютно
подсознательно, — чтобы к тому моменту, когда посетитель ознакомится с содержимым страницы, рука его уже сама подводила мышку к кнопке.
Для текстовых ссылок автоматизм этот основан на привычке: короткие фрагменты текста, выделенные другим цветом и подчеркиванием, настолько прочно ассоциируются в нашем сознании со ссылками, что на веб-сайтах уже нельзя пользоваться подчеркиванием как приемом выделения текста (хотя еще пару лет назад текстовые ссылки обычно включали в себя подсказки типа «Click here for...»). В навигационных панелях кнопки также строятся на основе текстовых надписей, но реализованы они в виде графических вставок, так что «ссылочность» в них подчеркивается (на сей раз «подчеркивается» фигурально, а не буквально) более разнообразными средствами. Совсем не обязательно делать кнопки выпуклыми и прямоугольными, наподобие кнопок интерфейса операционной системы, — однако хоть какой-то намек на особую роль этих элементов все же необходим.
Графические средства оформления кнопок обычно относятся к одной из двух разновидностей: они либо отделяют кнопки друг от друга (пример — рамки вокруг надписей или просто горизонтальные или вертикальные линии-разделители между ними), либо так или иначе акцентируют внимание на каждой надписи (расположенные рядом с надписями кружки, треугольники, символические изображения). Нетрудно заметить, что не только рамки, но и любые другие «довески» к надписям вводят визуальную решетку с одинаковыми по размеру ячейками для каждой из кнопок: хотя надписи обычно различаются по длине, однородные графические элементы навигационной панели обязаны располагаться равномерно и на одной прямой.
Рис. 49
Приемы выравнивания навигационных кнопок с надписями неодинаковой длины
