Навигация по навигации. Часть 1: Основные элементы.

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

Верхний колонтитул

Логотип: Обычно принято, что логотип сайта или компании, которой сайт принадлежит является ссылкой на главную страницу сайта, в некоторых случаях, ссылку под логотипом заменяют пунктом «Домой» или «На главную страницу» в панели иконок или меню.

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

Горизонтальное меню вверху страницы. Располагается в верхнем колонтитуле страницы. Основной особенностью такого меню является предопределённый дефицит пространства, так как (думаю, любой web-специалист согласится со мной) горизонтальная прокрутка окна браузера, появляющаяся в том случае, если меню очень широко – вещь нежелательная. Поэтому любой дизайнер исходит из расчета, что горизонтальное меню должно укладываться в ширину хотя бы 800 px.
Из всего выше сказанного, очевидно, что горизонтальное меню подходит в основном для мелких проектов, с ограниченной рубрикацией. Однако это не совсем правильно. На деле, при помощи горизонтального меню можно оформлять навигацию по довольно крупным проектам. Во-первых, не обязательно стоит стремиться выкладывать в нем абсолютно всё содержание проекта. Не нужно перечислять все новости и статьи, например. Во вторых существуют приемы позволяющие расширить возможности горизонтального меню:

- Выпадающие списки. Создаются либо при помощи тега SELECT (редко), либо при помощи java-script. Плюсы выпадающих списков: позволяют показать дополнительные уровни горизонтального меню с довольно подробной и разветвленной рубрикацией. Минусы: довольно небольшое количество специалистов, работающих в web-технологиях, знают тонкости html-кода до такой степени, чтобы сделать списки созданные тегом SELECT частью дизайна, не выпадающей из общей картины, в «сыром» же виде, эти элементы могут совершенно не укладываться в концепцию дизайнера. Элементы созданные на java-script еще недавно могли некорректно читаться старыми версиями браузеров, теперь эта проблема решена (во всяком случае, в подавляющем большинстве случаев). Но никто не даст гарантию, что прилинкованный java-script догрузится полностью и корректно при плохом соединении пользователя, а выложенный на каждую страницу, он добавляет ей довольно существенный лишний вес. Существует и еще одна – часть пользователей являются ярыми противниками java-script и отключают его в настройках своего браузера. Можно, конечно сказать, мол, сами виноваты, что и говорят обычно особо продвинутые веб-дзайнеры. Но Ваша-то задача не дизайн, а деньги, которые могут Вам дать такие пользователи, а Вы их потеряете – наверное, это не правильно.

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

- Дополнительное меню. У этого элемента в сравнении с предыдущим есть две основные особенности. Во-первых, показываются нижние уровни меню только данного конкретного раздела. Во-вторых, веб-мастер обладает большей свободой в его размещении. Дополнительное меню может быть перенесено и в основное тело документа, не привязывая его графически к верхним уровням меню. Тем не менее, верхние уровни всех разделов все-таки должны присутствовать в виде компактного варианта горизонтального меню. Отображение же нижних уровней всех разделов можно сделать на главной странице.

Так что вопреки бытующему мнению, на горизонтальном меню можно строить почти любой сложности проект, но при условии, что количество основных разделов или основных компонентов сайта, которые и составят верхний уровень меню не будет превышать 5-6. Постарайтесь двигаясь от частного к общему и объедините все возможные и планируемые разделы в более крупные до тех пор пока не придете к названному числу основных. В 95 случаях из 100 у вас это получится.

Панель иконок: Вспомогательная инструментальная панель содержит, обычно, кнопки для сохранения адреса сайта, страницы (добавить в избранное, сделать стартовой) или указания на функциональные и навигационные элементы сайта (на главную, карта сайта, корзина заказов, вход для дилеров и т.д.). Здесь стоит расположить элементы, которые могут быть необходимы на любой странице сайта. Обычно панель оформляется привычными пользователю графическими изображениями, но чтобы пользователь не угадывал, что за ними скрывается (т.к. жестких стандартов не предусмотрено) тег img необходимо обязательно снабдить атрибутом alt и поместить в него описание назначения иконки.

Тело документа

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

Вертикальное меню. Вполне возможно, что именно Ваш случай не подходит для создания на сайте горизонтального меню, либо его Вам оказалось мало (что тоже случается). Тогда Вы будете строить меню вертикальное. Вариантов его размещения два: слева или справа. В отдельных случаях, например, на вводной странице, меню, конечно, может располагаться и посредине, но это возможно только тогда, когда на странице не предполагается размещение контента или само меню таковым и является, в противном случае телега будет стоять впереди лошади.
Итак, справа или слева. Здесь есть ряд моментов, про которые не стоит забывать. Во-первых, поставив меню справа, Вы таким образом акцентируете внимание на контенте, затеняя навигацию, так как читаем мы слева направо. В общем-то, акцент на информационном содержании – совсем не плохо, но могут возникнуть чисто дизайнерские проблемы: при низком разрешении экрана и появлении горизонтальной прокрутки, ваше меню может уйти из поля зрения пользователя, что уже не есть хорошо. Впрочем, Вас может спасти «резиновый» дизайн, в тех случаях, когда он возможен. И к тому же у Вас всегда остается возможность поместить меню слева.
По поводу многоуровневости вертикального меню, можно сказать то же самое, что и в случае с горизонтальным, только возможностей здесь конечно несколько больше, вследствие фактической неограниченности пространства. Главное – не перестараться.

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

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

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

Нижний колонтитул

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

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

В следующей части мы поведем речь о дополнительных средствах навигации. Читайте «Навигация по навигации. Часть 2. Дополнительные средства»

© Студия IdeeFixe / http://ideefixe.ru/