создание сайтов: Навигация сайта

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

• Вот отсюда я должен начать, если хочу что-то найти.
• Вот отсюда я должен начать, если хочу побродить по сайту.
• Вот отсюда я должен начать, если хочу сразу перейти к самому главному содержанию.

На тех сайтах, на которых взаимодействие с пользователем основано на пошаговом процессе (например, ипотечный сайт), точка начала должна быть настолько заметной, чтобы буквально била по глазам. Кроме того, должны быть хорошо заметны места, где нужно пройти регистрацию или войти как уже зарегистрированный пользователь (sign in), если возможность регистрации на сайте предусмотрена.

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

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

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

Мой ответ однозначен: «Конечно, навигация может различаться, но при условии, что эти различия не будут слишком большими».

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

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

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

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

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

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

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

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

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

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

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

Стив Круг
Веб Дизайн