Читаем без скачивания Веб-дизайн - Дмитрий Кирсанов

К сожалению, чаще всего веб–дизайнер не имеет никакой власти над тем, какие баннеры будут вывешены на его страницах; для него баннер есть лишь прямоугольный «черный ящик» стандартного размера (стр. 277), который он обязан разместить на видном месте страницы и который едва ли не по всем своим аспектам — формам, цветам, шрифтам, текстурам — почти наверняка окажется кричащим диссонансом в сложившейся композиции. Даже если автором баннера будет профессиональный дизайнер (на то не очень–то стоит рассчитывать), с вашей собственной композицией его творение, скорее всего, не будет иметь ничего общего.

С другой стороны, на контент–сайтах (да и не только на них) реклама есть воистину «осознанная необходимость», единственный способ окупить затраты на создание и поддержку сайта. Разумеется, пользователи давно уже привыкли «отфильтровывать» в своем восприятии прямоугольники известного размера и характерной пестроты, относясь к ним как к чему–то совершенно независимому от содержимого страницы (если не впрямую враждебному ей). Однако же дизайнер не может полностью полагаться на разборчивость своих зрителей и вынужден так или иначе реагировать на вторжение инородного материала.

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

Навигация

Если нелинейность содержимого — главное отличие веб–сайта от более традиционных видов публикаций, то навигационная система есть необходимое каждому сайту средство ориентировки и перемещения в этом нелинейном пространстве. Каждая страница сайта должна, помимо всех прочих предъявляемых к ней требований, отвечать посетителю на два неизбежно возникающих у него вопроса — «где я нахожусь?» и «куда мне отсюда идти?»

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

ОБЩИЙ ОБЗОР

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

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

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

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

СЕМАНТИКА

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

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

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

ДИЗАЙН

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