Если
нелинейность содержимого — главное отличие веб-сайта от более традиционных
видов публикаций, то навигационная система есть необходимое каждому сайту
средство ориентировки и перемещения в этом нелинейном пространстве. Каждая
страница сайта должна, помимо всех прочих предъявляемых к ней требований,
отвечать посетителю на два неизбежно возникающих у него вопроса — «где я
нахожусь?» и «куда мне отсюда идти?»
Роль
логичной и качественно выполненной навигационной системы сайта тесно связана с
особой ролью его заглавной страницы. Если только что пришедшего на первую страницу
посетителя вы сможете убедить сделать хотя бы один шаг внутрь сайта,
вероятность того, что в конце концов
206
он
заинтересуется и исследует ваш сайт более подробно, резко возрастает. И
разумеется, желание пользователя щелкнуть по какой бы то ни было ссылке очень
сильно зависит от того, как эта ссылка сформулирована, оформлена и размешена.
Рассмотрим,
на каких сайтах и для каких целей употребляются разные виды навигационных
инструментов. Простейшая разновидность навигационной панели для сайта с
древовидной топологией (стр. 185) — список текстовых ссылок на подчиненные
страницы, иногда содержащий краткие аннотации по каждой ссылке. Текстовая
навигация эффективна (пользователь скорее щелкнет в ссылку с аннотацией, пусть
даже самой краткой, чем без нее), но недостаточно экономна — аннотации занимают
много места, и из-за нелюбви пользователей к прокрутке содержимого последние
ссылки в списке могут страдать от недостатка внимания.
Поэтому
аннотированными ссылками обычно пользуются для немногих особо важных или
недавно появившихся разделов сайта, и в сочетании с соответствующими иллюстрациями
такие ссылки составляют основное содержание первой страницы на многих
корпоративных и контент-сайтах. Рекламным дизайнерам известно, что при необходимости
разместить на заданной площади несколько совершенно одинаковых по значимости
объектов выгоднее сделать один-два из них «гвоздем программы» (то, что
по-английски называют feature), крупно и выигрышно подав их на площади,
сэкономленной за счет беглого перечисления всех остальных объектов. Этот
принцип искусственного создания неравенства очень часто используется для ссылок
на первой странице.
Однако
для дублирования на всех остальных страницах сайта нужно более компактное
средство навигации — навигационная панель с кнопками (хотя
очень часто элементы панелей совсем не похожи на какие бы то ни было «кнопки»,
здесь я буду пользоваться именно этим интуитивно понятным термином). Такие
панели чаще всего вытянуты в одном измерении (по горизонтали или вертикали),
хотя на первой странице иногда можно увидеть иллюстрированные и даже
анимированные двумерные «карты» содержимого сайта. Иногда, особенно для
навигации в обширных многоуровневых иерархиях, используются выпадающие меню,
реализуемые либо с помощью HTML-форм, либо,
207
в
последнее время, — с помощью динамического HTMLНа особо разветвленных древовидных сайтах
каждая страница ссылается на всех своих «родителей» — членов цепочки, ведущей
от корня сайта к данной странице.
Для
сайтов или фрагментов сайтов с линейной (а не древовидной) структурой
необходимый минимум навигации — пара ссылок, ведущих к предыдущему и следующему
документу в цепочке. Чаще, однако, линейная навигационная панель включает в
себя строку ссылок на все страницы цепочки, указывая в этом ряду место текущей
страницы (самый известный пример — ссылки на страницах с результатами в
поисковых системах). Сходно устроены панели управления на сайтах, входящих в
тематические «кольца» (webrings), с помощью которых можно перейти на следующий или
предыдущий сайт кольца, посмотреть полный список сайтов и даже выбрать один из
них наугад (для этого используется перенаправление через специальную программу
на сайте — хозяине кольца).
Прежде
чем анализировать дизайн навигационных систем, давайте посмотрим, какие именно
ссылки имеет смысл включать в панель навигации верхнего уровня (т. е. панель
первой страницы, обычно повторяемую в почти неизменном виде на большинстве
остальных страниц сайта). Первое, на что стоит обратить внимание, — общее
количество кнопок на панели, которое не должно превышать десяти, а еще лучше
семи (как показывают исследования психологов, это «магическое число» — максимум
одноуровневых объектов, в которых человек может ориентироваться с бессознательной
легкостью). Если количество разделов верхнего уровня на вашем сайте превышает
10, нужно постараться свести некоторые из них в один раздел или же ввести
двухуровневую иерархию ссылок на самой панели, по-разному оформив ссылки на
разделы и подразделы (как часто делается на богатых содержанием
контент-сайтах). Другой выход — разбиение одной большой панели на несколько
маленьких. Обычно для этого ссылки разводят на две категории: материалы и инструменты. Материалы
— это тематические разделы с тем содержимым, ради которого пользователи и приходят
на ваш сайт: текстами, изображениями, коллекциями сетевых адресов и т. п. Инструменты
же (обычно их меньше, чем материалов) — это ссылки, ведущие на различные
вспомогательные страницы,
208
облегчающие
доступ к основной информации: карту сайта, страницу поиска, а для сетевых
магазинов и других сайтов со сложным интерактивным интерфейсом — страницы
помощи и инструкций.
Привычнее
всего выглядит вертикальное (как правило, слева от основного содержимого)
расположение панели материалов и горизонтальное (вверху или внизу страницы) —
панели инструментов. Иногда на панель инструментов добавляют ссылку, ведущую с
подчиненных страниц на первую страницу сайта (по-английски она называется
«Ноте», по-русски — «В начало» или «К началу»), и кнопку со ссылкой на почтовый
адрес автора или владельца сайта («Feedback», «ContactUs» или «Пишите нам»). Если эти две
кнопки присутствуют, то они обычно занимают в панели крайне левое и крайне
правое положение соответственно. Чаще, впрочем, почтовая ссылка включается не в
навигационную панель, а в состав блока подписи внизу страницы; для ссылки же на
первую страницу сайта нередко «по совместительству» используется изображение
логотипа сайта или фирмы, которое большинство сайтов размещают в одном и том
же положении на каждой странице.
Главное,
что стимулирует дизайнерскую мысль при создании навигационной системы сайта, —
это противоречие между прикладной функцией этой системы и требованиями
стилистического единства сайта и ненавязчивости его вспомогательных элементов
(еще одно проявление извечной диалектики формы и содержания, логической
структуры и визуального представления). На элементарном уровне это противоречие
сводится к вопросу: как сделать так, чтобы кнопка на панели как можно лучше
вписывалась в композицию, не раздражала своим утилитарным предназначением — и
в то же время была достаточно эффективной и интуитивно понятной? Как добиться
того, чтобы даже самому неискушенному пользователю было ясно, что это именно
кнопка, а не просто надпись или картинка?
Проблема
эта не столь надуманна, как может показаться на первый взгляд. Конечно, трудно
представить себе навигационную панель, о прикладной функции которой было бы
вообще невозможно догадаться. Но большинство сайтов просто не могут себе
позволить иметь навигационную систему, которая бы хоть в какой-то мере
противоречила интуиции пользователя. Идентификация «кликабельных» областей
должна происходить мгновенно и абсолютно
209
подсознательно,
— чтобы к тому моменту, когда посетитель ознакомится с содержимым страницы,
рука его уже сама подводила мышку к кнопке.
Для
текстовых ссылок автоматизм этот основан на привычке: короткие фрагменты
текста, выделенные другим цветом и подчеркиванием, настолько прочно ассоциируются
в нашем сознании со ссылками, что на веб-сайтах уже нельзя пользоваться
подчеркиванием как приемом выделения текста (хотя еще пару лет назад текстовые
ссылки обычно включали в себя подсказки типа «Clickherefor...»).
В навигационных панелях кнопки также строятся на основе текстовых надписей, но
реализованы они в виде графических вставок, так что «ссылочность» в них
подчеркивается (на сей раз «подчеркивается» фигурально, а не буквально) более
разнообразными средствами. Совсем не обязательно делать кнопки выпуклыми и
прямоугольными, наподобие кнопок интерфейса операционной системы, — однако хоть
какой-то намек на особую роль этих элементов все же необходим.
Графические
средства оформления кнопок обычно относятся к одной из двух разновидностей:
они либо отделяют кнопки друг от друга (пример — рамки вокруг надписей или
просто горизонтальные или вертикальные линии-разделители между ними), либо так
или иначе акцентируют внимание на каждой надписи (расположенные рядом с
надписями кружки, треугольники, символические изображения). Нетрудно заметить,
что не только рамки, но и любые другие «довески» к надписям вводят визуальную
решетку с одинаковыми по размеру ячейками для каждой из кнопок: хотя надписи
обычно различаются по длине, однородные графические элементы навигационной
панели обязаны располагаться равномерно и на одной прямой.
Кнопки
одного размера — важнейшее условие эффективного восприятия навигационной
панели. Поэтому при вертикальном размещении надписей вполне можно обойтись без
каких бы то ни было графических добавок, искусственно выровняв надписи по длине
при помощи разрядки (рис. 49, а). Этот прием (см. также стр. 145)
выглядит несколько нарочито, но им вполне можно пользоваться в тех случаях,
когда нужно подчеркнуть симметрию, строгость стиля и самостоятельность
навигационной панели в композиции страницы.
210
Имейте
в виду, что выравнивание длин надписей с помощью искажения пропорций букв и
даже просто изменения кегля шрифта от одной надписи к другой совершенно
недопустимо.
При
горизонтальном размещении кнопок их можно выравнивать одним из двух способов.
Если никаких общих графических элементов при надписях нет, то нужное
впечатление равномерности и равнозначности создается выравниванием интервалов
между кнопками (рис. 49, б). Если же надписи снабжены однотипными
графическими маркерами, то нужно, наоборот, создать сетку с равными
расстояниями между соседними маркерами, даже если интервалы между надписями
станут при этом неодинаковыми из-за различия надписей по длине (рис. 49, в). Если
какие-то из надписей для кнопок слишком длинны, намного предпочтительнее
попытаться сформулировать их покороче, чем писать их в две строки или делать
кнопки неодинакового размера.
Принцип
контраста подсказывает плодотворный прием декорирования навигационных панелей:
если прикладная функция этого элемента требует разграничения и геометрической
упорядоченности кнопок, то с эстетической точки зрения выгодно противопоставить
ему нечто объединяющее кнопки в единое целое, нечто подчеркнуто
антигеометрическое и нерегулярное. Лучше всего на эту роль подходит общая для
всей панели фоновая фотография (пример 16) или абстрактная
размыто-фотографическая текстура, «перетекающая» с кнопки на кнопку.
И
наоборот, если страница и без того насыщена фотографическими текстурами и
криволинейными формами, имеет смысл вспомнить о популярной в современном
дизайне теме прямых линий (стр. 93), часто применяемой для объединения кнопок
панели навигации в единое целое. На рис. 50 показаны фрагменты трех
последовательных страниц, начиная с заглавной,. Мотив
прямых линий с засечками на концах, ограничивающих навигационную панель и
выделяющих ее на фоне доминирующих на странице плавных дуг и градиентов,
вводится уже на первой странице (а). Сайт этот содержит
двухуровневую иерархию страниц, и на подчиненных страницах дизайнер из тех же
прямых линий строит элегантную и интуитивно прозрачную двухэтажную
навигационную панель (б, в).