Школа навигации

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

Как вы, вероятно, догадываетесь, именно о ней, о навигации, мы и будем сегодня обстоятельно беседовать.

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

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

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

Я вполне могу согласиться, что сайты литературного и художественного толка, ориентированные на неспешное прочтение на досуге, а не на беглое ознакомление, характерное для большинства «классических» информационных ресурсов, предоставляют своим разработчикам куда больше степеней свободы, вполне допуская разного рода нестандартные подходы к решению привычных задач — если хотите, некое интеллектуальное заигрывание с посетителями… В то же самое время, все хорошо в меру, «изюминка» вряд ли должна превращаться в фунт изюма, иначе будет приторно. Если система навигации напоминает тест на IQ, вряд ли кому бы то ни было будет на таком сайте уютно.

Вот такие пироги. Ну а теперь можно с чистой совестью вернуться к нашим баранам, к анатомии систем навигации. Для начала — о навигации внутренней.

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

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

(Считается, что именно семью объектами ограничивается объем восприятия среднестатистического человека, когда совокупность элементов еще воспринимается как единое целое. Взаимное расположение семи кнопок очень легко отпечатывается в сознании — первая, средняя, последняя; следующая за первой, предпоследняя; предшествующая средней, идущая сразу за средней.)

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

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

Если в качестве кнопок навигации используются графические изображения, то их требуется обязательно снабжать содержательными alt-текстами. В случае использования карт ссылок, реализуемых при помощи тега <map>, требуется обязательно дублировать навигационную панель текстовой строкой — ряд устаревших браузеров не поддерживает карты ссылок. Нужно обязательно проверять, легко ли работать с сайтом при отключенной графике или в текстовом браузере вроде Lynx.

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

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

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

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

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

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

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

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

Выпадающие окна, в особенности, открываясь во весь размер экрана, могут напрочь сбить не слишком опытного пользователя с толку. В них, кроме всего прочего, не работает кнопка «Назад». Пользователю нужно дать возможность выбора — пусть сам в случае надобности, удерживая <Shift> (если речь идет о MSIE), открывает ту или иную ссылку в новом окне. Конечно, существуют избранные случаи, когда принудительное открытие новых окон действительно повышает удобство использования — например, если по щелчку на уменьшенной копии изображения на странице большого иллюстрированного каталога в новом окне открывается полноэкранная версия картинки. Но во всех подобных ситуациях необходимо заранее предупреждать пользователя, что те или иные ссылки открываются в новых окнах, иначе может произойти конфуз.

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

Города мира > Россия > Калужская область > Боровск

Три первые надписи выделены здесь подчеркиванием в знак того, что они являются ссылками на страницы с оглавлениями соответствующих разделов. Удобно, не так ли?

Замолвим теперь пару слов о навигации внешней.

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

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

http://www.nameofthesite.ru/projects/articles/navigation/chapter05.html

Помимо чисто справочной роли, URL такого вида вполне может использоваться для передвижения по сайту. Посетитель, сократив этот адрес, скажем, до вида «http://www.nameofthesite.ru/projects/», сможет при помощи одного щелчка мыши попасть на страницу оглавления раздела «Проекты», которая находится тремя уровнями выше! Изменив «chapter05.html» на «chapter03.html», посетитель сможет перейти к одной из предыдущих глав, не пользуясь для этого внутренней навигацией сайта.

Статусная строка браузера тоже может принести немало пользы. При наведении курсора мыши на любую гиперссылку, размещенную на загруженной странице, в статусной строке браузера выводится URL того объекта, на который ведет данная ссылка. Это очень ценная информация: по ней посетитель может узнать, является ли ссылка внешней или внутренней, на объект какого типа она указывает (к примеру, на обычную HTML-страницу, на графическое изображение или на ZIP-архив) и т. п. К сожалению, некоторые недальновидные разработчики используют статусную строку не по назначению — например, выводят в ней при помощи JavaScript различные надписи вроде «Добро пожаловать». Нельзя придумать более бездарного способа использования благ, предоставляемых интерфейсом браузера.

Чрезвычайно важное значение при ответе на вопрос «Где я нахожусь?» имеет заголовок окна браузера, который, как известно, отображает информацию, содержащуюся в элементе <title>…</title> HTML-кода веб-страницы. Грамотное составление содержимого этого элемента — большая наука. На главной странице, помимо названия сайта, в заголовке окна должно фигурировать сверхкраткое описание ресурса, которое, кстати говоря, весьма позитивно отражается на релевантности страницы при ранжировании результатов поиска слов, присутствующих в элементе <title>…</title>, при помощи поисковых машин. Пример грамотного заглавия для главной страницы сайта:

Города мира: географическое положение и достопримечательности городов Земного шара

На внутренних страницах содержимое заглавия должно отражать положение того или иного подраздела в иерархической структуре сайта. Для приведенного несколькими абзацами выше URL содержимое элемента <title>…</title> может выглядеть примерно так:

Глава 5 - Премудрости навигации - Статьи - Проекты - NameOfTheSite.Ru

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

Как видите, нюансов море. И то мы зашли в него лишь по щиколотку. В будущих выпусках мы к навигации еще обязательно вернемся, а пока я приглашаю вас на сайт Web-Anatomy.Ru ознакомиться с действующим примером неплохой системы навигации.