Распространенная болезнь больших сайтов с объемным информационным наполнением – огромные навигационные панели. От большого количества пунктов рябит в глазах и чтобы найти нужную ссылку, нужно перебрать десяток других.
Хорошо это или плохо? С одной стороны, это уменьшает количество действий (щелчков мыши), которые нужно совершить посетителю, чтобы найти нужную информацию. Но, с другой стороны, забывается один из постулатов юзабилити – «количество шагов, которые нужно сделать пользователю, не имеет значения до тех пор, пока каждый шаг очевиден». Поэтому я голосую за хорошо структурированные навигационные панели разумного размера.
Ниже предлагается 3 простых способа, которые позволят сделать навигацию дружелюбной, а именно: 1) увеличение уровней иерерхии, 2) разбивка на несколько навигационных панелей, 3) персональная навигация.
1. Увеличение уровней иерархии
Рассмотрим пример. Представим, что мы проектируем навигацию для сайта компании, занимающейся производством различных видов труб и оказанием сопутствующих услуг.
Предположим, что после изучения деятельности этой компании была предложена следующая структура сайта:
1. Главная страница
2. Бетонные трубы
3. Пластиковые трубы
4. Керамические трубы
5. Монтаж трубопроводов
6. Ремонт трубопроводов
7. Доставка труб
8. Контактная информация
9. Новости
10. Клиенты
Заметим, что здесь приведена навигация только первого уровня. На самом деле, конечно, есть подуровни. К примеру, компания производит несколько типов труб каждого вида.
Видно, что панель навигации «раздута», пользоваться ей не очень удобно. А теперь просто группируем меню на смысловые блоки, т.е. увеличиваем количество уровней иерархии:
1. Главная страница
2. Трубы
2.1 Бетонные трубы
2.2 Пластиковые трубы
2.3 Керамические трубы
3. Услуги
3.1 Монтаж трубопроводов
3.2 Ремонт трубопроводов
3.3 Доставка труб
4. О компании
4.1 Новости
4.2 Клиенты
5. Контактная информация
Посмотрите, какое компактное и наглядное меню получилось в итоге:
1. Главная страница
2. Трубы
3. Услуги
4. О компании
5. Контактная информация
Пример. Этот прием в действии можно увидеть на сайте компании «Строй Оптим». Компания эта молодая, быстрорастущая, поэтому для навигации очень важна масшабируемость. Присмотритесь – в разделы «Продукция» и «Услуги» новые подразделы можно добавлять до бесконечности!
2. Разбивка на несколько навигационных панелей
Продолжаем использовать в качестве примера сайт про трубы. Если предположить, что компания выпускает очень широкий ассортимент разнообразных труб, то, скорее всего, в разделе про трубы будет излишне много уровней вложенности.
В этом случае более удобной будет более «плоская навигация». Хорошим решением будет разбить ее на 2 панели:
Первая панель:
1. Бетонные трубы
2. Пластиковые трубы
3. Керамические трубы
4. Монтаж трубопроводов
5. Ремонт турбопроводов
6. Доставка труб
Вторая панель:
1. Главная страница
2. О компании
3. Новости
4. Клиенты
5. Контакты
Логика разбивки здесь очень проста: в одну панель относим все, что касается продукции, в другую – все остальное.
Очень часто этот прием используют в Интернет-магазинах: одна навигационная панель служит для перемещения посетителей по каталогу продукции, во второй панели собраны служебные ссылки: корзина, условия доставки, контактная информация.
Пример. Примером, иллюстрирующим принцип разделения навигационной панели, может являться сайт компании IT Expert . Ссылки на наиболее важные страницы и разделы (О компании, Обучение и т.д.) вынесены в главную навигационную панель, а ссылки на менее важные страницы (Карта сайта, Вакансии, Условия использования и т.д.) находятся в дополнительной панели навигации в нижней части сайта.
3. Персональная навигация
О создании персональной навигации имеет смысл задуматься, если на сайте есть много постоянных посетителей, которые периодически просматривают одни и те же страницы. В нашем примере это могут быть дилеры, которые следят за обновлениями цен и ассортимента определенных видов труб.
Персональная навигация представляет из себя дополнительную навигационную панель, которую посетитель сайта может редактировать (добавлять/удалять разделы) самостоятельно. Если есть несколько страниц, на которые он постоянно заходит, то, чтобы ускорить к ним доступ, пользователь добавляет их в свою личную навигацию.
Персональная навигация особенно полезна, если использовать ее в сочетании с первым способом, т.е. при глубокой вложенности на сайте.
Пример. Персональная навигация – достаточно нечастое явление в Интернете, но ряд неплохих примеров ее использования вспомнить можно. Вот один из них – сайт МДМ-банка.
Итак, теперь вы знаете, как делать навигацию удобнее уже на этапе проектирования структуры ресурса. А в следующем выпуск будет подспорьем при реализации навигации в дизайне сайта, вы узнаете, как делать визуально привлекательные и в то же время эффективные навигационные системы.
