Веб-дизайн

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

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

СЕМАНТИКА

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

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

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

ДИЗАЙН

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