Веб-Дизайн: книга Стива Круга или "не заставляйте меня думать!"

- СТАРЕЙШИЙ ИнтернетМАГАЗИН РОССИИ
Интернет-магазин Books.Ru
основан в 1996 году. Мы торгуем книгами по всему миру,
- 8 Лет
НА
РЫНКЕ
доставляя их в самые удаленСКИДКИ ПОСТОЯННЫМ ные города и страны.
Самые новые и интересные
ПОКУПАТЕЛЯМ
книги, диски и видеокассеты
- БЕЗОПАСНОСТЬ ПОКУПОК вы всегда сможете найти у нас
первыми. Интересный ассор-
тимент, оперативная доставка
и удобные способы оплаты делают покупки в нашем магазине приятным времяпрепровождением.
Постоянство и надежность
нашей работы гарантируют
безопасность покупок. Ждем
вас в нашем магазине!
Books.Ru - ваш ближайший книжный магазин
тел/факс Москва (095) 945-8100
Санкт-Петербург (812) 324-5353
или не заставляйте меня думать!
Серия « Библиотека дизайнера»
Стив Круг
Веб-дизайн: книга Стива Круга
или «не заставляйте меня думать!»
Перевод Ю. Асотова
Главный редактор
Зав. редакцией
Научный редактор
Литературный редактор
Художник
Верстка
Корректура
А. Галунов
Н. Макарова
А. Михайлов
Л. Ага
С. Борин
С. Рубашкин
С. Журавина
Круг С.
Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!» - Пер. с англ. СПб: Символ-Плюс, 2005. - 200 с: цв. ил.
ISBN 5-93286-021-9
Книга, предлагаемая вашему вниманию, написана для специалистов-практиков дизайнеров, программистов, вебмастеров, менеджеров, маркетологов. Большую
пользу для себя и возглавляемых ими проектов извлекут из этого руководства те, кто
платят деньги. Сайты современных крупных компаний сегодня во многом определяют судьбу последних. Однако топ-менеджеры не всегда достаточно компетентны в
вопросах юзабилити, которые в последнее время приобрели решающее значение.
Принципы успешного веб-дизайна описаны автором предельно ясно и с чувством
юмора, а их освоение поможет вам задавать экспертам правильные вопросы и получать ответы, которые позволят находить решения трудных технических, эстетических и структурных проблем разработки сайтов.
ISBN 5-93286-021-9
ISBN 0-7897-2310-7 (англ)
© Издательство Символ-Плюс, 2001
Authorized translation from the English language edition, entitled «Don4 Make Me Think!
A Common Sense Approach to Web Usability», published by Que, Copyright © 2000
Все права на данное издание защищены законодательством Российской Федерации, включая право на полное или частичное воспроизведение в любой форме.
Издательство «Символ-Плюс». 199034, Санкт-Петербург, 16 линия, 7,
тел. (812) 324-5353, edit@symbol.ru. Лицензия ЛП N 000054 от 25.12.98.
Налоговая льгота - общероссийский классификатор продукции
ОК 005-93, том 2; 953000 - книги и брошюры.
Подписано в печать 11.02.2005. Формат 70Х90716- Бумага офсетная.
Печать офсетная. Объем 12,5 печ. л. Доп. тираж 2000 экз. Заказ № 292.
Отпечатано в ФГУП «Печатный двор» им. А. М. Горького Министерства РФ
по делам печати, телерадиовещания и средств массовых коммуникаций.
197110, Санкт-Петербург, Чкаловский пр., 15.
Моему отцу, который всегда хотел,
чтобы я написал какую-нибудь книгу.
Моей матери,
которая всегда верила в меня.
Мелани, которая вышла за меня
замуж и оказалась самым большим
подарком моей судьбы.
А также моему сыну Гарри, книги которого,
я уверен, будут лучше, чем эта, если только
он пожелает их написать.
Содержание
Эксперт по юзабилити
ВВВДЕНИЕ
Readme. 1st
8
10
Откашливание и громкие заявления
ГЛАВА 1
Не заставляйте меня думать!
18
Первый закон Круга
ГЛАВА 2
Как мы в действительности используем
Интернет
28
Просматриваем, прикидываем и «делаем как получится»
ГЛАВА 3
Начальный курс по созданию рекламных
щитов
38
Разработка веб-страниц для просмотра, а не для чтения
ГЛАВА 4
Животное, растение или камень?
48
Почему пользователи любят выбирать не задумываясь
ГЛАВА 5
Опустите лишние слова
52
Искусство не писать
ГЛАВА 6
Дорожные знаки и «хлебные крошки»
Разработка навигации
58
ГЛАВА 7
Первый шаг к выздоровлению - это
признание того, что ваша начальная
страница не в порядке
104
Разработка начальной страницы
ГЛАВА 8
«Скотовод и пастух должны быть друзьями»
Почему споры относительно веб-дизайна и юзабилити
являются пустой тратой времени и как их избежать
ГЛАВА 9
Юзабилити-тестирование за 10 центов в день
138
146
Как упростить тестирование, чтобы сделать его доступным
ГЛАВА 10
Юзабилити-тестирование: снимаем кино
162
Как проводить тестирование
ГЛАВА 11
Чтобы не выплеснуть с водой и ребенка
180
Интерпретация результатов тестирования
Рекомендуемая литература
186
Благодарности
190
Предисловие
эксперт по юзабилити1
Господь наделил Стива Круга уникальной способностью к своего рода кратковременной «потере» памяти, что позволяет ему каждый раз смотреть на любой сайт
как бы впервые. Способность Стива к свежему взгляду и его поразительное умение
извлекать практический опыт из того, как другие используют Интернет, сделали
эту книгу, автором которой он является, особенно ценной.
Я впервые встретил Стива в 1997 году, когда сам помогал @Home Network в качестве творческого консультанта. Стив занимался тем, что заглядывал через головы дизайнеров с целью убедиться, что они не слишком увлекаются визуальными идеями, которые, в конце концов, могли бы привести пользователей в
замешательство. Я предложил ему сотрудничать с нашей компанией (позже вошедшей в состав Circle.com) в качестве эксперта по юзабилити онлайн ресурсов,
чтобы помочь дизайнерам в создании сайтов, структура которых была бы с самого
начала простой и ясной для пользователей.
Метод, который применяет Стив для оценки удобства и простоты использования
веб-ресурсов, не сводится к тому, чтобы загнать тысячи подопытных в специальные лаборатории, прикрепить электроды к их головам и отследить каждую их
мысль и реакцию во время просмотра того или иного сайта. Его метод, скорее,
заключается в наблюдении за тем, каким образом обычные люди в обычных условиях находят (или не находят) нужный путь на сайте. Такие наблюдения лучше
всего проводить в офисе или домашней обстановке через обычный доступ в Интернет, и для их проведения не нужно создавать специальные фокусные группы.
Юзабилити (от англ. usability) - простота и удобство использования веб-сайта. Примеч. науч. ред.
Книга не содержит ни утомительных статистических отчетов о тысячах часов лабораторных исследований, ни множества специальных экспертных терминов. В
ней, скорее, описываются тонкие эмпирические наблюдения, которые сопровождаются конкретными рекомендациями по решению фундаментальных проблем вебдизайна.
За время нашей со Стивом совместной работы (в масштабах Интернета это целая
жизнь) я понял, что если с самого начала привлечь к проекту хорошего эксперта
по юзабилити, то можно избежать до 80% ошибок, которые обычно делаются в
информационной архитектуре сайтов. Если же потратить больше денег и нанять
целую группу экспертов, то это позволит избежать еще 10% ошибок. Остальные
10% вам помогут исправить пользователи - ваши главные эксперты.
Однако имея данную книгу, можно не обращаться за помощью к экспертам, поскольку в ней содержится большая часть ценного опыта одного из них, Стива
Круга. Приобретя книгу, вы уже сэкономили много денег. И если вы сумеете усвоить изложенные в ней идеи, то сэкономите еще больше.
Роджер Блэк
октябрь 2000
Введение
R
e
a
d
m
e
.
1 s t
Откашливание и громкие заявления
Эта поездка действительно необходима?
Плакат времен Второй мировой войны,
агитирующий за экономию бензина
к
огда я рассказывал, что пишу книгу о том, как делать то, что делаю я,
мне всегда задавали один и тот же вопрос: «А вы не боитесь потерять свою
собственную работу?..»
Действительно, у меня великолепная работа!
>
Клиенты присылают мне макеты страниц, которые они предполагают использовать на своем сайте, или сообщают адрес уже существующего, если требуется
его модернизировать.
Начальная страница дизайн А
Начальная страница дизайн В
Я просматриваю дизайн страниц или захожу на
сайт, чтобы оценить, насколько удобно и просто такими страницами пользоваться (это называется
«экспертной оценкой юзабилити»). Иногда я нанимаю других людей, чтобы они попробовали использовать тестируемый сайт в моем присутствии (т.н.
«юзабилити-тестирование»)1.
> Затем я пишу отчет, в котором описываю проблемы
практического использования данного ресурса (т.н.
«проблемы юзабилити») и предлагаю возможные
способы их решения.
Существующий сайт
>
1
Не путать с вуайеризмом.
Отчет о тестировании
веб-ресурса
12
Введение
>
Я могу работать с группой разработчиков того или иного сайта, чтобы помочь
им разрешить выявленные проблемы.
Иногда я консультирую по телефону...
>
...иногда лично
Затем мне платят гонорар.
В качестве консультанта я участвую в интересных проектах и сотрудничаю с
приятными и умными людьми, и в результате нашей совместной работы сайты
становятся более простыми и удобными для пользователей. Большую часть времени я работаю дома - мне не нужно каждый день присутствовать на скучнейших совещаниях и меня не касаются вопросы административной политики. Мое
дело - это говорить то, что я думаю, и именно за это мне платят клиенты. Хорошо платят.
Поверьте, я бы не хотел что-то необдуманно менять в жизни, - она вполне меня
устраивает.
Но в действительности так много сайтов нуждается в переработке, а специалистов, умеющих делать то, что делаю я, так мало, что вряд ли когда-нибудь моя
работа закончится, разве только рухнет сегодняшний бум, связанный с Интернетом.
Многие люди, не имеющие никакого или по крайней мере достаточного опыта,
неожиданно стали ответственными за крупнобюджетные проекты, связанные с
будущим целых компаний. Они нуждаются в специалистах, способных показать
им, как действовать правильно.
Readme.ist
13
Например, графические дизайнеры и разработчики сталкиваются с задачами
по разработке интерфейсов, таких как схемы взаимодействия с пользователем (что
произойдет после того, как пользователь щелкнет мышью здесь или там) или так
называемая информационная архитектура (как все организовано на сайте).
Однако большинство разработчиков не имеет лишних средств, для того чтобы пригласить консультанта по оценке юзабилити и уж тем более для найма его на постоянной основе.
Эту книгу я написал как раз для тех, кто не может себе позволить пригласить или
нанять специалиста, вроде меня. Возможно, книга окажется полезной даже тем,
кто работает вместе с экспертами в области юзабилити веб-ресурсов.
Во всяком случае, я надеюсь, что эта книга поможет вам избежать некоторых бесконечных и, на мой взгляд, «религиозных» споров относительно веб-дизайна, которые всегда отнимают много времени.
Это не высшая математика™
К счастью, лишь здравый смысл лежит в основе моей работы, и любой желающий может научиться такому подходу.
В конце концов, «юзабилити» означает, что некая вещь, будь то веб-сайт, реактивный двигатель или вращающаяся дверь, приспособлена к использованию
настолько хорошо, что человек со средними или ниже средних способностями и
обычным жизненным опытом сможет легко применять ее по назначению.
Однако разумное и здравое решение не всегда представляется очевидным, и зачастую только кто-то другой может вам его показать. 1
Естественно, если вы можете себе это позволить, наймите какого-нибудь эксперта. Но если это вам не по карману, я надеюсь, что книга поможет сделать все
самостоятельно (ведь у вас для этого есть бездна свободного времени).
...вот почему мое консультационное дело (в котором участвую только я да еще несколько расставленных в нужном порядке зеркал) называется «Продвинутый здравый смысл». «Это не высшая математика!» - мой фирменный девиз.
Введение
14
Да, эта книга небольшая
Я очень старался сделать эту книгу небольшой по объему в надежде, что вы сможете ее прочитать во время какого-нибудь длительного авиапутешествия. Я стремился к этому по двум причинам:
> Чем книга короче, тем с большей вероятностью читатель
сможет применить на практике ее содержание.1 Эту книгу
я писал для тех, кто занимается практической работой дизайнеров, разработчиков
сайтов, менеджеров, специалистов по маркетингу, а также для тех, кто выписывает
чеки, и тех, кто занимается
всем этим одновременно. Я
предполагаю, что у моего читателя не слишком много времени на чтение и он не является специалистом по юзабилити веб-ресурсов.
>
Человек не должен знать все
на свете. Как и любая область
знаний, область вопросов, касающихся понятия юзабилити, достаточно широка. Но углубляться в них имеет смысл только в том слу2
чае, если это является вашей профессией.
1
Еще один хороший принцип юзабилити: чем больших временных затрат что-либо
требует или может потребовать, тем меньше вероятность того, что это будет кемлибо использовано.
2
Мне очень нравится отрывок из рассказа «Этюд в багровых тонах», в котором доктор Ватсон с удивлением узнает, что Шерлок Холмс не знает, что Земля крутится
вокруг Солнца. Холмс объясняет это тем, что, обладая таким немощным разумом,
как человеческий, он не может позволить себе уделять бесполезным вещам больше
внимания, чем полезным: «Что мне толку в том, что мы вертимся вокруг Солнца?
Да пусть хоть вокруг Луны - это не сделало бы никакой разницы для меня или
моей работы».
Readme.1st
15
Я считаю, что наиболее ценное из внесенного мною в рабочие проекты основано
всего лишь на нескольких принципах юзабилити, которые я всегда держу в голове. И мне кажется, что для большинства людей полезнее усвоить эти простые
принципы, чем изучать длинный список рекомендаций о том, что следует и чего
не следует делать. В этой книге я попытался собрать вместе те простые вещи,
которые, я полагаю, следует знать каждому, кто занимается разработкой вебсайтов.
Чего здесь нет
Чтобы вы не тратили времени на поиски, ниже приводится список того, чего вы не
сможете найти в содержании этой книги:
>
«Единственно верного пути» для создания сайтов. Веб-разработкой я занимаюсь достаточно давно, чтобы знать, что не существует некого «правильного»
способа. Процесс создания сайта довольно сложен, и в большинстве случаев
ответом на все вопросы является «It depends» («Ну, это как посмотреть! Все
зависит от...» - англ.).1 Но я убежден, что можно определить несколько основных принципов, которые всегда имеет смысл учитывать. Именно эти принципы я попытаюсь донести до вас в своем изложении.
> Описания способов ведения бизнеса. Если история чему-то нас и учит, так это
тому, что методы Интернет-коммерции подобны автобусам: если вы пропустили один автобус, то все, что остается сделать, - это дождаться следующего. Я
не являюсь экспертом в сфере извлечения прибыли с помощью Интернета, но
даже если бы и был таковым, то все, что я сказал бы по этому поводу, к моменту
вашего чтения уже бы устарело.
> Предсказаний о будущем Всемирной Паутины. Ваши предположения о будущем Сети будут ничем не хуже моих. Мой опыт показывает, что большинство
предсказаний почти всегда оказываются ошибочными, и что вещи, которые
действительно являются важными, появляются неожиданно, хотя и кажутся
впоследствии совершенно очевидными.
>
Критики плохо разработанных сайтов. Если вам нравятся люди, которые любят смеяться над ошибками на чужих сайтах, то эта книга не для вас. Создание, разработка и поддерживание веб-сайта не является простым делом. Это
как в гольфе: есть всего несколько способов точно забить мяч в лунку - и мил-
В компании разработчиков User Interface Engineering (www.uie.com) сотрудники
консультационных групп под руководством Джарэд Спул даже носят особые футболки с надписью «It depends».
16
Введение
лион способов промахнуться. Всякий, кто хотя бы наполовину делает все правильно, уже заслуживает уважения.
Убежден, что учиться нужно на примере хороших сайтов, а не плохих. Поэтому в этой книге я старался говорить о сайтах, в которых есть лишь незначительные погрешности. Тем не менее, эти сайты можно считать превосходными.
> Примеров по всем возможным типам сайтов. Большинство приведенных примеров касается коммерческих сайтов, таких, например, как Интернет-магазины. Однако принципы, которые описываются в этой книге, могут быть применены и к любому другому типу сайтов, начиная, скажем, от домашней страницы моего соседа по дому и заканчивая сайтом футбольной команды, в которой
играет ваша дочь, или внутренними сетями вашей компании. Использование
примеров по всему жанровому разнообразию сайтов привело бы к большему
объему, а, значит, и к меньшей практической ценности этой книги.
Действующие лица
В книге я старался избегать понятий «пользователь» или «пользователи» не только для того, чтобы не делать содержание утомительным, но и для того, чтобы
побудить читателя ощутить себя веб-пользователем, о чем многие забывают, когда
занимаются непосредственно веб-разработкой. С этой целью условимся, что местоимения, использованные в книге, будут подразумевать следующее:
>
«Я» — означает меня, автора. В одних случаях я выступаю в роли эксперта
(например, «Я рекомендую своим клиентам сделать то-то и то-то»), в других
случаях говорю как обычный пользователь (например, «Если я не могу найти кнопку «Поиск»...»). Тем не менее, во всех случаях я подразумеваю только себя.
> «Вы» — означает вас, читателей, тех, кто занимается разработкой, созданием
и публикацией веб-сайтов, а также тех, кто за это платит.
>
«Мы» (например, «Как мы используем Интернет?») — означает всех вебпользователей. Сюда также входят «Вы» и «Я».
Иногда я могу отходить от этих правил, однако, надеюсь, что в этих случаях из
контекста будет понятно, о ком именно я говорю.
Readme.ist
17
Эта поездка действительно необходима?
Можно было бы привести некоторые впечатляющие данные статистики о том,
какие огромные суммы долларов будут затрачены в этом году на создание сайтов без учета юзабилити.
И раз уж вы держите в своих руках книгу, посвященную проблемам создания
удобных и простых в использовании сайтов, то, вероятно, важность этих проблем для вас очевидна. Из собственного пользовательского опыта вам, наверно,
известно, что чем больше внимания при разработке сайта уделено удобству его
использования, тем больший интерес, удовлетворение, и тем самым меньше разочарования вызывает этот сайт у посетителей, что повышает вероятность повторного посещения.
Мне кажется, что моя жена смогла выразить суть вопроса лучше, чем это могли
бы сделать статистические отчеты:
Надеюсь, что эта книга поможет вам создавать лучшие сайты, и даже - если удастся избежать лишних споров относительно их дизайна - хотя бы иногда возвращаться домой после работы пораньше.
Глава
Не заставляйте
меня думать!
Первый закон Круга
"Л
«Майкл, почему портьеры отдернуты?»
Кей Корлеоне, «Крестный отец», часть II
м
еня часто спрашивают:
«О чем следует прежде всего позаботиться,
чтобы веб-сайт был удобным в использовании?»
Ответ достаточно прост. Он еще проще, чем рекомендации типа «Все важное должно быть не дальше двух «кликов», или «Умейте говорить на языке пользователей» , или даже «Будьте последовательными».
Вот этот ответ...
«Не заставляйте меня думать!»
Уже многие годы я повторяю, что это Первый закон юзабилити. И чем больше
мне приходится изучать веб-страницы, тем больше я убеждаюсь, что это действительно так.
Это главный и основной принцип юзабилити, который является решающим при
оценке того, что и как работает (или не работает) в веб-дизайне. И если вы способны усвоить лишь один принцип веб-эффективности, то запомните именно его.1
Этот принцип означает, что в той мере, насколько этого можно достичь, веб-страница должна быть максимально простой, понятной и «самоочевидной».
Другими словами, я должен сразу «схватить» ее - понять, что на ней и как ей
пользоваться без затраты каких-либо усилий.
Что значит: простой, понятной и «самоочевидной»?
Страница должна быть настолько простой, чтобы, скажем, ваша соседка по дому,
не заинтересованная в предмете вашей работы и вряд ли представляющая, для
чего служит кнопка «Назад», могла бы взглянуть на заглавную страницу ваше-
1
На самом деле, есть альтернативный вариант Первого принципа: «Избавьтесь от
половины слов на каждой странице, затем уберите еще половину из того, что осталось». Ему будет посвящена отдельная глава.
20
Глава 1
го сайта и сказать: «О! Это ...». (Она, конечно, воскликнет : «О! Это .... Как мило!».
Но это уже другой вопрос.)
Приведем другой пример.
Когда я смотрю на страницу, не требующую особого размышления, в голове возникает что-то вроде «Так, понятно, это вот это... а это вот то... а вот это то, что мне
нужно».
Не заставляйте меня думать!
21
Но когда я смотрю на страницу, которая заставляет меня думать, все мои мысли
принимают форму вопросительных знаков.
Когда вы создаете сайт, ваша основная задача состоит в том, чтобы избавиться от
вопросительных знаков.
22
Глава 1
То, что заставляет думать
Разные вещи на веб-странице могут заставить нас без надобности остановиться и
задуматься. Взять хотя бы названия. Чаще всего такими виновниками являются вычурные или заумные названия, торговые марки, фирменные наименования и незнакомые технические термины.
Предположим, что один из моих друзей говорит, что корпорации XYZ нужен
человек с моей квалификацией, и поэтому я срочно «бегу» на их корпоративный
сайт. Естественно, что когда я буду пробегать глазами по странице в поиске того,
что мне нужно нажать, для меня будет иметь значение название раздела о найме
на работу.
Обратите внимание, что название нужного мне раздела лежит в неком диапазоне
понятий между «Понятно каждому» и «Совсем непонятно» и возможны разные
положения внутри этого диапазона.
Я допускаю, что вариант «Предложения о найме» был выбран в связи с какой-то
особой внутренней политикой корпорации или традицией информационных
бюллетеней, в то время как вариант «Работа» для такой корпорации, как XYZ,
просто сочли несолидным. Однако я считаю, что при выборе того или иного варианта из упомянутого мной диапазона, следует больше стремиться к «Понятно
каждому».
Другим источником вопросительных знаков являются ссылки и кнопки, вид
которых не всегда ясно показывает, что на них можно нажать. Пользователь
никогда не должен тратить и сотой доли секунды на то, чтобы разбираться, можно или нельзя щелкнуть по объекту.
Не заставляйте меня думать!
23
Возможно, вы скажете: «Ну, ведь не трудно разобраться, можно
ли по чему-то щелкнуть или нет. Если навести курсор на то, по
чему щелкнуть можно, он превратится из стрелки в руку. Что здесь
сложного?».
А дело в том, что когда вы находитесь в сети, то всякий лишний
вопрос создает нагрузку для нашего восприятия и отвлекает внимание от текущей задачи. Хотя такие моменты могут быть незначительными,
но они накапливаются и, в конце концов, сбивают нас с толку.
Как правило, люди не любят долго раздумывать над тем, как поступить в том
или ином случае. Поэтому если сами разработчики не задумываются о том, чтобы сделать все очевидным, то это подрывает доверие пользователей к содержанию сайта и его издателям.
24
Глава 1
Приведем еще пример. На большинстве книжных Интернет-магазинов, перед тем
как искать какую-то книгу, мне нужно разобраться, каким образом я хочу искать.
Большинство книжных Интернет-магазинов
Так, посмотрим... «Быстрый поиск».
Нужно ли открывать это меню?
Все, что мне известно о книге - это ее
автор, Том Клэнси... Том Клэнси и есть
ключевое слово? (И вообще, что такое
«ключевое слово»?)
Похоже, нужно открыть это меню...
Щелкает по стрелке
Т а к
- «Заглавие», «Автор», «Ключевое
слово»... Мне нужно «Автор»
Щелкает «Автор»
Набирает «Том Клэнси»
Щелкает «Поиск»
Конечно, весь этот «внутренний монолог» происходит за доли секунды, но, как
вы сами видите, это довольно утомительный процесс. Даже вполне безобидное,
на первый взгляд, изменение известного понятия или имени (как, например,
«Быстрый поиск» вместо «Поиск») может вызвать у пользователя вопрос.
Не заставляйте меня думать!
25
Если для сравнения посмотреть на Amazon.com, то мы увидим, что разделение
«Автор-Заглавие-Ключевое слово» там даже не упоминается. Вы просто набираете то, что ищете, и поиск начинается.
В конце концов, почему я должен размышлять о том, как именно я хочу искать.
И, тем более, почему я должен думать, как ублажить поисковую систему, будто
она зловредный тролль, охраняющий заповедный мост? («Вы забыли спросить,
разрешу ли я?»)
Я могу привести и другие вопросы, о которых посетители сайтов нисколько не
должны задумываться. Например:
>
Где я?
>
Откуда следует начинать?
>
Где находится...?
>
Что самое главное на этой странице?
>
Почему это называется так?
Вместо того чтобы выдумывать множество «правил» веб-дизайна, полезнее усвоить один общий принцип «удаления вопросительных знаков». Применяя этот
принцип на практике, вы начнете замечать, что именно заставляет вас задумываться при посещении сайта, и, в конце концов, вы научитесь распознавать и
избегать вопросов при создании своих веб-страниц.
26
Глава 1
Вы не сможете сделать все самоочевидным
Ваша цель - каждую страницу сделать «самоочевидной», чтобы при первом взгляде средний пользователь1 мог понять, что это и как этим пользоваться.
Однако в ряде случаев, когда требуется создать нечто оригинальное, ошеломляющее или очень сложное, трудно достичь полной простоты и ясности и приходится
довольствоваться только понятностью. Понятная страница не нуждается в пояснениях, и пользователю нужно только немного подумать, чтобы «въехать» в нее —
но только немного. Внешний вид элементов, хорошо подобранные названия, общий вид страницы и небольшой объем тщательно составленного текста - все это
должно создавать почти мгновенное понимание у пользователя.
Итак, если нет возможности сделать страницу полностью самоочевидной, то, по
крайней мере, сделайте ее понятной.
Почему это так важно?
Это может показаться странным, но вовсе не потому, что:
В действительности, процитированное выше утверждение не всегда верно, и вы
удивились бы, если б узнали, как долго люди могут терпеть сайты, которые им
не нравятся. Многие предпочитают скорее винить себя, чем сайт, сталкиваясь с
проблемами при его использовании.
Средний Пользователь содержится в специальной герметичной камере в Международном бюро стандартов в Женеве. Позже мы еще вернемся к рассмотрению понятия «средний пользователь».
Не заставляйте меня думать!
27
К тому же часто оказывается, что ваш сайт не так уж просто было найти, о других похожих сайтах пользователю не известно, а перспектива начать поиск заново не всегда кажется привлекательной.
Кроме того, нельзя забывать про известный феномен «Я жду этот автобус уже 10
минут, поэтому не страшно, если я подожду его еще немного». Ну и, наконец,
можно спросить: «А кто сказал, что следующий щелчок мыши тоже не разочарует пользователя?».
Итак?
Ясность и простота для веб-страницы - как хорошее освещение для витрины
магазина - при них все кажется лучше. Легко использовать сайт, который не
принуждает задумываться о несущественном. Ненужные раздумья отнимают у нас
силы, интерес и, конечно, время.
Однако, рассматривая в следующей главе, как в действительности используется
Интернет, мы увидим, что основной причиной не заставлять пользователя задумываться является то, что большинство людей тратят намного меньше времени
на просмотр веб-страницы, чем хотелось бы разработчикам.
Итак, если вы хотите, чтобы веб-страницы были эффективными, сделайте так,
чтобы их волшебство поразило пользователя с первого взгляда. Достичь этого
можно - достаточно создать страницы ясными, простыми или, по крайней мере,
понятными.
Глава
Как мы в
действительности
используем
Интернет
Просматриваем, прикидываем
и «делаем как получится»
Почему все потеряшки прячутся в самом дальнем углу?
Потому что найдя, ты их больше не ищешь.
Детская загадка
В
последние пять лет я много наблюдал за тем, как люди пользуются
Интернетом. Больше всего меня поразила разница между нашими
представлениями и реальной практикой использования веб-сайтов.
Создавая сайты, мы почему-то думаем, что пользователи будут скрупулезно проходить по каждой странице, внимательно прочитывать все тексты, разбираться
в структуре сайта и тщательно взвешивать все плюсы и минусы перед тем, как
щелкнуть мышью по той или иной ссылке.
В действительности, большую часть времени (если не все время полностью)
пользователь только пробегает глазами по каждой странице, проскакивает по
какому-то участку текста и щелкает по первой ссылке, которая заинтересовала
его или хотя бы отдаленно напомнила то, что он ищет, - большая часть страницы обычно остается просто незамеченной.
Мы стараемся создать чуть ли не «великую литературу» (в крайнем случае, «рекламный буклет»), тогда как пользователь воспринимает это, как «рекламный
щит, проносящийся мимо со скоростью 60 миль в час».
Глава 2
30
Понятно, что в действительности все складывается несколько сложнее, чем здесь
показано: нужно учитывать и вид веб-страницы, и то, что пытается сделать
пользователь, насколько он ограничен во времени и многое другое. Но эта упрощенная картинка намного ближе к реальному использованию Интернета, чем
то, как мы это себе обычно представляем.
Создавая веб-страницу, мы представляем себе рационального и внимательного
пользователя. Так естественно предполагать, что все используют Интернет тем
же самым способом, что и мы, - ведь любой из нас имеет склонность считать, что
его способ самый разумный и правильный из всех возможных.
Все же, если вы хотите создавать эффективные веб-страницы, следует свыкнуться с мыслью, что существуют три факта, определяющие реальное использование
Интернета.
Факт № 1:
Мы не читаем веб-страницы.
Мы их просматриваем
Один из немногих фактов, хорошо подтвержденных исследованиями, заключается в том, что в большинстве случаев люди стараются тратить меньше времени
на чтение страниц. 1 Вместо чтения мы бегло просматриваем текст, как бы сканируем его, ища слова и выражения, которые привлекли бы наше внимание.
Исключение, конечно, составляют страницы, содержащие такие документы, как
новости, отчеты, описания товаров. Но даже в этом случае, если документ длиннее нескольких абзацев, его обычно распечатывают, потому что читать с бумаги
легче и быстрее, чем с экрана монитора.
Почему же мы именно просматриваем, а не читаем?
> Обычно мы спешим. В большинстве случаев, при использовании Интернета
мы стремимся сэкономить время. В результате, веб-пользователи склонны
действовать как акулы, которые стараются сохранить движение, потому что
иначе могут погибнуть. Другими словами, у нас просто нет времени на чтение того, что нам не нужно.
См. заметку Якоба Нильсена «Как пользователи читают в Интернете», октябрь 1997 г.
(www.useit.com), а также «Веб-дизайн: книга Якоба Нильсена», издательство «Символ-Плюс», 2000 г.
Как мыв действительности используем Интернет
31
> Мы считаем, что нам не нужно читать все подряд. Чаще всего нас интересует
только часть того, что находится на странице. Мы ищем только то, что соответствует нашим интересам или задаче, которую мы решаем, а все остальное
стараемся игнорировать. Именно в процессе просматривания мы находим то,
что нам нужно.
> Мы хорошо умеем это делать. Мы всю жизнь просматриваем газеты, журналы, книги, чтобы найти то, что нам интересно. И мы знаем, что этот способ
всегда работает.
Хочется вспомнить известный юмористический рисунок Гарри Ларсона о разнице между тем, что мы говорим собакам, и тем, как они это воспринимают. На
рисунке изображена собака по имени Джинджер, которая со всем возможным
вниманием слушает своего хозяина, внушающего ей, что подходить к мусору
нельзя. Но все, что собака на самом деле слышит, это только «бу-бу-бу-бу-Джинджер, -бу-бу-бу-Джинджер, -бу-бу-бу-бу-Джинджер».
Мы всегда видим только какую-то часть страницы в зависимости от того, о чем
мы в данный момент думаем.
что дизайнеры разрабатывают...
и что пользователи видят...
Мы, как Джинджер, склонны сосредотачиваться на словах и фразах, подходящих а) под нашу задачу или б) под наши текущие или возможные интересы. И, конечно, в) нельзя забывать о таких сильных раздражителях нашей нервной системы, как «Бесплатно», «Распродажа», «Секс» и наше собственное имя.
32
Глава 2
Факт № 2:
Наш выбор не всегда оптимален,
но мы довольствуемся тем, что есть
При разработке веб-страниц мы исходим из того, что пользователи просмотрят
страницу, оценят все возможные опции и выберут наиболее подходящую.
В действительности, чаще всего мы выбираем не оптимальный вариант, а тот,
который первым показался нам подходящим. Такая стратегия еще известна под
1
названием «satisficing». Как только мы наталкиваемся на ссылку, которая, на
наш взгляд, может привести нас к тому, что мы ищем, то, вероятнее всего, мы
щелкаем по ней.
Я наблюдал такой тип поведения в течение многих лет, но его значение окончательно стало для меня ясным только после прочтения книги Гарри Клейна «Ис2
точник силы: как люди принимают решения». В течение 15 лет Клейн изучал,
каким образом люди разных профессий, в том числе пожарные, летчики, шахматисты, операторы атомных электростанций, принимают важные решения в
условиях ограниченного времени, неясных целей, недостатка информации и изменяющихся ситуаций.
Группа исследователей под руководством Клейна в своих первых наблюдениях
(на примере полевых командиров, находившихся в боевых условиях) использовали общепринятую модель рационального принятия решений, суть которой заключается в следующем: сталкиваясь с некой проблемой, человек начинает собирать информацию, определяет возможные решения и затем выбирает из них то,
которое считает наиболее подходящим. Исследователи исходили из консервативного предположения, что в условиях высокой ответственности за принятие
решения и чрезвычайной ограниченности времени командир сможет сравнивать
только два каких-то возможных варианта действий. Но, как выяснилось, командиры вообще не сравнивали никаких вариантов. Они просто брали первый разумный план, который приходил им в голову, и мысленно быстро давали ему
оценку. Если они не находили в своем плане каких-либо ошибок, то начинали
его реализовывать.
Термин satisficing - синтез английских слов satisfying (удовлетворительный) и
sufficing (достаточный) - впервые введен экономистом Гербертом Симоном в книге
«Социальные и рациональные модели человека» (издательство «Wiley», 1957 г.).
Издательство «MIT Press», 1998 г.
Как мы в действительности используем Интернет
33
Итак, почему же веб-пользователи не стремятся найти наилучший вариант?
> Обычно у нас мало времени. Как отмечает Клейн: «Оптимизирование - достаточно трудный процесс, требующий много времени. Тогда как прикидывание оказывается более эффективным способом».
> Если выбор оказался неудачным, то это легко исправить. В отличие от тушения пожара, неправильный выбор при использовании веб-сайта приводит
всего лишь к тому, что нужно один или два раза нажать кнопку «Назад».
Именно поэтому прикидывание является эффективной стратегией - конечно, при условии, что загрузка происходит быстро, иначе приходится производить выбор с большей осторожностью^ (кстати, это одна из немногих причин, объясняющих, почему большинство пользователей избегают медленно
загружающихся сайтов).
> Тщательное взвешивание всех возможных вариантов не всегда приводит к
положительным результатам. В случаях, когда сайты разработаны плохо,
стратегия поиска наилучшего варианта не является эффективной, и обычно
лучше делать выбор наугад, а затем нажать на кнопку «Назад», если результат оказался неудовлетворительным.
> Угадывать интереснее. Это требует меньших усилий, чем предварительный
поиск самого лучшего варианта. И если вы угадываете правильно, все происходит быстрее. Кроме того, это создает элемент случайности, который может
привести к чему-нибудь неожиданному и хорошему.
Конечно, из сказанного не следует, что пользователи никогда не пробуют сначала найти самый подходящий вариант и только потом щелкнуть мышью. Все зависит от склада ума, количества времени и степени доверия к сайту.
34
Глава 2
Факт № 3:
Мы не задумываемся над тем,
как «оно» работает.
Мы просто делаем «как получится»
Любые тестирования того, как «оно» используется - будь это сайт, программное
обеспечение или бытовая электротехника - выявляют, что очень часто люди используют «что-то», совершенно не имея представления (или имея неверные представления) о том, как это «что-то» работает.
Сталкиваясь с какой-либо техникой, очень немногие находят время для чтения
руководств и инструкций. Наоборот, мы без оглядки прорываемся вперед и выдумываем свои неясные теории о том, как нужно поступать и как «оно» работает.
Это мне напоминает последнюю сцену
из «Принца и нищего», когда настоящий принц узнает, что в его отсутствие
нищий использовал Главную Королевскую Печать для колки орехов (и для
нищего это вполне разумно - ведь печать была всего лишь большим и тяжелым куском металла).
Нечто похожее происходит и с тем, как
люди используют программное обеспечение и сайты. Я много раз видел, как
пользователи успешно применяли способы, совершенно отличные от тех, которые разрабатывали для них веб-дизайнеры.
Как мы в действительности используем Интернет
35
Мой любимый пример - обращение к поисковой системе Yahoo. Я десятки раз
наблюдал, как пользователи вводят полный URL того сайта, на который хотят
попасть, причем не только в первый раз при поиске, но и каждый последующий
раз, иногда даже несколько раз в день. Если вы спросите этих людей, почему они
так поступают, то вам станет ясно, что некоторые из них думают, что Yahoo это и
есть Интернет, и именно таким образом к нему надо обращаться.1
Подход «как получится» характерен не только для начинающих пользователей.
Даже вполне опытные пользователи часто имеют поразительные пробелы в своем понимании того, как Интернет работает. (Не удивлюсь, если узнаю, что даже
Билл Гейтс пользуется какими-то технологиями «как получится»).
Почему так происходит?
> Для нас не важно, каким образом что-то работает. Если мы можем что-то
использовать, то для большинства из нас не имеет значения, понимаем ли
мы, как это работает. Это происходит не от недостатка интеллекта - по большому счету, нас это просто не интересует.2
>
1
2
Если что-то однажды сработало, мы стараемся это использовать постоянно.
Когда мы находим что-то, что работает, пусть даже плохо, мы склонны не
искать лучших вариантов. Мы принимаем лучшее, если случайно наталкиваемся на него, но редко ищем его целенаправленно.
Другой аналогичный случай: многие пользователи системы AOL почему-то уверены,
что AOL - это и есть Интернет. Остается только порадоваться за Yahoo и AOL.
Веб-разработчики часто не могут понять - или хотя бы поверить — что люди действительно так думают, поскольку их самих очень интересует, что и как работает.
36
Глава 2
Всегда интересно наблюдать за реакцией веб-дизайнеров и разработчиков во время тестирования их проекта. Они страшно удивляются, когда замечают, что
пользователь щелкает не по тому, по чему он «должен» щелкать. Например,
пользователь «не замечает» красивую и большую кнопку «Программное обеспечение», бормоча про себя: «Я ищу программное обеспечение. Нажму-ка я на
кнопку «Уцененное» - это дешево, и как раз то, что мне нужно». Пользователь
может быть и найдет то, что ищет, но, обретя, он уже не будет знать, радоваться
находке или нет.
Когда во второй раз пользователь поступает так же, веб-разработчики восклицают: «Надо всего лишь нажать на кнопку «Программное обеспечение»!». В третий раз вы видите, как они начинают задумываться: «А зачем мы вообще старались?..».
Здесь может возникнуть следующий вопрос: «Раз пользователи, действуя «как
получится», все равно достигают того, что им нужно, то имеет ли тогда смысл
стремиться к «самоочевидности»?». Мой ответ - да, имеет, поскольку «метод
тыка» хотя и дает иногда нужный результат, чаще всего оказывается неэффективным и приводит к ошибкам.
Если же сайт построен так, что пользователи «сразу схватывают» его, то:
>
это повышает вероятность того, что пользователь найдет то, что ему нужно,
а это выгодно как для него, так и для вас;
>
это повышает вероятность того, что пользователь сможет охватить весь диапазон возможностей сайта, а не только тех его частей, на которые он случайно натолкнулся;
>
это повышает вероятность того, что пользователь направится именно на те
разделы сайта, на которые вы хотите;
>
пользователь будет чувствовать себя увереннее и комфортнее при осмотре
такого сайта, и, скорее всего, захочет зайти на него еще раз. Сайт, через который посетителям приходится «продираться», может существовать только до
тех пор, пока рядом не возникнет другой, более удобный и понятный в использовании.
Как мы в действительности используем Интернет
37
Если жизнь похожа на лимон...
Теперь, получив нерадостное представление, что такое веб-аудитория и как она
использует Интернет, вы, возможно, думаете: «А почему бы мне просто не найти
место уборщика в ближайшем магазине? Может, хотя бы там мою работу оценят по достоинству?..».
Так что же делать?
Думаю, ответ прост. Если аудитория склонна воспринимать ваш труд как рекламный щит, делайте хорошие щиты.
Глава
Начальный курс
по созданию
рекламных
щитов
Разработка веб-страниц
для просмотра, а не для чтения
Если вы I He знаете /Чьи это/Щиты, то вы/
Не далеко уехали/Burma-Shave
Ряд щитов, рекламирующих крем для бритья (ок. 1935 г.)
Е
сли оказывается, что пользователи Интернета проходят мимо вашего сайта, можете сделать пять важных шагов, чтобы добиться его лучшего
понимания:
>
>
Создайте ясную визуальную иерархию на каждой странице.
Используйте обычаи и условности.
>
>
>
Разбейте страницы на четко разделенные области.
Покажите ясно то, по чему можно щелкать мышью.
Уменьшите визуальный шум.
Создайте ясную визуальную иерархию
на каждой странице
Лучший способ сделать страницу простой для быстрого схватывания - это организовать внешний вид элементов страницы (визуальных подсказок) таким образом, чтобы они ясно и четко показывали отношения между этими элементами - какие элементы связаны между собой, какие являются частями других
элементов. Другими словами, каждая страница должна иметь ясную визуальную иерархию своих элементов.
Страницы с ясной визуальной иерархией обладают тремя чертами:
> Чем более важен элемент, тем более
он заметен на странице. Например,
важные заголовки делаются либо
крупнее, либо жирнее, либо выделяются цветом, либо отделяются боль-
Глава 3
40
> Элементы, логически связаные между собой, должны быть связаны и визуально. Например, вы можете показать, что какие-то элементы равнозначны, сгруппировав их под одним
заголовком, либо применив к ним
одинаковый стиль, либо поместив их
в одну четко отделенную область страницы.
>
Элементы представляются в виде
вложений, если являются частями
друг друга. Например, название раздела «Книги по программированию»
будет находиться над заголовком какой-то конкретной книги по этой
теме, включая в себя все содержимое
части страницы (эта книга является
частью данного раздела). Под заголовком этой книги, в свою очередь, будет
включено ее описание.
Конечно, здесь нет ничего нового. В каждой газете используются те же методы
выделения, группирования и компоновки содержания для того, чтобы подчеркнуть ещё до чтения наиболее важную информацию полосы. Мы понимаем, что та
фотография относится к той статье, так как они объединены тем заголовком.
А эта статья является ключевой («гвоздем») на странице, поскольку она занимает центральное место, у нее самый большой заголовок и она набрана широкими колонками.
Начальный курс по созданию рекламных щитов
41
Мы все каждый день сталкиваемся с визуальными иерархиями — будь это на
бумаге или в Интернете. Но обычно мы воспринимаем их так быстро, что даже
не успеваем это осознать, и начинаем смутно догадываться об их существовании, только когда нам не удается провести их быстрый анализ, т. е. когда визуальные подсказки (или их отсутствие) вынуждают нас задумываться.
Хорошая визуальная иерархия всегда экономит наши усилия по начальному восприятию страницы и помогает организовать и систематизировать содержание
таким образом, чтобы мы могли почти мгновенно понять его в целом.
Но если страница не имеет ясной визуальной иерархии - например, когда все
выглядит одинаково важным, - это существенно замедляет процесс просмотра
страницы на этапе выявления интересующих нас слов и выражений и вынуждает нас пытаться самостоятельно формировать понимание того, что же является
главным, а что второстепенным. Естественно, с нашей стороны это требует усилий.
Кроме того, мы хотели бы получать на сайте некие редакторские подсказки и
ориентиры относительно того, что из содержания сайта является наиболее важным и ценным или популярным, так же, как ожидаем этого в других средствах
масс-медиа. Почему бы тогда редактору сайта не расставить эти акценты для
меня, чтобы сэкономить мои силы и время?
Одолевать страницу даже со слегка нарушенной визуальной иерархией - ну, скажем, под заголовком располагаются элементы, которые к нему не относятся, так же неудобно, как читать небрежно
построенное предложение (Билл на минуту выпустил котенка на стол потому,
что тот немного шатался).
Хотя мы обычно и можем понять смысл
предложения, но, пусть и на мгновение,
нам нужно задуматься там, где мы не
должны задумываться вообще.
42
Глава 3
Обычаи и условности - ваши друзья
Когда-то еще в юности каждый из нас учился читать газету, читать отнюдь не
слова, а те условности, которые в газетах используются.
Например, мы узнали, что фраза, набранная очень крупным шрифтом, - это
обычно заголовок, который обобщает содержание находящейся под ним статьи.
Текст под фотографией - это подпись, в которой дается описание или комментарий к ней, а если этот текст набран очень мелким шрифтом, то это имя фотографа.
Мы также узнали, что разные условности, которые используются при верстке и
макетировании страниц, помогают нам быстрее и легче просматривать газету и
находить интересующие нас материалы. Когда мы бывали в других городах, мы
видели, что те же самые (или с небольшими вариациями) условности использовались и во всех других газетах, поэтому знание этих обычаев упрощало для нас
чтение любых газет.
Любое издательское сообщество создает свои обычаи и условности, затем развивает их и создает со временем новые.1 В Интернете существует уже много таких
условностей, большинство из которых было перенято из газет и журналов. Естественно, будут появляться и новые.
Все обычаи возникают из чьих-то оригинальных идей. Если идея работает хорошо, то другие сайты перенимают ее, и, в конце концов, она начинает встречаться
так часто, что даже не требует каких-либо объяснений. Конечно, этот процесс
распространения занимает некоторое время, но в Интернете он, так же как и все
другое в Сети, происходит очень быстро. Например, сегодня все знакомы с метафорической тележкой для товаров, которая используется в Интернет-магазинах, так что разработчикам даже нет необходимости делать к ней подпись «тележка для покупок».
Взять хотя бы маленькие полупрозрачные логотипы телекомпаний, которые несколько
лет назад появились в углу телеэкрана. Сейчас такие значки используются везде, однако телевидение существовало еще за 50 лет до их появления.
Начальный курс по созданию рекламных щитов
43
Следует знать две важных вещи о веб-условностях:
Они очень полезны. Как правило, условности становятся
общепринятыми, только если они работают. Когда они
правильно и к месту применяются, то помогают пользователям легко переходить от
одного сайта к другому, не задумываясь о том, как все работает.
Некоторое приятельское
чувство возникает у пользователя, когда он видит знакомый список разделов сайта,
привычно расположенный
на цветном фоне на левой
стороне страницы, несмотря
даже на, порой неловкое,
ощущение дежавю.
Дизайнеры зачастую с неохотой применяют условности. Вместо того чтобы
использовать их, дизайнеры часто стремятся выдумать колесо заново. Причина этого заключается, главным образом, в том, что дизайнеры считают (и
не без основания), что их как раз и нанимают, чтобы придумывать нечто новое. (Не говоря уже о том, что похвала коллег, награды и приглашения к участию в больших проектах редко появляются от умения «лучше всех применять условности».)
Глава 3
44
Иногда случается, что «выдумывание колеса» завершается созданием революционно нового вращающегося устройства. Но чаще всего,
потраченное время так и остается
лишь «выдумыванием колеса».
Если вы не хотите использовать некую общепринятую веб-условность, то убедитесь сначала, что то,
чем вы собираетесь ее заменить,
либо является достаточно ясным,
понятным и не требующим усилий
для изучения (т. е. является полноценным заменителем), либо настолько полезным, что это компенсирует необходимость некоторого усилия. Многие дизайнеры имеют склонность недооценивать общепринятые обычаи и условности. Однако перед введением каких-либо новшеств нужно учесть действительную ценность того,
что вы хотите заменить.
Мой совет заключается в следующем: используйте новую идею, только если вы
уверены, что она действительно лучше (если, например, каждый, кому вы ее
демонстрируете, говорит: «Ух ты, вот это да!»). Если же вы не уверены, то не
изобретайте колеса - воспользуйтесь общепринятыми условностями.
Разбейте страницы
на четко разделенные области
В идеале веб-страницы должны быть построены таким образом, чтобы их можно было использовать, как в известном игровом шоу Дика Кларка «Пирамида в
г
$25000». Взглянув на страницу, пользователь должен сразу видеть: «вот здесь
то, что можно делать на этом сайте», «вот здесь ссылки на сегодняшние самые
интересные истории», «вот здесь список того, что продается», «вот здесь самые
популярные товары», «а вот здесь переходы к другим разделам сайта».
Получив в виде задания, скажем, категорию «Предметы, используемые водопроводчиком», участникам игры необходимо сделать так, чтобы их партнеры догадались об
этом по словам-примерам: «гаечный ключ», «кусачки» и т. д.
Начальный курс по созданию рекламных щитов
45
Разделение страницы на области важно потому, что это позволяет пользователям быстро понять, какие области их интересуют больше, а какие области они
могут пропустить. Несколько исследований, касавшихся того, как движутся
глаза пользователей при просмотре веб-страниц, подтверждают, что пользователи очень быстро решают, какие части страницы содержат полезную для них
информацию, и почти никогда уже не смотрят на другие части, как будто они и
не существуют.
Покажите ясно, по чему можно
щелкать мышью
Большая часть времени у пользователей Интернета уходит на поиски тех мест, по которым можно щелкнуть, поэтому очень важно
ясно показать, по чему именно можно щелкать
мышью, а по чему нельзя.
Например, на странице кандидата в президенты 2000 года сенатора Оррина Хэтча1 было совершенно неясно, по каждому ли месту можно было щелкнуть, или везде нельзя. На этой
странице было 18 ссылок, и только две из них
имели вид, предполагающий такую возможность, - большая кнопка с надписью «Click
here to CONTRIBUTE!» (Нажмите сюда, чтобы поддержать!) и ссылка с подчеркнутым текстом «FULL STORY» (Показать полностью).
Остальные ссылки были выделены только цветом, но весь текст на странице тоже был цветным, и визуально отличить их от простого текста было невозможно.
Оррин Хэтч заслуживает хотя бы упоминания в сноске к истории про веб-юзабилити,
так как он был, насколько я помню, первым кандидатом, который в ходе президентской компании 2000 года уделил внимание этому вопросу. В первых телевизионных
дебатах кандидатов от республиканской партии он сказал Джорджу Бушу младшему:
«Должен отметить, господин губернатор, что в отличие от Baniero [веб-сайта], на моем найти все легко. [Смеется.] А вот вашим [сайтом] пользоваться довольно трудно - он,
как это говорится, недружественен для пользователя (not user-friendly).» (Сайтом
Хэтча было действительно удобнее пользоваться.)
46
Глава 3
Конечно, такая ошибка не является катастрофической, и я уверен, что большинство пользователей быстро разобрались, что к чему, и стали просто пробовать щелкать мышью. Однако, когда вы заставляете пользователей раздумывать о чемто, что вообще не должно вызывать никаких вопросов, в частности, о том, где же
можно щелкать, вы расточаете тот запас терпения и благоприятного расположения, который имеет каждый пользователь при знакомстве с новым сайтом.
Приведу еще
хороший пример.
..—.«.«^^.—^^^
Приведу
еще один
один хороший
пример. Каждый
Каждый
раз, когда я пользуюсь окном поиска на сайте
d r k o o p . c o m ((сайт
с а й т доктора
д о к т о р а К.
К . Эверет Куп,
К у п , посвяпосвяdrkoop.com
щенный вопросам здоровья), меня одолевают
размышления.
MARCH «МСОО? <+т +
Кнопка поиска совсем не похожа на кнопку, даже несмотря на то, что в ее оформлении использованы два сильных визуальных ключа - расположение и название. Рядом с окном находится слово «SEARCH» (ПОИСК), которое является од1
ним из двух вариантов идеального названия для кнопки поиска. Более того,
тут же расположена небольшая треугольная стрелка, известная как условный
указатель «Нажать здесь». Однако стрелка направлена в сторону от текста, как
будто она показывает куда-то еще, хотя ее условное использование требует, чтобы она была направлена к тексту, по которому надо щелкать мышью.
Г'"1 '
ДЛЯ
ЧТОбы снять
СНЯТЬ вопрос,
ВОПРОС, возникающий
ВОЗНИКаЮЩИЙ в
В
Для ТОГО
того чтобы
с я к и й раз, когда я пользуюсь
моей голове в
всякий
лишь
этим поисковым окном, достаточно всего лишь
переместить стрелку на левую сторону, перед
текстом.
¥
'•••'-"""••"•"""""""•'••••ипп^
имшт 4rfc*»»,«#<»
Уменьшите визуальный шум
Визуальный шум является одним из основных препятствий для получения легко воспринимаемых веб-страниц. Можно выделить два типа визуального шума:
>
Перегруженность.
Перегруженность. Некоторые
Некоторыевеб-страницы
веб-страницывызывают
вызывают уу меня
меня воспоминания
о чтении писем из издательств, когда нужно отправить обратно заполненную форму и умудриться при этом случайно не подписаться на какой-нибудь журнал.
журнал.
Второй вариант - это слово «Go» (Идти), но оно используется только в сочетании со
словом «Search» (Поиск) в качестве заголовка для окна поиска.
Начальный курс по созданию рекламных щитов
47
Если на странице находится огромное количество всевозможных призывов,
приглашений к покупкам, бесчисленное множество восклицательных знаков и яркоцветных выделений, то все это вызывает эффект давления.
> Фоновый шум. Некоторые страницы напоминают обстановку какой-то вечеринки - нет громкого источника, отвлекающего внимание, но есть множество элементов визуального шума, которые в совокупности вызывают ощутимое раздражение.
Например, на сайте MSNBC используются меню, которые представляют собой
отличные, мощные инструменты навигации, позволяющие пользователям быстро перемещаться к любому материалу на сайте. Однако названия материалов в
этих меню отделены между собой черными линиями, которые затрудняют восприятие. Если бы линии были серого цвета, то просматривать списки было бы
намного легче.
Пользователи по-разному воспринимают страницы со сложной версткой и большим числом компонентов. Некоторые легко переносят перегруженные страницы и фоновый шум, но для многих это создает проблемы. При разработке вебстраниц разумно исходить из того, что все является визуальным шумом до тех
пор, пока не доказано обратное.
Глава
Животное,
растение
или камень?
Почему пользователи любят
выбирать не задумываясь
Количество щелчков мышью не имеет значения
до тех пор, пока каждый клик очевиден.
Второй закон Круга
В
еб-дизайнеры и эксперты по вопросам юзабилити уже давно ведут спор о
том, сколько раз пользователи в поиске того, что им нужно, могут
щелкнуть мышью, не потеряв при этом интерес и не приходя в отчаяние. 1
Для некоторых сайтов даже были приняты правила, ограничивающие количество кликов (обычно тремя, четырьмя или пятью) для перехода к любой странице сайта.
В конечном счете, «количество кликов» действительно кажется полезным критерием. Но с течением времени я пришел к мысли, что все-таки не их количество
имеет значение (хотя здесь, конечно, должны быть определенные рамки), но скорее их «качество», т. е. насколько легко сделать каждый клик - требует ли это
действие размышлений и какова степень уверенности в правильности выбора.
Вообще говоря, я думаю, что пользователь не задумывается о количестве щелчков мышью до тех пор, пока каждый клик проходит легко, а он сам сохраняет
уверенность, что движется в верном направлении. Общим правилом, наверное,
здесь может стать следующее утверждение: «один клик, требующий от пользователя размышлений, равен трем простым кликам, которые можно сделать не
2
задумываясь».
Классический первый вопрос в игре «12 вопросов» - «животное, растение или
камень?» - это как раз хороший пример возможности выбирать не задумываясь. Если исходить из того, что все, не являющееся растением или животным, в
Все это - часть более широкой дискуссии относительно достоинств и недостатков горизонтального и вертикального типа иерархии сайтов. Горизонтальный тип предполагает большее количество категорий на каждом уровне сайта, но имеет меньшее число уровней, поэтому для достижения нижних уровней нужно сделать меньшее
количество кликов. Тогда как вертикальный тип подразумевает большее число уровней (а значит и кликов для перемещения), однако с меньшим числом категорий на
каждом уровне.
Конечно, возможны исключения. Если мне нужно постоянно проходить по одной и
той же дорожке вниз по структуре сайта, или же страницы довольно долго загружаются, то ценность меньшего числа кликов возрастает.
50
Глава 4
том числе такие разные вещи, как пианино, стишок или энциклопедия, попадает в категорию «камень», то такой вопрос, конечно, не может вызывать никаких усилий для того, чтобы дать на него правильный ответ.1
Что касается Интернета, то в нем, к сожалению, не часто можно легко сделать
выбор.
Например, если я зайду на страницу Virus
Updates на сайте Symantec для обновления
программы Norton AntiVirus, мне следует
выбрать значения для двух опций.
Выбрать значение для одной из них - «Язык» - относительно просто, и мне нужно
лишь немного задуматься, чтобы понять, что «English, US» означает «United
States English», который отличается от «English, UK».
Хотя, если я открою меню, то станет видно, что я уже начинаю в нем «вязнуть», поскольку в списке вообще нет такого
варианта, как «English, UK».
Кроме того, «Espanol (English, Int'l)» также заставит меня
задуматься, но я просто не стану переживать по этому поводу.
Опция «Продукт» немного посложнее.
Здесь проблема состоит в том, что вариант «NAV для Windows 95/98» не вполне
ясен. Я, конечно, понимаю, что каждый, кто работает на Symantec, прекрасно
знает, что аббревиатура NAV и название Norton AntiVirus - это одно и то же, но
все же это требует некоторого момента доверия с моей стороны. Кроме того, хотя
я и знаю наверняка, что использую Windows 98, в моей голове все же возникает
маленький вопрос - это то же самое, что и Windows 95/98? Или Windows 95/98
это нечто другое, что мне не известно?
Если вы давно не играли в эту игру, то по адресу http: // 207.236.3.210 / avm.html вы
можете найти превосходную версию, созданную Робином Бургнером. В ней используется усредненная стратегия на базе алгоритма нейронной сети.
Животное, растение или камень?
51
Другой пример. Когда я собираюсь что-то купить для моего домашнего офиса,
мне часто приходится сталкиваться с выбором:
Ноте
(Для дома)
Office
(Для офиса)
Какой же вариант мне выбрать? Те же чувства я испытываю, если передо мной
два почтовых ящика, на одном из которых надпись «Только конверты с маркой», на другом - «Только маркированные конверты», а у меня в руках всего
лишь почтовая открытка. В какой ящик мне нужно бросать свою открытку? И
что будет, если я выберу неправильный ящик?
Итак, в Интернете нужно постоянно делать какой-то выбор, поэтому использовать сайт значительно легче, если сам выбор не вызывает размышлений.
Глава
Опустите
слова
Искусство не писать
Избавьтесь от половины слов на каждой странице,
затем уберите еще половину из того, что осталось.
Третий закон Круга
И
з пяти или шести вещей, которые мне довелось узнать в школе, одна мне
запомнилась больше других и оказалась самой полезной. Это семнадцатое правило из «Основы стиля» Э. Б. Уайта:
17. Опустите лишние слова.
Хорошее письмо всегда кратко. Предложение не должно
содержать ненужных слов, а абзац не должен содержать
ненужных предложений по той же самой причине, по
которой на холсте не должно быть ненужных линий, а в
машине - ненужных деталей.1
Глядя на большинство веб-страниц, я поражаюсь тому, что большая часть слов
на них просто занимает место, потому что вряд ли кто будет эти слова читать.
И только лишь потому, что они там находятся, возникает ощущение, что слова
эти, наверное, нужно прочитать, чтобы понять, о чем вообще идет речь. Это делает некоторые страницы более «серьезными», чем они есть на самом деле.
Мой Третий закон юзабилити, вероятно, звучит избыточным, но сформулирован он так не случайно. Убрать половину слов, на самом деле, вполне реалистичная задача. На большинстве сайтов я смог легко удалить половину слов без каких-либо существенных потерь для содержания этих сайтов. А вот совет
избавиться от половины из того, что осталось, - это просто мой способ подчеркнуть, что удалять лишние слова нужно безжалостно.
Удаление всех тех слов, которые все равно никто не будет читать, имеет несколько полезных следствий:
> Это снижает уровень шума на страницах.
>
Это выделяет то содержание страниц, которое действительно является ценным и полезным.
>
Это позволяет укоротить страницы так, чтобы пользователи могли видеть
каждую из них одним взглядом, не прокручивая экран.
1
William Strunk, Jr., and E. В. White, «The Elements of Style» (Основы стиля), (Allyn
and Bacon, 1979).
54
Глава 5
Конечно, речь не идет о том, чтобы сделать статьи на сайте Salon.com короче.
Дело прежде всего в том, что есть два особых вида текстов: «общая болтология»
и «инструкции».
Никакой «общей болтологии»
Мы сразу же узнаем «общую болтологию», как только видим ее, - это вступительные тексты, служащие для того, чтобы приветствовать нас на сайте и рассказать нам о том, какой он замечательный, или же сообщить нам о содержании
раздела, в который мы вошли.
Чтобы быть уверенным, что какой-то текст является «общей болтологией», вы
можете воспользоваться одним надежным правилом: если во время его чтения
вы внимательно прислушаетесь к себе, то услышите внутренний голос, произносящий нечто вроде: «Угу, угу, угу, угу, угу...».
«Общая болтология» - это своего рода самовосхвалительные речи, которые еще
можно встретить в плохо написанных рекламных брошюрах. В отличие от хороших рекламных текстов, «общая болтология» не содержит полезной информации и главным образом сосредоточена на описании того, как (а не почему) «у нас
все прекрасно».
Хотя «общую болтологию» можно иногда встретить на начальных страницах
сайтов (обычно в абзацах, начинающихся со слов: «Добро пожаловать на сайт...»),
все же самым «любимым местом обитания» для нее оказываются начальные страницы разделов («section fronts»). Поскольку эти страницы чаще всего являются
всего лишь «оглавлениями» и не несут самого содержания, то возникает соблазн
наполнить их еще какой-либо «общей болтологией». К сожалению, в результате
получается так, будто издатель в конце оглавления к книге добавил еще один
абзац, гласящий: «В этой книге содержится много интересного. Здесь есть главы, посвященные тому-то, тому-то и тому-то. Надеемся, что чтение доставит вам
удовольствие.»
«Общая болтология» напоминает простой светский разговор - так же бессодержательна и существует только ради разговора самого по себе. Но у большинства
веб-пользователей нет времени на такие разговоры - они хотят сразу приступить
к сути. Поэтому следует устранить как можно больше «общей болтологии».
55
Никаких «инструкций»
Другим большим источником ненужных слов являются «инструкции». Главное,
что следует знать об «инструкциях», это то, что их никто не собирается читать,
по крайней мере до тех пор, пока несколько попыток использовать сайт «как
получится», в конце концов, не увенчаются успехом. Но даже тогда, если инструкции слишком длинные, то редкие пользователи начинают искать в них нужную информацию.
Вашей целью должно стать стремление всегда полностью устранять «инструкции», делая все достаточно ясным без лишних объяснений («самоочевидным»)
или как можно более ясным. Если «инструкции» все же действительно необходимы, то сократите их до минимума.
Например, если щелкнуть по разделу «Обзор сайта» на www.verizon.com, то вы
получите экран, полный «инструкций».
На мой взгляд, здесь нужны весьма жесткие сокращения, чтобы сделать эти инструкции более полезными:
Глава 5
56
д о : 92 слова
ШШШШШШШШШШШШШШШШШ
Нижеследующая анкета разработана для того, чтобы собрать
информацию, которая поможет нам улучшить этот сайт в
соответствии с вашими потребностями.
Уже первое предложение - это « общая болтология». Я прекрасно знаю, для чего делаются
обзоры. Самое главное здесь — это слова «поможет нам», которые мне показывают, что они
хотя бы понимают, что, с моей стороны, заполнение этой анкеты - оказание им услуги.
Пожалуйста, выберите нужные ответы с помощью выпадающего меню и переключателей.
Большинство пользователей умеет заполнять
веб-формы, а те, кто не умеет, скорее всего, не
знает, что такое «выпадающее меню» и «переключатель» .
Заполнение анкеты займет не
более 2-3 минут.
Очень хорошо, как раз сейчас я и раздумываю,
возиться ли мне с этой анкетой или нет, поэтому сообщение о том, что времени потребуется
немного - полезная информация.
В конце анкеты вы можете оставить ваше имя, фамилию,
адрес и контактный телефон.
В этом случае в будущем мы,
возможно, перезвоним вам для
проведения опроса по поводу
улучшения нашего сайта.
Эта «инструкция» сейчас бесполезна для меня,
поскольку она касается того, что находится в
конце анкеты. На самом деле, эта «инструкция» использована здесь без особого смысла только для солидности.
Если же у вас есть какие-либо
комментарии или вопросы, на
которые вы хотели бы получить ответ, то, пожалуйста,
сначала свяжитесь с «Отделом
по работе с потребителями».
Сообщение о том, что если я хочу получить ответ, то мне не нужно заполнять эту анкету, очень важная информация. Но, к сожалению,
они не побеспокоились о том, чтобы указать,
каким образом я смогу связаться с «Отделом по
работе с потребителями» (конечно, было бы неплохо поставить здесь ссылку, чтобы, при необходимости, я мог это сделать прямо отсюда).
После: 46 слов
Пожалуйста, ответьте на вопросы анкеты, чтобы помочь нам улучшить этот сайт.
Это займет не более 2—3 минут.
ПРИМЕЧАНИЕ: Если у вас есть какие-либо комментарии или вопросы, на которые вы хотели бы получить ответы, то не заполняйте эту анкету. Свяжитесь, пожалуйста, с Отделом по работе с потребителями.
Опустите iiggttUQre слова
57
Идем дальше...
В этих первых главах я попытался рассказать об основных принципах, которые, на мой взгляд, следует учитывать при создании сайтов.
Теперь мы переходим к двум следующим главам, посвященным тому, как эти
принципы применяются к двум самым важным проблемам веб-дизайна - я имею
в виду навигацию и начальную страницу.
Эти главы будут довольно длинными. Поэтому возьмите с собой завтрак.
Глава
Дорожные знаки
и «хлебные
крошки»
Разработка навигации
Обнаружив себя в прекрасном доме, с прекрасной женой,
вы можете спросить: «Гм... Как я здесь оказался?»
Talking Heads, «Однажды в жизни»
э
то правда:
Люди не станут пользоваться вашим сайтом, если
им не будет понятно, как по нему перемещаться.
Вы сами знаете это из собственного опыта в качестве пользователя Интернета.
Если вы попадаете на сайт, на котором не можете найти то, что ищете, или структура которого вам непонятна, то вы не станете пользоваться им долго и, скорее
всего, больше на него не зайдете. Каким же образом можно создать ту пресловутую «ясную, простую и последовательную» навигацию?
В магазине
Представим себе следующую картину: в субботний день вы отправляетесь в магазин, чтобы купить цепную пилу. Уже на входе вы задумываетесь: «Где же у
них здесь пилы?». Зайдя в магазин, вы начинаете просматривать названия отделов - они написаны крупными буквами и вывешены на стене так, что вы можете
видеть их с любого места.
Вы задумываетесь: «Хм, «Инструменты»? Или «Сад и газон»?». Зная, что этот
магазин специализирован на инструментах, вы отправляетесь в отдел «Инструменты».
Когда вы приходите туда, вы смотрите на таблички в конце каждого товарного
ряда.
60
Глава 6
Выбрав нужный ряд, вы начинаете
смотреть на выставленные в нем товары.
И если окажется, что вы выбрали неправильный ряд, то вы перейдете к
другому или же вернетесь назад, зайдете в отдел «Сад и газон» и начнете поиск сначала. Схематически процесс поиска нужного вам товара будет выглядеть следующим образом:
Таким образом, вы находите то, что вам нужно, с помощью системы навигации
магазина (т. е. вывесок и иерархической системы, которую эти вывески воплощают), а также собственной способности осматривать полки с товарами.
Конечно, весь процесс поиска немного сложнее, чем здесь показано. Например,
когда вы уже входите в магазин, то вы обычно тратите несколько микросекунд,
чтобы решить, будете ли вы искать цепную пилу самостоятельно или обратитесь за помощью к персоналу магазина? Решение зависит от того, насколько вы
Дорожные знаки и «хлебные крошки»
61
знакомы с магазином, насколько вы уверены в способности работников магазина правильно организовать расположение товаров, насколько вы спешите, и даже
от того, насколько вы общительны.
С учетом этого решения, вся схема будет выглядеть таким образом:
Обратите внимание, что даже если вы отправитесь на самостоятельные поиски
нужного вам товара, то в случае неудачи вам, возможно, все же придется прибегнуть к помощи персонала.
Глава 6
62
Начальный курс по веб-навигации
Посещение магазина во многих отношениях напоминает посещение веб-сайта.
>
Обычно вы хотите что-то найти. В «реальном» мире это может быть аварийный выход или банка консервов. В Интернете это может быть поиск самого
дешевого 4-головочного видеомагнитофона «с частичной оплатой» или имени актера из Касабланки, который играл официанта «У Рика». 1
>
Вначале вам нужно решить, будете ли вы искать самостоятельно или обратитесь за помощью. Однако в отличие от ситуации с магазином, на сайте нет
никого, кого можно было бы подозвать и спросить о местонахождении того,
что вам нужно.2 В Интернете задать вопрос можно с помощью поиска - для
этого вы набираете в поисковом окне описание того, что вы ищете, и после
нажатия кнопки получаете список ссылок на те сайты, на которых возможно находится то, о чем вы запросили.
Некоторые люди (Якоб Нильсен называет их пользователями с «доминантным поиском» 3 , заходя на какой-то сайт, почти всегда сразу начинают искать окно поиска (возможно, это тот же тип людей, которые при входе в магазин сразу ищут помощи продавца).
S. Z. «Cuddles» Sakall (Eugene Sakall) род. в 1884 в Будапеште. По иронии судьбы большинство характерных актеров, игравших завсегдатаев кафе «У Рика», ненавидевших
нацистов, - были известными актерами европейской сцены и кино, которые бежали
от нацистского режима и впоследствии оказались в Голливуде.
На некоторых сайтах электронной коммерции (например, LandsEnd.com) теперь пытаются развивать системы живых персональных помощников. Такие системы, наверно, смогут служить для некоторых пользователей в качестве хорошей подушки безопасности, однако они вряд ли когда-нибудь станут равноценной заменой хорошей
системы сайт-навигации.
search-dominant - см. «Search and You May Find» (Ищите и вы, возможно, найдете) в
архиве статей Нильсена по адресу www.useit.com, а также «Веб-дизайн: книга Якоба
Нильсена», издательство «Символ-Плюс», 2000 г.
Дорожные знаки и «хлебные крошки»
63
Другие люди (пользователи с «доминантным выбором ссылок» (link-dominant) по классификации Якоба Нильсена) почти всегда начинают с самостоятельного поиска и обращаются за помощью к поисковой системе только в
случае, если у них больше нет подходящих ссылок или одолела усталость от
неудачного использования сайта.
У всех других людей решение о том, стоит ли начинать самостоятельный поиск
или обратиться к помощи поисковой системы, зависит от их склада ума, от
того, насколько они ограничены во времени, и, наконец, насколько система
навигации, используемая на сайте, кажется им удобной.
>
Бели вы выбираете самостоятельный поиск, то вы перемещаетесь по иерархии сайта, пользуясь навигационными указателями. Другими словами, вы
оглядываете начальную страницу сайта, находите список основных разделов (по аналогии с указателями отделов в магазине) и щелкаете по тому, который кажется вам наиболее подходящим.
Затем вы выбираете из списка подразделов.
И после того, как вы сделаете еще один или два клика, вы достигнете списка
предметов нужного вам типа:
42сс Chain Saw
6.5hp Log Splitter
6.75hp Mower
Backpack Blower
Brushcutter
Gas Blower/vac
Pro 5Ice Chain Saw
После этого вы можете щелкнуть по ссылкам на отдельные товары, чтобы рассмотреть их подробно, в точности, как если бы вы брали эти товары с торговых
полок и читали их ярлыки.
Если вы не нашли то, что искали, вы уходите. Это так же справедливо для
Интернета, как и для магазина. Если вы убедились, что того, что вам нужно,
нет, или слишком устали, чтобы продолжать поиск, то вы уходите.
64
Итак, вся схема процесса выглядит следующим образом:
Глава 6
Дорожные знаки и «хлебные крошки»
65
Невыносимая легкость серфинга
Способ, каким вы ищете что-то на сайте, во многом напоминает то, как вы это
делаете в реальном мире. Когда вы перемещаетесь по Интернету, возникает ощущение, что вы и вправду перемещаетесь как бы в физическом пространстве. Даже
слова, которые мы используем для описания процесса перемещения, относятся
к пространству (обход, осмотр, серфинг ). А щелчком мыши по ссылке вы не
просто «загружаете» или «отображаете» страницу, а «переходите» к ней.
Но пространство Интернета не имеет тех же ориентиров, на которые мы опираемся в своей жизни в реальном пространстве. Веб-пространство обладает следующими «странностями»:
>
Нет ощущения масштаба. Даже если мы уже хорошо знакомы с каким-то
сайтом - исключение составляют только совсем небольшие - нам трудно
определить его объем (50?, 1000?, 17000 страниц?). Мы знаем, что на сайте
могут быть еще неисследованные нами уголки, объем которых может оказаться довольно большим. Если же речь идет о журнале, музее, отделе магазина, вы всегда имеете хотя бы приблизительное представление о доли уже
увиденного и еще не увиденного вами.
Таким образом, не всегда легко определить, все ли вы видели на сайте из того,
что вас интересует, и, следовательно, трудно оценить, когда можно закончить его просмотр.1
>
Нет ощущения направления. В целом, на сайте нет понятия левого и правого или верха и низа. Можно только говорить о движении «вверх или вниз»
относительно структурной иерархии - в направлении к более общим или более конкретным его уровням.
>
Нет ощущения местоположения. По мере того, как мы перемещаемся в физическом пространстве, мы собираем о нем информацию. Таким образом, у
нас появляется представление о местоположении тех или иных вещей, вот
почему мы можем найти наикратчайший путь к ним.
В первый раз мы сумеем найти в магазине цепные пилы, если будем следовать указателям. Но уже в следующий раз мы, скорее всего, подумаем:
Цепные пилы? А, ну да, я помню, где они:
в дальнем углу, рядом с холодильниками.
Хочется, чтобы ссылки, по которым мы уже щелкали, изменяли свой цвет. Это давало бы некоторое ощущение того, сколько уже пройдено.
Глава 6
66
И направимся прямо к ним.
Первый раз
Но в Интернете ваша нога никогда не касается земли, и вы можете перемещаться, только щелкая мышью по ссылкам. Щелкнув по надписи «Электроинструмент», вы сразу телепортируетесь в товарный ряд с электрическими
инструментами, без прохождения какого-либо расстояния и не встречая каких-либо других товаров во время перемещения.
Если мы хотим вернуться к чему-либо, то нам нужно вспомнить, где это находится, но не в прямом - физическом - смысле, а в рамках структурной
иерархии и концепции сайта, и затем вернуться в то место.
Именно по этой причине закладки, или сохраняемые персональные Интернет-ярлыки, имеют такое большое значение, и именно поэтому по кнопке
«Назад» делается от 30 до 40 процентов всех кликов в Интернете.1
Это также объясняет, почему концепция начальной страницы сайта настолько важна. Начальная страница - это сравнительно фиксированная позиция.
Для пользователя начальная страница на сайте выполняет ту же роль, что и
Полярная звезда для путешественника. Если что-то не получается, вы всегда можете вернуться в исходную точку сайта - начальную страницу.
Отсутствие реальных физических ориентиров имеет как положительные, так и
отрицательные стороны. Ощущение «невесомости» - когда нет понятий лево,
право, верх, низ - довольно увлекательно и отчасти объясняет, почему в Интернете так легко потерять счет времени, подобно тому, как мы уходим с головой в
хорошую книгу. 2
L. Catledge and J. Pitkow, «Characterizing Browsing Strategies in the World-Wide Web».
In Proceedings of the Third International World Wide Web Confenrece, Darmstadt,
Germany (1995). (Л. Кэтледж, Дж. Питков, «Описание стратегий перемещения по Всемирной Сети». Из докладов на III Международной конференции по проблемам Всемирной Сети, Дармштадт, Германия, 1995 г.).
Это еще одна причина того, почему так раздражают медленно загружающиеся страницы: какое удовольствие можно получить от «полета» со скоростью пара миль в час?
Дорожные знаки и «хлебные крошки»
67
С другой стороны, это помогает объяснить, почему мы вообще используем такой
термин, как веб-навигация, - ведь мы не применяем слово «навигация» по поводу перемещения внутри магазина или библиотеки. Если заглянуть в словарь,
то мы узнаем, что «навигация» связана с двумя понятиями: перемещением из
одного места в другое и определением собственного местонахождения.
Мне кажется, что мы используем это слово по отношению к Интернету, потому
что «определение собственного местонахождения» - это довольно серьезная проблема, которую в Интернете решить труднее, чем в физическом пространстве.
По сути дела, оказавшись в Интернете, мы «теряемся» в нем, и у нас нет возможности заглянуть через «товарные ряды», чтобы узнать, где же мы находимся.
Таким образом, веб-навигация служит для того, чтобы компенсировать эту проблему отсутствия «ощущения места» с помощью внесения определенной иерархии в структуру сайта, тем самым искусственно создавая понятие «здесь».
Навигация - это не какая-нибудь «примочка» для веб-сайта, это и есть сам сайт,
аналогично тому, как здание, торговые полки и кассы - это магазин. Без этого
веб-пространство не возникает.
Вывод? Веб-навигация должна быть хорошей.
Другие назначения навигации
Два назначения навигации вполне очевидны: одно из них помочь пользователю
найти то, что он ищет, а другое - указать текущее местоположение.
Третье назначение мы обсудили только что:
> Навигация дает почву для ног. Заблудиться где-либо - это, как правило, не
очень весело. (Что бы вам больше понравилось - «потерять свою дорогу» или
«знать куда идти»?) Если навигация разработана правильно, то она дает почву (пусть и виртуальную) для ног пользователя, а также служит в качестве
перил, на которые можно опереться.
Навигация также имеет и другие, не менее важные функции, которые, однако,
часто забываются.
Навигация помогает понять, что здесь находится. Будучи визуальным образом иерархии, навигация позволяет разобраться в содержании сайта. Другими словами, навигация помогает обнаружить содержание! И эта функция
навигации даже более важна, чем функция направления или определения
местонахождения.
> Навигация помогает понять, как пользоваться сайтом. Если навигация разработана правильно, то она самым явным образом показывает пользователю,
откуда следует начинать и какие он имеет возможности. Хорошая навигация
>
68
Глава 6
должна заменить собой все «инструкции» вместе взятые (тем более, что большинство пользователей все равно проигнорирует эти «инструкции»).
> От навигации зависит степень доверия пользователей к разработчикам сайта. Когда мы находимся на каком-то сайте, мы постоянно про себя оцениваем работу дизайнеров: «Эти ребята действительно хорошо все сделали?». И
наша оценка является основным фактором, определяющим наше отношение
к сайту. От нее зависит, придем ли мы на этот сайт еще раз или нет. Естественно, что тщательно разработанная навигация - это одна из возможностей, чтобы произвести благоприятное впечатление на пользователя.
Условности, применяемые
для навигации
Физические пространства в виде городов или зданий (и даже информационные
пространства в виде, например, книг и журналов) снабжены своими навигационными системами, в которых со временем появлялись свои условности в виде
дорожных указателей, номеров страниц или заголовков. Условности в той или
иной степени определяют внешний вид и расположение навигационных элементов так, чтобы нам было легко при необходимости их находить и использовать.
Размещение этих элементов в стандартных местах позволяет быстро и без усилий определять их положение, а их унифицированный вид дает возможность
быстро их различить на странице.
Например, мы привыкли видеть дорожные знаки на углах улиц, мы знаем, что
для того, чтобы их увидеть, нужно смотреть вверх (а не вниз), и мы привыкли к
тому, что они устанавливаются как обычно - горизонтально, а не вертикально.
Мы также принимаем как должное, что вывеска здания обычно помещается над
или рядом с главным входом в него. В магазине мы привыкли видеть указатели в
конце каждого товарного ряда. Мы также знаем, что в журналах обычно где-то на
Дорожные знаки и «хлебные крошки»
69
первых страницах помещается содержание номера, а где-то на краю каждой страницы указывается ее номер, причем все это выглядит именно так, как мы обычно
привыкли видеть номера страниц и содержания журналов.
Представьте, как это раздражает, когда такие условности нарушаются (когда,
например, на рекламных страницах журналов не указываются их номера).
В Интернете тоже быстро появились свои обычаи и условности для навигации —
они, главным образом, аналогичны тем, которые применяются в печатной продукции. В настоящее время они продолжают развиваться, и на данный момент
используются следующие основные навигационные элементы:
70
Глава 6
Сейчас вроде не видно,
но, по-моему, оно преследует нас
Веб-дизайнеры используют термин постоянная навигация (persistent navigation)
или глобальная навигация (global navigation) для описания навигационных элементов, которые появляются на каждой странице.
Грамотно разработанная постоянная навигация должна как бы говорить (желательно тихим и успокаивающим тоном):
Навигация всегда с вами. Некоторые ее элементы будут немного изменяться в зависимости от того, где именно вы находитесь. Но она всегда
будет здесь, и она всегда будет работать одинаковым образом.
Факт того, что навигация появляется в одном и том же месте на каждой странице и имеет при этом одинаковый вид, служит для пользователя мгновенным подтверждением того, что он находится на том же сайте, - а это намного важнее, чем
может показаться на первый взгляд. А унификация внешнего вида навигации
дает возможность пользователю (к счастью!) только один раз узнать, как она работает, и затем уже использовать ее не задумываясь.
Постоянная навигация должна включать в себя пять элементов, которым следует быть под рукой в любой момент:
Дорожные знаки и «хлебные крошки»
71
Мы рассмотрим каждый элемент в подробности через минуту, но сначала...
Я разве сказал «на каждой странице»?
Я ошибся. На самом деле, есть два исключения для правила «навигация должна
преследовать пользователя везде»:
> Начальная страница. Начальная страница отличается от других страниц сайта. Она выполняет особые задачи и несет особую нагрузку. Как мы увидим в
следующей главе, иногда имеет смысл не использовать на ней постоянную
навигацию.
>
Формы. На страницах, где находятся специальные формы, предназначенные для заполнения, использование постоянной навигации может иногда
оказаться излишним и только отвлекать внимание пользователя. Например,
при оплате покупок в Интернет-магазине от пользователя не требуется ничего, кроме как заполнить нужные формы. Это относится и к случаям, когда
нужно зарегистрироваться или дать ответ, или выбрать собственные настройки.
На страницах такого типа желательно иметь только минимальную версию
постоянной навигации, в нее нужно включить логотип сайта, ссылку на начальную страницу и несколько сервисов, которые могут помочь пользователю заполнить нужные формы.
Теперь я знаю, что мы не в Канзасе
Логотип или название сайта выполняет для него ту же роль, что и вывеска на
входе в какое-либо учреждение. Когда я иду в магазин, мне достаточно на входе
увидеть вывеску, чтобы внутри магазина точно знать, что я нахожусь в нем до
тех пор, пока не выйду. Другое дело Интернет: здесь основной способ перемещения - это телепортация, и поэтому мне нужно видеть эту «вывеску» на каждой
странице.
72
Глава 6
Мы ожидаем, что логотип сайта будет находиться в верхней части страницы,
обычно в верхнем левом углу или, по крайней мере, в непосредственной близости к нему 1 , - аналогично тому, как мы привыкли видеть табличку с наименованием учреждения прямо на его главном входе.
Это объясняется тем, что логотип представляет весь сайт в целом, и, следовательно, он занимает самую верхнюю позицию в логической иерархии сайта.
Данный сайт
Разделы сайта
Подразделы сайта
Субподразделы сайта
Данная страница
Области страницы
Элементы страницы
В визуальной иерархии каждой страницы можно сохранить эту доминирующую
позицию двумя способами: либо сделать логотип самым заметным объектом на
странице, либо поместить его так, чтобы он выполнял роль «рамки» для содержания страницы.
Конечно, нет смысла делать логотип сайта самым заметным элементом страницы (исключение может составлять только начальная страница сайта). Поэтому
лучшим местом для него - таким, где ничто не заставит меня задумываться, - является верхняя часть
страницы, как бы ее заглавие.
Мало того, что логотип находится там, где мы ожидаем его увидеть, он должен еще и выглядеть как логотип, т.е. иметь все атрибуты, полагающиеся для торговых марок или фирменных знаков: особый стиль шрифта и графики,
узнаваемый при любом размере изображения, начиная от кнопки и заканчивая
дорожным щитом.
Дорожные знаки и «хлебные крошки»
73
Разделы
Панель разделов - ее иногда называют основной навигацией (primary navigation) содержит ссылки на основные разделы сайта, представляющие верхний уровень
иерархии сайта.
В большинстве случаев, постоянная навигация {persistent navigation) содержит
также и вторичную навигацию (secondary navigation), т. е. список подразделов
текущего раздела.
Сервисы
Сервисами называются ссылки на довольно важные компоненты сайта, не принадлежащие к иерархии смыслового содержания.
Сюда входят либо разделы, которые помогают мне пользоваться сайтом, например «Помощь» (Help), «Картасайта» (Site Map), «Корзина» (Shopping Cart), либо
разделы, которые содержат информацию о создателе сайта, например «О нас»
(About Us), «Как с нами связаться» (Contact Us).
Так же как и указатели вспомогательных
служб в магазине, список сервисов должен
быть менее заметен, чем список разделов
сайта.
74
Глава 6
Набор сервисов может варьироваться в зависимости от типа сайта. Например, корпоративный сайт или интернет-магазин может иметь следующие сервисы:
О нас
Архивы
Оформить заказ
Информация о компании
Как с нами связаться
Отдел по работе с клиентами
Доски объявлений
Скачать
Каталог
Форумы
Часто задаваемые вопросы
Помощь
Начальная страница
Связи с инвесторами
Как покупать
Вакансии
Личный раздел
Новости
Отслеживание заказов
Пресс-релизы
Конфиденциальность
Регистрация
Поиск
Тележка для покупок
Вход
Карта сайта
Ваше местоположение в магазине
Ваш счет
Как правило, постоянная навигация может вместить только четыре или пять сервисов из тех, которые чаще всего могут понадобиться пользователю. Если вы попытаетесь поместить туда большее количество сервисов, то разобраться в них будет уже труднее. Реже используемые сервисы можно собрать в отдельную группу
на начальной странице.
Стоит отойти на три щелчка, как сразу
вспоминаешь, что «нет места лучше дома»
Одним из важнейших элементов постоянной навигации является кнопка или
ссылка для перехода на начальную страницу сайта.
Расположенная на видном месте, кнопка начальной страницы дает пользователю уверенность, что даже заблудившись в недрах сайта, с ее помощью он всегда
сможет начать все сначала, будто бы нажав «Сброс» или получив пропуск «Свободен» на выход из тюрьмы.
Последнее время появилась практика использовать логотип сайта в качестве
кнопки для перехода к начальной странице. На мой взгляд, эту ценную идею
стоит взять на вооружение и на других сайтах, однако крайне мало пользователей представляют себе такую возможность.
Дорожные знаки и «хлебные крошки»
75
Итак, можно порекомендовать один из следующих вариантов:
>
либо включить ссылку « В начало »
в строку разделов или сервисов;
>
либо на каждой странице, кроме
начальной, добавить к логотипу
сайта выражение «В начало».
Поиск
Учитывая потенциальные1 возможности поиска, а также то, что многие люди
предпочитают больше использовать окно поиска, чем переходить со страницы
на страницу, имеет смысл помещать само окно или соответствующую ему ссылку на каждой странице сайта. Исключение могут составлять случаи, когда объем
сайта небольшой и сайт имеет хорошую организацию. Другими словами, если на
вашем сайте действительно есть что искать, то поместите на нем поисковое окно.
Имейте в виду, что большой процент пользователей, впервые посетив сайт, сразу
начинают разыскивать что-нибудь, напоминающее окно поиска.
Формула окна поиска довольно проста: окно, кнопка и слово « Поиск ». Не усложняйте жизнь посетителям вашего сайта - придерживайтесь этой простой формулы, учитывая следующее:
>
Не используйте непривычных названий. Пользователи будут искать слово
«Поиск», поэтому используйте именно его, а не слова «Найти», «Быстро найти», «Быстрый поиск», «Поиск по ключевым словам». (Если слово «Поиск»
вы употребили в качестве заголовка для окна поиска, то на кнопке используйте также надпись «Пуск»(«Go»)).
К сожалению, мне приходится сказать именно «потенциальные», поскольку на большинстве сайтов результаты работы системы поиска только приблизительно в 50%
случаев являются полезными. Вопрос эффективности «поиска» сам по себе представляет довольно серьезную проблему, и здесь я могу посоветовать обратиться к книге
Льюиса Розенфельда и Питера Морвила «Информационная архитектура Всемирной
Сети» (изд. O'Reilly, 1998) (Louis Rosenfeld and Peter Morville «Information Architecture
for the World Wide Web») и принять близко к сердцу все, что там сказано о поиске.
76
Глава 6
>
Избегайте инструкций. Если вы будете придерживаться этой формулы, то любой, кто пользовался интернетом хотя бы пару дней, сможет разобраться с
тем, как применять окно поиска. Добавление фразы «Введите ключевое слово для поиска» напоминает запись на автоответчике: «Оставьте свое сообщение после сигнала». Раньше надо было объяснять последовательность действий, но сейчас это звучит неуместно.
>
Опции. Чтобы избежать путаницы с широтой поиска (просмотреть весь сайт?, часть сайта?, всю Сеть?),
обязательно обозначьте области поиска понятным образом.
Однако хорошо продумайте опции ограничения области поиска (например,
«только в текущем разделе»), а также опции расширения запроса (например, уточнения по названию, имени автора, номеру тома, наименованию продукта).
Мне редко приходилось видеть случаи, когда необходимость задумываться
над тем, что такое «опции расширенного поиска», как именно и нужно ли их
применять, оправдывалась бы потенциальной пользой от добавления их к
обычному окну поиска.
Если вы хотите дать пользователю возможность расширенного поиска, то
дайте ее тогда, когда это действительно нужно - если по запросу было получено слишком много результатов.
Одной из главных причин успеха сайта Amazon, на мой взгляд, является разумная организация системы поиска. Как я упомянул в первой главе,
Amazon - это один из первых (если не самый первый) книжных интернетмагазинов, в поисковом окне которого не стали использовать опцию выбора
по названию, имени автора или ключевому слову. Вместо этого пользователь
может вводить любую цепочку символов и по ней получать результаты своего запроса.
Я несколько раз проводил тестирования онлайновых книжных магазинов и
заметил, что первое действие, которое пользователи очень часто совершают
при обращении к поисковым системам на таких сайтах, - это попытка найти
книгу, данные о которой им известны, для того чтобы проверить, насколько
хорошо работает поисковая система. Множество тестов показало, что уже
первое использование поисковой системы на сайте Amazon заканчивалось
успехом, тогда как применение опций поисковых систем на других сайтах не
давало пользователям желаемых результатов, поскольку они не могли воспользоваться этими опциями правильно.
Дорожные знаки и «хлебные крошки»
77
Естественно, если вы обеспечиваете поисковую систему дополнительными опциями, то вам следует убедиться, что они работают нормально.
Например, когда на сайте Internet Movie Database я попытался найти цитату «Отвратительные жетоны» из «Сокровище в Сьерра Мадре», то по слову «признаки» при значении опции поиска «Все», принятой по умолчанию, был найден
только один вариант - какое-то старое телевизионное шоу.
Найти то, что я искал, удалось только после выбора значения опции «Цитаты».
Теперь догадайтесь, как все это отразилось на моем доверии к сайту IMDB.com.
78
Глава 6
Вторичная,третичная
и какая там еще навигация
Когда дизайнеры, с которыми мне еще не приходилось работать, приносят пробные варианты страниц для тестирования их юзабилити, очень часто оказывается, что блок-схема сайта содержит четыре структурных уровня...
...тогда как набор образцов содержит только начальную страницу и два верхних
уровня сайта.
И тогда я начинаю крутить эти страницы, недоумевая, куда подевалось все остальное, и стараюсь найти место, где они чудесным образом смогли укоротиться. Однако эти поиски ничем не заканчиваются. Видимо, это одна из самых распространенных проблем веб-дизайна (особенно это касается больших сайтов) - недостаточное
Дорожные знаки и «хлебные крошки»
79
внимание к навигации нижних уровней сайта по сравнению с верхними. На многих сайтах, как только вы проходите через второй структурный уровень, навигация перестает работать и становится произвольной. Эта проблема настолько распространена, что трудно найти пример сайта с хорошо разработанной навигацией
до третьего уровня.
Почему так происходит?
Отчасти это связано с тем, что хорошую многоуровневую навигацию просто-напросто трудно рассчитать - объем пространства на страницах ограничен, а количество элементов, которые нужно в них вместить, довольно большое.
Отчасти это происходит из-за того, что у разработчиков не хватает времени даже
на разработку и первых двух уровней сайта.
Кроме того, почему-то разработчикам кажется, что это не так уже и важно:
«В конце концов, ведь это не первичная и даже не вторичная навигация...».
И многие считают, что к тому моменту, когда пользователь добирается до нижних уровней сайта, он уже и сам может разобраться в том, как все работает.
Ко всему прочему, существует еще проблема содержания страниц нижнего уровня. Когда разработчики сайта запрашивают это содержание, они не всегда могут
получить его даже у тех, кто ответственен за его подбор, поскольку мало кому
приходило в голову продумывать сайт настолько глубоко.
Тем не менее, пользователи тратят на страницы с нижних уровней иерархии сайта не меньше времени, чем на страницы с верхних уровней. Поэтому если сразу
тщательным образом не разработать навигацию для всей структуры сайта, с самых верхних до самых нижних его уровней, то потом последовательно дополнить ее будет намного труднее.
Вывод? Очень важно обеспечить пробные страницы навигацией для всех предполагаемых уровней структуры сайта еще до того, как вы начнете обсуждать вопросы цветовой палитры начальной страницы.
Названия страниц, или почему я люблю
ездить по Лос-Анджелесу
Если вы когда-нибудь были в Лос-Анджелесе, то понимаете, что это не лирическая песня, а город больших дорог. Жители Лос-Анджелеса очень серьезно относятся к автовождению. Видимо, поэтому в городе самые лучшие дорожные знаки и указатели улиц из всех, которые я когда-либо видел. В Лос-Анджелесе:
>
Дорожные знаки имеют большие размеры. Когда вы останавливаетесь на одном
перекрестке, то можете прочитать указатель, установленный на следующем.
Глава 6
80
>
Каждый знак находится на правильном месте, т.е. над дорогой, по которой вы
едете, поэтому вам нужно всего лишь посмотреть вверх, чтобы прочесть его.
Должен признать, что мне очень понравилось такое отношение к водителям, так
как я сам из Бостона, где удачей можно считать уже то, что вам удалось разглядеть название улицы, на которую нужно повернуть.
В результате при поездке по Лос-Анджелесу я трачу меньше усилий и внимания на
то, чтобы определить, где я нахожусь, поэтому могу больше сосредоточиться на
движении, разговорах с попутчиками и прослушивании любимой радиопередачи.
Мне нравится ездить по Лос-Анджелесу.
Названия веб-страниц можно сравнить с дорожными указателями: когда все идет
нормально, их можно совсем не замечать. Но если у меня возникает ощущение,
что я двигаюсь в неправильном направлении, то мне нужно посмотреть на название страницы, чтобы определить собственное местонахождение.
Нужно знать четыре вещи относительно названий страниц:
> Каждая страница должна иметь название. Так же как на каждом перекрестке должен находится какой-либо дорожный знак или указатель, каждая
веб-страница должна иметь свое название.
Некоторым дизайнерам кажется, что достаточно всего лишь выделить название страницы в навигации.1 Это, конечно, заманчивая идея, потому что таким
образом можно сэкономить место на странице. Тем не менее, этого недостаточно, и на странице все-таки должно быть ее название.
Название страницы должно находиться в правильном месте. Другими словами, название страницы должно занимать в ее визуальной иерархии такое
место, чтобы оно «обрамляло» расположенное на ней содержание. (В конце
концов, в этом состоит основная задача именно названия, а не навигации или
См. раздел «Вы находитесь здесь» далее на стр. 82.
Дорожные знаки и «хлебные крошки»
81
рекламы, которые, в свою очередь, представляют всего лишь инфраструктуру
сайта.)
Название страницы должно быть заметным. Позиция, размер, цвет и шрифт
названия должны ясно показывать, что это заглавие для всей страницы в
целом. Поэтому, в большинстве случаев, текст названия страницы будет
иметь самый большой размер.
> Название страницы должно соответствовать названию ссылки, по которой я
щелкнул. Существует негласное правило о том, что «название страницы соответствует тем словам, по которым я щелкнул мышью для того, чтобы на эту
страницу попасть». Другими словами, если я щелкаю по ссылке или кнопке с
названием « Горячее картофельное пюре », то должен произойти переход к странице с названием «Горячее картофельное пюре».
Это может показаться банальным, но, в действительности, это негласное правило
имеет очень большое значение. В случае, когда это правило на сайте нарушается,
мне приходится, пусть даже на миллисекунду, задуматься: «Почему это отличается от того?». И если название ссылки существенно отличается от названия страницы или имеется много мелких несоответствий, то мое доверие к сайту, а, значит,
и к его издателям, снижается.
82
Глава 6
Естественно, что в некоторых случаях придется искать компромиссный вариант, так как пространство страницы ограничено. Если слова, по которым я щелкаю мышью, по каким-то причинам не соответствуют точно названию страницы, то важно добиться того, чтобы, во-первых, они соответствовали друг другу в
максимально возможной степени и, во-вторых, чтобы при этом причина несоответствия была ясна для пользователя. Например, если на сайте Gap.com я щелкаю по кнопкам с названиями «Подарки для него» и «Подарки для нее», то перехожу на страницы, которые называются «Подарки для мужчин» и «Подарки для
женщин». Названия кнопок и страниц не совпадают точно, однако они кажутся
настолько равнозначными друг другу, что это не вызывает у меня даже малейшего размышления.
«Вы находитесь здесь»
Одна из задач, благодаря которой навигация позволяет бороться с ощущением
«потери пространства» в Интернете, состоит в том, чтобы указывать пользователю его текущее местоположение на сайте, аналогично надписи «Вы находитесь
здесь» на схеме магазина или парка.
Дорожные знаки и «хлебные крошки»
83
В Интернете это осуществляется с помощью выделения текущей позиции во всех
навигационных меню, линейках и списках, используемых на странице.
В данном примере текущий раздел «Женская одежда» и подраздел «Брюки и рубашки» являются выделенными. Есть и другие способы выделения текущей позиции пользователя.
Самым распространенным недостатком указателей «Вы находитесь здесь» является их слабая выраженность. Такие указатели должны ясно выделяться, в противном случае они теряют свое назначение быть визуальными подсказками и
просто становятся визуальным шумом. Для большей надежности можно применять сразу несколько способов выделения текущей позиции - например, изменить
цвет шрифта и применить жирное начертание.
«Хлебные крошки»
Так же как и указатели «Вы находитесь здесь», «хлебные крошки» служат для
того, чтобы показать пользователю его текущее местонахождение (в них иногда
даже используются те же слова «Вы находитесь здесь»).
84
Глава 6
«Хлебные крошки» (breadcrumbs) - это название, возникшее как напоминание о
крошках хлеба, которые Ганс незаметно бросал в лесу, чтобы они с Гретой могли
найти дорогу домой.1
В отличие от указателей «Вы находитесь здесь», по которым пользователь может
определить свою позицию внутри иерархии сайта, «хлебные крошки» показывают только путь от начальной страницы до текущего местонахождения. Другими
словами, одно показывает вам, где вы находитесь в общей схеме сайта, другое как туда добраться (здесь разница такая же, как между картой местности и пошаговыми инструкциями; инструкции, конечно, могут быть очень полезными, но,
согласитесь, карта содержит куда больше ценной информации).2
Можно возразить, что закладки (bookmarks) больше напоминают сказочные хлебные крошки: мы ведь по пути «бросаем» их, и затем, если когда-нибудь понадобится, возвращаемся с их помощью на то же место. Можно также сказать, что
«посещенные ссылки» (ссылки, которые поменяли свой цвет после того, как по
ним щелкнули мышью) больше похожи на те сказочные крошки, потому что они
отмечают пути, на которых мы были. Более того, если вы снова не посетите их, то
через некоторое время ваш броузер3, как те птицы, «склюет» эти ссылки. 4
1
2
В этой истории рассказывается, как в трудные времена мачеха Ганса и Греты уговаривает их отца отвести детей в лес и оставить там, чтобы вся семья не голодала. Подозрительный и сообразительный Ганс расстраивает весь заговор тем, что по пути в лес
бросает камешки и по ним дети возвращаются домой. Но в следующий раз (!) Ганс
вынужден использовать хлебные крошки, которые оказываются неподходящим заменителем камешков, так как птицы склевывают крошки до того, как Ганс и Грета могут
вернуться по этим следам. В конце концов сказка переходит в описание попытки каннибализма, а также совершения грабежа и жертвоприношения. Но вообще - это история о том, насколько все-таки неприятно где-нибудь заблудиться.
В интерфейсе сайта LookSmart.com применяются особые «хлебные крошки», которые
показывают ваш текущий путь, а также все остальные пути, по которым вы не пошли.
Это очень хороший навигационный интерфейс для сайта с таким назначением
(LookSmart.com - это поисковая система), однако для большинства сайтов он не подходит, поскольку занимает целиком всю страницу.
Здесь роль играет не сам броузер, а его настройки. Количество дней, через которое
броузер перестает «запоминать» адреса посещенных страниц, устанавливается в «Жур-
Дорожные знаки и «хлебные крошки»
85
До последнего времени «хлебные крошки» были редкостью и встречались только
на сайтах, являющихся большими базами данных с очень глубокой иерархией,
как, например, поисковая система Yahoo...
либо их можно было увидеть на сайтах, представляющих собой целые порталы,
таких, например, как CNET:
В этом случае «хлебные крошки» служат для создания у пользователя представления о его текущем местоположении относительно других сайтов конгломерата,
не нарушая при этом их собственные (зачастую несовместимые друг с другом) навигационные системы.
Однако в последнее время «хлебные крошки» стали все чаще применять - и иногда
вместо тщательно разработанной навигации.
На мой взгляд, для большинства сайтов использование только «хлебных крошек» недостаточно для создания полноценной навигационной системы. С их помощью невозможно полностью показать иерархию сайта в ее верхних (хотя бы
двух) уровнях. Они могут указать только некоторое направление, а это все равно,
что держать глаза в шорах. Это вовсе не означает, что вы не сможете «найти дорогу» на сайте, где в качестве навигации используются только «хлебные крошки».
нале» для Internet Explorer (Сервис->Свойства обозревателя->Общие) или в «History»
для Netscape Navigator (Edit->Preferences->Navigator).- Примеч. науч. ред.
Посещенные ссылки, в конце концов, возвращают свой первоначальный цвет, если
снова не посетить их. Период хранения информации о посещенных ссылках варьируется между 7 и 30 днями в зависимости от используемого вами броузера. Мне остается только сказать, что такую гениальную ассоциацию по поводу «воображаемых птиц,
склевывающих посещенные ссылки» впервые описал не я, а Марк Бернштейн (Mark
Bernstein) еще в 1988 году. Натолкнулся я на эту ассоциацию в книге Питера Глора
«Основы гипермедийного дизайна» (Peter Glour, «Elements of Hypermedia Design»),
которую можно бесплатно прочитать по адресу www.birkhauser.com/hypermedia
86
Глава 6
Речь идет только о том, что в большинстве случаев «хлебные крошки» не подходят для того, чтобы представить сайт пользователю.
Не поймите меня неправильно. «Хлебные крошки» могут быть «самоочевидными» и не занимать много места на странице при условии, что они грамотно разработаны. Кроме того, они являются удобным и «последовательным» средством для
выполнения двух действий, которые пользователю приходится совершать чаще
всего: вернуться на один уровень назад или перейти на начальную страницу. Но
мне кажется, что они приобретают большую ценность, если используются как часть
«хорошо сбалансированной диеты», как дополнение к полноценной навигационной системе. Особенно это подходит для больших сайтов с глубокой иерархией или
для «колонии» субсайтов.
Лучше всего, на мой взгляд, «хлебные крошки» используются на сайте About.com,
и этот пример можно взять для иллюстрации нескольких советов.
>
Помещайте «хлебные крошки» в
верхней части страницы. «Хлебные крошки» лучше всего работают, если их поместить над всем содержанием страницы, - это,
образно говоря, отстраняет их, отчего они кажутся дополнением, наподобие номера страницы в книге
или журнале. Если поместить
«хлебные крошки» ниже, то они
начинают соперничать с основной
навигацией. А это заставляет меня
задумываться («Что именно является навигацией? А что нужно использовать?»).
> Между уровнями используйте символ >. Опыт показывает, что лучшим разделителем между названиями уровней является символ «больше» (>). Двоеточие (:) и косая черта (/) тоже подходят, но символ > кажется самым понятным
и верным - возможно потому, что визуально он предполагает движение вперед
на следующий уровень.
>
Применяйте небольшой размер шрифта. Именно для того, чтобы показать,
что это всего лишь дополнение к основной навигации сайта.
> Используйте слова «Вы находитесь здесь». Большинству людей будет понятно, для чего служат «хлебные крошки», но поскольку они набраны маленьким
шрифтом, то не помешает сделать их еще и «самопонятными».
Дорожные знаки и «хлебные крошки»
87
Применяйте жирное начертание для последнего элемента в списке. Последний элемент списка должен быть названием текущей страницы, и жирное
начертание позволит сделать его более заметным, как он того и заслуживает.
Не используйте «хлебные крошки» вместо названия страницы. Веб-разработчики много раз пытались назначить последнему элементу в списке двойную
роль с тем, чтобы не помещать название страницы еще раз. Для этого на некоторых сайтах шрифт последнего элемента делали большим.
На первый взгляд кажется, что это должно работать, но, в действительности,
так не происходит, вероятно потому, что это противоречит нашему ожиданию
увидеть заголовок слева или по центру, а вовсе не висящим где-то посередине
страницы в конце списка.
Четыре причины, по которым
мне нравятся вкладки
Меня мучает сильное подозрение, что вкладки изобрел
Леонардо да Винчи где-то в конце 15 века, потому что,
как это часто бывает с компонентами интерфейсов, они
1
явно выдуманы каким-то гением.
Вкладки - это один из тех редких случаев, когда использование физической метафоры в пользовательском ин2
терфейсе действительно работает. Так же как закладки в обычной канцелярской папке или разделители
в ящике картотеки, они делят содержание сайта на разделы и позволяют легко перейти к какому-либо из них,
Читателю предлагается самостоятельно выяснить когда
именно в Microsoft стали делать диалоговые окна с вкладками: до или после того, как Билл Гейтс приобрел записную книжку да Винчи.
Сразу вспоминается другая подобная идея, разработанная на Xerox PARC и популяризованная Apple — перетаскивать файлы к пиктограмме корзины для мусора с целью их
удаления. Однако, к сожалению, вся метафорическая соль этой идеи была испорчена
тем, что в Apple стали использовать то же самое действие «перетаскивания к корзине»
для извлечения дискеты из дисковода. В результате, у миллионов пользователей теперь возникает один и тот же вопрос: «Стоп. А это не сотрет всю дискету?».
88
Глава б
всего лишь щелкнув мышью по соответствующей вкладке.
В последнее время эта идея стала особенно популярной, и на многих сайтах вкладки теперь используются как средство навигации.
На мой взгляд, вкладки являются превосходным навигационным устройством для
больших сайтов потому, что:
> Вкладки « самоочевидны ». Я никогда не встречал кого-нибудь (причем независимо от уровня «компьютерной необразованности»), кто, взглянув на интерфейс с вкладками, произнес бы: «Гм, интересно, а что это такое? ».
>
Вкладки трудно не заметить. Когда я провожу тесты «Найти и щелкнуть», то
удивляюсь тому, насколько часто люди не замечают панели с кнопками в верхней части страницы. 1 Но, поскольку вкладки визуально очень выделяются,
их трудно просмотреть. Кроме того, их трудно принять за что-либо еще кроме
навигации, поэтому они создают заметное с одного взгляда разделение между
навигацией и содержанием.
> Вкладки приятны для глаз. Веб-дизайнеры всегда стремятся сделать свои страницы визуально более привлекательными, но не в ущерб скорости загрузки
страниц. Грамотно разработанные вкладки (см. далее) делают страницы красивее и интереснее и при этом не увеличивают общий объем страниц.
Хотя чему удивляться - признаюсь, я и сам десятки раз пользовался My Yahoo, пока
меня не осенило, что ряд ссылок в верхней части страницы относился к остальным
разделам My Yahoo. А мне всегда казалось, что это просто страница и что ссылки были
всего лишь продолжением содержания Yahoo.
Дорожные знаки и «хлебные крошки»
89
Вкладки создают эффект физического пространства. Вкладки создают ощущение физического продвижения вперед.
Этот простой трюк основан на человеческой способности легко принимать, что
какие-то вещи находятся впереди других вещей. В результате, вкладки вызывают сильное ощущение того, что сайт состоит из разделов и вы находитесь
внутри одного из них.
Если вам так нравится Amazon,
то почему бы не выйти за него замуж?
Сайт Amazon был одним из первых сайтов, на котором стали использовать вкладки разделов (впрочем, как и другие хорошие идеи веб-дизайна), причем подход к
их использованию был действительно правильным. Со временем разработчики
отладили вкладки практически до совершенства и продолжают их добавлять, даже
несмотря на расширение ассортимента предлагаемых товаров.1
1
Пока я писал эту главу, на сайте Amazon появился очередной ряд вкладок.
Последняя версия выявила одну слабость вкладок, а
именно: это средство не имеет возможности расширения (в отличие, например, от меню, которые могут выходить за пределы страницы).
Пока не ясно, насколько эффективно использование
большого числа вкладок, однако на Amazon проводилось
тестирование и других методов навигации, включая и
списки в стиле Yahoo на начальной странице, но пока
разработчики сайта остановились на вкладках. Ко всему прочему надо сказать, что редко когда возникает необходимость использовать на сайте больше, чем один
ряд вкладок.
Глава 6
90
Тем, кто решил использовать вкладки на своем сайте, следует прежде изучить
многолетний опыт их применения HaAmazon.com и постараться выполнить четыре основных требования:
>
Вкладки должны быть четко прорисованы. Для того чтобы вкладки хорошо
работали и создавали нужный эффект, их графика должна создавать визуальную иллюзию того, что активная вкладка находится впереди других вкладок. Именно это свойство - даже больше, чем внешнее подобие, - вызывает
ощущение того, что это вкладка.
1
Никогда не придавайте графическим элементам вид вкладок, если не планируется,
чтобы они действовали как вкладки. Такая ошибка встречается на одном из самых
лучших сайтов в Интернете — Internet Movie Database, владельцем которого является
Amazon.
Кнопки в верхней части каждой страницы выглядят как вкладки, но действуют они
как обычные кнопки.
Дорожные знаки и «хлебные крошки»
91
Для получения такой иллюзии активная вкладка должна иметь другой цвет
или контрастный оттенок, кроме того, она должна быть визуально связана с
пространством под ней. Все это определяет эффект «выскакивания» активной
вкладки вперед.
Вкладки должны быстро загружаться. Один-единственный ряд вкладок на
Amazon состоял только из двух графических элементов и потребовал меньше,
чем 6 Кбайт на страницу, включая логотип!1
На некоторых сайтах для каждой вкладки (или, в других случаях, кнопки)
используется своя графика, при этом они разделяются между собой промежутками.
Обычно так поступают по двум причинам:
2
> Всплывающая графика. Для того чтобы сделать графику вкладок всплывающей, каждый элемент должен быть отдельным графическим файлом.
Всплывающая графика имеет свои достоинства, но я полагаю, что в большинстве случаев она не оправдывает себя. (Более подробно об этом см. в
следующей главе.)
Я намеренно в качестве примера привожу прежний вариант вкладок, поскольку (а)
двухрядный вариант, используемый на Amazon сегодня, принципиально не отличается от прежнего, и (б) если вы будете применять вкладки на вашем сайте, то скорее
всего больше одного ряда вам не понадобится.
Всплывающая графика - это такой графический элемент, который замещается другим элементом, когда над ним помещается курсор. Такая графика может применяться для выделения кнопок и обозначения возможности щелкнуть по ним мышью, для
создания всплывающих подсказок к кнопкам или просто для «оживления» страницы.
92
Глава 6
Неверное убеждение, что «так будет быстрее». Теоретически, после загрузки первой страницы большинство элементов будет кэшировано на
пользовательском жестком диске1 так, что при переходе от одной страницы к другой броузер будет догружать только те компоненты, которые не
были загружены ранее или были изменены, а не все подряд.
Это, конечно, привлекательная теория, но в действительности у пользователей уходит больше времени на загрузку первой страницы, т.е. того, что как раз
должно загружаться быстро.
И даже если графика находится в кэше, броузер все равно посылает запрос на
сервер по поводу каждого элемента для проверки того, не был ли он обновлен.
В тех случаях, когда сервер занят, возникает визуальный эффект беспорядочного появления вкладок по мере того, как загружаются соответствующие страницы.
Естественно, что это не производит хорошего впечатления на пользователя.
1
Когда страница запрашивает какую-то графику, то перед тем как загрузить ее с сайта,
броузер сначала проверяет, не находится ли нужный файл в кэше на жестком диске,
где хранятся недавно использованные графические элементы. Если броузер их обнаруживает (и если они не обновлялись на сервере со времени вашего последнего посещения), то они загружаются прямо с жесткого диска, тем самым уменьшая общее время загрузки страницы.
Дорожные знаки и «хлебные крошки»
>
93
Вкладки должны выделяться
цветом. На сайте Amazon для
каждого раздела используется
вкладка особого цвета, тогда как
остальные навигационные элементы на странице остаются в одном, общем цвете.
Назначать особый цвет каждому
разделу - это хорошая идея при
условии, что вы не рассчитываете, что каждый пользователь будет учитывать это цветовое кодирование. Некоторые люди
(приблизительно каждый двенадцатый мужчина и каждая
двухсотая женщина - главным
образом старше 40 лет) не способны замечать цветовые различия из-за цветовой слепоты.
Но еще более важно по моим наблюдениям то, что значительно большая доля
людей (приблизительно половина) просто не осознает, что цвет элементов имеет какое-то смысловое назначение. Поэтому цветовое обозначение полезно как
дополнительное средство, на которое никогда не следует полагаться полностью, считая единственным способом выделения.
Сайт Amazon отличается использованием довольно ярких, насыщенных цветов, которые трудно не заметить. Кроме этого, между активной вкладкой и
неактивными, окрашенными в нейтральный бежевый цвет, создается хороший контраст, заметный даже для людей, не различающих цвета.
Глава 6
94
> Одна из вкладок должна быть выбрана. Если ни одна из вкладок не оказывается уже выбранной в момент, когда я захожу на сайт (как, например, это сделано на сайте Quicken.com), то нужное воздействие вкладок теряется в первые же
секунды.
insurance Taxes Banking Retirement
На начальной странице сайта Amazon всегда была выбрана какая-то из вкладок. Долгое время это была вкладка «Книги».
Но по мере того, как этот сайт становился все менее ориентированным на книги, разработчики сделали для начальной страницы свою вкладку и назвали ее
«Добро пожаловать!».
BOOKS
mum
VIDEO TOYS & GAMES I
e tmm AUCTIONS
*$KQPS
Теперь на начальной странице можно было представлять разные товары (не
только книги) из других разделов сайта. Однако сделано это было с риском
потерять тех потребителей, которые все еще рассматривают Amazon как преимущественно книжный магазин и очень не любят целых два раза щелкать
мышью для того, чтобы перейти к разделу, посвященному книгам. Таким образом, проблема интерфейса является только отражением более глубокой и
сложной дилеммы.
Дорожные знаки и «хлебные крошки»
95
Попробуйте протестировать
Теперь, когда вы уже кое-что знаете о тонкостях навигации, я предлагаю вам
попробовать мой тест на определение хорошей веб-навигации.
Представьте, что вы оказались с завязанными глазами внутри автомобиля.
Вас куда-то отвозят и выбрасывают на одной из страниц, находящейся в недрах веб-сайта. Если эта страница грамотно разработана, то после того как у
вас прояснится в глазах, вы сможете без всяких затруднений ответить на следующие вопросы:
> Что это за сайт? (Логотип сайта)
> На какой странице я нахожусь? (Название страницы)
> Какие главные разделы на этом сайте? (Разделы)
> Какие опции есть на этом уровне? (Локальная навигация)
> Где именно я нахожусь в общей структуре сайта?
(Указатели «Вы находитесь здесь»)
> Каким образом осуществляется поиск ?
Почему такой детективный сюжет? Причина в том, что пребывание в Интернете
часто напоминает не приятную прогулку по саду, а, скорее, выполнение неких
действий под скрытым принуждением. Дизайнеры склонны думать, что пользователи сначала знакомятся с начальной страницей сайта, и только потом переходят непосредственно к страницам, пользуясь аккуратными дорожками, которые для них подготовили. Но, в действительности, пользователь зачастую
оказывается в середине какого-то сайта, не представляя, где он находится, так
как он всего лишь щелкнул по ссылке, полученной в поисковой системе или на
другом сайте, и совершенно не знаком с местной навигацией.
А зачем завязывать глаза? Ваше зрение должно быть слегка расстроенным, ведь
цель тестирования не в том, чтобы не спеша и тщательно разобраться во всех деталях содержания, а в том, чтобы определить, насколько легко различаются все
элементы страницы без необходимости внимательно их рассматривать. Таким
1
образом, вы оцениваете только общее положение дел на странице, а не детали.
Том Туллис из Fidelity Investments проводил аналогичные эксперименты, задачей
которых была оценка эффективности разных шаблонов для страниц. Он предъявлял
участникам эксперимента шаблоны с бессмысленным текстом и предлагал по внешнему виду определить разные элементы на них (как, например, заголовки или элементы навигации).
96
Глава б
Вот как следует проводить этот тест:
> Шаг первый. Выберите случайным образом любую страницу сайта и распечатайте ее.
> Шаг второй. Держите страницу на расстоянии вытянутой руки и взгляните на
нее краем глаза так, чтобы не рассматривать ее внимательно.
>
Шаг третий. Попытайтесь как можно быстрее найти и обвести карандашом
каждый элемент из приведенного ниже списка (не все элементы должны обязательно присутствовать на странице).
Дорожные знаки и «хлебные крошки»
97
Потренируйтесь в проведении этого теста на четырех страницах, которые приведены далее, и сравните ваши и мои ответы.
А когда закончите, попробуйте также протестировать с десяток случайных страниц, взятых с разных сайтов. Это хороший способ для развития вашего собственного чутья к тому, что может работать и что не может работать в веб-дизайне.
98
Глава 6
Дорожные знаки и «хлебные крошки»
99
100
Глава б
Дорожные знаки и «хлебные крошки»
101
102
Глава б
Д о р о ж н ы е з н а к и и «хлебные к р о ш к и »
103
Глава
Первый шаг к
выздоровлению признание того,
что начальная
страница
не в порядке
Разработка начальной страницы
Люси, ну-ка, объясни свое поведение.
Дези Арназ в роли Рики Рикардо
Р
азработка начальной страницы час
то напоминает мне о телевизионной
игре 50-х годов «Победи время»
(«Beat the Clock»).
Каждый участник этой игры внимательно
выслушивал, как ведущий игры Бад Кольер объяснял, какой трюк нужно было выполнять. Например: «Вам дается 45 секунд
на то, чтобы забросить 5 водяных шаров в
дуршлаг, закрепленный на вашей голове».
Задание хотя и казалось всегда «с подвохом» , но все же при определенном везении
было выполнимым.
Бад Кольер подбадривает мужественного
Однако когда участник игры уже был готов участника
начать выполнять задание, Бад всегда добавлял что-нибудь вроде: «Да, забыл сказать, что все это вам нужно проделать с
завязанными глазами...», или «...под водой», или «...в пятом измерении».
Так же и с начальной страницей сайтов. Как только вы начинаете думать, что вот
теперь уж все сделано, появляется еще что-то, о чем вы совсем забыли.
Итак, начальная страница должна содержать следующее:
> Цель и назначение сайта. Начальная страница должна исчерпывающим образом объяснять, что это за сайт и для чего он создан. Желательно также, чтобы
пользователю были даны объяснения, почему ему следует быть именно здесь,
на этом сайте, а не на другом.
Иерархия сайта. Начальная страница должна давать обзор того, что на сайте
предлагается в плане содержания (Что я могу найти здесь?) и возможностей
(Что я могу делать здесь?), а также показывать, как все это на сайте организовано. Обычно эти функции выполняет постоянная навигация.
> Поиск. На большинстве сайтов начальная страница должна содержать хорошо различимое окно поиска.
>
106
Глава 7
> Анонсы содержания сайта. Так же как и
обложка журнала, начальная страница
должна увлечь пользователя намеками на
«очень интересное» содержание сайта.
> Обзор содержания («Content Promos»)
рассказывает о новейших, лучших и самых популярных элементах содержания,
как, например, последние статьи или выгодные предложения.
> Обзор сервисов («Feature promos») предлагает пользователю посетить дополнительные разделы сайта и воспользоваться
какими-нибудь услугами, как, например,
персонализация или подписка на рассылку новостей.
> Периодически обновляемое содержание.
Если успех сайта зависит от количества
повторных посещений пользователей, то
лучше сделать так, чтобы часть содержания на начальной странице периодически
обновлялась. И даже в том случае, если не
предполагается, что сайт будут посещать
постоянные посетители, лучше, чтобы он
все-таки подавал какие-то признаки жизни (например, с помощью ссылки на недавний пресс-релиз).
Реклама. Пространство начальной страницы резервируется также и для всевозможной рекламы.
Ярлыки. Элементы содержания сайта, которые наиболее часто запрашиваются посетителями (например, обновленные версии программного обеспечения),
заслуживают того, чтобы на начальной странице находились ссылки для быстрого перехода к ним.
Регистрация. Если на сайте используется регистрация, то на начальной странице должны размещаться специальные ссылки для новых посетителей и для
тех, кто уже зарегистрировался. Следует также предусмотреть указатели, сообщающие о том, что вы зарегистрированный пользователь (например, «Рады
вас снова видеть на нашем сайте, Стив Круг!»).
Первый шаг к выздоровлению...
107
Кроме того, начальная страница должна служить нескольким общим целям:
>
Показывать мне то, что я ищу. Начальная страница должна ясно показывать,
как получить то, что мне нужно, - при условии, что это вообще находится на
сайте.
>
...и то, что я не ищу. В то же время, начальная страница должна сообщать мне
о том, что на данном сайте есть некоторые другие вещи, которые также могут
меня заинтересовать, несмотря на то, что в данный момент я их не ищу.
> Показывать мне место, откуда нужно начинать. Нет ничего хуже, чем натолкнуться на начальную страницу, на которой невозможно понять, где начало.
> Вызывать доверие к сайту. В некоторых случаях начальная страница может
оказаться единственным шансом произвести на посетителя сайта благоприятное впечатление.
И все это вам нужно проделать...
с завязанными глазами
Хотя это и не страшно, но все же условия довольно жесткие.
Вот ряд ограничений, о которых нельзя забывать:
> Каждый хочет получить свой кусок. Поскольку эту страницу видит почти каждый посетитель (а иногда она оказывается и единственной из просмотренных),
то содержание, которое особенно выделяется на начальной странице, посещается чаще, чем другие.
В результате, начальная страница напоминает прибрежную недвижимость: площади ограничены, но на них самый большой спрос. Все, кто имеет свою долю во
владении сайтом, желают, чтобы их баннер или ссылка на их раздел были помещены на начальной странице. Поэтому за визуальное пространство начальной страницы всегда ведутся ожесточенные бои.
Учитывая склонность многих пользователей пробегать вниз по странице не дальше ближайшей интересной ссылки, особенно тяжелая борьба происходит из-за
сравнительно небольшого участка «над сгибом»1.
>
1
Слишком много кухарок. Поскольку начальная страница имеет очень большое значение, каждый (даже генеральный директор вашей компании) считает своим долгом иметь свое мнение по поводу ее разработки.
Термин, заимствованный из газетного дела; означает часть страницы, которую вы можете видеть не прокручивая ее на экране.
108
Глава 7
> Один размер, который подходит для всех. В отличие от страниц с нижних уровней сайта, начальная страница предназначена для привлечения всех посетителей, независимо от их интересов.
Первая жертва этой борьбы
Если сайт хоть сколько-нибудь сложный, то даже самая совершенная начальная
страница не сможет выполнить всего, что для нее назначают. Поэтому разработка начальной страницы всегда сопряжена с поиском компромиссного варианта. И
во время нахождения этого компромиссного варианта, и по мере того, как растет
давление, выталкивающее очередной элемент с пространства начальной страницы, некоторые вещи теряются неизбежно.
Главное, чего ни в коем случае нельзя забывать во время этой перетасовки (и что
чаще всего забывается), - это основная идея сайта. Когда мне дают проект начальной страницы сайта, я почти всегда уверен, что в этом проекте не показано ясно,
чем является этот сайт.
Первый шаг к выздоровлению...
109
Начальная страница должна как можно быстрее и яснее ответить на следующие
четыре вопроса, возникающие в моей голове, когда я захожу на новый сайт:
Начальная страница должна быть такой, чтобы я смог ответить на эти вопросы с
одного взгляда правильно, однозначно и не прилагая для этого особых усилий.
Если в первые же секунды мне не становится понятно, что я вижу, то далее мне уже
трудно интерпретировать все содержание страницы, и, скорее всего, я пойму чтото неправильно, а это только приведет меня в замешательство.
Но если я сразу «въезжаю», то значительно вероятнее, что я правильно интерпретирую все, что увижу на странице, и, значит, останусь доволен ее содержанием.
Не поймите меня неверно: конечно, важно привлечь, заинтересовать, произвести
впечатление на посетителя. Однако найдется множество людей, входящих или не
входящих в вашу группу разработчиков, кто позаботится о том, чтобы все это не
забылось. А вот о том, чтобы донести основную идею сайта, часто все-таки
забывают.
Глава 7
110
Пять главных предлогов для того, чтобы не выражать
основную идею сайта на начальной странице
Когда вы занимаетесь разработкой сайта, вам все
настолько ясно, что вы просто забываете подумать,
будет ли это очевидно для всех.
Не многие люди станут избегать посещать сайт только потому, что каждый раз будут встречать одно и то
же объяснение его основной идеи, разумеется при
условии, что это объяснение не занимает полстраницы. Подумайте, разве вас будет смущать набранное
мелким шрифтом название научного журнала, если
логотип сайта — его аббревиатура.
Хочется думать, что тот, кто не «въехал» в ваш сайт
сразу с первого посещения, вообще не является вашей аудиторией. Но в действительности это не так.
При тестировании сайтов нередко слышишь: «Надо
же! Я пользовался этим все время, но, в целом, так и
не понял, что это за сайт».
Даже если люди видели вашу телевизионную, радиоили печатную рекламу 1 , будут ли они хорошо помнить, о чем ваш сайт к тому моменту, как доберутся до него?
Если сайт очень сложен или необычен, то особая ссылка на начальной странице для новых посетителей неплохая идея. Но это не избавляет от необходимости ясно показать основное назначение сайта, поскольку большинство пользователей не обратится к ней до
тех пор, пока их собственные попытки разобраться во
всем самостоятельно не окажутся неудачными. Однако, возможно, к тому моменту они уже будут ощущать полное разочарование.
В свое время сайт Outpost.com, представляя Super Bowl, выпустил совершенно жуткий ролик, в котором из пушки выстреливали крыс. Позже он был заменен пристойной рекламой, в которой комик Мартин Мул объясняет потребителям, что же все-таки
продает Outpost.com (компьютеры, электронное оборудование). «Мы могли бы сказать
вам это раньше, но мы стреляли из пушки», - шутит он. «О чем мы думали?..» - Wall
Street Journal, 30.04.2000.
Первый шаг к выздоровлению...
111
Как передать основную идею
Все, что находится на начальной странице, может служить для объяснения того, о
чем этот сайт. Тем не менее, есть две важные области страницы, где мы ожидаем
увидеть ясное изложение основной идеи сайта.
>
Слоган. Одно из самых ценных мест на начальной странице - это пространство, которое находится сразу рядом с логотипом сайта. Когда мы видим
текст, визуально примыкающий к логотипу, то мы знаем, что это слоган сайта, который мы воспринимаем как описание всего сайта. Мы подробно рассмотрим слоганы в следующем разделе.
>
Текст приветствия. Здесь должно содержаться краткое описание сайта, оформленное в виде заметного блока и размещенное на видном месте (без прокручивания экрана).
Речь идет не о том, что эти два элемента будут обязательно рассматривать, более
того, их могут и не заметить на странице. Большинство пользователей сначала
попытается догадаться, о чем тот или иной сайт, из беглого обзора начальной страницы. Если же они не смогут в этом разобраться, лучше, чтобы на странице было
место, где они могли бы об этом узнать.
Есть еще третья возможность. Вы можете использовать все пространство в верхней части страницы справа от логотипа сайта для того, чтобы поместить там всю
необходимую информацию о назначении сайта. Однако в этом случае вам придется
постараться сделать так, чтобы было ясно, что вся эта область является продолжением логотипа, а не баннерной рекламой, которая обычно там помещается.
112
Глава 7
Вот несколько советов:
> Используйте столько пространства, сколько нужно. Конечно, есть сильный
соблазн вообще не тратить места на какие-либо описания идеи сайта, поскольку, во-первых, трудно себе представить, что кто-то еще не знает, о чем же этот
сайт, а во-вторых, каждый стремится использовать пространство начальной
страницы для совсем других целей.
Возьмем, например, сайт Essential.com. Здесь предлагается совершенно новая
услуга (выбор поставщика энергии и средств коммуникации), поэтому требуется специальное «объяснение» о назначении сайта, для чего разработчики не
пожалели большей части начальной страницы. Почти каждый элемент начальной страницы помогает объяснить пользователю, для чего сайт работает.
Первый шаг к выздоровлению...
>
113
...но не используйте больше, чем нужно. Для большинства сайтов нет необходимости тратить много места для того, чтобы сообщить об основном предложении. И у людей обычно нет желания погружаться в описания, если они занимают чуть ли не всю начальную страницу. Старайтесь быть краткими. Стремитесь
передать только основную идею и самые важные моменты (не более четырех),
избегая детальных описаний каждой возможности, доступной на вашем сайте.
> Не используйте описание назначения сайта в качестве приветственного текста. На начальных страницах многих сайтов можно встретить описания, которые звучат так, словно они были написаны финалисткой конкурса «Мисс
Америка»: «Компания XYZ предлагает высококлассные продукты в такой
бурно развивающейся сегодня области, как...». Мало кто читает такие тексты.
>
Начальная страница настолько важна, что ее обязательно нужно тестировать. Нельзя полностью полагаться на свой вкус в разработке начальной страницы. Необходимо привлекать других людей, не входящих в вашу организацию, для оценки того, насколько описание назначения сайта и его основная
идея выражены на начальной странице.
Нет ничего лучше хорошего слогана!
Слоган (tagline) - это емкая фраза, которая характеризует все дело в целом и
кратко объясняет суть и преимущества того, что предлагается. Слоганы давно
используются в рекламном, издательском и развлекательном бизнесе: например, «Тысячи видеомагнитофонов по невероятно низким ценам!», «Здесь боль1
2
ше звезд, чем на небе» , «Все новости, которые стоит печатать» .
Слоган студий звукозаписи «Matro-Goldwyn-Mayer» в 30-е и 40-е годы.
All the News That's Fit to Print - слоган газеты «The New York Times». Должен признаться, что мне больше нравится пародия, используемая в журнале «Mad»: «All the
News That Fits, We Print» (Мы печатаем все подходящие новости). - Примеч. перев.
Глава 7
114
Слоган обычно располагается сразу под, над или рядом с логотипом сайта.
Слоганы позволяют очень ясно и изящно передать основную идею сайта и в краткой форме сообщают о его (сайта) назначении.
Вот некоторые свойства плохих и хороших слоганов:
> Хорошие слоганы информативны по содержанию и имеют ясную визуальную
форму.
www.computerundeground.com
>
Плохие слоганы неразборчивы.
www.sonicnet.com
>
Хорошие слоганы имеют достаточную длину. Шесть-восемь слов уже вполне
достаточно для слогана, чтобы он мог передать всю мысль и не быть утомительным.
Первый шаг к выздоровлению...
>
115
Хорошие слоганы сообщают об особенностях и преимуществах.
> Плохие слоганы имеют слишком общий смысл.
Не забывайте, что слоганы отличаются от девизов (которые могут быть такими, например, как «Мы привносим в жизнь только самое лучшее», «Вы в хороших руках», «Чтобы обслуживать и защищать»). Девиз выражает какой-либо
принцип, или цель, или идеал. Тогда как слоган сообщает о ценном предложении. Девиз имеет возвышенное и убеждающее звучание, но он не сообщает мне
о том, что именно предлагается.
Хорошие слоганы привлекательны и имеют живое и иногда остроумное звучание. Однако все эти качества хороши при условии, что они помогают ясно передать сообщение о выгодном предложении.
Глава 7
116
Слоган?
Нам не нужен затасканный слоган
На некоторых сайтах можно обойтись вообще без слогана. Например:
>
Группа сайтов, достигших статуса обиходных
1
и повседневных.
> Сайты, названия которых хорошо известны
по их оффлайновым источникам.
Но лично я считаю, что даже эти сайты могли бы выиграть от использования слоганов. В конце концов, независимо от степени известности названия, имеет смысл
сообщить вашим пользователям, почему для них будет выгодным воспользоваться именно вашим сайтом. И даже если сайт создается на основе уже известной
марки, его назначение не всегда совпадает с назначением онлайнового оригинала,
поэтому это различие важно объяснить пользователю.
Пятый вопрос
Когда я уже разобрался с тем, что же я вижу на начальной странице, остается еще
один важный вопрос, на который мне нужно получить ясный ответ:
Даже сайт Amazon имел слоган до 1998 года, когда его название уже было обиходным
словом, но оно еще не появлялось на обложке журнала «Тайм».
Первый шаг к выздоровлению...
117
Когда я впервые захожу на какой-то сайт, то быстрый взгляд на начальную страницу должен помочь мне уверенно определить следующее:
>
Вот отсюда я должен начать, если хочу что-то найти.
>
Вот отсюда я должен начать, если хочу побродить по сайту.
>
Вот отсюда я должен начать, если хочу сразу перейти к самому главному содержанию.
На тех сайтах, на которых взаимодействие с пользователем основано на пошаговом процессе (например, ипотечный сайт), точка начала должна быть настолько
заметной, чтобы буквально била по глазам. Кроме того, должны быть хорошо
заметны места, где нужно пройти регистрацию или войти как уже зарегистрированный пользователь (sign in), если возможность регистрации на сайте предусмотрена.
К сожалению, необходимость рекламировать все (или, во всяком случае, все, что
согласуется с бизнес-моделью, утвержденной на этой неделе) не всегда позволяет
легко находить точки начала, особенно, когда начальная страница до отказа заполнена кричащими надписями «Начните отсюда!» или «Нет, сначала щелкните
здесь!».
Чтобы избежать этого, лучше всего, чтобы точки начала выглядели как точки
начала (т. е. чтобы окно поиска имело вид окна поиска, а список разделов выглядел как список разделов). Также не помешает сделать понятные надписи, например, «Поиск», «Смотреть каталог», «Вход», «Начало» (для пошаговых
процессов).
Навигация начальной страницы
может быть другой
Веб-разработчики иногда меня спрашивают, насколько важно, чтобы навигация
начальной страницы была той же самой, что и во всей остальной части сайта.
Например, если постоянная навигация имеет горизонтальную форму, то может ли
навигация на начальной странице быть вертикальной?
Мой ответ однозначен: «Конечно, навигация может различаться, но при условии,
что эти различия не будут слишком большими».
Учитывая особое назначение начальной страницы, иногда имеет смысл не использовать на ней постоянную навигацию. Обычно навигация на начальной странице
имеет следующие отличия:
> Описания разделов. Поскольку назначение начальной страницы состоит в том,
чтобы раскрыть наиболее полно то, что находится за ней, то, возможно, пона-
118
Глава 7
добится добавить к названиям разделов (а может быть еще и к названиям подразделов) краткие описания, для которых недостаточно места на каждой
странице.
>
Другая ориентация. Очень часто для начальной страницы требуется другой
вид дизайна, отличающийся от дизайна остальных страниц. Поэтому вместо
вертикальной компоновки навигации может понадобиться горизонтальная или
наоборот.
>
Больше места для отличительных знаков. На начальной странице логотип
сайта обычно крупнее, чем на других, - точно так же, как над входом в магазин
висит огромная вывеска. Кроме того, обычно на начальной странице рядом с
логотипом нужно отвести место для слогана, который на других страницах
может не использоваться.
Важно, чтобы различия в навигации делались только по необходимости. Постоянная навигация и навигация на начальной странице должны быть довольно схожи, чтобы пользователи могли сразу видеть, что это всего лишь варианты одного и
того же.
Самое важное - это соблюсти точное соответствие в названиях разделов: порядок и
формулировки должны быть одинаковыми. Постарайтесь также сохранить одинаковыми как можно больше визуальных особенностей: цвет и тип шрифта, использование строчных и прописных букв.
Например, интерфейс сайта Wildfire.com имеет довольно хороший дизайн и, в общем, превосходную функциональность. Однако между начальной страницей и остальной частью сайта имеется слишком большое различие в навигации.
Первый шаг к выздоровлению..
119
Вполне допустимо, чтобы на начальной странице сайта навигация имела вертикальную компоновку, а на остальных страницах — горизонтальную. Также допустимы незначительные отличия в названиях разделов, если очевидно, что речь идет
об одном и том же (например «Наша компания» и «О компании»; «Для покупателей» и «Покупателям»),
Но вот что сильно отличается от начальной страницы:
>
>
>
«I Want Wildfire» вдруг превратилось в «Customer»,
« WildTalk» исчезло совсем,
« Enterprise » появилось ниоткуда и
>
даже совпадающие имена расположены в другом порядке.
Глава 7
120
В результате эти две навигационные системы трудно сопоставить. Иными словами, когда я покидаю начальную страницу сайта, я вынужден заново учить навига1
цию, вместо того чтобы спокойно пользоваться сайтом .
Всплывающие элементы
Известно, насколько ценной является площадь начальной страницы, так что не
удивительно, что разработчики стараются использовать все возможности, чтобы
расширить эту площадь, подобно тому, как прибрежные земли расширяют за счет
мусора.
Один из известных способов - это использование всплывающих элементов
(rollovers), которые содержат пояснительный текст (обычно это краткое описание
раздела или список подразделов), «всплывающий» в момент, когда вы наводите
курсор на название раздела.
www.gooey.com
Компьютерный агент, которому посвящен сайт Wildfire, — это лучший пример полезного компьютерного агента из всех, которые я когда-либо видел, а точнее, слышал на
сегодняшний день. С помощью распознавания речи и некоторых других хитрых функций эта программа удивительным образом имитирует очень внимательного и вежливого личного помощника, справляющегося со всеми входящими и исходящими телефонными звонками и электронными сообщениями. Если вы еще не сталкивались с
этим продуктом (например, позвонив Роджеру Блэку), то стоит послушать его онлайновую демонстрационную версию. Разработчики продукта проявили большую сообразительность в понимании того, что в действительности важно не то, насколько разумным может быть сделан компьютерный агент, а то, насколько разумным вы можете
заставить его казаться.
Первый шаг к выздоровлению...
121
В принципе, это неплохо, так как такие элементы позволяют дать дополнительную
информацию о содержании раздела, не загромождая основное пространство страницы. Но, к сожалению, у всплывающих элементов есть некоторые недостатки:
> Необходимость поиска. Вы не можете увидеть такое описание, если будете просто смотреть на страницу. Для того чтобы оно появилось, вам нужно приложить усилие и навести курсор на нужное место.
> Вы не можете видеть несколько элементов одновременно. Раз вы не можете
видеть сразу все описания, то у вас нет возможности просматривать их и сравнивать.
>
Неустойчивость восприятия. Трудно читать текст, который появляется и потом быстро исчезает. Поэтому такие описания должны быть (вы, наверное,
удивитесь!) максимально короткими.
> Всплывающие элементы неэффективны, если появляются далеко от того места, куда вы навели курсор. В идеале всплывающие элементы должны появляться непосредственно рядом с кнопкой, на которую вы указали. Иначе приходится постоянно переводить взгляд с того места, куда вы указали, на то, где
находится текст подсказки.
К счастью, эти недостатки проявляются не часто.
Глава 7
122
Если вы создаете всплывающие элементы на основе «чистого» HTML,
работающего в любых броузерах, то
такие всплывающие элементы не
могут появляться поверх других
элементов, поэтому для них на странице нужно оставлять свободное место. Поскольку это приводит к большому расходу полезного пространства, веб-разработчики стремятся
делать так, чтобы все всплывающие
элементы появлялись в одном и том
же месте, что очень усложняет их
восприятие.
Если вы собираетесь использовать
именно такой тип всплывающих
элементов, то старайтесь, чтобы
текст был как можно короче, и размещайте их поблизости от того места, куда пользователю нужно будет наводить указатель мыши (таким образом, следует либо оставлять «дыры» в макете страницы, либо применять что-либо более совершенное, чем обычный HTML,
например слои DHTML).
Однако все указанные проблемы не относятся к наиболее распространенному
варианту использования всплывающих элементов - выделению кнопок, при
наведении на них курсора.
На Pets.com сделаны очень
симпатичные динамические
изображения домашних животных,
всплывающие при наведении курсора
на соответствующий раздел
Всплывающие элементы, которые применяются для визуализации отклика на
наведение курсора, могут очень оживить страницу и, кроме того, позволяют
экономить пространство страницы за счет уменьшения размера кнопок.
Первый шаг к выздоровлению...
123
Выпадающие меню
Другой способ расширения площади начальной страницы — это использование выпадающих (pulldown) меню,
которые действительно позволяют экономить полезное
пространство. *
К сожалению, выпадающие меню также не лишены недостатков.
> Необходимость полного просмотра. Для того чтобы
увидеть список меню, вам нужно сначала по нему щелкнуть мышью. Таким образом, вы не можете увидеть
элементы списка, если будете просто просматривать
страницу. Естественно, это затрудняет показ информации о содержании сайта.
>
Затрудненность просмотра. Разработчики страницы не могут регулировать
шрифт, пробелы и другие параметры форматирования списка меню в том случае, когда нужно сделать его более удобным для чтения 2 . Кроме того, отсутствует хороший способ для разделения списка на подгруппы.
>
Неустойчивость восприятия. Как и всплывающие элементы, списки быстро
появляются и исчезают, что также затрудняет их чтение.
Выпадающие меню больше всего подходят для алфавитных списков известных названий, например, стран, областей, товаров, поскольку их чтение не требует дополнительного размышления. Если я ищу видеомагнитофоны,
то мне всего лишь нужно переместить список до буквы «в».
Однако списки существенно менее удобны в тех случаях,
когда я ищу что-то, название чего мне не известно, особенно когда список не алфавитный или просто он настолько
длинный, что его нужно прокручивать. Но, к сожалению,
разработчики, стремясь сэкономить место на странице,
обычно делают списки довольно длинными.
Хорошо
Хуже
Некоторым пользователям выпадающие меню кажутся удобными, тогда как другие стараются ими вообще не пользоваться. Мне кажется, что в большинстве случаев недостатки таких меню все-таки перевешивают их достоинства.
1
2
В английском языке еще используется вариант drop-down (ниспадающее) menus. Никто
не знает точно, как они называются правильно.
Это справделиво только для сайтов, не использующих CSS (Cascading Style Sheets) Примеч. науч. ред.
124
Глава 7
Ротация рекламы
Для расширения полезного пространства начальной страницы используется еще
один хороший метод, он особенно подходит для рекламирования услуг, которые предлагаются на сайте.
Суть его состоит в том, что вместо нескольких небольших баннеров, которые всегда видно, используется то же пространство для циклической демонстрации тех
же баннеров, но большего размера, причем смена баннеров происходит при каждой
новой загрузке страницы.
Когда используются небольшие статические баннеры, то даже после нескольких
посещений страницы вероятность того, что я замечу их, приближается к нулю.
Такой вариант приводит только к пустой трате ценного пространства. Но если
баннеры периодически переменяют друг друга, то это с большей вероятностью может привлечь мое внимание, тем более что на участке с большим размером легче
создать заметный и интересный баннер.
Ротация баннеров группами по три элемента позволяет уменьшить известную проблему веб-рекламы, связанную с тем, что возвращаясь на какую-либо страницу, вы не всегда можете увидеть ту же самую рекламу, которая была там в первое ваше посещение. Для этого на каждом баннере нужно поместить ссылки на
другие два.
Поскольку каждый баннер будет демонстрироваться только треть всего времени
цикла, этот метод может не подойти рекламодателям или другим партнерам,
которые впадают в панику при мысли, что какие-то из посетителей не подвергнутся воздействию их рекламного сообщения. (В таких случаях лучше применять маленькие и неэффективные статические баннеры.) Именно поэтому я обычно рекомендую применять этот метод для собственных рекламных нужд сайта.
Первый шаг к выздоровлению...
125
Почему «золотые гуси» - такие соблазнительные
мишени, или «А по вкусу это напоминает цыпленка!»
Есть нечто, связанное с разработкой начальной страницы, что очень часто просто
упускается из виду. Когда я бываю на обсуждениях дизайна начальной страницы,
то замечаю, что часто мимо моих ушей проскакивает фраза «...чтобы не убить золотого гуся» 1 .
Существует четыре самых распространенных способа «убить гуся».
> Разместить баннерную рекламу, когда в этом нет необходимости. На начальную страницу совершается намного больше посещений, чем на какую-либо
другую страницу сайта. Естественно, это вызывает желание разместить рекламу в первую очередь на ней. Но если наличие рекламы ухудшает впечатление посетителей, то они могут больше не вернуться на начальную страницу, а это значит, что и все остальные страницы сайта не будут удостоены их
внимания.
Наверное, самое худшее свойство баннерной рекламы заключается в том, что
она сдвигает вниз начало страницы, тем самым оставляя меньше пространства
«над сгибом», которое можно окинуть одним взглядом, и меньше возможности для создания хорошего впечатления.
Кроме того, что баннерная реклама занимает много ценного места, она еще
является самым медленным по загрузке элементом на странице. Где-где, а именно на начальной странице, следует прежде всего избегать медленной загрузки.
Я всегда думал, что эта фраза (to kill the golden goose) взята из сказки про Джека и
Фасолевый Стебелек. На самом деле, у Джека-Великана был гусь, который нес золотые яйца. Но этого гуся никто не убивал. Этот безмозглый убийца появился уже в
Эзоповой басне, сюжет которой довольно прост: некий человек находит гуся, потом
его охватывает жадность, потом он убивает гуся и в результате не получает золотых
яиц. Мораль: «жадность часто превосходит самое себя».
126
Глава 7
Обратите внимание, ведь я сказал «когда в этом нет необходимости». Если
ваши бизнес-планы предусматривают использование на начальной странице
баннерной рекламы для привлечения внимания посетителей, тогда, конечно,
на начальной странице вам нужно помещать рекламу. В этом случае вам нужно хотя бы установить ограничения на объем ее загрузки, а также тщательно
разработать дизайн начальной страницы таким образом, чтобы реклама не сильно сдвигала начало страницы вниз.
>
Рекламировать все подряд. Проблема рекламирования на начальной страницы состоит в том, что такая реклама слишком эффективна. Все, что имеет заметную ссылку на начальной странице, будет гарантированно иметь большую
(обычно существенно большую) частоту посещений, что, естественно, вызывает у совладельцев сайта мысли вроде: «А почему бы не поместить туда и мою
рекламу?».
Однако дело здесь в том, что выгоды и потери от размещения все большего
объема рекламы на начальной странице распределяются неравноценно, и тот
раздел, который рекламируется, получает огромное увеличение посещений, в
то время как общая потеря эффективности начальной страницы в результате
ее загромождения рекламой падает бременем уже на все остальные разделы.
Все это является хорошим примером « трагедии общих ресурсов »*. В ней утверждается довольно простая закономерность: «Любой общий ресурс неизбежно
истощается от чрезмерного использования». В качестве иллюстрации можно
взять городские пастбища. За каждое животное, выпущенное на пастбище,
скотовод получает впоследствии доход от его продажи (+1). Однако негативный эффект от выбивания этим животным пастбища отражается на всех, поэтому на каждого скотовода в отдельности этот эффект составит меньше, чем
(-1). В этой ситуации для каждого скотовода представляется разумным добавить еще по одному животному в свои стада. А потом еще одно, и еще одно... и
желательно раньше, чем это сделают другие скотоводы. Таким образом, данный общий ресурс обречен на уничтожение.
Требуется постоянная бдительность в том, чтобы уберечь начальную страницу
от чрезмерной рекламной нагрузки, которая обычно растет довольно незаметно с каждым добавлением «только еще одного баннера». Всем держателям сайта следует хорошо помнить об опасности «выбивания» начальной страницы
1
Понятие, впервые использованое математиком-любителем Уильямом Форстером Ллойдом, жившим в XIX столетии, стало известным по классическому эссе «Трагедия общих ресурсов» на тему проблемы перенаселенности, написанному биологом Гаррет
Хардин («The Tragedy of the Commons», журнал Science, декабрь 1968 г.).
Первый шаг к выздоровлению...
127
и искать другие методы привлечения посетителей, такие, например, как перекрестная реклама (cross-promoting) с других популярных страниц или поочередное использование пространства на начальной странице.
Позволить рекламе главенствовать на начальной странице. Одно из самых
интересных изобретений Сети - это идея взаимной рекламы, которая еще называется «перекрестной рекламой».
В своем крайнем проявлении такая реклама превращается в головокружительный рой маленьких рекламных баннеров, в результате создавая то, что Ричард Джинграс из Excite@Home называет «эффектом
Наскара» 1 .
Многим хочется думать, что такой вал баннеров перекрестной рекламы действительно приносит какуюто пользу - ведь существует множество компаний,
чьи бизнес-планы основаны на взаимном обмене этими баннерами, как Конфедеративными деньгами.
Но горькая правда состоит в том, что большинство
пользователей не обращают на них никакого внимания, поскольку им ясно, что баннеры перекрестной рекламы существуют не для нужд пользователей, а для бизнеса.
Кроме того, сами рекламные баннеры обычно имеют такие небольшие размеры, что вряд ли могут быть сколько-нибудь эффективными, - это все равно,
что поместить маленький логотип на бампере автомобиля, несущегося со скоростью 200 миль в час.
Но хуже всего, когда реклама начинает главенствовать на начальной странице
и затмевает собой основную цель и содержание сайта.
Не поймите меня неправильно. Я не призываю вас отказаться от рекламы.
Просто постарайтесь не позволять ей главенствовать на начальной странице.
NASCAR - популярные в США автомобильные гонки. Здесь имеется в виду, что размещенные в большом количестве небольшие наклейки - стикеры - не привлекают никакого внимания зрителей. - Примеч. науч. ред.
128
Глава 7
«Вымогать» данные о пользователе. На некоторых сайтах делается следующая ошибка: не успел еще посетитель переступить через порог, как от него
сразу пытаются вытребовать его личные данные. В худшем случае, пользователя просят пройти регистрацию даже еще до того, как он может посмотреть
сайт в целом, что по сути равносильно вывеске «Убирайтесь отсюда!». К счастью, такую ошибку в большинстве случаев совершают только начинающие
веб-дизайнеры.
Но даже на сайтах высокого уровня иногда наблюдается желание погнаться
сразу за всеми зайцами.
Например, стартовая кнопка на сайте BabyCenter.com имеет отличный
дизайн: кнопка легко воспринимается, ее легко использовать и невозможно не заметить (благодаря бросающемуся в глаза заголовку «Начало» и
огромной стрелке).
Все, что вам остается сделать, - это
ввести дату рождения вашего ребенка (или предполагаемую дату рождения), после чего на начальной странице появится информация в соответствии с возрастом ребенка или текущей стадией беременности.
Такой подход, конечно, весьма эффективен для того, чтобы быстро заинтересовать пользователя. Однако даже
такой высококлассный сайт, как
BabyCenter.com, не смог уйти от соблазна сразу же попросить пользователя сообщить свой адрес электронной почты. (Хотя, как вы можете убедиться сами, вам совсем и не обязательно сообщать адрес электронной
почты для того, чтобы воспользоваться информацией, - но это не ясно сразу,
до тех пор, пока не нажмешь на кнопку «Go».)
Я подозреваю, что большое число посетителей не пользуется этим сервисом изза необходимости предоставлять личную информацию, но не отказались бы
попробовать им воспользоваться, если для получения информации было бы
достаточно ввести только дату рождения. Вместе с тем, эти же люди, вероятнее
всего, охотно сообщили бы свой адрес электронной почты, если бы он запрашивался после знакомства с этим сервисом, когда им уже известно, что именно
они получат в ответ.
Первый шаг к выздоровлению...
129
Теперь попробуйте себя
в роли эксперта
Оцените, насколько хорошо разработаны следующие две начальных страницы.
Рассмотрите страницы по отдельности, и в каждом случае попытайтесь ответить
на следующие два вопроса. Затем сравните свои ответы с моими.
>
Какая основная идея, назначение сайта?
>
Откуда можно начинать пользоваться сайтом?
130
Глава 7
Первый шаг к выздоровлению...
131
132
Глава 7
Первый шаг к выздоровлению...
133
134
Глава 7
Первый шаг к выздоровлению...
135
136
Глава 7
Первый шаг к выздоровлению...
137
Глава
«Скотовод и
пастух должны
быть друзьями»
Почему споры относительно веб-дизайна и
юзабилити являются пустой тратой времени
и как их избежать
Одним людям нравится держаться за плуг.
Другим — ходить за коровами.
Но это не значит, что они не могут быть друзьями.
«Оклахома!»1 Оскар Хаммерстейн II
Н
ельзя сказать, что веб-разработчики отличаются умением легко разрешать вопросы юзабилити. В большинстве случаев, в рабочих группах
тратится много драгоценного времени на бесконечные обсуждения и споры по поводу одних и тех же вопросов.
Рассмотрим следующую сцену:
«Оклахома!» - известный американский мюзикл, поставленный по бродвейскому
спектаклю режиссером Ф. Циннеманом в 1955 году. - Примеч. лит. ред.
Глава 8
140
А есть ли какие-нибудь
исследования на тему
выпадающих меню?
Я называю эти бесконечные дискуссии «религиозными спорами», потому что они
очень напоминают большинство споров по поводу религии или политики. Стороны горячо отстаивают свои убеждения о том, что, в принципе, не может быть доказано, с целью договориться о лучшем способе свершения чего-то важного (идет ли
«Скотовод и пастух должны быть друзьями»
141
речь о достижении вечного покоя, эффективном государственном управлении или
просто о разработке страниц). И, как большинство подобных споров, они редко
заканчиваются тем, чтобы кто-либо из участников изменил свою точку зрения.
Такие споры порождают напряжение в рабочей группе и разрушают уважение сотрудников друг к другу, не говоря уже о том, что они препятствуют нахождению
правильных решений и приводят к пустой трате времени.
К сожалению, есть несколько причин, которые неизбежно приводят к возникновению таких споров в группах по веб-разрабтке. В этой главе я постараюсь описать
эти причины и рассказать о лучшем, на мой взгляд, средстве против них.
«Каждый любит...»
Все мы, чья работа как-то связана с веб-сайтами, имеем одну общую черту - мы
также являемся пользователями. И так же, как и всем пользователям, нам что-то
нравится в тех или иных сайтах, а что-то нет.
Нам, как и обычным людям, могут нравиться Flash-анимации потому, что они
красивые, а могут и не нравиться потому, что они долго загружаются. Или нам
могут нравиться меню на левой стороне каждой страницы потому, что они нам
знакомы, удобны в использовании, - или не нравиться потому, что они скучны.
Нам могут, действительно, нравиться сайты вон с тем, а сайты вот с этим - не
нравиться.
И когда мы включаемся в группу по веб-разработке, для нас трудно освободиться
от личных предпочтений и вкусов. В результате собирается группа людей, каждый
с собственными взглядами относительно того, что считать правильным и что неправильным для создания хорошего сайта.
Обычно эти убеждения - и человеческая природа, в которой они рождаются, довольно сильны, поэтому появляется естественная тенденция переносить свои
вкусы на пользователей Интернета в
целом, т. е. думать, что большинство
пользователей предпочитает то же, что
и мы.
142
Глава 8
Конечно, нельзя сказать, что мы думаем, будто каждый пользователь такой же,
как и мы. Мы знаем, что есть люди - и некоторые из них есть даже в нашей рабочей
группе, - которым не нравится то, что нравится нам. Но эти люди просто неразумные. И к тому же их не так много.
Скотоводы против пастухов
Кроме личных пристрастий имеются еще и профессиональные. Так же как и скотоводы и пастухи из «Оклахома!», участники групп по веб-разработке имеют разные
взгляды на то, что является хорошим веб-дизайном, исходя из того, чем именно
они занимаются.1
Взять, например, дизайнеров (designers) и разработчиков (developers). Дизайнеры
склонны думать, что большинству людей нравятся сайты, которые визуально интересны, поскольку им самим нравятся визуально интересные сайты. Вероятно,
они потому и стали дизайнерами, что любят хороший дизайн, — им кажется, что
2
хороший дизайн помогает сделать все интереснее и понятнее.
С другой стороны, разработчики склонны думать, что людям нравятся сайты со
множеством интересных сервисов, поскольку им самим нравятся сайты с большим количеством интересных сервисов.
В результате дизайнеры хотят создавать сайты с потрясающим дизайном, а разработчики хотят создавать сайты с интересными, оригинальными и удобными сервисами. Не знаю, кто в данном случае выступает в роли скотоводов, а кто - пастухов, но я хорошо знаю, что различия в их подходах, в конце концов, когда приходит
время определять приоритеты разработки, приводят к конфликту и горьким обидам.
1
2
В этой пьесе скотоводы, зажиточные и богобоязненные отцы семейств, постоянно ссорятся со свободолюбивыми пастухами. Скотоводам нравятся заборы и изгороди, пастухи любят открытые пространства.
Конечно, я прибегаю к стереотипам, но здесь они помогают понять суть дела.
«Скотовод и пастух должны быть друзьями»
143
В то же время, дизайнеры и программисты оказываются участниками другого, еще
большего конфликта - по классификации Арта Клейнера - между «культурой ре1
месла» и «культуройажиотажа».
Если «культура ажиотажа» (сюда входит менеджмент, маркетинг и разработка
бизнес-проектов) сосредоточена, главным образом, на раздаче различных обещаний для привлечения капитала, пользователей, стратегических партнеров и выгодных сделок, то задача по выполнению этих обещаний падает грузом на плечи
тех, кто входит в «культуру ремесленников», т. е. дизайнеров и программистов.
Таким образом, и без того сложные споры по поводу вопросов юзабилити усугубляются этой вечной борьбой между искусством и коммерцией (или, возможно, скотоводами и пастухами против железнодорожных магнатов), перенесенной в Интернет, - часто в виде авторитарных указов, издаваемых со стороны «культуры
2
ажиотажа».
Миф о среднем пользователе
Убеждение в том, что большинство пользователей подобны нам, вполне способно
вызвать затор в ходе самого обычного рабочего обсуждения по поводу веб-дизайна.
1
См. «Corporate Culture in Internet Time» (Корпоративная культура в эпоху Интернета)
в журнале «strategy+business» (www.strategy-business.com/culture_change/00103/).
2
Однажды я столкнулся с довольно изощренным сервисом на начальной странице
одного неплохого и, в остальных отношениях, разумно разработанного сайта. Когда я
спросил об этом сервисе, мне ответили: «Ах, это... Ну, нашему начальнику пришла
эта идея во сне, поэтому нам пришлось использовать ее». Поверьте, история абсолютно
реальная.
144
Глава 8
Однако кроме этого убеждения, может быть другое, еще более коварное - убеждение в том, что большинство пользователей можно представить в виде некой модели.
Когда столкновение личных и профессиональных мнений приводит к тупику, разговор обычно переходит к поиску какого-то способа (это могут быть специальные
исследования, фокусные группы, пользовательские тесты или оценка экспертов)
для определения того, что нравится и не нравится большинству пользователей —
другими словами, что представляет собой «Средний Пользователь Интернета».
Проблема здесь только в том, что такого Среднего Пользователя не существует.
На практике, мой опыт наблюдения за тем, как люди пользуются Интернетом,
привел меня к совершенно противоположному выводу о том, что каждый пользователь уникален и имеет свой особенный способ использования Интернета.
И чем внимательнее вы следите за тем, как они используют Интернет, и прислушиваетесь к их намерениям, мотивам и мыслям, тем более вы понимаете, что
индивидуальные реакции на страницы основаны на таких случайностях, что
любые попытки описать пользователей одномерным понятием «нравится» - «не
нравится» всегда будут тщетны и бессмысленны. Напротив, хороший дизайн
всегда учитывает эту сложность.
Хуже всего то, что миф о Среднем Пользователе укрепляет мысль о том, что хороший веб-дизайн основан, главным образом, на включении того, что людям
нравится. Этот подход привлекателен своей простотой: выпадающие меню - это
либо хорошо (потому что большинству людей они нравятся), либо плохо (потому
что большинству людей они не нравятся). На начальной странице (не) нужно размещать ссылки на все, что есть на сайте. Меню, помещенные вверху страницы,
работают лучше, чем те, которые внизу. Страницы, которые можно прокручивать, это либо хорошо, либо плохо; либо белое, либо черное и т. д.
Суть в том, что на большинство вопросов веб-дизайна (по крайней мере на главные
вопросы) не существует простых «правильных» ответов. Хорошо все, что работает и отвечает потребностям пользователей, будучи тщательно продуманным, хорошо выполненным и протестированным.
1
Возьмем, например, использование Flash. Какой-то части пользователей очень
нравится Flash. Тогда как не меньшая часть пользователей терпеть не может
Flash. Хотя, на самом деле, им не нравится плохое применение Flash: большие и
сложные анимации, которые долго загружаются и кажутся бесполезными. Если
вы внимательно расспросите этих людей, задавая правильные вопросы, то, скорее
Средство ко.мпании Macromedia, предназначенное для создания анимированных и
интерактивных пользовательских интерфейсов. Не путать с понятием flash («мелькание» - пишется со строчной буквы), которое означает произвольное применение
взрывоподобных средств для того, чтобы сделать сайт более интересным.
«Скотовод и пастух должны быть друзьями»
145
всего, узнаете, что этим же самым людям понравились бы сайты с небольшими и
тщательно разработанными элементами Flash, которые оживляли бы содержание
страниц и добавляли к ним полезную функциональность, при этом не «вставая
поперек дороги».
Все сказанное не значит, что нет вещей, которые следует никогда не делать, или
вещей, которые если и можно применять, то только изредка. Существуют способы создания веб-страниц, которые однозначно неверны. Нужно сказать только,
что по поводу такого рода способов в группах веб-разработчиков споров как раз
не возникает.
Средство против религиозных споров
Все дело в том, что не имеет смысла задавать вопросы вроде «Большинству людей нравятся выпадающие меню?». Правильнее задать другой вопрос: «Вот это
выпадающее меню, с этими элементами и такими формулировками в таком
контексте, вот на этой странице создаст хорошее впечатление у большинства
пользователей из тех, которые возможно воспользуются этим сайтом?»
И есть только один способ получить ответ на такого рода вопрос - это тестирование. Используйте общий опыт, мастерство, творческие способности и здравый
смысл вашей группы для создания хотя бы черновой версии вашей работы и затем понаблюдайте внимательно за тем, как обычные люди пытаются разобраться с этим и понять, что это и как этим пользоваться.
Иных способов нет.
Споры о том, что людям нравится или не нравится, приводят только к потере
времени и истощают силы коллектива, тогда как тестирование позволяет снять
препирательства и преодолеть тупики, переводя разговор из плоскости - что правильно или неправильно, в плоскость - что работает или не работает. Тестирование показывает, насколько разнообразными могут быть мотивация, восприятие и
реакции пользователей, что, естественно, никак не согласуется с мыслью о том,
что все пользователи имеют такие же вкусы, как и мы.
Последние три главы посвящены тому, что, почему и как тестировать.
Глава
Юзабилититестирование за
10 центов в день
Как упростить тестирование,
чтобы сделать его доступным
Почему мы не сделали этого раньше?
Слова, которые в какой-то момент произносит
каждый, кто присутствует при первом
тестирования юзабилити своего сайта
Г
де-то раз в месяц на моем автоответчике появляется
одно из таких сообщений:
Как только я слышу фразы «через две недели» (или даже «через два месяца») и
«юзабилити-тестирование» в одном предложении, я сразу же вспоминаю то самое
ощущение «пожарного-бросающегося-внутрь-горящего-химзавода», потому что
я прекрасно понимаю, о какой ситуации идет речь.
Если говорят, что через две недели, значит почти наверняка это просьба об авральном тестировании. Дата запуска сайта стремительно приближается, и все нервничают по этому поводу. И в этот момент кто-то говорит: «Может, нам лучше провести тестирование юзабилити? ».
Если же речь идет о двух месяцах, то, скорее всего, они просто хотят уладить какой-то внутренний спор - обычно это касается чего-то специфичного, например,
цветовой палитры. Мнения в коллективе разделились между двумя разными подходами к дизайну: одним нравится сексуальный вариант, другим - элегантный. В
конце концов, кому-то из тех, кто наделен полномочиями выделять средства, надоедает этот спор, и он говорит: «Ладно, чтобы уладить этот вопрос, давайте проведем тес ирование».
148
Глава 9
Самое главное заключается в том, что, хотя юзабилити-тестирования и помогают
уладить такие споры, они обычно выявляют, что предмет, вокруг которого велись
эти споры, не так уж и важен. По сути дела, люди хотят прибегнуть к тестированию для того, чтобы выяснить, какого цвета должны быть занавески, когда окна
в доме даже еще и не поставлены. Например, с помощью тестирования они могут
открыть для себя, что нет большой разницы между тем, использовать ли горизонтальную навигацию или вертикальное меню, если никто не может понять, в чем
состоит идея сайта.
К сожалению, большинство юзабилити-тестирований проводится либо в недостаточном объеме, либо слишком поздно, либо с неверными целями.
Повторяем все вместе:
метод фокусных групп - это не то же
самое, что юзабилити-тестирование
Иногда тот телефонный звонок звучит с еще большей обеспокоенностью в голосе.
Если в просьбе о срочном тестировании упоминаются фокусные группы, то, скорее
всего, идея о таком тестировании возникла в отделе маркетинга. Во время разработки сайта сотрудники отделов маркетинга часто чувствуют себя лишенными
возможности влиять на ход разработки. Несмотря на то что они больше всех стараются определить потенциальную аудиторию сайта и ее потребности, дизайнеры
и разработчики все-таки имеют больше возможности влиять на процесс построения сайта.
Юзабилити-тестирование за 10 центов в день
149
По мере того как приближается дата запуска сайта, сотрудникам отдела маркетинга может показаться, что их единственный шанс сохранить здравый рассудок - это прибегнуть к авторитету исследований. А способом исследования, известным для них, является метод фокусных групп.
Иногда мне приходится изрядно потрудиться, чтобы объяснить клиентам, что
на самом деле нужно применять юзабилити-тестирование, а не метод фокусных
групп. Вот вкратце в чем состоит разница между этими исследовательскими подходами:
> В методе фокусных групп небольшая группа людей (обычно от 5 до 8 человек) садится за стол и оценивает идеи и образцы дизайна, которые им демонстрируются. Это групповой процесс, и его результаты основаны главным образом на том, как участники группы реагируют на мнения друг друга. Метод
фокусных групп подходит для того, чтобы быстро получить диапазон мнений и оценок пользователей по поводу тех или иных вещей.
>
В юзабилити-тестировании каждому пользователю по отдельности демонстрируется нечто (это может быть сайт, опытный образец сайта или макеты
отдельных страниц) и затем его просят либо попытаться понять, что он видит, либо выполнить какое-то задание.
Метод фокусных групп очень полезен для определения, в самом общем виде,
потребностей и предпочтений вашей аудитории. Он подходит для проверки того,
насколько разумна идея сайта и насколько его «ценное предложение» привлекательно для пользователей. Кроме того, это хороший способ для подбора названий для сервисов на вашем сайте, а также выяснения, что же люди думают о
ваших конкурентах.
Однако метод фокусных групп не позволяет определить, как работает ваш сайт и
как можно его улучшить.
С помощью этого метода вы можете узнавать те вещи, которые нужно знать на
ранних этапах, еще до начала непосредственной разработки. Конечно, этот метод можно применять и позже, например, для уточнения деталей или при пользовательском тестировании. Но метод фокусных групп не может вам показать, насколько людям удобно и легко пользоваться вашим сайтом, поэтому нельзя путать
этот метод с другим - юзабилити-тестированием.
Немного правды о тестировании
Вот те основные вещи, которые я знаю о тестировании:
> Если вы хотите получить хороший сайт, то его нужно тестировать. После
того как вы поработаете с сайтом хотя бы пару недель, вы уже не сможете
посмотреть на него свежим взглядом. Вы слишком много знаете. Поэтому
единственный способ узнать, как он работает, - это протестировать его.
150
Глава 9
Тестирование напомнит вам, что не все люди думают так же, как и вы, знают то
же, что и вы, и используют Интернет тем же самым способом, что и вы.
Раньше я считал, что тестирование похоже на путешествие - оно познавательно. Вы узнаете, насколько люди разные и, в то же время, одинаковые. Оно дает
вам возможность увидеть все свежим взглядом.
Однако теперь я думаю, что тестирование больше напоминает встречу друзей
из разных городов. Когда вы показываете им свой город, вы сами неизбежно
начинаете видеть те вещи, которых обычно не замечаете потому, что привыкли к ним. В то же время, выясняется, что другие вещи, абсолютно понятные
для вас, совсем не очевидны для других.
> Лучше протестировать одного пользователя, чем не тестировать ни одного.
Тестирование всегда полезно. Даже самый плохой тест с самым неподходящим
пользователем поможет вам увидеть то, что позволит улучшить ваш сайт.
>
Лучше протестировать одного пользователя в начале разработки, чем 50
пользователей в конце. Большинство людей почему-то думает, что тестирование - это слишком «большое и серьезное» дело. Но если вы отнесетесь к
тестированию так же, вы не будете проводить его на достаточно ранних этапах разработки и с достаточной частотой, чтобы извлечь из него максимальную пользу. Простой тест, причем пораньше, когда у вас еще есть время, чтобы использовать его результаты, почти всегда ценнее, чем изощренный тест
и поздно.
Одно из распространенных мнений заключается в том, что при необходимости можно легко вернуться и внести в веб-разработку какие-то изменения.
Однако оказывается, что это не так уж и просто - внести изменения в уже
открытый сайт. Некоторые пользователи будут недовольны почти любым
изменениям, и даже незначительные перемены часто влекут за собой серьезные последствия. Поэтому старайтесь с самого начала все строить правильно.
> Важность привлечения репрезентативных пользователей преувеличена.
Конечно, всегда лучше проводить тестирование с теми людьми, которые похожи на ваших потенциальных пользователей. Однако много важнее проводить тестирования часто и на ранних этапах разработки. Мой принцип, как
вы далее увидите, формулируется следующим образом: «Приглашайте, кого
хотите, и выезжайте «на кривой».
> Задача тестирования не в том, чтобы что-то доказать или опровергнуть, а в
том, чтобы собрать достаточно информации для получения критической
оценки. К примеру, часто полагают, что тестирование можно использовать
для доказательства того, что система навигации «а» лучше, чем система навигации «б». В действительности, ни у кого нет достаточных ресурсов, чтобы
провести исчерпывающие исследования такого рода. Тестирование помогает
Юзабилити -тестирование за 10 центов в день
151
только собрать ценные данные, которые в сочетании с вашим личным и профессиональным опытом, а также здравым смыслом, позволят с большой долей уверенности сделать правильный выбор между системами «а» и «б».
Тестирование — это повторяющийся процесс. Тестирование не проводится
один единственный раз. Вы что-то создаете, потом тестируете это, потом корректируете, потом опять тестируете...
Лучшим средством тестирования является живая реакция
аудитории. Одна из причин, по которой фильмы братьев
Маркс были так популярны, заключалась в том, что перед
началом съемок они отправлялись на гастрольные туры и
представляли публике водевильные сцены своего фильма.
Они проводили по пять спектаклей в день и постоянно импровизировали, обращая внимание на то, какие строчки вызывали больший смех. Даже после того как какая-то строка
была уже утверждена, Граучо1 продолжал слегка экспериментировать
с ней, чтобы попытаться ее улучшить.
Миссис Тисдейл (Маргарет Дюмон) и
руф у с т фаэрфлай подслушивают
(«Утиный суп»)
Сверхэкономное тестирование
на последние деньги
Тестирование юзабилити применяется довольно давно, и его основная идея ясна:
если вы хотите узнать, насколько просто пользоваться вашим программным обеспечением, или сайтом, или пультом дистанционного управления для видеомагнитофона, то понаблюдайте за тем, как кто-нибудь использует ваш продукт и
возникают ли при этом какие-либо трудности. Затем внесите в ваш продукт нужные исправления и протестируйте его опять.
Сначала такое тестирование было очень дорогостоящим. Для этого требовалась
специальная лаборатория с комнатой наблюдения и зеркальным стеклом и хотя
бы две видеокамеры, чтобы фиксировать реакцию пользователя и тестируемый
продукт. Чтобы получать статистически достоверные результаты, нужно было
привлекать к таким тестированиям много испытуемых. Это была целая наука.
Стоимость одного такого тестирования варьировалась от 20 до 50 тысяч долларов. И, конечно, такие тестирования не могли проводиться часто.
1
Граучо - один из братьев Маркс - Джулиус Маркс.
Глава 9
152
Но в 1989 году Якоб Нильсен написал статью под названием «Техника проведения
юзабилити-тестирований с меньшими затратами» 1 . В ней он утверждал, что тех
же самых результатов можно достичь без помощи лабораторий и с привлечением
намного меньшего числа пользователей.
Идея о проведении тестирований с меньшими затратами была громадным шагом
вперед. Но беда в том, что до сих пор большинство людей относится к тестированию как к «очень большому и серьезному делу», поэтому плата за тестирование
продолжает варьироваться от 5 до 15 тысяч долларов, и в результате оно не проводится так часто, как это необходимо.
ШШШШШШШ Традиционное тестирование Сверхэкономное тестирование
Число пользователей на тест
Способ отбора
пользователей
Обычно от 8-ми, чтобы оправдать
запланированные расходы
Тщательный отбор в соответствии
с целевой аудиторией
Место проведения
тестирования
Специальная лаборатория с комнатой наблюдения и зеркальным
стеклом
Опытный специалист по юзабилити
3 или 4
Хватайте первых попавшихся людей. Подойдет почти каждый, кто
хоть как-то умеет пользоваться Интернетом
Любой офис или комната
Требуется предварительно (за несколько недель) зарезервировать лабораторию и отобрать пользователей
Любое разумное существо с терпением
Тестирование можно проводить почти в любое время с минимальным
предварительным планированием
Подготовка
Необходимо составить, обсудить и
утвердить протокол тестирования
Надо только решить, что вы будете
демонстрировать пользователям
Периодичность
и объем
тестирования
Если вы не располагаете огромными средствами, то проводится одно
тестирование сразу по всем вопросам почти в конце разработки сайта
Периодически проводятся небольшие тесты на протяжении всего
процесса разработки
Стоимость
от 5 000 до 15 000 (и более) долларов
Около $300 (от $50 до $100 каждому пользователю в качестве вознаграждения + $20 на видеопленку)
Что происходит
после тестирования
Через неделю после тестирования
появляется 20-страничный писменный отчет. Затем проводится собрание всей рабочей группы для обсуждения результатов тестирования
Сразу после тестирования каждый
наблюдатель пишет 1-страничное
резюме, которое можно обсудить в
тот же день
Кто проводит
тестирование
Предварительное
планирование
Материалы с Третьей Международной конференции по проблемам взаимодействия
человека и компьютера. Бостон, США. 1989 г. Стоит также упомянуть Брюса Тогназини, «евангелиста» по интерфейсам из Apple, написавшего известную всем Appleразработчикам статью «Как провести пользовательскую апробацию без больших затрат» (переизданав книге «Одежда для интерфейса», изд-во «Addison-Wesley», 1992 г.).
Юзабилити-тестирование за 10 центов в день
153
Я же хочу в этой главе предложить вам еще более радикальный вариант экономного тестирования.
Я постараюсь объяснить вам, как провести собственное тестирование, если у вас
нет на это ни денег, ни времени. Если вы можете себе позволить нанять профессионала в области юзабилити, обязательно сделайте это, при условии, что это не
приведет к уменьшению количества тестов.
Пять главных предлогов для того, чтобы не тестировать веб-сайт
Действительно, очень часто события в графике проведения веб-разработки меняются со скоростью картинок из
комиксов Дилберта. Если тестирование добавляет забот
каждому, если с ним нужно увязывать график разработки и если к нему нужно привлекать самых важных людей, то, конечно, такое тестирование будет проходить с
большими трудностями. Поэтому имеет смысл сделать
тестирования по возможности небольшими. Таким образом, вы сэкономите время за счет того, что, во-первых,
избежите бесконечных споров и, во-вторых, вам не придется аврально вносить коррективы в конце разработки,
как это делается, когда проводится только одно большое
тестирование.
Забудьте о затратах «от 5 000 до 15 000 долларов». Если
кто-нибудь из ваших сотрудников принесет из дома свою
видеокамеру, то ваши затраты составят только около 300
долларов на каждый цикл тестирования.
Наименее известный факт о юзабилити-тестировании
заключается в том, что провести это тестирование чрезвычайно легко. Естественно, что кому-то это будет удаваться лучше, чем другим. Однако я еще ни разу не сталкивался со случаем, когда юзабилити-тестирование не
дало бы полезных результатов, независимо от того, насколько плохо оно было проведено.
А она вам и не понадобится. Все, что вам будет нужно, это комната, где вам никто не помешает, стол, компьютер и два стула.
Действительно, самой сложной частью тестирования является этап, когда нужно делать выводы из полученных
результатов. Об этом мы как раз поговорим в следующей
главе.
154
Глава 9
Сколько пользователей нужно
протестировать
На мой взгляд, в большинстве случаев в каждом цикле тестирования должно участвовать не больше трех, максимум четырех пользователей.
Вероятнее всего, уже первые три пользователя помогут вам выявить все самые
1
значительные проблемы. К тому же, намного важнее провести больше циклов
тестирования, чем стремиться собрать всю возможную информацию из каждого
цикла. Тестирование в цикле только трех пользователей, скорее всего, позволит
2
вам провести хотя бы еще один цикл.
Кроме того, после корректировки проблем, обнаруженных в первом цикле, те же
самые пользователи, приглашенные на следующий цикл, возможно, обнаружат
другие проблемы, поскольку застревать на исправленных они уже не будут.
Если вы тестируете только трех или четырех пользователей, то вы можете обсудить полученные результаты в тот же день и сразу сделать нужные изменения.
Если же в вашем тестировании участвует более четырех пользователей, то объем
заметок, сделанных в процессе тестирования, становится слишком большим, чтобы их можно было быстро прочитать. К тому же, большинство из этих заметок
будет касаться мелких проблем, возникнет опасность заблудиться в трех соснах и
потерять главное. Так что постарайтесь сосредоточиться на главных проблемах,
корректируйте их, и затем как можно скорее тестируйте снова.
Якоб Нильсен и Том Ландауэр утверждают, что тестирование пяти пользователей
позволяет обнаружить уже как минимум 85% проблем сайта, и далее с каждым дополнительным пользователем отдача от тестирования существенно снижается. См.
статью Я. Нильсена за март 2000 «Почему нужно проводить тестирование только с
пятью пользователями» по адресу: www.useit.com.
Если вы кого-то наняли для проведения тестирования и не ограничены в деньгах, то
вы можете тестировать и шесть или даже восемь пользователей, тем более, что расходы на каждого следующего пользователя снижаются. Но это допустимо при условии,
что число циклов тестирования не уменьшится.
Юзабилити-тестирование за 10 центов в день
155
Приглашайте, кого хотите, и выезжайте
«на кривой»
Приступая к тестированию, многие стремятся привлечь тех пользователей, которые точно отражали бы целевую аудиторию - ну, к примеру, бухгалтеры мужского
пола в возрасте от 25 до 30, чей пользовательский опыт составляет от года до трех
лет и кто недавно приобрел пару дорогой обуви.
Однако самым большим секретом юзабилити-тестирования является то, что, в
общем-то, не важно, кого вы подбираете для тестирования.
В действительности, для тестирования большинства сайтов достаточно привлечь
людей, которые знакомы с основами Интернета и имеют некоторый минимальный
опыт его использования.
Если у вас есть возможность нанять специалиста по подбору участников тестирования, то воспользуйтесь ей, чтобы сделать отбор пользователей более целенап-
156
Глава 9
равленным, при условии, конечно, что это не приведет к уменьшению числа циклов тестирования. Но если поиск идеального пользователя будет означать то, что
вам придется провести меньше тестов, то я порекомендовал бы другой подход:
Возьмите любого и по нему догадайтесь обо всей вашей аудитории.
Другими словами, старайтесь привлекать пользователей из вашей целевой аудитории, но, в общем, не уделяйте этому особого внимания. Попробуйте лучше учесть
различия между людьми, которых вы тестируете, и теми, кто составляет вашу аудиторию. Я считаю такой подход более приемлемым по следующим трем причинам:
> Мы все «чайники». Приглядитесь к «эксперту», и вы часто сможете заметить,
что и он порой делает «как получится», - только на более высоком уровне.
> Не всегда разумно создавать сайт, который могли бы использовать только люди
из вашей целевой аудитории. Если вы разрабатываете сайт для бухгалтеров,
используя терминологию, с вашей точки зрения, понятную всем бухгалтерам,
то, вероятно, вы обнаружите, что небольшое, но ощутимое число бухгалтеров
все-таки не поймут, о чем вы будете говорить. Поэтому в большинстве случаев
нужно учитывать не только опытных потребителей вашей информации, но и
новичков. Если даже ваша бабушка сможет использовать ваш сайт, то эксперт
тем более.
> Экспертов редко когда раздражает содержание, которое понятно и новичкам. Все любят ясность. (Действительно ясность, а не замалчивание.)
Но для применения этого подхода есть исключения:
>
Если предполагается, что ваш сайт будет ориентирован исключительно на
какую-то одну группу людей, то старайтесь, если возможно, тестировать только людей из этой группы. Например, если вашу аудиторию должны составлять только женщины, то обязательно тестируйте сайт именно с участием
женщин.
> Если ваша аудитория состоит из нескольких четко определенных групп с разными интересами и потребностями, то следует хотя бы раз протестировать
пользователей из каждой группы. Например, если вы разрабатываете университетский сайт, то по крайней мере в одном цикле тестирования должны участвовать по два студента, два профессора, два аспиранта, два администратора.
Но в следующих циклах уже могут участвовать любые представители вашей
аудитории.
> Если для использования вашего сайта нужно обладать знаниями из какой-то
специальной области (например, сайт по валютным операциям, предназначенный для специалистов по финансам), то хотя бы для одного цикла тестирования следует привлечь людей из этой области. Но не делайте этого на следующих циклах, если это приведет к уменьшению числа тестов.
Юзабилити-тестирование за 10 центов в день
157
При отборе пользователей:
>
Предлагайте разумное вознаграждение. Обычная плата за одночасовое тестирование варьируется между 50 долларами для «средних» пользователей и несколькими сотнями долларов для специалистов, например, кардиологов.
Я стараюсь предлагать немного больше, чем средние расценки, потому что,
во-первых, тем самым я даю понять, что мнение пользователей важно, и, вовторых, в этом случае люди меньше опаздывают и проявляют больший интерес к тестированию. Не забывайте, что даже если тестирование длится не
более 30 минут, людям обычно приходится тратить около часа на дорогу.
Кроме того, должен сказать, что предпочитаю работать с людьми, которым
интересен сам процесс тестирования, а не денежное вознаграждение.
>
Пусть ваше приглашение звучит просто. «Нам нужны люди, которые могли
бы взглянуть на наш сайт и оценить его. Это очень просто и потребует не более
45 минут или часа. Оплата будет составлять
долларов».
> Старайтесь избегать обсуждения сайта (или организации, для которой он разрабатывается) до тестирования. Нужно, чтобы ваши пользователи могли сразу сказать, понимают л и они, что видят, или нет. (Конечно, если тестирование
происходит в офисе организации, то им будет сразу ясно, чей это сайт.)
> Не стесняйтесь приглашать своих друзей и соседей. Не нужно думать, что вы
как-то навязываетесь к ним, ведь большинству людей нравится участвовать в
тестировании. Всегда приятно, если к вашему мнению внимательно прислушиваются, да еще и платят за это деньги. Кроме того, в таких тестированиях
люди с удовольствием узнают много полезного для себя про Интернет и компьютеры в целом.
158
Глава 9
Где тестировать?
Все, что вам понадобится, - это помещение с двумя стульями, компьютер (подключенный к Интернету, если вы тестируете уже существующий сайт), видеокамера и штатив для нее.
Я бы посоветовал еще провести кабель от видеокамеры в соседнюю комнату, в которой каждый, кто участвует в разработке, мог бы сам наблюдать за ходом тестирования по телевизору.
Видеокамера должна фиксировать то, что видит пользователь (на экране монитора или на бумаге, в зависимости от того, что вы тестируете), а также то, что произносят пользователь и ассистент. В большинстве случаев вам не придется возвращаться к видеозаписи, но все равно она может понадобиться, если, например, кто-то
из вашей рабочей группы не присутствовал лично при тестировании.
Видеокамеру, телевизор, кабель и штатив вы можете приобрести меньше, чем за
600 долларов. Но если ваш бюджет не потянет даже эту сумму, то, наверное, можно попросить кого-нибудь из ваших сотрудников принести свою камеру из дома.
Юзабилити-тестирование за 10 центов в день
159
Кто должен проводить тестирование?
В качестве ассистента подойдет почти любой человек. Для этого потребуется только лишь желание, потому что большинство людей может справиться с обязанностью ассистента, не имея специального опыта.
Постарайтесь выбрать на эту роль человека честного, обладающего терпением,
спокойного, который мог бы сопереживать и быть хорошим слушателем. Не следует выбирать для этого тех, кто необщителен.
Кто должен наблюдать?
Имеет смысл приглашать всех, кто имеет отношение к разработке, - непосредственно разработчиков, сотрудников из отделов маркетинга и развития, совладельцев сайта. Если возможно, пригласите (пусть хотя бы заглянут) и кого-нибудь из руководства - часто им становится так интересно, что они задерживаются
на большее время, чем собирались.
Что и когда тестировать?
Ниже приводится таблица, в которой указаны различные типы тестирования, проводимые на каждом этапе разработки.
Перед тем как заняться разработкой сайта, следует протестировать какие-нибудь
подобные сайты - это могут быть уже существующие сайты-конкуренты или другие сайты со стилем, структурой или сервисами, схожими с идеей вашего текущего проекта.
Сначала попробуйте воспользоваться ими сами. Потом понаблюдайте, как ими
пользуются другие (один-два человека), и определите, что в них работает и что
не работает. Многие пропускают этот шаг, но он очень полезен - для вас кто-то
бесплатно создал рабочий прототип вашего сайта.
Если вы вообще никогда не проводили никакого тестирования, то этот этап также
будет для вас очень полезным. Он позволит не только разобраться в том, как проводить тестирование, но и даст вам возможность научиться терпению, поскольку в
самом начале, когда вы тестируете уже свой сайт, очень трудно не воспринимать
лично реакции пользователей. Поэтому тестирование, на первых порах чужого
сайта, поможет вам увидеть, как люди вообще реагируют в процессе такого тестирования, и привыкнуть к их реакциям.
160
Глава 9
Юзабилити-тестирование за 10 центов в день
161
С уже существующими сайтами можно проводить два вида тестирований:
> «Что здесь?» тестирование. Пользователям демонстрируют сайт и выясняют,
понимают ли они, что видят, - понятно ли назначение сайта, его «ценное предложение» , структура, функционирование и т. д.
>
Выполнение заданий. Пользователя просят выполнить то или иное действие,
и затем наблюдают, насколько легко ему удается это сделать.
Как правило, результаты будут более ценными, если вы сумеете сделать так,
чтобы пользователи сами определяли задания для выполнения. Например, лучше сказать: «Найдите книгу, которую вы хотите купить или которую недавно
купили», чем «Найдите книгу о приготовлении пищи по цене не выше 14 долларов» . Если людям дают выдуманные задания, то у них не возникает эмоционального отношения к ним, и поэтому они не используют весь свой личный
опыт при их выполнении.
Когда вы занимаетесь разработкой сайта, то всегда полезно демонстрировать
пользователям свои идеи уже на ранних этапах разработки, начиная с черновых
набросков. Дизайнеры часто неохотно показывают то, что еще находится в процессе разработки, но пользователи могут свободнее выражать свое мнение, если
они видят, что работа еще не закончена и что-то может измениться. Кроме того,
если разработка еще не закончена, то пользователи не будут отвлекаться на детали и смогут оценить именно суть содержания и формулировки названий и заголовков.
Далее, когда вы уже приступите к построению частей сайта и разработке
действующего прототипа, вы можете начать тестировать сайт с помощью метода
выполнения заданий.
Также рекомендую применять метод, который я называю «Cubicle test» (протестировать кого-либо из соседней комнаты). Когда вы сделаете страницу какогото нового типа (особенно это касается форм), то распечатайте ее и покажите комунибудь из соседней комнаты, чтобы он разобрался в ее содержании. Такое
неформальное тестирование может быть очень полезным для выявления большого
числа возможных проблем.
Глава
Юзабилититестирование:
снимаем кино
Как проводить тестирование
Мне не нравятся эти цвета.
Слова, которые в каждом юзабилити-тестировании
говорит хотя бы один пользователь.
в
этой главе рассказывается о том, как должен проводить тестирование
ассистент и на что должен обращать внимание наблюдатель.
Что должен делать ассистент
Если вы никогда до этого не проводили юзабилити-тестировании, то вам нужно
понять, что самое главное - это расслабиться. Ваша задача заключается только
в том, чтобы объяснить пользователям, что им нужно сделать, просить их высказывать свои мысли вслух, слушать внимательно, что они говорят, и всячески
оберегать их.
Ниже приводится список того, что следует учесть для проведения тестирования.
Если вы прочитаете этот список, а также приведенный далее текст одной из сессий тестирования, то этого будет достаточно для того, чтобы вы могли его начать.1
>
Попробуйте сначала протестировать себя. За день до проведения теста попробуйте выполнить самостоятельно то, что собираетесь просить делать участников тестирования, и убедитесь, что сможете справиться в отведенное время. Проверьте доступность на используемом компьютере всех нужных для
тестирования страниц, а также наличие всех необходимых паролей.
>
Оберегайте участников тестирования. В ваши обязанности входит защита
чувства собственного достоинства пользователей. Будьте внимательны и тактичны с ними. Если пользователь застрял где-то, ободрите его, похлопайте
его по плечу (в переносном смысле), а в завершении тестирования обязательно поблагодарите (искренне). Дайте знать вашим пользователям, что их участие было очень ценным и полезным для вас.
>
Сопереживайте участникам тестирования. Будьте добры и терпеливы к ним
и старайтесь ободрять их. Дайте им ясно понять, что вы знаете, что они не
глупы.
Если вам понадобятся другие рекомендации по поводу проведения тестирования, то
советую обратиться к «Руководству по юзабилити-тестированию» Джэфри Рубина
См. также раздел «Рекомендуемая литература» на стр. 186.
164
>
Глава 10
Постарайтесь увидеть и понять, какие мысли возникают у них. Самая главная задача для вас - это попытаться наблюдать за ходом их мысли. Когда вы
не уверены, что вам понятно, о чем они думают, спросите у них об этом. Если
пользователь уставился на экран в течение 10 сек., то спросите у него: «На
что вы смотрите?» или «О чем вы задумались?».
Постарайтесь понять, какие на каждом шагу у них возникают ожидания и
насколько сайт соответствует этим ожиданиям. Когда пользователь уже готов щелкнуть мышью, спросите у него, что он ожидает увидеть. После того
как он щелкнет мышью, узнайте, действительно ли результат оправдал его
ожидание.
Не подсказывайте им, что делать. Во многом это напоминает работу психиатра. Если пользователь говорит: «Я не знаю, что делать дальше», вам нужно спросить: «А как вы думаете, что бы вы могли сделать?» или «Ачто бы вы
сделали, если бы были дома?».
> Ваши инструкции должны быть простыми. Их не так уж и много, поэтому
их легко запомнить:
Оглядите страницу и скажите, чем это все
является и по чему вы, скорее всего, щелкнули бы?
Скажите, по чему вы щелкнули бы теперь, и как вы
думаете, что вы увидите после этого?
Постарайтесь как можно больше произносить свои
мысли вслух.
Не бойтесь повторять эти инструкции часто, тем более что это больше надоест вам самим, чем пользователю.
> Уточняйте, уточняйте, уточняйте. Трудность состоит в том, что нельзя отвлекать пользователей или оказывать на них влияния, но в то же время необходимо выяснить, что они в действительности думают (чего, кстати, они и
сами могут не до конца понимать).
Например, когда пользователь говорит: «Мне нравится эта страница», вам
всегда нужно задать наводящий вопрос: «А что вам нравится на ней больше
всего?». Если вы слышите в ответ: «Ну, мне нравится ее компоновка», то вам
снова нужно спросить: «А что вам нравится в компоновке этой страницы?».
Вас интересуют не детали дизайна, а только ответы пользователей, потому
что, спрашивая о деталях, вы можете понять, на что именно они реагируют.
Юзабилити-тестирование: снимаем кино
165
>
Не бойтесь импровизировать. Например, если первые два пользователя безнадежно застряли в одном и том же месте и вам ясно, в чем там проблема и
как ее решить, то не заставляйте и третьего пользователя без нужды возиться с ней. Как только он дойдет до этого места, объясните ему, что к чему и
как продолжить работу дальше.
>
Не расстраивайтесь, если пользователь окажется совсем неопытным или
полностью запутается. Наблюдая за пользователем, который ни во что не
«въезжает», вы можете узнать больше полезного. Более опытный пользователь обладает лучшими навыками для того, чтобы разобраться с проблемой
«как получится», и вы можете даже не заметить, что на самом деле он не
понимает, как «это» работает.
>
Делайте записи после каждой сессии. Сразу после каждого тестирования
делайте короткие записи о том, что вам запомнилось. Если вы не сделаете
этого до начала следующего теста, то потом вам будет очень трудно вспомнить важные детали.
Текст одной из сессий тестирования
Далее приводится аннотированный отрывок из текста типичного (но выдуманного) тестирования. Обсуждаемый сайт существует в действительности, но с тех
пор его переработали.1 Участницу тестирования зовут Джэнис, ей около 25 лет.
1
Благодарю ребят ceLance.com за то, что они разрешили мне использовать раннюю версию их сайта в качестве объекта для этого примера.
166
1
2
Глава 10
Этот сценарий можно также взять в Интернете на сайте (www.cirlce.com/krugbook).
Если вы лично не участвовали в разработке, то можете также сказать: «Не бойтесь
как-то огорчить меня, тем более, что я не участвовал в разработке страниц, которые
вы увидите».
Юзабилити-тестирование: снимаем кино
1
167
На том же дружественном сайте вы можете найти примерный образец такого соглашения (на английском яз. - прим. пер.).
168
Глава 10
Юзабилити-тестирование: снимаем кино
169
170
Глава 10
Юзабилити-тестирование: снимаем кино
171
172
Глава 10
Юзабилити-тестирование: снимаем кино
173
174
Глава 10
Юзабилити-тестирование: снимаем кино
175
176
Глава 10
Что должен делать наблюдатель
Работа наблюдателя на юзабилити-тестировании довольно непыльная. Все, что
вам нужно будет делать в качестве наблюдателя, - это только слушать и смотреть, быть внимательным и попутно делать записи.
Вот на что вам придется обращать внимание:
>
Они понимают? Могут ли пользователи без посторонней помощи разобраться, чем является сайт или страница, каково их назначение и откуда можно
начать ими пользоваться?
> Могут ли они разобраться в структуре сайта? Замечают ли пользователи
навигацию и понятна ли она для них? Ясна ли для пользователей иерархия
и понятны ли названия, которые в ней использованы?
> Моменты просветления. Вы сможете отличить эти моменты по следующему
признаку: когда пользователь совершит или не совершит какое-то действие,
все, кто наблюдает тестирование, внезапно хлопнут себя по лбу и воскликнут: «Почему же мы раньше об этом не подумали?» или «Почему же мы раньше этого не замечали?». Это очень важные моменты просветления.
> Моменты шока. В такие моменты вы, вероятно, также стукнете себя по лбу,
но вместо «Почему мы не замечали этого?» вы воскликнете: «Почему же он
(или она, речь идет о пользователе) не заметил(а) этого?» или «Почему же
он(а) не понял(а) этого?». Например, вы можете быть шокированы тем, что
кто-то не заметил, что в верхней части страницы находится меню, или что
кто-то не узнал название одного из товаров, производимых вашей компанией.
В отличие от решений, возникающих в моменты просветления, решение для
«шоковой» проблемы не всегда легко найти, и, возможно, для этого вам придется вновь вернуться к «чертежной доске».
>
Новые идеи. Пользователи часто подсказывают решения какой-либо проблемы, над которой вы уже давно бьетесь. Очень часто такие подсказки наводят
вас на идеи, о которых вы уже раньше думали, но по каким-то причинам
отклонили их. Ситуация, когда вы видите, как пользователь сталкивается с
этой проблемой, иногда позволяет по-новому взглянуть на нее. Иногда случается, что в проект были внесены какие-то изменения (например, было решено применить другую технологию или сместились коммерческие приоритеты), и становится полезным тот метод или подход, который был отклонен
в начале.
I
Юзабилити-тестирование: снимаем кино
>
177
Восторг. Какие элементы сайта действительно очень нравятся пользователю? Обращайте внимание на фразы вроде: «Это именно то, что я искал(а)!»,
«Когда же этим можно будет, наконец, пользоваться?».
Во время тестирования вы заметите и много того, что пока не работает, ну, например, отсутствующая графика, не работающие ссылки, опечатки. Следует отмечать эти элементы, чтобы потом передать список тем, кто должен их исправить. Однако не забывайте, что это не является вашей основной задачей, и
делайте это только попутно.
Кроме того, во время наблюдения учитывайте следующее:
> Держите себя в руках. Возможно, вас будет расстраивать реакция пользователей. Некоторым людям ваше произведение будет просто непонятно. Некоторым оно может даже просто не понравиться. Некоторые просто запутаются, как будто бы без особой на то причины. Наверное, вам будет эмоционально
трудно наблюдать, как у кого-то ваш труд, в который вы вложили свою душу,
будет вызывать негативную реакцию. Но в вашей голове должны появляться не мысли, вроде «Ничего не работает!», а скорее «Что же нужно сделать
для исправления?».
>
Не паникуйте. Постарайтесь не делать скорых выводов до тех пор, пока не
проведете тестирование хотя бы с двумя, а лучше с тремя пользователями.
>
Соблюдайте тишину. Нет ничего более раздражающего для пользователя,
чем смех или стоны, доносящиеся из соседней комнаты в те моменты, когда
он сталкивается с трудностями в использовании сайта.
>
Не забывайте, что вы привлекаете только отдельных пользователей, а не
целую репрезентативную выборку. Если участник тестирования, которого
вы пригласили, пользуется Интернетом только два часа в день и даже не знает, как ввести URL, пусть это не вызывает у вас возмущения «Ну, что за болван!». Лучше подумайте, что таких пользователей большинство, и можете
ли вы себе позволить отказаться от всех них, как ваших потенциальных
пользователей?
> Помните, что вы наблюдаете лучший вариант поведения пользователя. Когда вы наблюдаете за ходом тестирования, вам следует помнить, что в этой
ситуации люди склонны читать страницы более внимательно и прилагать
больше усилий по осмыслению содержания, чем в обычных условиях. В конце
концов, нужно учитывать, что во время теста они не ограничены во времени, им платят за их помощь и, что более важно, они стремятся не выглядеть
глупо. Поэтому, когда им не удается разобраться с чем-то, вам следует понимать, что при этом они стараются намного больше, чем это будут делать реальные пользователи.
178
>
Глава 10
Обращайте больше внимания на действия и объяснения, чем на мнения пользователей. Нельзя особенно полагаться на мнения, которые пользователь
выражает во время теста, потому, что люди часто преувеличивают свои оценки (как позитивные, так и негативные), поскольку думают, что вы хотите
услышать от них четкие мнения.
Отчет о наблюдении
После тестирования каждый наблюдатель и ассистент должен как можно быстрее написать небольшой отчет об основных проблемах, которые были им замечены во время тестирования, а также изложить свои мысли по поводу способов их
устранения.
Не надо писать полных и развернутых отчетов. Пусть это напоминает скорее резюме. В идеале, все участники группы по разработке должны прочитать эти отчеты (или хотя бы пробежать их глазами), поэтому они не должны по объему
превышать страницу или две.
Ниже приводится пример резюме, которые обычно делаю я.
Юзабилити-тестирование: снимаем кино
Отчет о юзабилити-тестировании сайта
Elance.com
Стив Круг
_ июня, 200_ г.
>
Каждого пользователя сразу привлекли ссылки под заголовком
«Самое интересное» в верхней части начальной страницы, в особенности, ссылка «Анимируйте свой логотип. Бесплатно!». Однако после того, как они знакомились с этим предложением, им все-таки
было непонятно, какое отношение это имеет к данному сайту.
>
Двое из трех пользователей не смогли без посторонней помощи разобраться, в чем назначение сайта Elance. Третий разобрался самостоятельно, но сказал, что в реальной ситуации он не стал бы тратить на это свое время. Следует сказать, что формулировка основной
идеи сайта требует переработки.
>
Каждый пользователь не мог сразу понять, откуда можно начать
пользоваться сайтом. В конце концов, все смогли найти путь, но все
же у них сохранялась неуверенность и беспокойство по поводу правильности выбора. Таким образом, на начальной странице имеется
слишком много точек входа.
>
Два пользователя сказали, что, в целом, они понимали содержание
сайта. Однако они также заявили, что не поняли назначение вкладки «Сообщество потребителей». Возможно, требуется изменить название этой вкладки.
>
Слова «Покупка» и «Продажа» вызывали затруднения у пользователей. Было не ясно, в качестве кого они могут выступать: как покупатели или как продавцы.
>
Двое из трех пользователей не смогли разобраться, в чем разница
между ссылками «Предложения» и «Фиксированные цены».
> Всем пользователям понравился стиль списка категорий. Возможность видеть категории, которые их интересуют, прямо на начальной
странице, вызывала у них желание выбирать, чтобы узнать больше.
179
и
Глава
Чтобы не
выплеснуть
с водой и ребенка
Интерпретация результатов тестирования
Да, мы сделали некоторые ошибки.
Но давайте постараемся «не выплеснуть ребенка вместе с водой».
Линдон Бэйнз Джонсон
и
так, вы закончили тестирование и получили все отчеты. Что делать теперь?
Сразу же прочитайте отчеты
Постарайтесь, чтобы после каждого цикла тестирования каждый участник рабочей группы смог прочитать все отчеты и подумать о том, что делать дальнее.
На собрании рабочей группы раздайте копии всех отчетов и приложите к ним
копии набросков и изображений, которые тестировались. Следует обсудить два
вопроса:
>
Отбор. Рассмотрите проблемы, с которыми сталкивались пользователи,
и решите, какие из них должны быть исправлены.
>
Поиск решений. Определите возможные решения для отобранных проблем.
Наверное, это тоже покажется сложным. В конце концов, ведь это те же самые
люди, которые не могли ни о чем договориться до тестирования. Так в чем же
разница?
Суть заключается в следующем: то, что вы узнаете на юзабилити-тестировании,
обычно само по себе является разумным и достаточно очевидным для тех, кто
это тестирование наблюдает.
Возможность посмотреть на свою работу чужими глазами часто помогает найти
совершенно новые решения и увидеть старые идеи в новом свете.
Кроме того, нельзя забывать, что тестирование - это неоднократный процесс,
поэтому вам не нужно искать некое окончательное решение. Просто подумайте
о том, что вы попробуете теперь.
Этот брак можно спасти?
Конечно, главный вопрос, который возникает у каждого, особенно во время проведения первых тестов, - «а мы вообще на правильном пути?».
182
Глава 11
Во время обсуждения результатов у вас всегда будет возникать мысль о том, можно ли улучшить ту часть сайта, которую вы протестировали, или придется ее
забраковать и начать все с начала, уже с совершенно другим подходом. Например, если некоторые пользователи не понимают идею сайта, означает ли это,
что вся концепция сайта неверна, или нужно лишь изменить некоторые формулировки?
Вот несколько моих рекомендаций:
> В первую очередь рассмотрите возможность усовершенствования. Иногда
реакции пользователей вызывают подавленность у разработчиков, особенно
на первых циклах тестирования. Однако редко когда концепция сайта абсолютно несостоятельна, поэтому перед тем, как от чего-то отказаться, остановитесь и подумайте: «Что можно сделать, чтобы исправить обнаруженные
проблемы?».
>
Сосредоточьтесь на деталях. Старайтесь избегать общих оценок и обратите
внимание прежде всего на те места, где пользователи действительно столкнулись с проблемами. «Похоже, они не замечают навигацию при переходе
на страницы второго уровня» - более продуктивное утверждение, чем просто «Навигация не работает». Первое подразумевает, что вы можете найти
способы изменения навигации таким образом, чтобы она стала более заметной. Второе же означает, что вам нужно разработать совершенно новую навигацию.
> Улучшайте, но проверяйте. Не забывайте, что тестирование - это неоднократный процесс. Поэтому перед тем, как что-то выбросить, попробуйте сначала сделать какие-нибудь изменения и протестируйте их.
Тем не менее:
> Если проблема достаточно глубока, то попробуйте смириться с ней. Иногда
я сталкиваюсь с ситуациями, когда сайт имеет серьезную, принципиальную
проблему, которую все замалчивают. Обычно эта проблема уже довольно
давно очевидна для всех, кто участвует в разработке, но никто не хочет ее
обсуждать. Это происходит потому, что а) кажется, что для нее нет решения,
и б) уже поздно что-либо менять, остается только смириться и надеяться на
лучшее. Иногда меня приглашают только за тем, чтобы сторонний наблюдатель объявил разработчикам о том, что и так уже очевидно.
Например, предположим, что при первом же тестировании выяснилось, что
внутренняя организация сайта не соответствует той, которую сделали бы для
сайта ваши пользователи. В результате, им трудно разобраться в том, где и
что находится на сайте. Или, скажем, при разработке сайта для своей компании вы исходили из того, что потребители захотят воспользоваться неки-
Чтобы не выплеснуть с водой и ребенка
183
ми услугами х и г/, но при тестировании выяснилось, что потребители с успехом могут получать эти услуги и без помощи Интернета.
Если тестирование показало, что действительно существует глубокая проблема, то на обсуждении после тестирования вам следует, наконец, признать ее
наличие. Выставленная напоказ, ваша проблема становится более разрешимой, нежели это казалось при ее замалчивании.
>
Запомните: почти никогда не поздно пересмотреть исходные положения.
Пересмотр основ разработки не обязательно означает переделку всего, и часто
оказывается, что решение проблемы проще, чем думалось сначала.
Типичные проблемы
При тестировании вы можете столкнуться со следующими типами проблем:
> Пользователям не ясна концепция сайта. Они просто не понимают ее. Они
смотрят на сайт или страницу и либо не знают, как это понять, либо им только кажется, что они понимают, но их понимание неверно.
> Пользователи не могут найти слова, которые ищут. Обычно это значит, что
либо а) вы разделили содержание не на те категории, на которые разделили
бы сами пользователи, либо б) категории разработаны верно, но их названия
не соответствуют тем, которые ожидают видеть пользователи.
> Слишком много всего. Иногда пользователи не могут найти то, что находится прямо на той самой странице, на которую они смотрят. В этом случае нужно
либо а) уменьшить визуальный шум на странице, либо б) добавить «громкости» на то, что пользователи должны видеть в первую очередь в визуальной
иерархии страницы.
Некоторые принципы отбора проблем
Вот несколько советов, как определять, что нужно исправлять, а что не нужно:
> Не обращайте внимание на проблемы «каяка»1. В любом тестировании вы
можете встретиться со случаями, когда пользователь на какой-то момент запутывается, но потом почти сразу разбирается в ситуации без всякой помощи,
как если бы он перевернулся на каяке, а потом сразу же вернулся
в нормальное положение. Это даже забавно. Нет преступления, нет наказания.
Если столкнувшись с такой проблемой, а) каждый пользователь быстро замечает ее, б) ему удается без помощи вернуться в нормальное положение и в)
1
Каяк — разновидность байдарки.
184
Глава 11
попутно не ощутить раздражения, то можете не обращать на проблему внимания. Вообще говоря, вполне допустимо, если с двух попыток удается найти
верный выход.
Конечно, если ситуацию исправить легко, не нарушив ничего другого, то обязательно сделайте это. Однако нужно сказать, что когда тестирование выявляет проблемы «каяка», обычно это не оказывается неожиданностью для разработчиков. Обычно эти проблемы появляются в результате некоторой
неоднозначности, для которой трудно найти какое-то определенное решение.
Например, обычно на сайте есть хотя бы один или два элемента, которые
нельзя точно отнести к какой-то одной из категорий верхнего уровня. В частности, одна половина пользователей может искать списки лучших фильмов
сначала в разделе «Стили жизни», а другая половина - в разделе «Искусство». В любом случае, половина всех пользователей ошибется при своей первой попытке, но на второй попытке все посетители выберут правильный раздел. Это вполне приемлемо.1
>
Не поддавайтесь искушению добавлять что-либо. Когда тестирование показывает, что пользователи чего-то не «схватывают», то возникает реакция,
как бы добавить что-нибудь вроде объяснения или инструкции.
Однако чаще всего правильным решением оказывается удаление того, что затрудняет понимание, а вовсе не добавление еще какого-то содержания.
> Относитесь скептически к просьбам о добавлении новых сервисов. От пользователей часто можно услышать: «Я бы хотел(а), чтобы здесь еще можно было
воспользоваться х». Следует всегда с осторожностью относиться к таким пожеланиям о новых сервисах. Часто оказывается, что у пользователей уже есть
возможность использовать похожий сервис, а они просто говорят о том, что им
нравится.
> Срывайте те плоды, которые висят низко. Победа - быстро и дешево.
Вот главное, чего не следует упустить в каждом цикле тестирования:
>
1
Неожиданные находки. Это те моменты прозрения, которые возникают
во время тестирования, когда некоторая проблема и ее решение вдруг становятся для всех очевидными, как только первый же пользователь начинает пользоваться сайтом «как получится». Эти все равно, что найти
клад. Вам следует сразу же «воспользоваться» счастьем и внести нужные исправления.
Возможно, вы подумаете: «А почему бы не поместить это в оба раздела?». В общем, я
считаю, что лучше всего, чтобы элементы содержания занимали только одно место в
иерархии сайта. Однако во всех остальных местах, где пользователи, вероятно, тоже
могут искать эти элементы, можно использовать заметную ссылку «см. также в ...».
Чтобы не выплеснуть с водой и ребенка
185
> Возможность внести простые исправления. Старайтесь не упускать возможности внести те изменения, которые почти не требуют усилий, или
требуют небольших усилий, но необходимость внесения этих исправлений слишком очевидна.
И последний совет, который заслуживает своего раздела:
Не выплесните ребенка вместе с водой
Как и любой хороший дизайн, успешно разработанная веб-страница основана
на тонком балансе между всеми ее элементами. Поэтому важно не забывать о
том, что внесение даже незначительных изменений может существенно повлиять на работу всего сайта. Иногда главная трудность при исправлении проблем
дизайна как раз и заключается в том, чтобы не нарушить работу других частей
сайта.
Каждый раз, когда вы хотите сделать какое-то изменение, тщательно подумайте о том, что еще при этом будет затронуто. В частности, когда вы делаете что-то
более заметным на странице, проследите, чтобы что-то другое, не менее важное, не потеряло в своем «весе».
Ну, вот и все
Как говорили Боб и Рэй, «зажмите кулаки и пишите, если будет работа».
Надеюсь, что иногда вы будете заходить на сайт, посвященный этой книге, по
адресу www.circle.com/krugbook. Пока же я собираюсь заняться некоторыми, как
я это называю, псевдоисследованиями с использованием специального оборудования для регистрации глазных движений. Время от времени я буду публиковать свои наблюдения относительно того, что именно мы видим, когда смотрим
на какую-либо веб-страницу.
Больше всего я желаю вам хорошего настроения. Как я уже говорил в начале,
создание хорошего сайта требует большого труда, и каждый, кто хотя бы наполовину все делает правильно, уже заслуживает восхищения.
И, пожалуйста, не принимайте сказанное в этой книге, как истину, не допускающую никаких отклонений или хотя бы отступлений от «правил». Я прекрасно
знаю, что есть сайты, специально рассчитанные на то, чтобы заставить посетителей задуматься, поломать голову, отгадать что-нибудь.
Я только хотел, чтобы вы знали, от каких правил отступаете и, по крайней мере,
задумались, действительно ли у вас есть серьезные причины для отступления.
Рекомендуемая
литература
Теперь, когда вы познакомились с изданием «Иллюстрированная
классика», вы можете получить еще большее удовольствие, если
прочитаете оригинал. Получить первоисточник этой книги
вы можете в любой школьной или публичной библиотеке.
Обязательная надпись в конце каждой книги из серии
комиксов «Иллюстрированная классика»
Я
мог бы порекомендовать десятки книг, а также сайтов, посвященных вопросу юзабилити, которые действительно заслуживают внимания.
Но здесь я приведу только те книги, которые существенно повлияли на
мои собственные взгляды на Интернет.
>
Льюис Розенфельд (Louis Rosenfeld) и Питер Морвил (Peter
Morville), «Информационная архитектура Всемирной Сети»
(«Information Architecture for the World Wide Web»), издательство «O'Reilly», 1998.
Вне всякого сомнения, самая полезная книга о веб-дизайне.
С поразительно ясным и практичным подходом в ней затрагиваются вопросы навигации, присваивания обозначений и поиска.
Пако Андерхил (Расо Underbill), «Почему мы покупаем: наука о том, как покупать» («Why We Buy: The Science of
Shopping»), издательство «Simon and Schuster», 1999.
Результат многолетних тщательных наблюдений за покупателями в реальных условиях. Хотя темой книги является описание того, как и почему люди покупают, это соприкасается с
основной проблемой веб-дизайна: создания сложных и интересных сред, в которых люди что-то ищут - и находят.
>
Гарри Клейн (Gary Klein), «Источник силы: как люди принимают решения» («Sources of Power: How People Make
Desicions»), издательство «MIT Press», 1998.
Исследование Клейна посвящено изучению вопроса, как
люди в реальных условиях принимают те или иные решения.
Это еще один удачный пример того, как полевые наблюдения могут выявлять разницу между нашими представлениями о том, как мы делаем что-то, и тем, как мы в действительности это делаем. Если бы «Всемирный Каталог» все же
существовал, то эту книгу вместе с предыдущей следовало
бы туда включить обязательно.
188
Не заставляйте меня думать
Джордж М. Принс (George M. Prince), «Практика творчества:
руководство по решению задач динамическим групповым методом» («The Practice of Creativity: A Manual for Dynamic
Group Problem Solving»), издательство «Macmillan», 1972.
Лет тридцать назад я прослушал курс по синектике, и с тех
пор не было недели, чтобы я не применил на практике чтонибудь из того, что я тогда узнал. Содержание книги - это
«мозговой штурм», дополненный некоторыми интересными
подробностями о том, как люди работают в группах. Книга
уже давно не выходила в печати, но вы можете легко найти
ее в Интернете.
Джэффри Рубин (Jeffrey Rubin), «Руководство по юзабилити-тестированию» («Handbook of Usability Testing»), издателство «John Wiley & Sons», 1994.
Несмотря на то, что книга Рубина касается юзабилити-тестирования программного обеспечения (она вышла еще до
того, как Интернет стал широко распространенным), и есть
принципиальные различия между нашими подходами (это
видно, например, по заголовку «Способы обеспечения чистоты эксперимента»), тем не менее, она является очень полезным руководством по технике проведения тестирования.
Особенно рекомендую обратить внимание на главу 4 («Участники тестирования») и главу 8 («Проведение тестирования»). В них содержится много ценной информации о том, как готовиться к тестированию, как оценивать реакцию пользователей и как поступать в наиболее часто встречаемых ситуациях, таких, например, как разочарование пользователей или неполадки оборудования.
Сайт Якоба Нильсена (www.useit.com).
Занявшись в 1984 году такой областью, как юзабилити, Якоб Нильсен остается неизменным и самым
последовательным сторонником этого подхода. С тех
пор как возник Интернет, Якоб Нильсен проповедует ценность веб-юзабилити везде, где только ни появляется (разве что не на молочных упаковках).
Я не всегда соглашаюсь с тем, что он говорит, но меня
всегда восхищает то, как он говорит. Раз в две недели на его сайте помещается очередной выпуск его колонки советов «Alertbox» (и это еще один повод восхититься Якобом Нильсоном: человек достаточно
Рекомендуемая литература
189
умен, чтобы понимать, что не может говорить важные вещи каждую неделю).
На сайте также можно найти ссылки на все самые важные ресурсы, посвященные юзабилити.
>
Сайт «Зона Томалака»
(www.tomalak.org).
Каждый день Лоуренс Ли прочесывает
все те сайты, по которым прошелся бы и
я, если бы имел на это время. В результате этой работы набираются ссылки на
лучшие статьи и другие материалы о том,
что Ли называет «стратегическим веб-дизайном» . Я так привык доверять его оценкам, что нисколько не сожалею о том, что
не провожу эти обзоры сам.
Этот сайт можно считать образцом эффективности: только дата и время (обновление проводится даже в течение дня) и
ссылки на материалы вместе с тщательно подобранной цитатой, а также архив
прошлых ссылок.
Не каждому удается создать такой сайт
по своей собственной профессии.
Благодарности
...И все, что я получил, - была какая-то
несчастная футболка
...а также людям из компании «U.S.S. Forrestal»,
без помощи которых этот фильм никогда бы не появился.
Общепринятая благодарность создателей фильмов
Н
е обманывайте себя - такая книга могла быть написана только однимединственным человеком. Нет другого человеческого существа, которое
провело бы столько времени в раздумьях о ней, корпя над каждым ее
предложением и часто бесконечно переделывая какую-нибудь фразу в поиске
самого подходящего варианта.
Короче, мое имя действительно стоит на обложке этой книги, тогда как все другие, которые участвовали в ее создании, получают немногим более, чем... дырку от бублика. И даже будь у меня возможность работать с этой книгой миллион
лет, вы все равно не смогли бы ее прочитать, если бы не талант, мастерство, поддержка, доброта, терпение, щедрость и снисходительность многих других людей.
Редакторы, дизайнеры, руководители
и вдохновители
Я часто слышал ужасные истории о яростных схватках между автором и редактором. Но мне повезло, мой замечательный редактор часто мог мне что-то подсказать и направить мою работу. При работе с книгой, так же как и с сайтом,
уже через некоторое время вы слишком глубоко погружаетесь в нее и уже не
можете видеть все вещи ясно. Здесь и возникает необходимость в редакторе, и я
рад, что мне посчастливилось работать сразу с двумя редакторами:
>
Карен Уайтхаус из Macmillan, которая всегда считала, что написать такую
книгу - хорошая идея. Она всегда знала, что именно я хотел сказать (даже
когда я сам не знал). Никогда не делала мне никаких замечаний, не давала
нагоняев (даже когда я заслуживал их), и мне всегда было приятно находится с ней рядом - а ведь это большая удача, если вы пишете книгу. И я всегда
буду искать предлог, чтобы иметь возможность опять говорить с ней.
>
Барбара Флэнэган, моя давняя подруга - грозный корректор, которая,
по своему же признанию, не может ни одной книги читать без карандаша
в руке. По своему великодушию она несколько раз вычитывала мою рукопись, тратя на это свое свободное время. Она показывала мне, как лучшим
образом выбраться из тех бесконечных закоулков моей рукописи, в которых
я запутывался.
192
Стив Круг
Если вы натолкнетесь на какую-то погрешность в этой книге, то знайте, что это
как раз тот случай, когда или Карен, или Барбара (или даже они обе) говорили:
«Хорошо, если ты так настаиваешь...»
Элисон Сесил сознательно взяла на себя маниакальный труд1 по разработке дизайна этой книги. Представьте, каково это разрабатывать дизайн книги, автор
которой, будучи человеком придирчивым и упрямым, настаивает, чтобы книга
отражала те самые принципы дизайна, которые он в ней излагает. И естественно, что все это нужно было сделать за кошмарно короткий срок. Ей это удалось
только за счет непрерывной экономии на собственном сне (и всем остальном тоже)
и за счет того, что ее талант равносилен ее великодушию и терпению. Знайте,
если вы заметите какую-то погрешность в дизайне, то почти наверняка она появилась только лишь по моему настоянию.
Дэвид Мат и Элизабет Оо из Roger Black Consulting, а также Трина Урст и Сандра Шредер из Macmillan в большой степени содействовали разработке дизайна
книги и ее выпуску. Марк Мэтчо подготовил иллюстрации, хотя это и происходило в ужасной спешке.
Роджер Блэк уже не первый год много помогает мне в моей работе. Работать вместе с ним и наблюдать за его необыкновенными и веселыми мыслями - это почти развлечение. Жаль только, что мне слишком редко удается побыть в его
компании потому, что он всегда либо в Уругвае, либо в Сингапуре. Он первым
предложил мне написать такую книгу. Он, а также Джок Спиви, помогли обеспечить необходимую помощь на Circle.com.
Александра Андерсон-Спиви («Элли») участвовала в этом проекте со стороны
Circle.com. Она дала очень ценные редакторские замечания и оказывала нам бесценную моральную поддержку с самого начала до самого конца.
Те, кто откликнулись
Многие люди помогали мне понять, действительно ли содержание книги имеет
смысл, или же я просто, по выражению Скотти-репортера из «Вещи из другого
2
3
мира » , «...засыпал все голубикой». Больше всего я полагался на двух моих
лучших друзей:
Ср. с выражением Кевина К л айна о своей работе пожарного: «Горит здание. Все бегут
из него - ты бежишь в него. Это маниакальная работа» (из «Человек января»).
Хоуард Хоукс - американский режиссер, сценарист, продюсер (1896-1977). - Примеч. лит. ред.
...вспоминаю, конечно, фильм Хоуарда Хоукса, 1949, а вовсе не ремейк Джона Карпентера.
Благодарности
>
193
Пола Шекспира, который, вместо того чтобы заниматься своим любимым рисованием, проводил многие часы, вычитывая мои трудночитаемыё черновики
и подсказывая, что нужно закончить, а что совсем выбросить. Эти черновики я
не решился бы показывать кому-либо другому, кроме него. Беседы с ним по
поводу этой книги были намного более интересными, чем сама книга, как это
обычно и бывает в наши с Полом встречи.
> Ричарда Джинграса, который знает о том, как делать издания в Интернете и
как создавать у пользователей позитивный опыт, больше, чем кто-либо еще.
Его отзыв после прочтения первой главы вдохновил меня на продолжение
работы, так же как его дружеское отношение сделало возможными многие
вещи в моей жизни. Я закончил эту книгу в доме Ричарда, в компании его
жены Митци Трумо, их дочери Молли и замечательной мамы Митци, Клео.
Обычно я останавливаюсь у них, когда работаю в Силиконовой долине, и это,
как говорит моя жена, моя «вторая семья». Дружба с ними значит для меня
больше, чем я мог бы здесь об этом сказать.
Сколько людей оказались настолько щедрыми, чтобы уделить часть своего времени на чтение рукописи. Среди них: Сью Хэй, Хилари Гудол, Пеги Рэдпэт,
Дженифер Флеминг, Лоу Розенфельд, Роберт Рэйнз, Ричард Саул Вурман, Джеф
Виин, Дона Слоут, Мат Старк, Кристин Бауэр, Боб Гоуер, Дан Роам, Питер Стермер и Джон Кенрик. Как это всегда бывает при проведении пользовательского
тестирования, реакции, предложения и комментарии этих людей позволили значительно улучшить конечный результат.
Кроме вычитывания рукописи, Клео Хагинз, одна из самых лучших дизайнеров и
просто одна из самых приятных и интересных людей, также сделала необычайно
щедрое предложение помощи тогда, когда я в этом очень нуждался.
Гэйл Блумберг была моей спасательной службой при решении проблем, которые
возникали во время работы с этой книгой и требовали от меня деликатности и
«политики». Ее смех заражал меня. Ко всему прочему, она так часто выручала
меня с обедами, что, наверное, я должен купить ей целый ресторан, чтобы хоть
как-то ее отблагодарить.
Мой сосед, графический дизайнер Кертни Макглайн, часто помогал мне разобраться с некоторыми непростыми вопросами дизайна. Кроме того, в течение многих лет он приходил ко мне по первому зову и всегда с радостью исполнял роль
«среднего пользователя» в тех случаях, когда мне нужно было провести быстрое тестирование.
194
Стив Круг
Учителя
Дэйв Флэнэган, Джон Кирш и Джон Хирштик показали мне на своем примере, что
настоящий бизнес и исключительная порядочность не являются несовместимыми, что вдохновило меня на работу консультантом. Джон упрямо выталкивал меня
в профессиональную жизнь, а это стоило ему немалых усилий. Он терпеливо стоял
рядом со мной, когда я учился создавать что-нибудь большее, чем просто страница, - такой подарок вернуть невозможно. Пит Джонсон смог чрезвычайно улучшить эту книгу, ни разу даже не взглянув на нее, - многие годы он просто показывал мне своим примером, что такое хорошая работа.
Клиенты и сотрудники, а также клиенты
и сотрудники, ставшие друзьями
Многое из того, что я знаю о веб-юзабилити, появилось в результате совместной
работы с интересными и талантливыми людьми, такими как: Аруин Браиэнт,
Джим Олбрайт, Джон Ленон, Джон Гоуэк, Джим Кент, Билл Маккол, Дэн Роум,
Джэймс Колдуел, Джон Л аи л Сэнфорд, Люси Сублин, Питер Карниг и Toe Фел.
Семья
Мой брат Фил Круг всю мою жизнь стоял за меня, ну, если не вспоминать наши
ранние годы, когда он позволял себе силком щекотать меня и держать вверх
тормашками.
Мой сын Гарри проявлял удивительное терпение во время того, как я писал эту
книгу, даже если ему приходилось уменьшать громкость на своем компьютере,
когда он играл в «Сумасшествие в центре города». Позже он даже взялся за роль
девятилетнего пресс-агента, прихватив
как-то рукопись моей книги в наш книжный магазин «Barnes&Noble». Он хотел
посмотреть, как она будет выглядеть,
если ее поставить на одну из книжных
полок. Кроме того, он сказал, что это хорошая книга, и, когда нам нужно было
готовить обложку для нее, он предложил
нам свой вариант.
Благодарности
195
Моя жена Мелани Сокол говорила мне тысячу раз, чтобы я не упоминал в этой
книге о том, как она мне помогала. Вы знаете, она действительно меня невероятно поддерживала в те четыре месяца, в которые предполагалось книгу написать, и в те следующие четыре месяца, которые потребовались сверх назначенного срока. И даже в следующие четыре месяца, которые тоже не завершили
всей работы, Мелани продолжала меня поддерживать в таких мелочах, как полное неведение, когда же, наконец, (если вообще когда-нибудь) я мог бы закончить эту книгу. Короче говоря, она знает, насколько я ей благодарен.
И другие
Фло и вся команда кафе «Brueggers' Bagel Bakery» в западном Роксбэри никогда не относились ко мне, как к нежелательному посетителю, в те дни, когда я по
утрам на долгие часы занимал у них столик, заказывал свою неизменную чашку кофе и начинал перебирать свои бесчисленные бумаги, глядя в пространство.
Зная слабость своего рассудка, боюсь, что кого-то забыл здесь упомянуть. Возможно, вас. К счастью, к тому моменту, как вы будете читать эти строки, ваша
футболка, скорее всего, уже придет вам по почте.
Келли ГОТО, Эмили КОТЛЕР
Веб-редизайн: книга Келли Гото
376 стр., цветная вклейка, книга в продаже
Будь вы дизайнер или менеджер веб-сайта, владелец компании или
домашней странички в Интернете, если вы хотите продвинуть свое
представительство в Сети на новый уровень, эта книга для вас.
Если вам случалось пережить перепроектирование веб-сайта, подавившее вас беспорядком, перепутанными сообщениями и постоянно
меняющимися параметрами, эта книга должна быть у вас под рукой.
Почему? Да потому, что Келли Гото и Эмили Котлер предлагают
четкий работоспособный план, который поможет сэкономить время,
деньги и нервы при изменении любых проектов - от простых до самых сложных. В этой книге вы найдете:
. Базовый процесс - четко описанную, универсальную, легко адаптируемую последовательность действий.
Технические приемы, советы, контрольные таблицы, опросные
листы, рабочие таблицы и формы - все это подготовлено к немедленному использованию, что поможет удержать проект в рабочем
состоянии на весь период редизайна.
.
Советы по переносу модифицируемого проекта из рук команды
веб-разработчиков под опеку команды сопровождения.
Джеф РАСКИН
Интерфейс: новые направления
в проектировании компьютерных систем
272 стр., книга в продаже
Эту книгу должен прочитать каждый, кто задумывается об интерфейсе.
Уникальное руководство по разработке интерактивных систем отражает опыт и взгляды Джефа Раскина, создателя проекта Apple Macintosh. Предлагаемые идеи могут быть полезны для создателей программного обеспечения и руководителей проектов.
В других книгах рассказывается об эффективном применении современных интерактивных механизмов и методах разработки интерфейсов. Раскин же демонстрирует, что многие современные подходы к
разработке интерфейсов являются тупиковыми, и для создания компьютеров, которые были бы значительно проще в использовании, требуются совершенно новые принципы и методы разработки. Автор объясняет, как осуществить эти чрезвычайно нужные сегодня изменения,
и предлагает множество новаторских и нестандартных идей.
«Интерфейс: новые направления...» служит очередным подтверждением дальновидности и способности Раскина к практическому взгляду на вещи. В этой книге он демонстрирует научный подход к воплощению идей по разработке интерфейсов.
ДикМАК-КЛЕЛЛАНД
Уроки мастерства Adobe.
Приглашение к дизайну
240 стр., цветная, книга в продаже
В книге «Уроки мастерства Adobe» делается попытка пролить
свет на искусство дизайна на примерах работ семи ведущих
практиков в этой области, выбранных компанией Adobe Systems
для реализации проекта Design Invitational.
Вы не только познакомитесь с индивидуальными приемами
творчества этих художников, но и увидите, как они применяют
свои навыки в проекте Everywhere You Look. Вы сможете убедиться, что великолепный дизайн зависит не от инструментальных средств. Мощные приложения могут облегчить работу, но
без глубоких идей, таланта и хороших навыков в дизайне инструменты стоят немного.
Итак, перед вами книга о вдохновении и конкретных методах, твердо опирающихся на реальные возможности. Говоря коротко, здесь приведены лучшие образцы дизайна: загадочные
образы, характерные для иллюстраций Крейга Фрейзира; не
просто живые, а танцующие веб-анимации Яна Ковалика; волшебные превращения текста в художественные образы Майкла
Мабри.
Шэм БАНГАЛ
ActionScript. Основы
480 стр., книга в продаже
Эта книга написана опытным веб-дизайнером для своих коллег,
уже владеющих основами Flash, но не имеющих опыта в программировании. Последние усовершенствования языка ActionScript сделали его привлекательным в глазах веб-дизайнеров,
а обеспечиваемая его средствами интерактивность внезапно
вывела веб-дизайн на новый уровень. Появились новые способы включения звукового сопровождения и более развитые
средства тестирования и отладки.
Вам совершенно необязательно знать что-либо о программировании. Понимая, насколько сложно освоить премудрости
программирования человеку творческому, автор шаг за шагом
знакомит читателя с основными понятиями программирования
и их связью с дизайном. Вам не будет скучно, наоборот, книга
увлечет вас, и к концу чтения вы станете настоящим асом.
Книга хорошо иллюстрирована, насыщена упражнениями,
которые вам как веб-дизайнеру будут понятны и пригодятся в
дальнейшей работе. Основное внимание уделяется применению
ActionScript в реальных веб-проектах. Издание отличается полнотой изложения материала и очень удачно составлено.
Якоб НИЛЬСЕН
••••••••••••••••
Веб-дизайн: книга Якоба Нильсена
512 стр., цветная вклейка, книга в продаже
Самая известная на сегодняшний день книга по веб-дизайну. Ее автор,
доктор физических наук Якоб Нильсен - всемирно признанный специалист в области интерфейсов и удобства эксплуатации, - делится с
читателем своими знаниями и опытом. Он является обладателем 38
патентов США на разработки, ориентированные главным образом
на повышение удобства работы пользователей с Интернетом.
Книга содержит исчерпывающее руководство по построению эффективного взаимодействия с любым пользователем в любой ситуации: от подготовки информационного наполнения и оформления
страниц до упрощения структуры навигации и создания профессиональных сайтов. Предлагаемые рекомендации по веб-дизайну
носят практический характер: книга основана на результатах исследований, а не на субъективных впечатлениях.
В ней вы не найдете описаний каких-либо конкретных программ
и кодов на HTML Она отвечает на самый главный вопрос веб-дизайна:
«Что именно нужно сделать, чтобы посетителям сайта было удобно с
ним работать?»
Дмитрий КИРСАНОВ
Веб-дизайн: книга Дмитрия Кирсанова
376 стр., цветная вклейка, книга в продаже
Книга автора бестселлера «Факс-модем: от покупки и подключения
до выхода в Интернет» - Дмитрия Кирсанова (www.kirsanov.com) первый полный курс веб-дизайна на русском языке, написанный
профессиональным дизайнером. От теоретических основ визуального
дизайна до интернетовских технологий и приемов практической
работы над сайтом - все это есть в книге, написанной понятно, подробно и увлекательно.
Издание будет полезно не только начинающим создателям сайтов,
но и дизайнерам, работающим в более традиционных областях,
специалистам по рекламе и маркетингу, художникам, программистам
и, конечно же, всем творческим и любознательным людям.
У меня есть настольный компьютер, лампа, стойка для компактдисков, пепельница, карандашница, магнитофон, спектрофотометр.
Теперь у меня появилась настольная книга... Это первая книга о вебдизайне, которую я буду рекомендовать всем.
Артемий Лебедев,
tema@tema.ru,
www.samiznaetekto.ru
веб! дизайн
Издательство
"СИМВОЛ-ПЛЮС"
Основано в 1995 году # • • • # # # * # # • * # • # # • • • # #
О МЛС
Наша специализация - книги компьютерной тематики. Наши издания - плод сотрудничества известных зарубежных и отечественных авторов, высококлассных переводчиков и компетентных
научных редакторов. Среди наших деловых партнеров издательства: O'Reilly, NewRiders, Addison Wesley, Wrox и другие.
O'REILLY8
l i y i l f f f*li Наши книги вы можете купить во всех крупных книжных магазинах России,
Украины, Белоруссии и других стран СНГ. Однако по мини-мальным ценам
и оптом они продаются:
Санкт-Петербург:
главный офис издательства В. 0.16 линия, д. 7 (м. Василеостровская),
тел. (812) 324-5353
Москва:
московский филиал издательства ул. Беговая, д. 13 (м. Динамо),
тел. (095) 945-8100
MMMW
через Интернет
врозницу:
http://www.symbol.ru
http://www.books.ru
оптом:
http://opt.books.ru
по обычной почте
199034, С.Петербург, 16 линия, д. 7.
Издательство «Символ-Плюс».
I Бесплатный каталог изданий высылается по запросу.
Шртгттшвтт
ж
mww.$yiilb€$I*i*ii
Мы приглашаем к сотрудничеству умных и талантливых авторов,
переводчиков и редакторов. За более подробной информацией
обращайтесь, пожалуйста, на сайт издательства: www.symbol.ru.
Также на нашем сайте вы можете высказать свое мнение и
замечания о наших книгах. Ждем ваших писем!