ИДЕЯ НАХОЖУСЬ?
Перевод оригинальной статьи Дерека Повазека Where Am I?
Translated with the permission of A List Apart Magazine
Перевод Кирилла Грушко
На двенадцатом году эпохи Интернета рассуждения о веб-навигации звучат избито. И все-таки держу пари, что ни один веб-дизайнер не может похвастаться созданием совершенной системы навигации по сайту. По крайней мере, ваш покорный слуга этим похвастаться не может, и поэтому считает целесообразным ещё раз обратиться к первоосновам.
В мире Интернета «навигация» означает нечто большее, нежели ссылки. Смысл системы навигации, как и других элементов веб-дизайна, заключается в установлении диалога с пользователем. Хорошая система навигации сродни рассказу, а в рассказе, как известно, не обойтись без начала, кульминации и завершения. Аналогичным образом, систему навигации можно разделить на три составляющие, необходимые для сообщения пользователю о его прошлом, настоящем и будущем. Всякая сквозная навигационная система должна незамедлительно отвечать на три вопроса, терзающих подсознание посетителя веб-сайта:
- Где я? (настоящее)
- Куда я? (будущее)
- Откуда я? (прошлое)
Откройте в Интернете любую страницу, на выбор. Причем не домашнюю страницу, а глубоко погруженную в пучину сайта. Сможете ли вы ответить на упомянутые вопросы, не оглядываясь на строку URL и не наводя указатель мыши на ссылки, для вызова всплывающих подсказок? Удастся ли вам постичь настоящее, будущее и прошлое, полагаясь лишь на зрительную информацию, представленную на странице? Большинство сайтов не дадут вам такой возможности, как это ни прискорбно для эпохи современного Web 2.0.
Кому это надо?
Исследования подтверждают очевидный факт: если сайт предлагает посетителю товар, и его владелец заинтересован в постоянном покупателе, то основой пользовательского доверия к такому сайту является внятная и надежная система навигации. А без доверия далеко не уедешь. Поставьте себя на место покупателя – доверили бы вы номер своей кредитной карты уличному торговцу, облик которого недвусмысленно свидетельствует о его не менее уличном происхождении? Даже если владелец сайта ничего не продает, доверие к нему скажется на восприятии содержимого сайта. Запишет ли пользователь страницу в «избранное»? Вернется, или предпочтет хлопнуть дверью, чтобы не появляться больше?
Три нехитрых правила.
Предлагаю вниманию читателя три проверенных временем совета по созданию внятной схемы навигации.
1. Не посылайте пользователя туда, где он находится.
Однажды я ехал по калифорнийскому шоссе, сверяясь с картой Mapquest. Карта настоятельно рекомендовала свернуть с шоссе и спустя несколько метров повернуть направо… на то же самое шоссе. А я-то полагал, что уже несколько минут по оному шоссе еду. Как можно было заблудиться… Не упражняясь в эпитетах по поводу транспортной системы Калифорнии, скажу лишь, что подобных осложнений на веб-сайте избежать легко. Достаточно вспомнить, что навигация сродни рассказу.
Когда пользователь наводит указатель мыши на ссылку, указатель принимает вид руки, возвещающей: «Путь свободен. Нажимайте смело, и окажетесь в надлежащем месте». Щелкая по кнопке мыши, пользователь вправе ожидать исполнения обещания, но если этого не происходит, ему становится неуютно, его сознание полнится сомнениями… Считайте, что доверие к такому сайту подорвано.
Поразительно, сколь многие веб-дизайнеры допускают эту простейшую ошибку! Не избежал её и всенародно любимый Flickr, славящийся качеством интерфейса и получивший награду Webby-2006 именно в категории «навигация». Взгляните хотя бы на отсылку к домашней странице, расположенную… на домашней странице этого сайта! К чему может послужить подобная отсылка, как не к полнейшему замешательству пользователя?
Я уверен, что создатели Flickr не намеревались смущать пользователей бестолковой системой навигации. В чем же дело? Лично я склонен грешить на «ленивые» системы управления контентом. Большинство подобных систем используют сквозной шаблон для непринужденного внесения изменений по всему сайту. Что вполне оправданно: для замены ссылок на каждой странице и встраивания многочисленных переключателей if/then потребуется уйма времени. Однако уверяю вас: это время будет потрачено не зря! Стоит, например, придать объекту навигации вид обычного текста и лишить его ссылки на ту же самую страницу, как пользователь, руководимый одним внешним видом объекта, начнет ориентироваться во времени и пространстве.
Единственно возможное исключение из правила – якорные ссылки. Как известно, они ведут пользователя не на новую страницу, а в другой раздел той же страницы. Такие ссылки могут приводить в замешательство, особенно если среди них все-таки встречаются ссылки на другие страницы. Очевидное решение – придавать якорным ссылкам иной вид; эта незамысловатая процедура выполняется с помощью CSS. Ещё способ – использовать якорные ссылки лишь в самых критических случаях.
2. Укажите пользователю его место.
Данное предписание, как и предыдущее, имеет целью ненавязчиво указать пользователю его местонахождение, дабы избежать лишних поводов к панике. В практическом смысле это означает следующее: когда посетитель переходит на титульную страницу некоего раздела (скажем, awsomeness.org/section), ссылка на данный раздел утрачивает ссылочные свойства и превращается в текстовой заголовок, ясно свидетельствующий о местонахождении пользователя. Впоследствии, когда посетитель покидает титульную страницу и достигает одну из конечных страниц раздела (awsomeness.org/section/page), упомянутый сквозной элемент навигации вновь превращается в ссылку, однако ее внешний вид отличается от аналогичной ссылки, расположенной на домашней странице (ибо пользователь уже находится внутри раздела).
3. Семь раз подумай, один – сошлись.
Ознакомившись с означенными правилами, читатель, возможно, окрестит меня «господином Банальность». В таком случае, нижеследующий совет приведет его в полнейший экстаз. Я призываю бросить все интеллектуальные силы на обдумывание каждой ссылки в системе навигации сайта. Задайтесь вопросом, нуждается ли посетитель в данной ссылке при просмотре данной страницы? Совсем не обязательно отображать на странице ее место в иерархии сайта. А если все-таки понадобилось, то следует внушить пользователю: эта ссылка абсолютно необходима для просмотра и использования сайта. Так что призываю делать осознанный выбор и рассматривать все части навигационной системы в качестве опознавательных знаков сайта. Пусть система навигации рассказывает историю, которую вы намереваетесь поведать посетителю.
Я отдаю себе отчет, что данный совет скорее породит вопросы, нежели ответит на них. Как примеру: является ли «домашняя страница» сквозным элементом навигации? Каково минимально допустимое количество таких элементов? Уместно ли использовать ниспадающие меню? Или, может быть, ограничиться закладками? Ответ на эти и другие вопросы один: все зависит от обстоятельств. Ваш сайт прежде всего нужен пользователям – как живым, так и порожденным вашим воображением. Поэтому завещаю: тестируйте, тестируйте и еще раз тестируйте!
Всё в одном.
А теперь – «внимание на экран».
Сквозная навигация на сайте awsomeness.org. Домашняя страница.
Ссылка на второй раздел («SectionTwo») выделяется подчеркиванием при наведении курсора мыши.
Переходим на титульную страницу раздела (awesomeness.org/section). Обратите внимание: «SectionTwo» является уже не ссылкой, а заголовком, составляющим одно целое со страницей. Это подчеркивает причастность заголовка к расположенному под ним содержимому.
При переходе к одной из страниц второго раздела (awesomeness.org/section/page), «SectionTwo» вновь превращается в ссылку, напоминающую пользователю о его местонахождении, и одновременно возвращающую его к титульной странице раздела. Синий цвет гласит, что перед пользователем именно ссылка.
При наведении указателя мыши ссылка, как обычно, выделяется подчеркиванием.
Приведенные иллюстрации – хороший пример последовательного использования зрительных образов. Пользователь может определить свое местонахождение с первого взгляда на закладку. Ссылки непременно выделяются синим цветом и подчеркиваются при наведении указателя мыши.
Разумеется, существуют иные способы зрительного воплощения идеи. Данный пример иллюстрирует лишь один из наиболее очевидных приемов. Если читатель безуспешно пытается воспроизвести его на своем сайте (поскольку, скажем, одна из страниц присутствует сразу в нескольких местах), то такой сайт можно без зазрения совести назвать проблемным. В этом случае потребуется призвать на помощь иные визуальные средства, или изменить иерархию сайта.
Навигация – скромная рабочая лошадка веб-дизайна, заслуживающая большего внимания, нежели ей обычно уделяется. Посетители сайта – туристы в незнакомом городе. Доставьте им удовольствие – сориентируйте на местности, помогите попасть в желаемую точку. Если вы будете достаточно гостеприимны, может статься, они захотят посетить вас вновь. Но если вы предоставите их судьбе… что же, тогда не ждите от судьбы подарков!