Глава 6. Дорожные знаки и «хлебные крошки»
Разработка навигации
Это правда:
Люди не станут пользоваться вашим сайтом, еслиим не будет понятно, как по нему перемещаться.
Вы сами знаете это из собственного опыта в качестве пользователя Интернета.Если вы попадаете на сайт, на котором не можете найти то, что ищете, или структура которого вам непонятна, то вы не станете пользоваться им долго и, скореевсего, больше на него не зайдете. Каким же образом можно создать ту пресловутую «ясную, простую и последовательную» навигацию?
В магазине
Представим себе следующую картину: в субботний день вы отправляетесь в магазин, чтобы купить цепную пилу.Уже на входе вы задумываетесь: «Где же у них здесь пилы?». Зайдя в магазин,вы начинаете просматривать названия отделов – они написаны крупными буквами и вывешены на стене так, что вы можете видеть их с любого места.

Вы задумываетесь: «Хм, «Инструменты»? Или «Сад и газон»?». Зная, что этот магазин специализируется на инструментах, вы отправляетесь в отдел «Инструменты».Придя туда, вы смотрите на таблички в конце каждого товарного ряда.

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


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

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

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

Затем вы выбираете из списка подразделов.

И после того как вы сделаете еще один или два клика, вы достигнете спискапредметов нужного вам типа:

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

Невыносимая легкость серфинга
Способ, каким вы ищете что-то на сайте, во многом напоминает то, как вы этоделаете в реальном мире. Когда вы перемещаетесь по Интернету, возникает ощущение, что вы и вправду перемещаетесь как бы в физическом пространстве. Даже слова, которые мы используем для описания процесса перемещения, относятся к пространству (обход, осмотр, серфинг). А щелчком мыши по ссылке вы непросто «загружаете» или «отображаете» страницу, а «переходите» к ней.Но пространство Интернета не имеет тех же ориентиров, на которые мы опираемся в своей жизни в реальном пространстве. Веб-пространство обладает следующими «странностями»:
- Нет ощущения масштаба. Даже если мы уже хорошо знакомы с каким-тосайтом – исключение составляют только совсем небольшие, – нам трудно определить его объем (50?, 1000?, 17000 страниц?). Мы знаем, что на сайте могут быть еще неисследованные нами уголки, объем которых может оказаться довольно большим. Если же речь идет о журнале, музее, отделе магазина,вы всегда имеете хотя бы приблизительное представление о доли уже увиденного и еще не увиденного вами.Таким образом, не всегда легко определить, все ли вы видели на сайте из того, что вас интересует, и, следовательно, трудно оценить, когда можно закончить его просмотр.
- Нет ощущения направления. В целом, на сайте нет понятий влево и вправоили верх и низ. Можно только говорить о движении «вверх или вниз» относительно структурной иерархии – в направлении к более общим или более конкретным его уровням.
- Нет ощущения местоположения. По мере того как мы перемещаемся в физическом пространстве, мы собираем о нем информацию. Таким образом, у наспоявляется представление о местоположении тех или иных вещей, вот почему мы можем найти наикратчайший путь к ним.
В первый раз мы сумеем найти в магазине цепные пилы, если будем следовать указателям. Но уже в следующий раз мы, скорее всего, подумаем:Цепные пилы? А, ну да, я помню, где они:в дальнем углу, рядом с холодильниками.
И направимся прямо к ним.

Но в Интернете ваша нога никогда не касается земли, и вы можете перемещаться, только щелкая мышью по ссылкам. Щелкнув по надписи «Электроинструмент», вы сразу телепортируетесь в товарный ряд с электрическимиинструментами, без прохождения какого-либо расстояния и не встречая каких-либо других товаров во время перемещения.Если мы хотим вернуться к чему-либо, то нам нужно вспомнить, где это находится, но не в прямом – физическом – смысле, а в рамках структурной иерархии и концепции сайта, и затем вернуться в то место.Именно по этой причине закладки, или сохраняемые персональные интернет-ярлыки, имеют такое большое значение, и именно поэтому по кнопке«Назад» делается от 30 до 40 процентов всех кликов в Интернете.Это также объясняет, почему концепция начальной страницы сайта настолько важна. Начальная страница – это сравнительно фиксированная позиция.Для пользователя начальная страница на сайте выполняет ту же роль, чтои Полярная звезда для путешественника. Если что-то не получается, вы всегда можете вернуться в исходную точку сайта – начальную страницу.
Отсутствие реальных физических ориентиров имеет как положительные, таки отрицательные стороны. Ощущение «невесомости» – когда нет понятий влево,вправо, верх, низ – довольно увлекательно и отчасти объясняет, почему в Интернете так легко потерять счет времени, подобно тому, как мы уходим с головойв хорошую книгу.
С другой стороны, это помогает объяснить, почему мы вообще используем такойтермин, как веб-навигация, – ведь мы не применяем слово «навигация» по поводу перемещения внутри магазина или библиотеки. Если заглянуть в словарь, томы узнаем, что «навигация» связана с двумя понятиями: перемещением из одного места в другое и определением собственного местонахождения.
Мне кажется, что мы используем это слово по отношению к Интернету, потомучто «определение собственного местонахождения» – это довольно серьезная проблема, которую в Интернете решить труднее, чем в физическом пространстве.По сути дела, оказавшись в Интернете, мы «теряемся» в нем, и у нас нет возможности заглянуть через «товарные ряды», чтобы узнать, где же мы находимся.Таким образом, веб=навигация служит для того, чтобы компенсировать эту проблему отсутствия «ощущения места» с помощью внесения определенной иерархии в структуру сайта, тем самым искусственно создавая понятие «здесь».
Навигация – это не какая-нибудь «примочка» для веб-сайта, это и есть сам сайт,аналогично тому, как здание, торговые полки и кассы – это магазин. Без этоговеб-пространство не возникает.
Вывод? Веб-навигация должна быть хорошей.
Другие назначения навигации
Два назначения навигации вполне очевидны: одно из них – помочь пользователю найти то, что он ищет, а другое – указать текущее местоположение.Третье назначение мы обсудили только что:
- Навигация дает почву для ног. Заблудиться где-либо – это, как правило, неочень весело. (Что бы вам больше понравилось: «потерять свою дорогу» или«знать куда идти»?) Если навигация разработана правильно, то она дает почву (пусть и виртуальную) для ног пользователя, а также служит в качествеперил, на которые можно опереться.
Навигация также имеет и другие не менее важные функции, которые, однако,часто забываются
-Навигация помогает понять, что здесь находится. Будучи визуальным образом иерархии, навигация позволяет разобраться в содержании сайта. Другими словами, навигация помогает обнаружить содержание! И эта функциянавигации даже более важна, чем функция направления или определенияместонахождения.
- Навигация помогает понять, как пользоваться сайтом. Если навигация разработана правильно, то она самым явным образом показывает пользователю,откуда следует начинать и какие он имеет возможности. Хорошая навигация должна заменить собой все «инструкции» вместе взятые (тем более чтобольшинство пользователей все равно проигнорирует эти «инструкции»).
- От навигации зависит степень доверия пользователей к разработчикам сайта. Когда мы находимся на каком-то сайте, мы постоянно про себя оцениваем работу дизайнеров: «Эти ребята действительно хорошо все сделали?».И наша оценка является основным фактором, определяющим наше отношение к сайту. От нее зависит, придем ли мы на этот сайт еще раз или нет. Естественно, что тщательно разработанная навигация – это одна из возможностей произвести благоприятное впечатление на пользователя.
Условности, применяемые для навигации
Физические пространства в виде городов или зданий (и даже информационныепространства в виде, например, книг и журналов) снабжены своими навигационными системами, в которых со временем появлялись свои условности в видедорожных указателей, номеров страниц или заголовков. Условности в той илииной степени определяют внешний вид и расположение навигационных элементов, чтобы при необходимости нам было легко их находить и использовать.Размещение этих элементов в стандартных местах позволяет быстро и без усилий определять их положение, а унифицированный вид дает возможность быстро различить их на странице.Например, мы привыкли видеть дорожные знаки на углах улиц, мы знаем, чтодля того чтобы их увидеть, нужно смотреть вверх (а не вниз), и мы привыклик тому, что обычно они устанавливаются горизонтально, а не вертикально.

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

Сейчас вроде не видно, но, по-моему,оно преследует нас
Веб-дизайнеры используют термин постоянная навигация (persistent navigation), или глобальная навигация (global navigation), для описания навигационных элементов, которые появляются на каждой странице.

Грамотно разработанная постоянная навигация должна как бы говорить (желательно тихим и успокаивающим тоном):
Навигация всегда с вами. Некоторые ее элементы будут немного изменяться в зависимости от того, где именно вы находитесь. Но она всегда будет здесь и всегда будет работать одинаковым образом.
Факт того, что навигация появляется в одном и том же месте на каждой странице и имеет при этом одинаковый вид, служит для пользователя мгновенным подтверждением того, что он находится на том же сайте, а это намного важнее, чемможет показаться на первый взгляд. А унификация внешнего вида навигациидает возможность пользователю (к счастью!) только один раз узнать, как она работает, и затем уже использовать ее не задумываясь.Постоянная навигация должна включать в себя пять элементов, которым следует быть под рукой в любой момент:

Мы рассмотрим каждый элемент подробно через минуту, но сначала...
Разве я сказал «на каждой странице»?
Я ошибся. На самом деле есть два исключения для правила «навигация должнапреследовать пользователя везде»:
- Начальная страница. Начальная страница отличается от других страницсайта. Она выполняет особые задачи и несет особую нагрузку. Как мы увидим в следующей главе, иногда имеет смысл не использовать на ней постоянную навигацию.
- Формы. На страницах, где находятся специальные формы, предназначенныедля заполнения, использование постоянной навигации может иногда оказаться излишним и только отвлекать внимание пользователя. Например, при оплате покупок в интернет-магазине от пользователя не требуется ничего кроме заполнения нужных форм. Это относится и к случаям, когда нужно зарегистрироваться, или дать ответ, или выбрать собственные настройки.
На страницах такого типа желательно иметь только минимальную версиюпостоянной навигации, в которую нужно включить логотип сайта, ссылкуна начальную страницу и несколько сервисов, которые могут помочь пользователю заполнить нужные формы.
Теперь я знаю, что мы не в Канзасе
Логотип или название сайта выполняет для него ту же роль, что и вывескана входе в какое-либо учреждение. Когда я иду в магазин, мне достаточно на входе увидеть вывеску, чтобы внутри магазина точно знать, что я нахожусь в немдо тех пор, пока не выйду. Другое дело Интернет: здесь основной способ перемещения – это телепортация, и поэтому мне нужно видеть эту «вывеску» на каждой странице.

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

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

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

