«Steve Krug New Riders Publishing Berkeley, California USA книга стива круга не заставляйте меня думать! или Второе издание Серия Библиотека дизайнера Стив Круг Вебдизайн: книга Стива Круга или не заставляйте меня ...»

книга стива круга

или не заставляйте меня думать!

По договору между издательством «Символ Плюс» и Интернет магази

ном «Books.Ru – Книги России» единственный легальный способ полу

чения данного файла с книгой ISBN 5 93286 099 5, название «Веб ди

зайн: книга Стива Круга или «не заставляйте меня думать!», 2 е издание –

покупка в Интернет магазине «Books.Ru – Книги России». Если Вы по

лучили данный файл каким либо другим образом, Вы нарушили между

народное законодательство и законодательство Российской Федерации об охране авторского права. Вам необходимо удалить данный файл, а также сообщить издательству «Символ Плюс» ([email protected]), где именно Вы получили данный файл.

don`t make me think!

a common sense approach to web usability Second Edition Steve Krug New Riders Publishing Berkeley, California USA книга стива круга не заставляйте меня думать!

или Второе издание Серия «Библиотека дизайнера»

Стив Круг Вебдизайн: книга Стива Круга или «не заставляйте меня думать!», 2е издание Перевод Ю. Асотова и В. Овчинникова А. Галунов Главный редактор Н. Макарова Зав. редакцией Н. Макарова Редактор О. Макарова Художник Д. Орлова Верстка О. Макарова Корректура Круг С.

Вебдизайн: книга Стива Круга или «не заставляйте меня думать!», 2-е издание. – Пер. с англ. – СПб: СимволПлюс, 2008. – 224 с.: цв. ил.

ISBN-10: ISBN-13: 978- Второе издание мирового бестселлера адресовано специалистампрактикам – дизайнерам, программистам, вебмастерам, менеджерам, маркетологам. Сейчас трудно найти специалиста, имеющего отношение к созданию веб-сайтов и не читавшего эту книгу.

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

ISBN10: ISBN13: ISBN 0321344758 (англ) © Издательство СимволПлюс, Authorized translation of the English edition, Copyright © 2006 Pearson Education, Inc. This translation is published and sold by permission of Pearson Education, Inc., the owner of all rights to publish and sell the same.

Все права на данное издание защищены Законодательством РФ, включая право на полное или частичное воспроизведение в любой форме. Все товарные знаки или зарегистрированные товарные знаки, упоминаемые в настоящем издании, являются собственностью соответствующих фирм.

Подписано в печать 10.12.2007. Гарнитура SchoolBookC. Печать офсетная.

Формат 70х90 1/16. Объем 14 печ. л. Тираж 3000 экз. Заказ № Издательство «Символ-Плюс». 199034, Санкт-Петербург, 16 линия, 7, тел. (812) 324-5353, [email protected]. Лицензия ЛП N 000054 от 25.12.98.

Отпечатано по технологии CtP в ОАО «Печатный двор» им. А. М. Горького 197110, СанктПетербург, Чкаловский пр., 15.

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

Моей мат­ери, кот­орая всегда верила в меня.

Мелани, кот­орая вышла за меня замуж и оказалась самым большим подарком моей судьбы.

А т­акже моему сыну Гарри, книги кот­орого, я уверен, будут­ лучше, чем эт­а, если т­олько он пожелает­ их написат­ь.

Ко­ вто­р­о­му из­да­нию Моему ст­аршему брат­у Филу, Содержание Откашливание и громкие заявления ГлаВа 2 Ка­к мы в дей­ствительно­сти Просматриваем, прикидываем и «делаем как полу­чится»

ГлаВа 3 На­ча­льный­ ку­рс по­ со­з­да­нию Разработка вебстраниц для просмотра, а не для чтения Почему­ поль­зователи лю­бят выбирать­ не заду­мываясь­ ГлаВа 7 Первый­ ш­а­г к выз­до­ро­влению – приз­на­ние Разработка началь­ной страницы ГлаВа 8 «Ско­то­во­д и па­сту­х до­лжны быть дру­з­ьями» Почему­ споры относитель­но вебдизайна и ю­забилити являю­тся пу­стой тратой времени и как их избежать­ ГлаВа 9 Юз­а­билититестиро­ва­ние Как у­простить­ тестирование, чтобы сделать­ его досту­пным Почему­ ваш сайт должен быть­ образцовым ГлаВа 11 До­сту­пно­сть вебко­нтента­, Как раз в тот момент, когда вы ду­маете, что все плохо, мимо пролетает кошка, к спине которой привязан бу­терброд с маслом Как это так бывает, что у­ хороших лю­дей полу­чается плохой дизайн …и все, что я полу­чил, – какаято несчастная фу­тболка О вто­ро­м из­да­нии Со времени выхода первого издания из печати прошло почти пять лет, и можно сказать, что его приняли очень хорошо.

Я получаю массу очаровательных писем. Вы себе не представляете, как приятно, когда утро начинается с того, что незнакомые тебе люди рассказывают, как им нравится то, что ты сделал. (Настоятельно рекомендую.) Еще приятнее то, что книга нравится им по тем же причинам, что и мне. Например:

› Многим нравится, что она короткая. (Кто-то рассказывал мне, что успел прочитать ее, пока летел в самолете, а это была одна из целей, поставленных мной в первом издании; кажется, рекордный результат был равен примерно двум часам.) › Говорят также, что слово в этой книге не расходится с делом (и в оформлении, и в тексте), и количество таких отзывов мне приятно.

› А некоторые просто хохотали над ней, что мне нравится по-настоящему. Одна читательница рассказала даже, что у нее от смеха молоко пошло из носа.

Какой от этого толк (разве что доказывает, что удалось как следует провести время)?

Но самое приятное, что книга помогла людям лучше справиться с работой.

Но­ что­ вы для на­с сде­ла­ли з­а­ по­сле­дне­е­ вре­мя?

Понадобился всего год с момента выхода первого издания, чтобы меня начали спрашивать, когда я собираюсь написать второе.

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

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

Но на самом деле многие сайты канули в небытие уже к тому времени, когда книга попала в магазины. (Помните, она вышла как раз перед тем, как лопнул мыльный пузырь дот-комов.) И исчезновение сайтов вовсе не сделало примеры сколько-нибудь менее понятными.

Еще мне говорили, что «можно было бы рассказать о том, что изменилось в Интернете». И правда, коечто в Интернете за последние несколько лет дейст­вит­ельно изменилось. Некоторые перемены были благотворными:

› Стало больше сайтов, достойных подражания › Каскадные таблицы стилей (CSS) стали действительно работоспособными › Стали обычными такие удобства, как версии веб-страниц, пригодные для печати, и сервис What’s this? от Amazon.com › Google стал отправной точкой любых действий › В бизнес-моделях произошел поворот от рекламных баннеров (которые мне не нравились) к рекламе Google (которую я действительно готов приветствовать) › Почти все отказались от фреймов …и не столь благотворные:

› Всплывающие окна › Фишинг Но эти перемены не могли убедить меня в необходимости переписывать книгу, в которой рассказывается о принципах дизайна, а не об особенностях технологии или ее реализации.

Было и еще одно препятствие: я гордился тем, что книга получилась такой короткой. На нее ушло много труда, но было важно, чтобы «слово в ней не расходилось с делом». Если бы я чтонибудь добавил, то пришлось бы чемнибудь пожертвовать, а я считал, что все и так очень хорошо.

О втором издании Ита­к, что­ это­ мы з­де­сь де­ла­е­м?

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

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

Но все, кто пришел на занятия, уже прочитали книгу, поэтому мне пришлось придумать другие примеры, иллюстрирующие те же самые мысли, и другие способы объяснить те же самые вещи. Мне также приходится заниматься разбором сайтов различных типов, потому что каждый, кто приходит на занятия, может предложить какой-нибудь URL, и для некоторых из них я в течение дня делаю десятиминутные «экспертные мини-разборы», а для одногодвух провожу «живой юзертестинг».

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

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

Ка­к что­, на­приме­р?

По большей части новый материал можно отнести к одной из трех категорий:

› А-а, вот те­пе­рь я по­нял. Проведение занятий дало мне возможность продумать содержимое книги. Кое-что я переписал немного иначе, потому что думаю, что теперь я понимаю это чуть лучше или нашел лучший способ объяснить, что я понимаю.

› По­мо­ги­те! Началь­ни­к застав­ляет меня. Многие вопросы, которые мне задают на занятиях, сводятся к следующему: «Я знаю, что правильно в этом случае, но начальник (клиент, акционеры) настаивает, чтобы я поступил неправильно. Как мне переубедить его?».

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

Начальник отдела маркетинга настаивает, чтобы мы заставляли пользователей сообщать массу ненужных личных сведений, прежде чем они смогут подписаться на рассылку нашего информационного бюллетеня, и ему, кажется, все равно, что 10% подписчиков теперь скрываются под именем › «Утерянные» глав­ы. Были две главы, которые я хотел включить в первое издание, но не включил, чтобы не увеличивать объем книги. В одной из них, в главе 10, рассказывается о том, как важно хорошо обращаться с пользователями. Другая, глава 11, посвящена доступности веб-содержимого.

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

Че­тыре­ че­тве­рти плюс о­дна­… книга­-то­ все­ ра­вно­ о­дна­ И хотя я перестал думать, что книга хороша как она есть (спасибо), и у меня появилось ощущение, что мне хотелось бы многое добавить в нее, отставалось одно большое затруднение. А именно: как, не отказываясь ни от чего, добавить новый материал и оставить книгу достаточно короткой для того, чтобы ее можно было прочитать, пока летишь в самолете?

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

› Подтвердил что-то, что я уже знал › Рассказал мне что-то новое о том, для чего книга оказалась полезной читателям и что они в ней ценят › Преподнес мне большой сюрприз, благодаря чему мне удалось значительно улучшить книгу Большой сюрприз заключался в количестве читателей, предложивших перенести главы о юзертестинге в следующее издание. (Некоторые из них слышали, что я планирую написать другую книгу, подробно рассказывающую о недорогом/бесплатном самодеятельном юзертестинге, и коекто сказал, что горевать по этим главам не будет, потому что не собирается ничего тестировать самостоятельно.) О втором издании Я хотел так и сделать, но передумал, потому что а) полагал, что читатели не обойдутся без этих глав, и б) считал, что могут подумать, будто я пытаюсь заставить людей купить вторую книгу. Но как только я начал читать, что пишут пользователи, решение стало очевидным: если из трех глав о юзертестинге сделать одну немного более короткую и поместить в нее все важные сведения, необходимые каждому, то можно выиграть страниц двадцать для нового материала.

А для всех, кто хотел бы иметь старую, более длинную версию, я мог бы выложить на своем сайте исходные главы.1 Вот и все.

И наконец, пара советов:

› Ссылки­. Тот, кто захочет посетить ресурсы, упомянутые в книге, найдет актуальные ссылки на моем сайте. (На тот случай, если какие-то сайты, ну, вы знаете… исчезнут.) › Чего­ тут нет и­ не будет. Есть кое-что, о чем меня спрашивали и чего вы здесь не найдете. Здесь совершенно не рассматриваются веб-приложения. Для них справедливы многие принципы, действующие и для сайтов, но это тема для отдельной книги, и я не тот человек, который ее напишет. Во всяком случае спасибо за все. Надеюсь, новые главы будут вам полезны.

До встречи через пять лет.

Ст­ив Круг, июль 2005 г.

http://www.sen­si­ble.com/secon­d­ed­i­ti­on­.

Те, кто интересуются этой областью, могут заглянуть в книгу Сьюзен Фаулер (Susan Fowler) и Виктора Стэнвика (Victor Stanwick) «Web Application Design Handbook:

Best Practices for Web-Based Software», 2004.

Пре­дисло­вие­ Не за­ста­в­ляй­те меНя ду­ма­ть- сли принять во внимание, сколько всего изменилось с 2000 г., когда вышло первое издание этой книги, можно только удивляться, что основа веб-дизайна осталась до такой степени незыблемой.

На заре своего развития платформа была непостоянной. Казалось, что ее характерные черты менялись еженедельно. Мы были свидетелями войн броузеров, в которых Netscape нападал на всех новичков, и консорциум W3C каждые полгода извлекал на свет божий новые стандарты HTML. Но потом военная машина из Редмонда одержала предсказуемую победу, и все улеглось.

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

Но облегчение постепенно растаяло, сменившись разочарованием.

Косность HTML, дефицит шрифтов, свобода в оформлении веб-страниц, которая делает дизайн таким приблизительным, обескураживающее количество целевых броузеров (даже если эти броузеры по большей части Internet Ex­plorer) и вариантов экранного разрешения – все эти обстоятельства не могут не вызывать раздражения.

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

Соглашения могут меняться, но одно остается постоянным – человеческая природа. Какой бы радикальной и разрушительной силой (в социальном и финансовом аспектах) ни показал себя Интернет, он пока не вызвал заметной мутации человека как вида.

А поскольку мы, дизайнеры, как правило, не вступаем в контакт с человеческими существами из реального мира, то очень полезно быть знакомым со Стивом Кругом (или хотя бы держать у себя его книгу), потому что Стив дейст­вит­ельно знает­ пользователей. Проработав в своей области более десяти лет, он по-прежнему смотрит на каждый сайт как на самый первый. Здесь вы не найдете модных словечек, а только здравый смысл и доброжелательное понимание образа нашего мышления, особенностей нашего видения и нашего восприятия печатного слова.

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

в­в­едеНие Readme.1st Отка­шлив­а­Ние и грОмкие за­яв­леНия огда я рассказывал, что пишу книгу о том, как делать то, что делаю я, мне всегда задавали один и тот же вопрос: «А вы не боитесь потерять свою собственную работу?..»

Действительно, у меня великолепная работа!

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

На­ча­льна­я стра­ница­, диз­а­й­н А На­ча­льна­я стра­ница­, диз­а­й­н В Су­ществу­ющий­ са­й­т › Я просматриваю дизайн страниц или захожу на сайт, чтобы оценить, насколько удобно и просто такими страницами пользоваться (это называется «экспертной оценкой юзабилити»). Иногда я нанимаю других людей, чтобы они попробовали использовать тестируемый сайт в моем присутствии (т. н. «юзабилити-тестирование»). › Затем я составляю отчет, в котором описываю проблемы практического использования данного ресурса (т. н. Отчет о­ тестиро­ва­нии «проблемы юзабилити») и предлагаю возможные способы их решения. Не путать с вуайеризмом.

Это один из новых моментов по сравнению с первым изданием. В главе 9 я рассказываю, почему практически отказался от написания отчетов, называемых мною теперь «громогласными».

› Я могу работать с группой разработчиков того или иного сайта, чтобы помочь им разрешить выявленные проблемы.

› Затем мне платят гонорар.

Ино­гда­ я ко­нсу­льтиру­ю по­ телефо­ну­... …ино­гда­ лично­ В качестве консультанта я участвую в интересных проектах и сотрудничаю с приятными и умными людьми, и в результате нашей совместной работы сайты становятся более простыми и удобными для пользователей. Большую часть времени я работаю дома – мне не нужно каждый день присутствовать на скучнейших совещаниях и меня не касаются вопросы административной политики.

Мое дело – это говорить то, что я думаю, и именно за это мне платят клиенты.

Хорошо платят.

Поверьте, я бы не хотел чтото необдуманно менять в жизни – она вполне меня устраивает. Но в действительности так много сайтов нуждается в переработке, а специалистов, умеющих делать то, что делаю я, так мало, что вряд ли когда-нибудь моя работа закончится, разве только рухнет сегодняшний бум, связанный с Интернетом. Сейчас у меня работа еще лучше. С тех пор как вышла книга, я много времени посвятил проведению семинаров, где ничего нельзя отложить на потом. К концу дня чувствуешь себя как выжатый лимон.

Этот бум обернулся очевидным банкротством не позже, чем я написал эти строки (в конце 2000 г.). Хоть это и так, сейчас над вопросами юзабилити работает, наверное, больше людей, чем тогда.

Readme.1st Многие люди, не имеющие никакого или, по крайней мере, достаточного опыта, неожиданно стали ответственными за крупнобюджетные проекты, связанные с будущим целых компаний. Они нуждаются в специалистах, способных показать им, как действовать правильно.

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

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

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

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

Это­ не­ высша­я ма­те­ма­тика­™ К счастью, лишь здравый смысл лежит в основе моей работы, и любой желающий может научиться такому подходу.

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

Однако разумное и здравое решение не всегда представляется очевидным, и зачастую только ктото другой может­ вам его показать. Естественно, если вы можете себе это позволить, наймите какого-нибудь эксперта. Но если это вам не по карману, я надеюсь, что книга поможет сделать все самостоятельно (ведь у вас для этого есть бездна свободного времени).

…вот почему мое консультационное дело (в котором участвую только я да еще несколько расставленных в нужном порядке зеркал) называется «Продвинутый здравый смысл». Мой фирменный девиз – «Это не высшая математика!».

Да­, эта­ книга­ не­бо­льша­я Я очень старался сделать эту книгу небольшой по объему в надежде, что вы сможете ее прочитать во время какого-нибудь длительного авиапутешествия.

Я стремился к этому по двум причинам:

› Чем кни­га ко­ро­че, тем с бо­ль­По­дз­а­го­ло­во­к шей в­еро­ятно­сть­ю чи­татель­ гу я писал для тех, кто занимается практической работой – дизайнеров, разработчиков сайтов, менеджеров, специалистов по маркетингу, а также для тех, кто выписывает чеки, и тех, кто занимается всем этим одновременно.

Я предполагаю, что у моего читателя не слишком много времени на чтение и он не является специалистом по юзабилити вебресурсов.

› Чело­в­ек не до­лжен знать­ в­се на св­ете. Как и любая область знаний, область вопросов, касающихся понятия юзабилити, достаточно широка. Но углублят­ься в них имеет смысл только в том случае, если это является вашей профессией. Еще один хороший принцип юзабилити: чем больших временных затрат чтолибо требует или может потребовать, тем меньше вероятность того, что это будет кемлибо использовано.

Мне очень нравится отрывок из рассказа «Этюд в багровых тонах», в котором доктор Ватсон с удивлением узнает, что Шерлок Холмс не знает, что Земля крутится вокруг Солнца. Холмс объясняет это тем, что, обладая таким не мощным разумом, как человеческий, он не может позволить себе уделять бесполезным вещам больше внимания, чем полезным: «Что мне толку в том, что мы вертимся вокруг Солнца? Да пусть хоть вокруг Луны – это не сделало бы никакой разницы для меня или моей работы».

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

Че­го­ з­де­сь не­т Чтобы вы не тратили времени на поиски, ниже приводится список того, чего вы не сможет­е найти в содержании этой книги:

› «Еди­нств­енно­ в­ерно­го­ пути­» для со­здани­я сайто­в­. Вебразработкой я занимаюсь достаточно давно, чтобы знать, что не существует некого «правильного» способа. Процесс создания сайта довольно сложен, и в большинстве случаев ответом на все вопросы является «It depends» («Ну, это как посмотреть!

Все зависит от…» – англ.).1 Но я убежден, что можно определить несколько основных принципов, которые всегда имеет смысл учитывать. Именно эти принципы я попытаюсь донести до вас в своем изложении.

› Опи­сани­я спо­со­бо­в­ в­едени­я би­знеса. Если история чемуто нас и учит, так это тому, что методы интернет-коммерции подобны автобусам: если вы пропустили один автобус, то все, что остается сделать, – это дождаться следующего. Я не являюсь экспертом в сфере извлечения прибыли с помощью Интернета, но даже если бы и был таковым, то все, что я сказал бы по этому поводу, к моменту вашего чтения уже бы устарело.

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

› Кри­ти­ки­ пло­хо­ разрабо­танных сайто­в­. Если вам нравятся люди, которые любят смеяться над ошибками на чужих сайтах, то эта книга не для вас. Создание, разработка и поддержка вебсайта не являются простым делом. Это как в гольфе: есть всего несколько способов точно забить мяч в лунку и милВ компании разработчиков User Interface Engineering (www.ui­e.com) сотрудники консультационных групп под руководством Джарэд Спул даже носят особые футболки с надписью «It depends».

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

Убежден, что учиться нужно на примере хороших сайтов, а не плохих. Поэтому в этой книге я старался говорить о сайтах, в которых есть лишь незначительные погрешности. Тем не менее эти сайты можно считать превосходными.

› При­меро­в­ по­ в­сем в­о­змо­жным ти­пам сайто­в­. Большинство приведенных примеров касается коммерческих сайтов, таких, например, как интернет-магазины. Однако принципы, которые описываются в этой книге, могут быть применены и к любому другому типу сайтов, начиная, скажем, от домашней страницы моего соседа по дому и заканчивая сайтом футбольной команды, в которой играет ваша дочь, или внутренними сетями вашей компании. Использование примеров по всему жанровому разнообразию сайтов привело бы к большему объему, а значит, и к меньшей практической ценности этой Де­й­ствующие­ лица­ В книге я старался избегать понятий «пользователь» или «пользователи» не только для того, чтобы не делать содержание утомительным, но и для того, чтобы побудить читателя ощутить себя вебпользователем, о чем многие забывают, когда занимаются непосредственно вебразработкой. С этой целью условимся, что местоимения, использованные в книге, будут подразумевать следующее:

› «Я» о­значает меня, ав­то­ра. В одних случаях я выступаю в роли эксперта (например, «Я рекомендую своим клиентам сделать тото и тото»), в других – говорю как обычный пользователь (например, «Если я не могу найти кнопку «Поиск»…»). Тем не менее во всех случаях я подразумеваю только себя.

› «Вы» о­значает в­ас, чи­тателей, тех, кто занимается разработкой, созданием и публикацией вебсайтов, а также тех, кто за это платит.

› «Мы» (напри­мер, «Как мы и­спо­ль­зуем Интернет?») о­значает в­сех в­ебпо­ль­зо­в­ателей. Сюда также входят «Вы» и «Я».

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

Readme.1st Эта­ по­е­з­дка­ де­й­ствите­льно­ не­о­бхо­дима­?

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

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

Мне кажется, что моя жена смогла выразить суть вопроса лучше, чем это могли бы сделать статистические отчеты:

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

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

Перв­ый­ за­кОН кру­га­ еня часто спрашивают:

«О чем следует прежде всего позаботиться, чтобы вебсайт был удобным в использовании?»

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

Вот этот ответ… «Не­ з­а­ста­вляй­те­ ме­ня дума­ть!»

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

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

Другими словами, я должен сразу «схватить» ее – понять, что на ней и как ей пользоваться без затраты какихлибо усилий.

Что значит: простой, понятной и «самоочевидной»?

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

Ему будет посвящена отдельная глава.

шего сайта и сказать: «О! Это …». (Она, конечно, воскликнет: «О! Это … Как мило!». Но это уже другой вопрос.) Приведем другой пример.

Когда я смотрю на страницу, не требующую особого размышления, в голове возникает чтото вроде «Так, понятно, это вот это… а это вот то… а вот это то, что мне нужно».

БЕЗ РАЗМЫШЛЕНИЯ

мо­ду­ли па­мяти… О, во­т это­ то­, что­ ну­жно­: мо­нито­ры.

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

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

РАЗМЫШЛЕНИЯ

Хм, ка­к мно­го­ з­десь всего­… на­з­ва­ли это­ та­к?

Когда вы создаете сайт, ваша основная задача состоит в том, чтобы избавиться от вопросительных знаков.

То­, что­ з­а­ста­вляе­т дума­ть Разные вещи на вебстранице могут заставить нас без надобности остановиться и задуматься. Взять хотя бы названия. Чаще всего такими виновниками являются вычурные или заумные названия, торговые марки, фирменные наименования и незнакомые технические термины.

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

ПОНЯТНО ТРЕБУЕТ РАЗМЫШЛЕНИЯ

Обратите внимание, что название нужного мне раздела лежит в неком диапазоне понятий между «Понятно каждому» и «Совсем непонятно» и возможны разные положения внутри этого диапазона.

Я допускаю, что вариант «Предложения о найме» был выбран в связи с какойто особой внутренней политикой корпорации или традицией информационных бюллетеней, в то время как вариант «Работа» для такой корпорации, как XYZ, просто сочли несолидным. Однако я считаю, что при выборе того или иного варианта из упомянутого мной диапазона следует больше стремиться к «Понятно каждому».

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

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

ПОНЯТНО ТРЕБУЕТ РАЗМЫШЛЕНИЯ

Возможно, вы скажете: «Ну, ведь нетрудно разобраться, можно ли по чемуто щелкнуть или нет. Если навести курсор на то, по чему щелкнуть можно, он превратится из стрелки в руку. Что здесь сложного?».

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

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

Приведем еще пример. На большинстве книжных интернетмагазинов перед началом поиска какойто книги мне нужно разобраться, каким образом я хочу искать. БОЛьШИНсТвО КНИжНЫх ИНТЕРНЕТ-МАгАЗИНОв Конечно, весь этот «внутренний монолог» происходит за доли секунды, но, как вы сами видите, это довольно утомительный процесс. Даже вполне безобидное Еще два года назад ничего не изменилось, я проверял. Большая их часть улучшилась только к 2005 г.

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

на первый взгляд изменение известного понятия или имени (как, например, «Быстрый поиск» вместо «Поиск») может вызвать у пользователя вопрос.

Если для сравнения посмотреть на Amazon.com, то мы увидим, что разделение «АвторНазваниеКлючевое слово» там даже не упоминается. Вы просто набираете то, что ищете, и поиск начинается.

AMAZON.COM В конце концов, почему я должен размышлять о том, как именно я хочу искать.

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

› Откуда следует начинать?

› Где находится…?

› Что самое главное на этой странице?

› Почему это называется т­ак?

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

вы не­ смо­же­те­ сде­ла­ть все­ са­мо­о­че­видным Ваша цель – каждую страницу сделать «самоочевидной», чтобы при первом взгляде средний пользователь1 мог понять, что это и как этим пользоваться.

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

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

По­че­му это­ та­к ва­жно­?

Это может показаться странным, но вовсе не потому, что:

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

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

Средний Пользователь содержится в специальной герметичной камере в Международном бюро стандартов в Женеве. Позже мы еще вернемся к рассмотрению понятия «средний пользователь».

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

Кроме того, нельзя забывать про известный феномен «Я жду этот автобус уже 10 минут, поэтому не страшно, если я подожду его еще немного». Ну и, наконец, можно спросить: «А кто сказал, что следующий щелчок мыши тоже не разочарует пользователя?».

Ита­к?

Ясность и простота для вебстраницы – как хорошее освещение для витрины магазина: при них все кажет­ся лучше. Легко использовать сайт, который не принуждает задумываться о несущественном. Ненужные раздумья отнимают у нас силы, интерес и, конечно, время.

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

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

гла­в­а­ в де­й­ствите­льно­сти испо­льз­уе­м Инте­рне­т ПрОсма­трив­а­ем, Прикидыв­а­ем и «дела­ем ка­к ПОлу­чится»

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

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

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

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

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

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

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

Фа­кт №1:

Мы не­ чита­е­м ве­б-стра­ницы.

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

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

Почему же мы именно просматриваем, а не читаем?

См. заметку Якоба Нильсена «How Users Read on the Web» (Как пользователи читают в Интернете), октябрь 1997 г. (www.usei­t.com), а также «Вебдизайн: книга Якоба Нильсена». – Пер. с англ. – СПб: СимволПлюс, 2000.

Как мы в дей­ствительности использу­ем Интернет › Обычно­ мы спеши­м. В большинстве случаев при использовании Интернета мы стремимся сэкономить время. В результате вебпользователи склонны действовать, как акулы, которые стараются сохранить движение, потому что иначе могут погибнуть. Другими словами, у нас просто нет времени на чтение того, что нам не нужно.

› Мы счи­таем, что­ нам не нужно­ чи­тать­ в­се по­дряд. Чаще всего нас интересует только часть того, что находится на странице. Мы ищем только то, что соответствует нашим интересам или задаче, которую мы решаем, а все остальное стараемся игнорировать. Именно в процессе просматривания мы находим то, что нам нужно.

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

Хочется вспомнить известный юмористический рисунок Гарри Ларсона о разнице между тем, что мы говорим собакам, и тем, как они это воспринимают. На рисунке изображена собака по имени Джинджер, которая со всем возможным вниманием слушает своего хозяина, внушающего ей, что подходить к мусору нельзя. Но все, что собака на самом деле слышит, – это только «бубубубуДжинджер, бубубуДжинджер, бубубубуДжинджер».

Мы всегда видим только какуюто часть страницы в зависимости от того, о чем мы в данный момент думаем.

ЧТО ДИЗАйНЕРЫ РАЗРАБАТЫвАюТ… И ЧТО ПОЛьЗОвАТЕЛИ вИДЯТ… Мы, как и Джинджер, склонны сосредотачиваться на словах и фразах, подходящих а) под нашу задачу или б) под наши текущие или возможные интересы.

И конечно, в) нельзя забывать о таких сильных раздражителях нашей нервной системы, как «Бесплатно», «Распродажа», «Секс» и наше собственное имя.

Фа­кт №2:

На­ш выбо­р не­ все­гда­ о­птима­ле­н, но­ мы до­во­льствуе­мся те­м, что­ е­сть При разработке вебстраниц мы исходим из того, что пользователи просмотрят страницу, оценят все возможные опции и выберут наиболее подходящую.

В действительности чаще всего мы выбираем не оптимальный вариант, а тот, который первым показался нам подходящим. Такая стратегия еще известна под названием «satisficing».1 Как только мы наталкиваемся на ссылку, которая, на наш взгляд, может привести нас к тому, что мы ищем, то, вероятнее всего, мы щелкаем по ней.

Я наблюдал такой тип поведения в течение многих лет, но его значение окончательно стало для меня ясным только после прочтения книги Гэри Клейна (Gary Klein) «Sources of Power: How People Make Decisions» (Источник силы: как люди принимают решения), MIT Press, 1998. В течение 15 лет Клейн изучал, каким образом люди разных профессий, в том числе пожарные, летчики, шахматисты, операторы атомных электростанций, принимают важные решения в условиях ограниченного времени, неясных целей, недостатка информации и изменяющихся ситуаций.

Группа исследователей под руководством Клейна в своих первых наблюдениях (на примере полевых командиров, находившихся в боевых условиях) использовали общепринятую модель рационального принятия решений, суть которой заключается в следующем: сталкиваясь с некой проблемой, человек начинает собирать информацию, определяет возможные решения и затем выбирает из них то, которое считает наиболее подходящим. Исследователи исходили из консервативного предположения, что в условиях высокой ответственности за принятие решения и чрезвычайной ограниченности времени командир сможет сравнивать только два какихто возможных варианта действий. Но, как выяснилось, командиры вообще не сравнивали никаких вариантов. Они просто брали перТермин satisficing – синтез английских слов satisfying (удовлетворительный) и sufficing (достаточный) – впервые введен экономистом Гербертом Симоном в книге «Models of Man: Social and Rational» (Социальные и рациональные модели человека), Wiley, 1957.

Как мы в дей­ствительности использу­ем Интернет вый разумный план, который приходил им в голову, и мысленно быстро давали ему оценку. Если они не находили в своем плане каких-либо ошибок, то начинали его реализовывать.

Итак, почему же вебпользователи не стремятся найти наилучший вариант?

› Обычно­ у нас мало­ в­ремени­. Как отмечает Клейн: «Оптимизирование – достаточно трудный процесс, требующий много времени. Тогда как прикидывание оказывается более эффективным способом».

› Если­ в­ыбо­р о­казался неудачным, то­ это­ легко­ и­справ­и­ть­. В отличие от тушения пожара, неправильный выбор при использовании вебсайта приводит всего лишь к тому, что нужно один или два раза нажать кнопку «Назад».

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

› Тщатель­но­е в­зв­еши­в­ани­е в­сех в­о­змо­жных в­ари­анто­в­ не в­сегда при­в­о­ди­т к по­ло­жи­тель­ным резуль­татам. В случаях, когда сайты разработаны плохо, стратегия поиска наилучшего варианта не является эффективной, и обычно лучше делать выбор наугад, а затем нажать на кнопку «Назад», если результат оказался неудовлетворительным.

› Угадыв­ать­ и­нтереснее. Это требует меньших усилий, чем предварительный поиск самого лучшего варианта. И если вы угадываете правильно, все происходит быстрее. Кроме того, это создает элемент случайности, который может привести к чему-нибудь неожиданному и хорошему.

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

Фа­кт №3:

Мы не­ з­а­думыва­е­мся на­д те­м, ка­к «о­но­»

ра­бо­та­е­т. Мы про­сто­ де­ла­е­м «ка­к по­лучится»

Любые тестирования того, как «оно» используется – будь это сайт, программное обеспечение или бытовая электротехника, – выявляют, что очень часто люди исГлава пользуют «чтото», совершенно не имея представления (или имея неверные представления) о том, как это «чтото» работает.

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

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

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

ЕЩЕ ОДНУ ЗАгАДКУ

Мой любимый пример – обращение к поТом, как тебе исковой системе Yahoo. Я десятки раз удалось вспомнить, Ваше Величество!

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

Если вы спросите этих людей, почему они так поступают, то вам станет ясно, Как мы в дей­ствительности использу­ем Интернет что некоторые из них думают, что Yahoo и есть Интернет и именно таким образом к нему надо обращаться. Подход «как получится» характерен не только для начинающих пользователей.

Даже вполне опытные пользователи часто имеют поразительные пробелы в своем понимании того, как Интернет работает. (Не удивлюсь, если узнаю, что даже Билл Гейтс пользуется какимито технологиями «как получится»).

Почему так происходит?

› Для нас не в­ажно­, каки­м о­бразо­м что­то­ рабо­тает. Если мы можем чтото использовать, то для большинства из нас не имеет значения, понимаем ли мы, как это работает. Это происходит не от недостатка интеллекта – по большому счету, нас это просто не интересует. › Если­ что­то­ о­днажды срабо­тало­, мы стараемся это­ и­спо­ль­зо­в­ать­ по­сто­янно­.

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

Другой аналогичный случай: многие пользователи системы AOL почемуто уверены, что AOL и есть Интернет. Остается только порадоваться за Yahoo и AOL.

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

Всегда интересно наблюдать за реакцией вебдизайнеров и разработчиков во время тестирования их проекта. Они страшно удивляются, когда замечают, что пользователь щелкает не по тому, по чему он «должен» щелкать. Например, пользователь «не замечает» красивую и большую кнопку «Программное обеспечение», бормоча про себя: «Я ищу программное обеспечение. Нажмука я на кнопку „Уцененное“, поскольку это дешево и как раз то, что мне нужно».

Пользователь, может быть, и найдет то, что ищет, но обретя, он уже не будет знать, радоваться находке или нет.

Когда во второй раз пользователь поступает так же, вебразработчики восклицают: «Надо всего лишь нажать кнопку „Программное обеспечение“!». В третий раз вы видите, как они начинают задумываться: «А зачем мы вообще старались?..».

Здесь может возникнуть следующий вопрос: «Раз пользователи, действуя „как получится“, все равно достигают того, что им нужно, то имеет ли смысл стремиться к „самоочевидности“?». Мой ответ – да, имеет, поскольку «метод тыка»

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

Если же структура сайта понятна пользователю, то:

› возрастает вероятность того, что пользователь найдет то, что ему нужно, а это выгодно как для него, так и для вас;

› возрастает вероятность того, что пользователь сможет охватить весь диапазон возможностей сайта, а не только тех его частей, на которые он случайно наткнулся;

› возрастает вероятность того, что пользователь направится именно на те разделы сайта, на которые вы хотите;

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

Как мы в дей­ствительности использу­ем Интернет Если жиз­нь пре­по­дно­сит ва­м лимо­н… Теперь, получив нерадостное представление, что такое вебаудитория и как она использует Интернет, вы, возможно, думаете: «А почему бы мне просто не найти место уборщика в ближайшем магазине? Может­, хотя бы там мою работу оценят по достоинству?..».

Так что же делать?

Думаю, ответ прост. Если аудитория склонна воспринимать ваш труд как рекламный щит, делайте хорошие щиты.

гла­в­а­ На­ча­льный­ курс по­ со­з­да­нию ре­кла­мных щито­в ра­зра­бОтка­ в­ебстра­Ниц для ПрОсмОтра­, а­ Не для чтеНия сли пользователи Интернета проходят мимо вашего сайта, сделайте пять важных шагов, чтобы добиться его лучшего понимания:

› Создайте ясную визуальную иерархию на каждой странице › Используйте обычаи и условности › Разбейте страницы на четко разделенные области › Покажите ясно то, по чему можно щелкать мышью › Уменьшите визуальный шум со­з­да­й­те­ ясную виз­уа­льную ие­ра­рхию на­ ка­ждо­й­ стра­нице­ Лучший способ сделать страницу простой для быстрого схватывания – это организовать внешний вид элементов страницы (визуальных подсказок) таким образом, чтобы они ясно и четко показывали от­ношения между этими элементами – какие элементы связаны между собой, какие являются частями других элементов. Другими словами, каждая страница должна иметь ясную визуальную иерархию своих элементов.

Страницы с ясной визуальной иерархией обладают тремя чертами:

› Чем бо­лее в­ажен элемент, тем бо­лее о­н замеэле­ме­нт тен на страни­це. Например, важные заголовки делаются либо крупнее, либо жирнее, либо выделяются цветом, либо отделяются боль- Не­ско­лько­ ме­не­е­ ва­жный­ шим пустым пространством, либо размещаются ближе к верхней части страницы, либо На­име­не­е­ ва­жный­ используется целая комбинация этих способов.

› Элементы, ло­ги­чески­ св­язанные между со­- Книги бо­й, до­лжны быть­ св­язаны и­ в­и­зуаль­но­. Му­з­ыка­ кието элементы равнозначны, сгруппиро- Пу­теш­ествия вав их под одним заголовком, либо приме- Увлечения нив к ним одинаковый стиль, либо помесЖиво­тные тив их в одну четко отделенную область страницы.

› Элементы представ­ляются в­ в­и­де в­ло­жени­й, если­ яв­ляются частями­ друг друга. книги по­ про­гра­ммиро­ва­нию программированию» будет находиться над стью данного раздела). Под заголовком этой книги, в свою очередь, будет включено ее описание.

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

Мы каждый день сталкиваемся с визуальными иерархиями – будь это на бумаге или в Интернете. Но обычно они воспринимаются так быстро, что мы даже не успеваем это осознать и начинаем смутно догадываться об их существовании, только когда нам не удает­ся провести их быстрый анализ, т. е. когда визуальные подсказки (или их отсутствие) вынуждают нас задумываться.

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

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

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

Одолевать страницу даже со слегка нарушенКОМПьюТЕРНЫЕ ной визуальной иерархией – например под заКНИгИ головком располагаются элементы, которые к ему не относятся, – так же неудобно, как чиМу­з­ыка­ тать небрежно построенное предложение (Билл на минуту выпустил котенка на стол потому, что тот немного шатался).

Хотя мы обычно и можем понять смысл пред- Живо­тные ложения, но, пусть и на мгновение, нам нужно задуматься там, где мы не должны задумывать- Эта­ на­ру­ш­енна­я виз­у­а­льна­я ся вообще.

Обыча­и и усло­вно­сти – ва­ши друз­ья Когдато, еще в юности, каждый из нас учился читать газету, читать отнюдь не слова, а те условности, которые в газетах используются.

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

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

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

Все обычаи возникают из чьихто оригинальных идей. Если идея работает хорошо, то другие сайты перенимают ее, и в конце концов она начинает встречаться так часто, что даже не требует каких-либо объяснений. Конечно, этот процесс распространения занимает некоторое время, но в Интернете он, так же как и все другое в Сети, происходит очень быстро. Например, сегодня все знакомы с метафорической тележкой для товаров, которая используется в интернет-магазинах, так что разработчикам даже нет необходимости делать к ней подпись «тележка для покупок».

Взять хотя бы маленькие полупрозрачные логотипы телекомпаний, которые несколько лет назад появились в углу телеэкрана. Сейчас такие значки используются везде, однако телевидение существовало еще за 50 лет до их появления.

Начальный­ ку­рс по созданию рекламных щитов Следует знать две важных вещи о вебусловностях:

› Они­ о­чень­ по­лезны. Как правило, условности становятся общепринятыми, только если они работают. Когда они правильно и к месту применяются, то помогают пользователям легко переходить от одного сайта к другому, не задумываясь о том, как все работает.

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

› Ди­зайнеры зачастую с нео­хо­то­й при­меняют усло­в­но­сти­. Вместо того чтобы использовать их, дизайнеры часто стремятся выдумать колесо заново.

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

Если вы не хотите использовать некую общепринятую вебусловность, то убедитесь сначала, что то, чем вы собираетесь ее заменить, либо являB.C., 30,599 B.C., 28,714 B.C., 28,001 B.C., ется достаточно ясным, понятным 19,711 B.C., 18,224 B.C., 15,690 B.C., 15,689 B.C., и не требующим усилий для изуче- 15,675 B.C., 15,674 B.C.

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

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

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

Ра­з­бе­й­те­ стра­ницы на­ че­тко­ ра­з­де­ле­нные­ о­бла­сти В идеале вебстраницы должны быть построены таким образом, чтобы их можно было использовать, как в известном игровом шоу Дика Кларка «Пирамида в $ 25000».1 Взглянув на страницу, пользователь должен сразу видеть: «вот здесь то, что можно делать на этом сайте», «вот здесь ссылки на сегодняшние самые интересные истории», «вот здесь список того, что продается», «вот здесь самые популярные товары», «а вот здесь переходы к другим разделам сайта».

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

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

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

Например, на странице кандидата в президенты 2000 года сенатора Оррина Хэтча1 было совершенно неясно, по каждому ли месту можно было щелкнуть или везде нельзя. На этой странице было 18 ссылок, и только две из них имели вид, предполагающий такую возможность: большая кнопка с надписью «Click here to CONTRIBUTE!» (Нажмите сюда, чтобы поддержать!) и ссылка с подчеркнутым текстом «FULL STORY» (Показать полностью).

Остальные ссылки были выделены только цветом, но весь текст на странице тоже был цветным, и визуально отличить их от простого текста было невозможно.

Конечно, такая ошибка не является катастрофической, и я уверен, что большинство пользователей быстро разобрались, www.orrinhtach.com что к чему, и стали просто пробовать щелкать мышью.

Оррин Хэтч заслуживает упоминания в сноске, поскольку он был, насколько я помню, первым кандидатом, который в ходе президентской компании 2000 года уделил внимание вопросу вебюзабилити. В первых телевизионных дебатах кандидатов от республиканской партии он сказал Джорджу Бушу младшему: «Должен отметить, господин губернатор, что в отличие от вашего [вебсайта], на моем найти все легко.

[Смеется.] А вот вашим [сайтом] пользоваться довольно трудно – он, как это говорится, недружественен к пользователю (not user-friendly).» (Сайтом Хэтча было действительно удобнее пользоваться.) Однако когда вы заставляете пользователей раздумывать о чемто, что вообще не должно вызывать никаких вопросов, в частности о том, где же можно щелкать, вы расточаете тот запас терпения и благоприятного расположения, который имеет каждый пользователь при знакомстве с новым сайтом.

Приведу еще один хороший пример. Каждый раз, когда я пользуюсь окном поиска на сайте d­rkoop.com (сайт доктора К. Эверет Куп, посвященный вопросам здоровья), меня одолевают размышления.

Кнопка поиска совсем не похожа на кнопку, даже несмотря на то, что в ее оформлении использованы два сильных визуальных ключа: расположение и название. Рядом с окном находится слово «SEARCH» (ПОИСК), которое является одним из двух вариантов идеального названия для кнопки поиска. Более того, тут же расположена небольшая треугольная стрелка, известная как условный указатель «Нажать здесь». Однако стрелка направлена в сторону от текста, как будто она показывает кудато еще, хотя ее условное использование требует, чтобы она была направлена к тексту, по которому надо щелкать мышью.

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

Уме­ньшите­ виз­уа­льный­ шум Визуальный шум является одним из основных препятствий для получения легко воспринимаемых вебстраниц. Можно выделить два типа визуального шума:

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

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

Второй вариант – это слово «Go» (Идти), но оно используется только в сочетании со словом «Search» (Поиск) в качестве заголовка для окна поиска.

Начальный­ ку­рс по созданию рекламных щитов › Фо­но­в­ый шум. Некоторые страницы напоминают обстановку какойто вечеринки – нет громкого источника, отвлекающего внимание, но есть множество элементов визуального шума, которые в совокупности вызывают ощутимое раздражение.

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

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

гла­в­а­ живо­тно­е­, ра­сте­ние­ или ка­ме­нь?

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

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

Вообще говоря, я думаю, что пользователь не задумывается о количестве щелчков мышью до тех пор, пока каждый клик проходит легко, а он сам сохраняет уверенность, что движется в верном направлении, следуя за тем, что Джаред Спул (Jared Spool) называет «запахом информации». Общим правилом, наверное, здесь может стать следующее утверждение: «Один клик, требующий от пользователя размышлений, равен трем простым кликам, которые можно сделать не задумываясь». Все это – часть более широкой дискуссии относительно достоинств и недостатков горизонтального и вертикального типов иерархии сайтов. Горизонтальный тип предполагает большее количество категорий на каждом уровне сайта, но имеет меньшее число уровней, поэтому для достижения нижних уровней нужно сделать меньшее количество кликов. Тогда как вертикальный тип подразумевает большее число уровней (а значит, и кликов для перемещения), но с меньшим числом категорий на каждом уровне.

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

Классический первый вопрос в игре «12 вопросов» – «животное, растение или камень?» – это как раз хороший пример возможности выбирать не задумываясь.

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

Например, если я зайду на страницу Virus Updates на сайте Symantec для обновления программы Norton AntiVirus, мне следует выбрать значения для двух опций.

Выбрать значение для одной из них – Languaage (Язык) – относительно просто, и мне нужно лишь немного задуматься, чтобы понять, что «English, US» означает «United States English», который отличается от «English, UK».

Хотя, если я открою меню, то станет видно, что я уже начинаю в нем «вязнуть», поскольку в списке вообще нет такого варианта, как «English, UK».

Кроме того, «Espanol (English, Int’l)» также заставит меня задуматься, но я просто не стану переживать по этому поводу.

Опция «Product» (Продукт) немного сложнее.

Здесь проблема состоит в том, что вариант «NAV для Windows 95/98» не вполне ясен. Я, конечно, понимаю, что каждый, кто работает на Symantec, прекрасно знает, что аббревиатура NAV и название Norton AntiVirus – это одно и то же, но все же это требует некоторого момента доверия с моей стороны. Кроме того, хотя я и знаю наверняка, что использую Windows 98, в моей голове все же возникает маленький вопрос: это то же самое, что и Windows 95/98? Или Windows 95/98 – это нечто другое, что мне неизвестно?

Для тех, кто забыл, что это за игра, скажу, что есть отличная версия, с которой можно сразиться в Интернете (http://www.20q.n­et). Она создана Робертом Берджнером, в ней задействован алгоритм нейронной сети, и она здорово играет. Сейчас они сделали игру еще бессмысленнее, добавив к вариантам приемлемых ответов на первый вопрос Other и Unknown.

Животное, растение или камень?

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

Како­й же в­ари­ант мне в­ыбрать­? Те же чувства я испытываю, если передо мной два почтовых ящика, на одном из которых надпись «Только конверты с маркой», на другом – «Только маркированные конверты», а у меня в руках всего лишь почтовая открытка. В какой ящик мне нужно бросать свою открытку?

И что будет, если я выберу неправильный ящик?

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

гла­в­а­ Опустите­ лишние­ сло­ва­ иску­сств­О Не Писа­ть з пяти или шести вещей, которые мне довелось узнать в школе, одна мне запомнилась больше других и оказалась самой полезной. Это семнадцатое правило из «Основы стиля» Э. Б. Уайта:

17. Опусти­те ли­шни­е сло­в­а.

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

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

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

Удаление всех тех слов, которые все равно никто не будет читать, имеет несколько полезных следствий:

› Это снижает уровень шума на страницах.

› Это выделяет то содержание страниц, которое действительно является ценным и полезным.

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

William Strunk, Jr., and E. B. White, «The Elements of Style», Allyn and Bacon, 1979.

Конечно, речь не идет о том, чтобы сделать статьи на сайте Salon.com короче. Дело прежде всего в том, что есть два особых вида текстов: «общая болтология»

и «инструкции».

Ника­ко­й­ «о­бще­й­ бо­лто­ло­гии»

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

Чтобы быть уверенным, что какой-то текст является «общей болтологией», вы можете воспользоваться одним надежным правилом: если во время его чтения вы внимательно прислушаетесь к себе, то услышите внутренний голос, произносящий нечто вроде: «Угу, угу, угу, угу, угу…».

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

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

«Общая болтология» напоминает простой светский разговор – так же бессодержательна и существует только ради разговора самого по себе. Но у большинства веб-пользователей нет времени на такие разговоры – они хотят сразу приступить к сути. Поэтому следует устранить как можно больше «общей болтологии».

Опу­стите лиш­ние слова Ника­ких «инструкций­»

Другим большим источником ненужных слов являются «инструкции». Главное, что следует знать об «инструкциях», – это то, что их никто не собирается читать, по крайней мере до тех пор, пока несколько попыток использовать сайт «как получится» в конце концов не увенчаются успехом. Но если инструкции слишком длинные, то даже в случае неудачи редкие пользователи начинают искать в них нужную информацию.

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

Например, если щелкнуть по разделу «Site Survey» (Обзор сайта) на www.veri­zon­.com, то вы получите экран, полный «инструкций».

www.verizon.com На мой взгляд, здесь нужны весьма жесткие сокращения, чтобы сделать эти инструкции более полезными:

ДО: 92 сЛОвА Нижеследующая анкета разработана для того, чтобы собрать информацию, которая поможет нам улучшить этот сайт в соответствии с вашими потребнотя бы по­нима­ют, что­ с мо­ей­ сто­ро­ны з­а­по­лнение стями.

Пожалуйста, выберите нужные ответы с помощью выпадающего меню и перез­на­ет, что­ та­ко­е «выпа­да­ющее меню» и «пере ключателей.

Заполнение анкеты займет не более 2–3 минут.

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

ния опроса по поводу улучшения нашего сайта.

Если же у вас есть какие-либо комменвет, то­ мне не ну­жно­ з­а­по­лнять эту­ а­нкету­, – тарии или вопросы, на которые вы хотео­чень ва­жна­я инфо­рма­ция. Но­, к со­жа­лению, ли бы получить ответ, то, пожалуйста, сначала свяжитесь с отделом по работе с клиентами».

ПОсЛЕ: 46 сЛОв Пожалуйста, ответьте на вопросы анкеты, чтобы помочь нам улучшить этот сайт.

Это займет не более 2–3 минут.

ПРИМЕЧАНИЕ: Если у вас есть какие-либо комментарии или вопросы, на которые вы хотели бы получить ответы, то не заполняйте эту анкету. Свяжитесь, пожалуйста, с отделом по работе с клиентами.

Опу­стите лиш­ние слова Иде­м да­льше­… В этих первых главах я попытался рассказать об основных принципах, которые, на мой взгляд, следует учитывать при создании сайтов.

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

Эти главы будут довольно длинными. Поэтому возьмите с собой завтрак.

гла­в­а­ До­ро­жные­ з­на­ки и «хле­бные­ кро­шки»

ра­зра­бОтка­ На­в­ига­ции Люди не ст­анут­ пользоват­ься вашим сайт­ом, если им не будет­ понят­но, как по нему перемещат­ься.

Вы сами знаете это из собственного опыта в качестве пользователя Интернета.

Если вы попадаете на сайт, на котором не можете найти то, что ищете, или структура которого вам непонятна, то вы не станете пользоваться им долго и, скорее всего, больше на него не зайдете. Каким же образом можно создать ту пресловутую «ясную, простую и последовательную» навигацию?

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

Уже на входе вы задумываетесь: «Где же у них здесь пилы?». Зайдя в магазин, вы начинаете просматривать названия отделов – они написаны крупными буквами и вывешены на стене так, что вы можете видеть их с любого места.

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

Придя туда, вы смотрите на таблички в конце каждого товарного ряда.

ШЛИФОвАЛьНОЭЛЕКТРОИНсТРУМЕНТ РУЧНОй ИНсТРУМЕНТ ПОЛИРОвАЛьНЫЕ

Выбрав нужный ряд, вы начинаете смотреть на выставленные в нем товары.

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

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

Дорожные знаки и «хлебные крош­ки»

С учетом этого решения вся схема будет выглядеть таким образом:

Вы у­верены, что­ на­хо­дитесь в ну­жно­м о­тделе?

НЕТ ЕЩЕ

Обратите внимание, что даже если вы отправитесь на самостоятельные поиски нужного вам товара, то в случае неудачи вам, возможно, все же придется прибегнуть к помощи персонала.

На­ча­льный­ курс по­ ве­б-на­вига­ции Посещение магазина во многих отношениях напоминает посещение вебсайта.

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

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

S. Z. «Cuddles» Sakall (Eugene Sakall) род. в 1884 в Будапеште. По иронии судьбы большинство характерных актеров, игравших завсегдатаев кафе «У Рика», ненавидевших нацистов, были известными актерами европейской сцены и кино, которые бежали от нацистского режима и впоследствии оказались в Голливуде.

search-dominant – см. «Search and You May Find» (Ищите и вы, возможно, найдете) в архиве статей Нильсена по адресу www.usei­t.com, а также «Вебдизайн: книга Якоба Нильсена». – Пер. с англ. – СПб: СимволПлюс, 2000.

Дорожные знаки и «хлебные крош­ки»

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

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

› Если­ в­ы в­ыби­раете само­сто­ятель­ный по­и­ск, то­ перемещаетесь­ по­ и­ерархи­и­ сайта, по­ль­зуясь­ нав­и­гаци­о­нными­ указателями­. Другими словами, вы оглядываете начальную страницу сайта, находите список основных разделов (по аналогии с указателями отделов в магазине) и щелкаете по тому, который кажется вам наиболее подходящим.

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

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

Затем вы можете щелкнуть по ссылкам на отдельные товары, чтобы рассмотреть их подробно, в точности так, как если бы вы брали эти товары с торговых полок и читали их ярлыки.

› Если­ в­ы не нашли­ то­, что­ и­скали­, в­ы ухо­ди­те. Это так же справедливо для Интернета, как и для магазина. Если вы убедились, что того, что вам нужно, нет, или слишком устали, чтобы продолжать поиск, вы уходите.

Итак, вся схема процесса выглядит следующим образом:

выбра­ли ну­жный­ ра­з­дел?

НЕТ ЕЩЕ ДА

УХОДИТЕ

Дорожные знаки и «хлебные крош­ки»

Не­выно­сима­я ле­гко­сть се­рфинга­ Способ, каким вы ищете чтото на сайте, во многом напоминает то, как вы это делаете в реальном мире. Когда вы перемещаетесь по Интернету, возникает ощущение, что вы и вправду перемещаетесь как бы в физическом пространстве. Даже слова, которые мы используем для описания процесса перемещения, относятся к пространству (обход, осмотр, серфинг). А щелчком мыши по ссылке вы не просто «загружаете» или «отображаете» страницу, а «переходите» к ней.

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

› Нет о­щущени­я масштаба. Даже если мы уже хорошо знакомы с какимто сайтом – исключение составляют только совсем небольшие, – нам трудно определить его объем (50?, 1000?, 17000 страниц?).1 Мы знаем, что на сайте могут быть еще неисследованные нами уголки, объем которых может оказаться довольно большим. Если же речь идет о журнале, музее, отделе магазина, вы всегда имеете хотя бы приблизительное представление о доли уже увиденного и еще не увиденного вами.

Таким образом, не всегда легко определить, все ли вы видели на сайте из того, что вас интересует, и, следовательно, трудно оценить, когда можно закончить его просмотр. › Нет о­щущени­я направ­лени­я. В целом, на сайте нет понятий влево и вправо или верх и низ. Можно только говорить о движении «вверх или вниз» относительно структурной иерархии – в направлении к более общим или более конкретным его уровням.

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

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

в дальнем углу, рядом с холодильниками.

Даже те, кто администрирует веб-сайты, нередко имеют весьма отдаленное представление об их истинных размерах.

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

И направимся прямо к ним.

Но в Интернете ваша нога никогда не касается земли, и вы можете перемещаться, только щелкая мышью по ссылкам. Щелкнув по надписи «Электроинструмент», вы сразу телепортируетесь в товарный ряд с электрическими инструментами, без прохождения какоголибо расстояния и не встречая какихлибо других товаров во время перемещения.

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

Именно по этой причине закладки, или сохраняемые персональные интернетярлыки, имеют такое большое значение, и именно поэтому по кнопке «Назад» делается от 30 до 40 процентов всех кликов в Интернете. Это также объясняет, почему концепция начальной страницы сайта настолько важна. Начальная страница – это сравнительно фиксированная позиция.

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

Отсутствие реальных физических ориентиров имеет как положительные, так и отрицательные стороны. Ощущение «невесомости» – когда нет понятий влево, вправо, верх, низ – довольно увлекательно и отчасти объясняет, почему в Интернете так легко потерять счет времени, подобно тому, как мы уходим с головой в хорошую книгу. 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 Международной конференции по проблемам WWW, Дармштадт, Германия, 1995 г.).

Это еще одна причина того, почему так раздражают медленно загружающиеся страницы: какое удовольствие можно получить от «полета» со скоростью пара миль в час?

Дорожные знаки и «хлебные крош­ки»

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

Мне кажется, что мы используем это слово по отношению к Интернету, потому что «определение собственного местонахождения» – это довольно серьезная проблема, которую в Интернете решить труднее, чем в физическом пространстве.

По сути дела, оказавшись в Интернете, мы «теряемся» в нем, и у нас нет возможности заглянуть через «товарные ряды», чтобы узнать, где же мы находимся.

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

Навигация – это не какаянибудь «примочка» для вебсайта, это и есть сам сайт, аналогично тому, как здание, торговые полки и кассы – эт­о магазин. Без эт­ого вебпространство не возникает.

Вывод? Вебнавигация должна быть хорошей.

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

Третье назначение мы обсудили только что:

› Нав­и­гаци­я дает по­чв­у для но­г. Заблудиться гделибо – это, как правило, не очень весело. (Что бы вам больше понравилось: «потерять свою дорогу» или «знать куда идти»?) Если навигация разработана правильно, то она дает почву (пусть и виртуальную) для ног пользователя, а также служит в качестве перил, на которые можно опереться.

Навигация также имеет и другие не менее важные функции, которые, однако, часто забываются.

› Нав­и­гаци­я по­мо­гает по­нять­, что­ здесь­ нахо­ди­тся. Будучи визуальным образом иерархии, навигация позволяет разобраться в содержании сайта. Другими словами, навигация помогает обнаружить содержание! И эта функция навигации даже более важна, чем функция направления или определения местонахождения.

› Нав­и­гаци­я по­мо­гает по­нять­, как по­ль­зо­в­ать­ся сайто­м. Если навигация разработана правильно, то она самым явным образом показывает пользователю, откуда следует начинать и какие он имеет возможности. Хорошая навигация должна заменить собой все «инструкции» вместе взятые (тем более что большинство пользователей все равно проигнорирует эти «инструкции»).

› От нав­и­гаци­и­ зав­и­си­т степень­ до­в­ери­я по­ль­зо­в­ателей к разрабо­тчи­кам сайта. Когда мы находимся на какомто сайте, мы постоянно про себя оцениваем работу дизайнеров: «Эти ребята действительно хорошо все сделали?».

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

Усло­вно­сти, приме­няе­мые­ для на­вига­ции Физические пространства в виде городов или зданий (и даже информационные пространства в виде, например, книг и журналов) снабжены своими навигационными системами, в которых со временем появлялись свои условности в виде дорожных указателей, номеров страниц или заголовков. Условности в той или иной степени определяют внешний вид и расположение навигационных элементов, чтобы при необходимости нам было легко их находить и использовать.

Размещение этих элементов в стандартных местах позволяет быстро и без усилий определять их положение, а унифицированный вид дает возможность быстро различить их на странице.

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

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

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

Представьте, как это раздражает, когда такие условности нарушаются (когда, например, на рекламных страницах журналов не указываются их номера).

В Интернете тоже быстро появились свои обычаи и условности для навигации;

они в основном аналогичны тем, которые применяются в печатной продукции.

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

На­з­ва­ние­ На­з­ва­ние­ стра­ницы Ло­ка­льна­я на­вига­ция (Ссылки о­дно­го­ Уме­ньше­нна­я те­ксто­ва­я се­й­ча­с вро­де­ не­ видно­, но­, по­-мо­е­му, о­но­ пре­сле­дуе­т на­с Вебдизайнеры используют термин пост­оянная навигация (persi­sten­t n­avi­gati­on­), или глобальная навигация (global n­avi­gati­on­), для описания навигационных элементов, которые появляются на каждой странице.

Грамотно разработанная постоянная навигация должна как бы говорить (желательно тихим и успокаивающим тоном):

Навигация всегда с вами. Некот­орые ее элемент­ы будут­ немного изменят­ься в зависимост­и от­ т­ого, где именно вы находит­есь. Но она всегда будет­ здесь и всегда будет­ работ­ат­ь одинаковым образом.

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

Постоянная навигация должна включать в себя пять элементов, которым следует быть под рукой в любой момент:

Ссылка­ на­ на­ча­льну­ю стра­ницу­ Ссылка­ на­ стра­ницу­ по­иска­ На­з­ва­ние Мы рассмотрим каждый элемент подробно через минуту, но сначала… Дорожные знаки и «хлебные крош­ки»

Ра­з­ве­ я ска­з­а­л «на­ ка­ждо­й­ стра­нице­»?

Я ошибся. На самом деле есть два исключения для правила «навигация должна преследовать пользователя везде»:

› Началь­ная страни­ца. Начальная страница отличается от других страниц сайта. Она выполняет особые задачи и несет особую нагрузку. Как мы увидим в следующей главе, иногда имеет смысл не использовать на ней постоянную навигацию.

› Фо­рмы. На страницах, где находятся специальные формы, предназначенные для заполнения, использование постоянной навигации может иногда оказаться излишним и только отвлекать внимание пользователя. Например, при оплате покупок в интернетмагазине от пользователя не требуется ничего кроме заполнения нужных форм. Это относится и к случаям, когда нужно зарегистрироваться, или дать ответ, или выбрать собственные настройки.

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

Те­пе­рь я з­на­ю, что­ мы не­ в Ка­нз­а­се­ Логотип или название сайта выполняет для него ту же роль, что и вывеска на входе в какоелибо учреждение. Когда я иду в магазин, мне достаточно на входе увидеть вывеску, чтобы внутри магазина точно знат­ь, что я нахожусь в нем до тех пор, пока не выйду. Другое дело Интернет: здесь основной способ перемещения – это телепортация, и поэтому мне нужно видеть эту «вывеску» на каждой странице.

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