Предлагаю к обсуждению написанную мной недавно статью. За комметарии, коррективы и советы буду весьма признателен.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

К сожалению, вошло не все, продолжение здесь: http://www.ideefixe.ru/articles.html?page=1&idn=17

В следующей части мы поведем речь о дополнительных средствах навигации. Читайте «Навигация по навигации. Часть 2. Дополнительные средства» можно прочесть здесь: http://www.ideefixe.ru/articles.html?page=1&idn=19

[GLUK]

Народ ленивый читпть не будет!!! хе

[Konopliov Anton]

ниасилил...

[StorM]

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

[Hunter]

(В меру пафосный текст со множеством кавычек. Это первая часть.)

Важно что? Правильно, убить в себе робота. Давайте посмотрим на человека, думающего как робот.

У него есть Техническое Задание, которое начинается словами «данный документ представляет собой».
Он считает, что нужно сделать «сайт», и что «сайт» представляет собой «навигацию», «колонки» и прочие «блоки».
Он запускает фотошоп и начинает следовать некоторому алгоритму, потому что он уверен: если следовать некоторому алгоритму, получится «сайт».

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

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

Потому что туман, туман в голове. Тьма, и носится морозная пыль.

Таким же образом на странице появляются «новости», «форма поиска», «баннер», и ему становится все труднее и труднее как-то это все взаиморасположить.

Тут начинаются глюки. Ему кажется, что «чего-то не хватает», что «левый угол перегружен», что «много пустоты». А потом уже приходит откровенная лажа. Он решает, что «текстовый анонс» надо полностью сделать ссылкой, но тогда выглядит «некрасиво, когда весь подчеркнутый», и со ссылок убирается подчеркивание. Он рисует «иконку-домик», но хочет сделать ее настолько «стильной», что получается нечто среднее между ульем и скворечником.
В этих блужданиях он, конечно, уже забывает о мелочах. Внимание не бесконечно.

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

И, наконец, в результате получается «сайт»

То есть, «говно» в нашей классификации.

Ибо человек — не робот, и действовать по алгоритму (да еще по чужому) — противоестественно.

Автор: Рома Воронежский.

http://www.narisoval.ru/

[Artalexa-Jt]

Ребята, вы издеваетесь, да?

To IdeeFixe: Если будете продолжать, одна просьба, объём информации в 2-2,5 раза меньше, а в целом вещь интересная...

To Hunter: В каждой шутке есть доля правды, здесь эта доля львиная...