Автор статьи: Нурниязов Олег
Комментарий к статье: Статья была написана до смены формата, так что некоторые примеры на основе этого сайта уже не совпадают с действительностью.
Навигация — это система ориентирования на сайте, некая метафорическая карта местности, которая позволяет путешественнику определить свое местонахождение и наиболее удобные пути прохода в нужные пункты.
изначально примитивная система навигации включена в сам интерфейс браузера. В браузере систему навигации образуют адресная строка и строка состояния. Адресная строка (полоска над окном содержания) показывает ваше точное местонахождение на сайте. К сожалению, в адресной строке используется строчно-иерархическая система представления данных. К примеру для этой страницы адресная строка выглядит так:
http://urfinjuice.narod.ru/prodesign/navigation.htm
Эта строка говорит Вам о том, что перед Вами документ под названием navigation.htm, который расположен в папке «prodesign» на сайте urfinjuice.narod.ru. Такое представление информации очень просто и понятно по своей структуре. Оно не способно запутать пользователя. Но с другой стороны такое представление данных чрезвычайно ограничено. Здесь Вы не увидите, какие еще документы находятся в папке «prodesign» или на сайте в целом.
Теперь несколько слов о строке состояния. Она расположена в под окном содержания и отражает информацию о том, к какому файлу направлены те или иные ссылки сайта.
Вот этими двумя строками, да еще двумя кнопками «Back» и «Next», позволяющими перемещаться между просмотренными страницами, и ограничивается весь навигационный набор браузера. И не смотря, на постоянное усовершенствование браузеров, их навигационная система от раза к разу не претерпевает, принципиальных изменений. Производители подразумевают, что авторы сайтов смогут сами сформировать оптимальную для себя систему навигации. На самом деле, даже встроенная система навигации браузеров бесполезна без доброй воли создателей сайтов. Ну, посудите сами, что может понять посетитель сайта из такой записи в адресной строке:
http://fr467tripod.chat.ru/000127sk/56/127galimatja45678.htm
Поэтому, первым правилом создания навигации на сайте является адаптация иерархии на сайте под навигационную систему браузера. Называйте ваши папки и файлы так, чтобы они несли в себе четкую смысловую нагрузку для посетителя. Например, папку где находятся файлы с описанием красот различных стран назовите «countries» или «strani», а папку с прайс-листами назовите «prices» или «ceni». Но стоит ли использовать в названиях, английское написание русских слов? В рунете это является достаточно распространенной практикой. наши люди в большинстве своем с английским не дружат и называют файлы как умеют, т.е. по русски. Однако, английские буквы слабо подходят под русскую транскрипцию. вышеприведенные примеры были специально подобраны для илюстрации того, как затруднительно правильно отобразить некоторые русские слова английскими буквами. Поэтому я сторонник того, чтобы в названиях на сайте использовались термины английского языка. Помимо этого, необходимо создавать для каждого раздела папку с соответствующим названием и основную страницу раздела именовать index.html. Иначе посетители просто не смогут перемещаться на вашем сайте при помощи адресной строки браузера. Ведь если браузер не имеет точного указания на конкретный файл, а только наименование папки, он самостоятельно пытается найти файл с названием index.html и, если это не удается, пишет, что не смог ничего найти.
Теперь о строке состояния. Нередко в строке состояния вместо описания файла, на который ведет ссылка отображается надпись вроде «Привет, Вы у меня на сайте!» Нечего сказать, очень полезная информация. Отсюда следует второе правило построения правильной навигации на сайте: не прикасаться к строке состояния.
Теперь несколько слов о построении системы ссылок на сайте. Ссылки являются не декоративным, а сугубо функциональным элементом сайта, а посему автор должен прежде всего заботиться об удобстве их использования.
Прежде всего, система ссылок должна визуально восприниматься как единый информационный блок. Посетитель бессознательно разбивает просматриваемый сайт на сектора. Позаботьтесь о том, чтобы в одном из секторов была вся система основных ссылок и только она. Постарайтесь этот сектор расположить так, чтобы он сразу при загрузке страницы оказался на виду у пользователя.
Общепринятой практикой размещения сектора ссылок на сайте яляется использование полосы, приклеенной к левой кромке окна. Обычно это полоса размером около 20% экрана со столбцом ссылок, расположенных друг под другом. У такого расположения есть свои сильные и слабые стороны. Главной положительной чертой такого размещения является его повсеместность. Некогда экспериментальная левая навигационная полоса теперь используюется на подавляющем большинстве сайтов. Люди уже привыкли к тому, что на сайте слева находится столбец основных ссылок сайта. Основанием для для такого размещения послужила европейская система письменности, где процесс чтения осущестляется слева направо и сверху вниз. Подразумевалось, что расположенные слева ссылки в первую очередь попадут на глаза посетителю и дадут ему представленияе об общей структуре сайта.
Противники левостороннего размещения использовали тот же аргумент, но с обратным значением. Ссылки расположенные слева, в первую очередь попадут на глаза посетителю и отвлекут его внимание от основного содержания сайта. Однако, спор по этому вопросу потерял свою актуальность в связи с повсеместным распространением ссылок слева. Люди настолько привыкли к полосе навигации слева, что с первых секунд загрузки сайта, увидев столбец каких-то слов слева, они рефлектроно интерпретируют их как ссылки, не пытаясь прочесть, и сразу сосредотачивают свое внимание на информационном секторе справа от столбца.
Другим аргументом против левой полосы навигации послужило правило юзабилити, гласящее, что чем меньше пользователю приходится двигать мышью на сайте, тем лучше. исходя из этого некоторые дизайнеры критиковали левостороннюю полосу и рекомендовали размещать навигацию вдоль правой кромки окна, рядом со скроллом. Это имеет свой смысл, потому что согласно статистики, подавляющее большинство пользователей программ с динамически расположенным инструментарием (например Adobe Photoshop) располагают инструменты вдоль верхней кромки (рядом с основными меню) или вдоль правой кромки рядом со скроллом. Однако в интернет правостороннее размещение не прижилось и оно скорее дезориентирует пользователя, чем помогает ему.
Наиболее весомым аргументом против боковой полосы навигации (в том числе и левосторонней) является то, что такая полоса совершенно бесполезным образом занимает немалую часть пространства, даже после того, как пользователь прокрутит скролл вниз и ссылки скроются за верхней кромкой окна. Существуют некоторые хитрости и методы борьбы с этим недостатком, однако он остается актуальным и по сей день.
Сектор навигации, растянутый по верху сайта не крадет лишнего пространства, но он имеет свои ограничения. В то время как в боковом секторе можно разместить практически любое количество ссылок, в верхнем секторе количество ссылок ограниченно шириной экрана. Можно, конечно раздвинуть ширину сайта и за пределы экрана и вынудить пользователя пользоваться горизонтальным скроллом, но это нарушит еще один негласный стандарт web гласящий, что сайт может превосходить размеры экрана в высоту, но ни в коем случае не в ширину.
Как видите идеальной системы размещения ссылок не существует. У каждого варианта есть свои недостатки. Наиболее оптимальными выглядят варианты левостороннего столбца и верхней строки. Навигационная строка на дне сайта применима только в качестве дублирования системы, расположеной в верхней части сайта. Что касается правосторонней навигации, то не смотря на ее объективные преимущества, она так и не получила распространения в web. Я бы рекомендовал просто отказаться от ее использования.
Я уже упоминал о встроенной адресной строке браузера и ее навигационных возможностях. Так вот, существует практика дублирования данных адресной строки на сайте. По сути это та же адресная строка, только в более доступном варианте. Адресная строка использует в цепочке непосредственно названия файлов и папок. Однако, они зачастую не передают точной информации о содержании. В адресных строках сайтов используется та же строчно-иерархическая модель, но вместо фактических названий используются слова более точно передающие содержание. Например, для данной страницы адресная строка браузера выглядит так:
http://urfinjuice.narod.ru/prodesign/navigation.htm
а на сайте, адресная строка, размещенная в шапке, выглядит так:
главная страница / pro.design / навигация на сайте
Различаются и методы перехода при помощи адресной строке. В браузере переход осуществляется путем сокращения строки. Например если в изначальной записи Вы сотрете слово navigation.htm, то попадете на главную страницу раздела pro.design. А если сотрете и надпись pro.design, то окажетесь на главной странице сайта urfinjuice.narod.ru. В адесной строке сайта используется метод стандартных ссылок. Т.е., если Вам надо перейти в другой раздел, то в надписи главная страница / pro.design / навигация на сайте Вы просто щелкаете на интересующую Вас надпись.
использование альтернативной адресной строки еще не стало общепринятой практикой, но я рекомендовал бы использовать это как удобную интуитивно понятную дополнительную систему ориентирования. Поскольку альтернативная адресная строка еще не приобрела глобальную популярность, нет и единого стандарта по ее оформлению. Наиболее распространенными символами разделения иерархии страниц являются знак «больше» (>), двоеточие (:) и знак дроби (/). Я считаю наилучшим знак дроби, поскольку он соответствует символике адресной строки браузера, но в принципе любой из перечисленных знаков приемлем. Единственным иногда используемым, но недопустимым знаком является вертикальная черта (|). Она трактуется большинством пользователей не как знак иерархического отношения, а как выбор между равнозначными вариантами.
