Корпоративный веб-сайт на 100%. Требуйте от сайта большего! - Роман Овчинников

Из рецензий наших экспертов

49. Навигация

...

Навигация – это система элементов интерфейса, позволяющих пользователю перемещаться по веб-сайту. Простейшим примером навигации является ссылка.

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

♦ Идентификация текущего местонахождения пользователя по отношению к структуре сайта

♦ Поиск контента

♦ Отработка основных сценариев поведения пользователей

♦ Перемещение по контенту сайта

Кроме навигации по сайту в интерфейс может быть внедрена глобальная навигация по другим компонентам веб-системы: экстранет, интранет, промосайты, подсайты, сайты-сателлиты и т. д., а также ссылки на сторонние интернет-ресурсы.

Какой должна быть навигация

Принципы построения навигационной системы во многом похожи на принципы создания структуры сайта, но не дублируют их. Они относятся как к самой организации такой системы, так и к оформлению ее интерфейса:

♦ Принцип логичности и непротиворечивости (у пользователя не должно возникать вопроса о том, в каком именно разделе ему искать нужную информацию)

♦ Принцип наследуемости (отдельные свойства более высоких разделов должны переноситься на разделы, более низкие)

♦ Принцип интуитивной понятности (ни один из элементов навигации не должен требовать отдельных пояснений или инструкций по использо ванию)

♦ «Правило трех кликов» (переход между любыми двумя страницами на сайте должен требовать не более трех кликов). На более крупных сайтах (от 100 000 страниц) используется «Правило десятичного логарифма кликов» (до 10 страниц – один клик, до 100 страниц два клика, до 1000 страниц – три, до 10 000 страниц – четыре и т. д.)

Виды навигации

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

1. Навигационное меню

♦ Вертикальные или горизонтальные закладки , содержащие один или несколько подуровней

♦ Вертикальная или горизонтальная панель с рубрикатором , который может быть сразу раскрыт или раскрываться по клику или наведению мыши

♦ Вертикальная древовидная структура со свернутыми или развернутыми «ветвями»

♦ Меню из пиктограмм и/или иконок , снабженных комментариями только в виде всплывающих текстов

2. Теги

♦ «Классическое» «облако тегов» (меток, ключевых слов), размер которых зависит от частоты использования каждого тега на сайте

♦ Список тегов (с указанием или без указания частоты встречаемости)

3. Ссылочная и всплывающая навигация внутри контента

♦ Ссылки внутри текстов , ведущие на другие материалы сайта или другие сайты

♦ Всплывающие навигационные окна, smart-теги

♦ Ссылки типа «Подробнее» и «Узнать больше»

♦ Ссылки от заголовков и подзаголовков

♦ Ссылки типа «Смотри также»

♦ Ссылки от баннеров

4. Визарды и мастера

♦ Линейные , позволяющие последовательно пройти простую пошаговую процедуру

♦ «Фильтрующие» , позволяющие за несколько шагов сделать определенную выборку

♦ Гуру , поддерживающие перемещение благодаря последовательно задаваемым вопросам (часто позволяющие вводить запросы на «естественном» языке)

5. Пролистывающая навигация

♦ Ссылки типа «Вперед – Назад» («Раньше – Позже») для перемещения по большим объемам контента

♦ Пейджинг по номерам страниц или алфавиту

6. Поиск по сайту

♦ Простой (обычное поле поиска, не снабженное дополнительными параметрами)

♦ Сложный , снабженный условиями и фильтрами

7. Прочие виды навигации

♦ Размеченные изображения или flash-ролики с программными элементами

♦ Карта сайта

♦ Статусная или контекстно-зависимая строка («хлебная крошка»)

♦ Пиктограммы и/или иконки, не организованные в виде единого меню

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

Кроме навигации, реализованной непосредственно на сайте, посетитель может использовать:

♦ Навигацию с помощью меню браузера (например, с помощью популярной кнопки «Назад»)

♦ Навигацию с помощью клавиатуры (например, в Яндекс переход между страницами результатов поиска можно делать через «Ctrl + Вправо», «Ctrl + Влево»)

♦ URL-навигацию (прямое указание адресов страниц в адресной строке браузера)

В браузере Google Chrome набор адреса страницы комфортно совмещен с функцией поиска в Интернете.

Хорошо ли сделана навигация

Проверить, насколько рационально сделана навигация на вашем корпоративном сайте, вы можете с помощью следующего контрольного списка:

♦ На каждой странице пользователь должен понимать: где он находится относительно всего сайта, куда еще можно пойти, где он уже был

♦ На всех страницах сайта должен соблюдаться единый стиль оформления навигации

♦ На странице должны отсутствовать ссылки на саму себя

♦ Часто изменяемую навигацию следует делать текстом

♦ Меню (навигационный интерфейс) должен занимать не более 20 % от рабочей площади экрана (при разрешении 1024 х 768)

♦ Логотип компании должен являться ссылкой на главную (первую) страницу сайта

♦ Пункт меню, соответствующий активной странице и разделу, должен быть выделен

♦ Количество элементов во всех навигационных панелях должно быть разумным (желательно не более 7-12)

♦ В рамках одной страницы разные типы навигации не должны визуально конкурировать между собой

♦ Количество разных видов навигаций на любой странице не должно превышать пяти

♦ Важно использовать стандартный набор иконок («домой», «наверх», «обсудить», «почта» и др.)

♦ Все элементы навигации должны быть сгруппированы по принципу подобия