Не заставляйте меня думать! Часть 2

Эта статья — продолжение серии, посвященной книге Стива Круга (Steve Krug) «Веб-дизайн, или Не заставляйте меня думать!». Первая часть была опубликована в «Мегабайте» №23'2004.

4. Животное, растение или камень?
Веб-дизайнеры уже давно ведут спор о том, сколько раз пользователи в поиске того, что им нужно, могут щелкнуть мышью, не потеряв при этом интерес. Я же думаю, что пользователь не задумывается о количестве щелчков до тех пор, пока каждый клик проходит легко, а сам он сохраняет уверенность, что движется в верном направлении. В интернете, к сожалению, нечасто можно легко сделать выбор.
Например, если я зайду на страницу Virus Updates на сайте Symantec для обновления программы Norton AntiVirus, мне следует выбрать используемый мной продукт. Предлагаемый на сайте вариант “NAV for Windows 95/98” не вполне ясен. Я, конечно, понимаю, что каждый, кто работает на Symantec, прекрасно знает, что аббревиатура NAV и название Norton AntiVirus — это одно и то же, но все же это требует некоторого момента доверия с моей стороны.
Другой пример. Когда я собираюсь что-то купить для моего домашнего офиса, мне часто приходится сталкиваться с выбором между Home и Office. Те же чувства я испытываю, если передо мной два почтовых ящика, на одном из которых надпись “Только конверты с маркой”, на другом — “Только маркированные конверты”, а у меня в руках всего лишь почтовая открытка. Что будет, если я выберу неправильный ящик?

5. Опустите лишние слова: искусство не писать
Из пяти или шести вещей, которые мне довелось узнать в школе, одна мне запомнилась больше других и оказалась самой полезной. Это семнадцатое правило из “Основы стиля” Э. Б. Уайта:
Опустите лишние слова. Хорошее письмо всегда кратко. Предложение не должно содержать ненужных слов, а абзац не должен содержать ненужных предложений по той же самой причине, по которой на холсте не должно быть ненужных линий, а в машине — ненужных деталей.
Большая часть слов на многих веб-страницах просто занимает место, потому что вряд ли кто будет эти слова читать. Эти слова делают некоторые страницы более “серьезными”, чем они есть на самом деле. На большинстве сайтов можно легко удалить половину слов без каких-либо существенных потерь для содержания.
Удаление всех тех слов, которые все равно никто не будет читать, имеет несколько полезных следствий:
• снижает уровень шума на страницах;
• выделяет то содержание страниц, которое действительно является ценным и полезным;
• позволяет укоротить страницы так, чтобы пользователи могли видеть каждую из них, не прокручивая экран.
Есть два особых вида текстов: “общая болтология” и “инструкции”.
Никакой “общей болтологии”.
Это вступительные тексты, служащие для того, чтобы поприветствовать нас на сайте и рассказать о том, какой он замечательный, или же сообщить нам о содержании раздела, в который мы вошли. У большинства пользователей нет времени на такие разговоры — они хотят сразу приступить к сути.
Никаких “инструкций”.
Главное, что следует знать об “инструкциях”, — это то, что их никто не собирается читать, по крайней мере, пока попытки использовать сайт “как получится” успешны. Вам следует полностью устранять “инструкции”, делая все ясным без лишних объяснений (“самоочевидным”). Если инструкции все же действительно необходимы, сократите их до минимума.

6. Разработка навигации
Это правда: люди не станут пользоваться вашим сайтом, если им не будет понятно, как по нему перемещаться.
Посещение веб-сайта во многом напоминает посещение магазина: обычно вы хотите что-то найти. В “реальном” мире это может быть банка консервов, в интернете — самый дешевый четырехголовочный видеомагнитофон. Если вы не нашли то, что вы искали, вы уходите.
Однако пространство интернета не имеет­ тех ориентиров, на которые мы опираемся в реальном пространстве. Веб-навигация служит для того, чтобы компенсировать отсутствие “ощущения места” с помощью внесения определенной иерархии в структуру сайта, тем самым искусственно создавая понятие “здесь”. Навигация — это не какая-нибудь “примочка” для веб-сайта, это и есть сам сайт, подобно тому, как здание, торговые полки и кассы — это магазин. Вывод? Веб-навигация должна быть хорошей.
Два назначения навигации вполне очевидны:
• помочь пользователю найти то, что он ищет;
• указать текущее местоположение.
Есть и другие, не менее важные функции.
• Навигация помогает понять, что здесь находится, позволяет разобраться в содержании сайта.
• Навигация помогает понять, как пользоваться сайтом. Если навигация разработана правильно, она самым явным образом показывает пользователю, откуда следует начинать и какие он имеет возможности.
• Тщательно разработанная навигация — одна из возможностей произвести благоприятное впечатление на пользователя.
Условности навигации: расположение навигационных элементов в стандартных местах позволяет без усилий определять их положение, а унифицированный вид дает возможность быстро их различить на странице. Основные навигационные элементы:
• название и логотип сайта;
• название страницы;
• разделы и подразделы;
• сервисы;
• локальная навигация (ссылки нижнего уровня);
• индикатор “вы находитесь здесь” (указатель местонахождения);
• форма поиска или ссылка на окно поиска.
Глобальная навигация — навигационные элементы, которые появляются на каждой странице. Тот факт, что навигация появляется в одном и том же месте на каждой странице и имеет при этом одинаковый вид, служит для пользователя мгновенным подтверждением того, что он находится на том же сайте, — а это намного важнее, чем может показаться на первый взгляд. Унификация внешнего вида навигации дает возможность пользователю один раз узнать, как она работает, и затем уже использовать ее, не задумываясь.
Постоянная навигация должна включать в себя пять элементов:
• название сайта;
• ссылку на начальную страницу;
• сервисы;
• поиск;
• разделы верхнего уровня.
Есть два исключения для правила “навигация должна преследовать пользователя везде”: начальная страница (она выполняет особые задачи и отличается от других страниц сайта) и формы, предназначенные для заполнения (постоянная навигация при этом только отвлекает внимание пользователя; нужны только логотип, ссылка на начальную страницу и несколько сервисов, которые могут помочь пользователю заполнить нужные формы).
Логотип или название сайта выпол­няют для него ту же роль, что вывеска на входе в магазин: мне достаточно увидеть эту вывеску, чтобы внутри магазина точно знать, что я нахожусь в нем, до тех пор, пока не выйду. Поскольку в интернете основной способ перемещения — телепортация, то мне нужно видеть эту “вывеску” на каждой странице.
Мы ожидаем, что логотип сайта будет находиться в верхнем левом углу или в непосредственной близости к нему. Логотип представляет сайт в целом и занимает верхнюю позицию в логической иерархии, и в визуальной иерархии каждой страницы следует сохранить эту доминирующую позицию. Кроме того, логотип должен выглядеть как логотип, то есть иметь особый стиль шрифта и графики.
Разделы. Панель разделов содержит ссылки на основные категории, представляющие верхний уровень навигации сайта. В большинстве случаев постоянная навигация содержит также и второй уровень, то есть список подразделов текущего раздела.
Сервисами называются ссылки на довольно важные компоненты сайта, не принадлежащие к иерархии смыслового содержания. Это либо разделы, которые помо­гают пользоваться сайтом, например, “Карта сайта”, “Корзина”, либо разделы, которые содержат информацию о создателе сайта, например “О нас”, “Как с нами связаться”. Список сервисов должен быть менее заметен, чем список разделов сайта.
Ссылка на начальную страницу, расположенная на видном месте, дает пользователю уверенность, что, даже заблудившись в недрах сайта, с ее помощью он всегда сможет начать все сначала. Можно порекомендовать либо включить ссылку “В начало” в строку разделов или сервисов, либо (на каждой странице, кроме начальной) добавить к логотипу сайта выражение “В начало” и сделать его ссылкой.
Поиск. Имеет смысл помещать окно поиска или соответствующую ему ссылку на каждой странице сайта. Большой процент пользователей, впервые посетив сайт, сразу начинают разыскивать что-нибудь, напоминающее окно поиска.
Формула окна поиска проста: окно, кнопка и слово “Поиск”. Не усложняйте жизнь пользователям вашего сайта — придерживайтесь этой простой формулы, учитывая следующее:
• Не используйте непривычных названий. Пользователи будут искать слово “Поиск”.
• Избегайте инструкций. Если вы будете придерживаться этой формулы, то любой, кто пользовался интернетом хотя бы пару дней, сможет разобраться с окном поиска.
• Чтобы избежать путаницы с широтой поиска (весь сайт? часть сайта?), обязательно обозначьте области поиска понятным словом. Однако хорошо продумайте опции ограничения области поиска и расширения запроса: редко необходимость задумываться над этими опциями оправдывается пользой от их добавления. Если вы хотите дать пользователю возможность расширенного поиска, дайте ее тогда, когда это действительно нужно — если по запросу было получено слишком много результатов. Кроме того, вам следует убедиться, что поиск работает правильно.
Вторичная, третичная и какая еще там навигация. На многих сайтах, как только вы проходите через второй структурный уровень, навигация перестает работать и становится произвольной: мало кому приходило в голову продумывать сайт настолько глубоко. Тем не менее, пользователи тратят на страницы с нижних уровней иерархии сайта не меньше времени, чем на верхние уровни. Если сразу тщательным образом не разработать навигацию для всей структуры сайта, то потом последовательно дополнять ее будет намного труднее.
Названия страниц. Нужно знать четыре вещи относительно названий страниц.
• Каждая страница должна иметь название. Некоторым дизайнерам кажется, что достаточно всего лишь выделить название страницы в навигации. Тем не менее, этого недостаточно, и на странице должно быть ее название.
• Название страницы должно находиться в правильном месте. Оно должно “обрамлять” расположенное на ней содержание. В этом состоит основная задача названия, а не навигации и не рекламы.
• Название страницы должно быть заметным. Позиция, размер, цвет и шрифт названия должны ясно показывать, что это заглавие для всей страницы в целом.
• Название страницы должно соответствовать названию ссылки, по которой я щелкнул. В случае, когда это правило на сайте нарушается, мне приходится, пусть даже на миллисекунду, задуматься: “Почему это отличается от того?” Мое доверие к сайту снижается.
“Вы находитесь здесь”. Одна из задач навигации — указывать пользователю его текущее местоположение на сайте. В интернете это осуществляется с помощью выделения текущей позиции во всех навигационных меню, линейках и списках, используемых на странице. Самым распространенным недостатком указателей “Вы находитесь здесь” является их слабая выраженность. Такие указатели должны ясно выделяться.
“Хлебные крошки” показывают путь от начальной страницы до текущего местоположения. Другими словами, одно показывает вам, где вы находитесь в общей схеме сайта, другое — как туда добраться. Для большинства сайтов использования только “хлебных крошек” недостаточно для создания полноценной навигационной системы. С их помощью невозможно полностью показать иерархию сайта в ее верхних уровнях.
Они полезны как дополнение к полноценной навигационной системе. Несколько советов:
• помещайте “хлебные крошки” в верхней части страницы, чтобы они не соперничали с основной навигацией;
• между уровнями используйте символ “>”. Визуально он предполагает движение вперед на следующий уровень;
• применяйте небольшой размер шрифта;
• используйте слова “Вы находитесь здесь”;
• последний элемент списка должен быть названием текущей страницы. Применяйте к нему жирное начертание;
• не используйте “хлебные крошки” вместо названия страницы. Это противоречит нашему ожиданию увидеть заголовок слева или по центру, а вовсе не висящим где-то посередине страницы в конце списка.
Тестирование. Дизайнеры склонны думать, что пользователи сначала знакомятся с начальной страницей сайта, и только потом переходят непосредственно к страницам, пользуясь аккуратными дорожками, которые для них подготовили. В действительности, пользователь зачастую оказывается в середине какого-то сайта, не представляя, где он находится. Возьмите первую попавшуюся страницу и протестируйте ее. Если эта страница грамотно разработана, вы без всяких затруднений ответите на следующие вопросы:
• Что это за сайт (логотип сайта)?
• На какой странице я нахожусь (название страницы)?
• Какие главные разделы на этом сайте (разделы)?
• Какие опции есть на этом уровне (локальная навигация)?
• Где именно я нахожусь в общей структуре сайта (указатели “Вы находитесь здесь”)?
• Каким образом осуществляется поиск?



Рекомендуем почитать: