О навигации или как объять необъятное

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

1. Не усложняй!
Простое правило - чем проще, тем лучше. Не стоит пытаться выдумать нечто сверхновое. Понятно, что дизайнерские изыски всегда в моде, но лично мое мнение, что навигационная панель - это не полигон для деятельности дизайнера. Все что угодно: оформление, цвет, шрифт, но с навигацией - очень аккуратно! Я часто вижу сайты на которых пункты в меню называются отличными от общепринятых терминами. Например, я не очень люблю когда вместо "чат" в навигации написано "болталка". Хорошо еще, когда автор понимает, что "to chat" - переводиться как глагол "болтать", но ведь часто случается, что под таким названием скрывается, например, форум… Еще интереснее, если на сайте есть и чат, и форум, в таком случае вообще стразу не понятно что есть что.
Также недопустима ситуация когда на одной странице один пункт имеет одно название, а на другой - другое. Это очень дезориентирует посетителя.

2. Не прячь!
Вторая тенденция у начинающих сайтостроителей - маскировка или помещение навигации где-то на задворках. Зачем? Дайте возможность пользователю с первого взгляда понять, как же управлять этим сайтом! Просто располагайте панель там, где она будет сразу заметна и легкодоступная. Хорошим тоном считается дублирование ссылок внизу длинных страниц, чтобы посетитель мог без препятствий перейти к другому разделу.

3. Правило 7 +/- 3
По данным всевозможных исследований выявлено, что среднестатистический человек нормально воспринимает не более 7 одноранговых раздела. Плюс-минус три. Я конечно понимаю, что мы тут все люди умные и способные, да и посетители наши, конечно, самые лучшие, а не какие-то среднестатистические, но поверьте, больше десяти разделов будут рябить, а двадцать превратятся в совершенную кашу.
Поэтому, когда организуете раздел статей, постарайтесь не разбивать его более чем на 10 подразделов. Если никак не получается, создайте лучше подуровни. Однако, важно не нарушить другое правило...

4. Не углубляйся!
Психологи считают самым комфортным двухуровневое меню. Максимально допустимое число уровней - три. Даже четвертый уровень вызывает раздражение, что, впрочем, понятно - щелкаешь, щелкаешь, а конца все не видно! Иначе говоря, старайтесь придерживаться схемы, не "глубже", чем "Главная -> раздел -> подраздел -> статья"
Создание большего числа уровней - преступление перед пользователем. Чем больше уровней, тем интереснее вопрос "А если ему понадобиться отсюда вот туда перейти?"… Отсюда вытекает ещё одно правило...

5. Три клика
Формулировка: "Любая страница сайта должна быть доступна с трех кликов с любой страницы"
Практикум
Итак, теория, я надеюсь, усвоена. Теперь попробуем подумать над чисто практической задачей.
Задача: Есть 3000 статей, необходимо их удобно организовать.
Естественно, статьи на несколько разных тем. Первая идея, которая приходит в голову - это разбить весь материал разделов на 15, уровней по пять в каждом. В таком случае, в каждом конечном разделе получается по 5-10 четко систематизированных статей. Казалось бы удобно, но на самом деле до этого материала будет просто не добраться без гида. Каждый следующий подраздел все дальше уводит юзера в дебри сайта, лишь отдаляя от цели.

Что делать?
Для такого количества материала оптимальнее всего использовать структуру типа "библиотека": 7-10 основных тем, в каждой 5-7 подтем, в каждой 40-50 статей. А это 50 статей можно сортировать по дате, автору, рейтингу и т.д.
Параллельно надо постараться пересмотреть разделение на темы, возможно, что-то сгруппировать. Очень важно не допускать слишком много уровней.

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

Достаточно часто можно сократить число уровней, разнеся самые крупные корневые разделы по отдельным субдоменам. При этому они объединены в навигацию по типу "кольцо", а навигация между ними может быть организована через специальную страницу-оглавление, на которой не приводится детализация их внутренней структуры.

Если специфика не позволяет менять структуру, возможно, следует подумать об использовании таких "аморфных" методах размещения, как вики. Тогда общей навигации вообще как-таковой не будет. Подробнее о технологии можно прочесть на "Википедии".

Полезные советы
Создаете поиск. Хороший поиск решит львиную долю всех проблем с навигацией.
Не забывайте навигацию типа "хлебные крошки", которая отражает положение пользователя. Например: Главная / статьи / подраздел / название статьи - такая структура интуитивно понятна и очень удобна. Да и реализуется на так уж сложно с помощью языков программирования, или SSI.

Язык JavaScript дает значительные возможности по улучшению интерфейса сайта. Иногда можно встретить меню вида раздел -> подраздел -> подподраздел -> статья , где при наведении на каждый пункт появляется выпадающее меню. Такой метод кажется очень удобным, но тогда накладывается ограничение на длину названия каждого пункта, да и само меню не будет работать, если в браузере пользователя отключен JS. В общем, не самый удачный вариант.

Ну на этом я заканчиваю статью, хотя тема, конечно, еще незакончена. Все премудрости и тонкости со временем осознаются на практике. Каждый веб-мастер вырабатывает свои приемы и методы. Желаю вам удачи в проектировании!

Статьи по теме

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

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

2023-12-28

Дизайн сайта: особенности творческого процесса

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

2019-08-07

Создание логотипа: семь сервисов в помощь

После того, как основная бизнес-идея сформирована, определены продукты и услуги, которые компания будет продвигать на рынке, возникает н...

2019-01-30

20 ценных уроков дизайна от "Мстителей"

Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес...

2015-05-11

15 трендов веб дизайна в 2014-2015 году

1. Первостепенность дизайна для мобильных устройств. Разработка дизайна теперь начинается с маленьких экранов, следующим шагом являетс�...

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

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

2011-12-27

Факторы, определяющие хороший логотип

Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско�...

2011-12-27

Борьба поисковиков и оптимизаторов

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

2011-04-13

Почему не стоит скачивать шаблоны с варезников

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

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

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

2011-04-07

Шаблонные решения для web-сайтов

При проектировании стандартных элементов веб-сайта посмотрите, как это сделано на других веб-сайтах, и не изобретайте велосипед. Меньше...

2011-04-07

Как сделать картинки в стиле Карсона

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

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

2011-03-29

Про заказчиков

Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т...

2011-03-29