§19. Навигация

Ввиду нелинейности (как правило) структуры сайта навигационная система становится необходимой для ориентировки и перемещения внутри содержимого сайта (а также выхода из него). Навигационная система должна обеспечивать возможность легкой ориентации внутри сайта.

Способы организации навигационной системы:

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

Однако такая панель с текстовыми ссылками не отвечает требованию компактности, особенно важному при дублировании панели на всех страницах сайта.

2. Панель с кнопками– наиболее компактное средство навигации. Такие панели наиболее часто вытягиваются по горизонтали или вертикали.

3. Двумерные навигационные карты. Обычно употребляются только на первой странице, могут содержать иллюстрации и даже анимацию.

4. Выпадающие меню. Организуются с помощью HTML-форм или с помощью динамического HTML. Применяются в сложно организованных многоуровневых навигационных системах.

Сайты с линейной структурой должны содержать на страницах минимум две ссылки - на следующую и предыдущую страницы, хотя чаще используется строка ссылок на все страницы с указанием текущего положения.

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

Наиболее привычными являются вертикальное и горизонтальное расположение панели. Хороший тон – наличие ссылки на первую страницу сайта «Home» и ссылки на E-maile владельца сайта. Они занимают на панели крайние левое и правое положения. Почтовая ссылка может быть расположена в блоке подписи внизу страницы. Логично в качестве ссылки «Home» использовать изображение логотипа сайта.

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

Текстовые ссылки видны сразу – они выделены цветом и подчеркиванием. Кнопки также конструируются в основном на основе текстовых подписей, на уже обыгранных изобразительными средствами.

Способы выделения кнопок:

1. Отделение кнопок друг от друга – рамками вокруг надписей, горизонтальными либо вертикальными пробелами и разделителями.

2. Графические акценты у надписей (простые геометрические фигуры, символы).

3.Выравнивание.

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

Горизонтальное выравнивание достигается выравниванием интервалов между кнопками, если нет графических акцентов возле надписей, выравниванием расстояний между соседними графическими маркерами, если они есть.

4. Фоновая фотография (фототекстура), обустраивающая контраст геометрической упорядоченности кнопок и текстурной аморфности.

5. Максимальное использование прямых линий (полок) для страниц, уже нагруженных фототекстурами и криволинейными формами.

6. Использование стилизованных рисунков, которые символизируют содержание соответствующих разделов.

Такая панель при определенных художественных усилиях (не стоит брать стандартные бесплатные рисунки и иконки) способна художественно «вытянуть» весь сайт с достаточно скромным оформлением.

7. Использование вырезанных из фона фотографий разных объектов. Этот способ часто используется на личных и развлекательных сайтах. Такие фотографии могут быть тематически не связаны с содержимым соответствующего подраздела.

8. «Проблема текущей кнопки». Удаление кнопки для ссылки с данной страницы на нее же саму неразумно, т.к. разрушает привычную для пользователя конструкцию панели. Лучше, оставив кнопку, просто снять с нее ссылку. Одновременно особое положение текущей кнопки можно выделить утопленностью (для объемной кнопки) или соответствующим маркером.

9. Для увеличения скорости доступа к странице удобно разрезать панель на отдельные графические файлы в соответствии с принципом «одна кнопка – один файл». Это повышает степень переносимости страницы и доступности для неграфических броузеров. Это иногда экономит объем файла за счет сокращения цветовой палитры и позволяет реализовать эффект перекатывания.

10. Спецэффекты (динамическая навигация):

• простой анимационный эффект на базе Java-апплета«перекатывание» (rollover) – замена одного изображения кнопки на другое при приближении курсора мыши, то есть изменение цвета или яркости кнопки, использование подсветки, тени, утапливания и «выступания»;

• выпадающий список HTML-бланка с перечислением ссылок и кнопки рядом занимает меньше места, чем панель с кнопками; в сочетании с JavaScript-сценарием хорош для организации двухуровневой иерархии;

• раскрываемые оглавления (expandable outlines) средствами динамического HTML определяют раскрытие списка подразделов в разделе верхнего уровня по щелчку мыши (со смещением остальных разделов); в обычных броузерах все списки подразделов видны сразу;

• выпадающие меню, организованные средствами динамического HTML; при этом используются все преимущества эффекта перекатывания: меню раскрываются сами при попадании мыши в данную зону, подсветка перемещается вслед за курсором; ограничения NC4 и MSIE4; здесь тоже не обойтись безJavaScript-сценария.