You are on page 1of 186

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

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

«Джесс Гарретт наконецто расширил свою знаменитую схему
до объема целой книги, которая проясняет довольно запутан
ную тему разработки опыта взаимодействия. А поскольку он
человек весьма умный, то сумел изложить все очень коротко, так
что на каждой странице вы найдете полезные сведения.»
— Стив Круг, автор книги «Вебдизайн: книга Стива Круга
или ìне заставляйте меня думать!î»

Спрашивайте
наши книги

Стив Круг
Вебдизайн или
«не заставляйте
меня думать!»

Êàòåãîðèÿ: âåá-äèçàéí
Óðîâåíü ïîäãîòîâêè ÷èòàòåëåé: ñðåäíèé

www.symbol.ru

Web-Design_Garrett.p65

1

Дмитрий
Кирсанов
Вебдизайн

Якоб
Нильсен
Вебдизайн

ISBN-13: 978-5-93286-108-0
ISBN-10: 5-93286-108-8

ЭЛЕМЕНТЫ ОПЫТА ВЗАИМОДЕЙСТВИЯ

Джесс Гарретт
один из основателей Adaptive Path,
консалтинговой фирмы в СанФран
циско. С момента своего появления
в марте 2000 года схема Гарретта
«Элементы опыта взаимодействия»
(The Elements of User Experience)
была загружена с его сайта более
20 тысяч раз. Гарретт работал над
вебпроектами для таких компаний,
как AT&T, Intel, Boeing, Motorola,
HewlettPackard и National Public Ra
dio. Его вклад в развитие области
опыта взаимодействия состоит,
среди прочего, в разработке Visual
Vocabulary – открытой нотационной
системы, предназначенной для до
кументирования информационной
архитектуры и принятой во многих
организациях по всему миру. Его
сайт www.jjg.net – один из самых
посещаемых вебресурсов по инфор
мационной архитектуре.

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

9 785932 861080

Издательство
«СимволПлюс»
(812) 3245353,
(495) 9458100

31.03.2008, 13:57

По договору между издательством «СимволПлюс» и Интернетмагази
ном «Books.Ru – Книги России» единственный легальный способ полу
чения данного файла с книгой ISBN 5932861088, название «Вебди
зайн: книга Джесса Гарретта. Элементы опыта взаимодействия» – покуп
ка в Интернетмагазине «Books.Ru – Книги России». Если Вы получили
данный файл какимлибо другим образом, Вы нарушили международное
законодательство и законодательство Российской Федерации об охране
авторского права. Вам необходимо удалить данный файл, а также сооб
щить издательству «СимволПлюс» (piracy@symbol.ru), где именно Вы
получили данный файл.

The Elements of
User Experience
User-Centered Design for the Web

Jesse James Garrett

гарретта ОРИЕНТИРОВАННЫЙ НА ПОЛЬЗОВАТЕЛЯ ЭЛЕМЕНТЫ ОПЫТА ВЗАИМОДЕЙСТВИЯ .книга дж.

Галунов Н.03. одновременно удовлетворяя потребности ваших пользователей. Элементы опыта взаимодействия».: СимволПлюс. Копылов В. Все права на данное издание защищены Законодательством РФ. www. информационную архитектуру. включая право на полное или частичное вос­произведение в любой форме. сосредоточиваясь на общих идеях. Объем 12 печ. Орлова Гарретт Дж. упоминаемые в настоящем издании. Даже самый интересный контент и самые передовые технологии не помогут вам сбалансировать эти две задачи без поддержки последовательного и непротиворечивого опыта взаимодейст­вия. являются собственностью соответствующих фирм.2008. ведь приходится учитывать массу вопросов – юзабилити. ISBN-10: 5932861088 ISBN-13: 978-5932861080 По-настоящему эффективный сайт должен служить вашим стратегическим целям. тел. Лицензия ЛП N 000054 от 25. Санкт-Петербург. Все товарные знаки или зарегистрированные товарные знаки. дизайн взаимодействия. 2008 Authorized translation of the English edition. Макарова Д. – СПб. Однако создание опыта взаимодействия кажется невообразимо сложным делом. спроектировать успешный опыт взаимодействия. редакцией Научный редактор Редактор Корректор Верстка А. СанктПетербург. Вебдизайн: книга Джесса Гарретта. Эта вводная информация позволит любой команде веб-разработчиков. с англ. Автор рисует перед читателем полную картину разработки опыта взаимодействия на веб-сайте – от стратегии и требований к контенту до информационной архитектуры и визуального дизайна. Иноземцева Главный редактор Зав. идентичность бренда. Печать офсетная. а не на инструментах и технических приемах. 199034. Inc. (812) 324-5353. 16 линия. Заказ № Отпечатано с готовых диапозитивов в ГУП «Типография «Наука» 199034.symbol.98.. the owner of all rights to publish and sell the same. .ru. Copyright © 2003 Pearson Education. Inc. 2008. независимо от ее размеров.Серия «Библиотека дизайнера» Джесс Гарретт Вебдизайн: книга Джесса Гарретта Элементы опыта взаимодействия Перевод С. Формат 70х90 1/16. 12. Подписано в печать 17. ориентированного на пользователя. – 192 с.: ил. Подобед О. Книга Джесса Гарретта раскрывает сложную тему веб-дизайна. 7. при помощи понятных объяснений и четких иллюстраций. This translation is published and sold by permission of Pearson Education. – Пер.12. 9 линия. Тираж 3000 экз. Издательство «Символ-Плюс». ISBN-10: 5932861088 ISBN-13: 978-5932861080 ISBN 0-7357-1202-6 (англ) © Издательство СимволПлюс. л. Макарова А.

которые помогают обнажить проблемы и найти их решения. Он берет эту мощную идею и ясно демонстрирует. как она влияет на проектирование взаимодействия. что опыт вза имодействия потребителя с продуктом следует улучшать.org Книга «The Elements of User Experience» в простой и систе матической форме разъясняет одну из самых значитель ных идей. когда мы пытаемся найти такой подход к решению задач. поскольку сама дисциплина еще очень молода.aiga. как мы ставим эти достиже ния на службу людям. технологии и биз неса: границы возможного определяются не технологичес кими достижениями. Большинству молодых проектиров щиков просто не к кому обратиться за советом в этой облас ти. который бы принимал опыт взаи модействия в расчет.American Institute of Graphic Arts 164 Fifth Avenue New York. Ричард Грефе (Richard Grefe/) исполнительный директор. а тем. Сложности вызывает отнюдь не мысль о том. возникших на стыке дизайна. предлагая набор анали тических схем. AIGA . Затруднения возникают. NY 10010 Tel 212 807 1990 Fax 212 807 1799 www. И здесь на сцену выходит Джесс Джеймс Гарретт.

которым удается раздвинуть го ризонты дизайна и помочь практикующим дизайнерам держаться на переднем крае и находить новые пути к вер шинам мастерства. Среди ее членов есть представители всех дисцип лин. .AIGA (American Institute of Graphic Arts – Американский институт графического искусства) принимает активное участие в издании лучших работ признанных лидеров в об ласти дизайна – авторов. так или иначе касающихся вопросов дизайна. AIGA – крупнейшая и старейшая про фессиональная ассоциация дизайнеров в Соединенных Штатах.

Посвящаю моей жене. с которой становится возможным все. .

. . . 21 Введение в опыт взаимодействия . . . . . . . . . . . . . . . . . . . . . . 44 Уровень стратегии. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 . . . . . . . . . . . . . . . . . 36 Уровень набора возможностей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Опыт взаимодействия: почему он так важен . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Пять уровней . . . 36 Уровень структуры . . . . 22 Опыт взаимодействия в Сети . . . . . . . . . . . 36 Уровень стратегии. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Конкурентная борьба и возврат инвестиций . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Уровень набора возможностей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Оглавление Введение ГЛАВА 1 . . . 37 Принципиальная двойственность . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Уровень структуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Уровень компоновки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Помните о своих пользователях . . 20 Повседневные напасти . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 ГЛАВА 2 Знакомимся с элементами . . . . . . . . . . 37 Построение снизу вверх . . . . . . . . . . . . . . . . . 46 Применение элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Уровень компоновки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Уровень поверхности . 35 Уровень поверхности . . . . . . . . . . . . . . 40 Элементы опыта взаимодействия . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .Оглавление ГЛАВА 3 9 Уровень стратегии Цели сайта и потребности пользователей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Обработка ошибок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Ранжирование требований . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Определение стратегии . . . . 53 Бизнесцели. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Потребности пользователей . . . . . . . . . . . . . . . . . . . . . . . . . . . что вы не создаете . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Определение структуры . . . . 52 Цели сайта . . . . . . . . . . . . . . . . . . . . . . 73 Причина №2: вы будете знать. . . . . . . . . . . . . . . . 58 Юзабилити и исследование пользовательской аудитории . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Что читать дальше . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Сбор требований . . . . . . . . . . 61 Распределение ролей в команде и процесс разработки . . . . . . . . . . . . . . . . . . . . . . 94 Проектирование взаимодействия . . 81 Требования к контенту . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . что именно вы создаете. . . . . . . . . . . . . . . . 72 Причина №1: вы будете знать. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 ГЛАВА 5 Уровень структуры Проектирование взаимодействия и информационная архитектура . . . . . . . . . . . . . . . . . . . . . 87 Что читать дальше? . . . . . . . . . . . . . . . . . . . 70 Определение набора возможностей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Метрики успешности . . . . . . . . . . 95 Концептуальные модели . . . . . . . . . 100 . . . . . . . . . . . . . . . . . . . . 78 Функциональные спецификации . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Идентичность бренда . . . . . . 74 Функциональность и контент . 57 Сегментация пользовательской аудитории. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 ГЛАВА 4 Уровень набора возможностей Функциональные спецификации и требования к контенту . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Пример: реализация механизма поиска . . . . . . . . . . . . . . . . . . . . . .Оглавление 10 Информационная архитектура . . . . . . . . . . . . . . . . . . . . 108 Язык и метаданные. . . . . . . . . . . . . . . . . . . . дизайн навигации и информационный дизайн . . . . . . . 102 Архитектурные решения . . . . . . . . . . . . 105 Организационные принципы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Определение компоновки . . 155 Макеты и руководства по стилю . . . . . 146 Следуйте за взглядом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Внутренняя и внешняя согласованность . . . . . . . . . . . 117 ГЛАВА 6 Уровень компоновки Дизайн интерфейса. . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Соглашения и метафора. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 ГЛАВА 8 Элементы опыта взаимодействия на практике . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Что читать дальше . . . . . . . . . . . . . 125 Дизайн навигации . . . . . . . . . . . . . . . 137 Прототипы страниц . . . . . . . . . . . . . . . . . . . . . 168 Марафон и спринт . . . . . . . . 170 Алфавитный указатель . . . . . . . . . . . . 138 Что читать дальше . . . . . . . . . . . . . . . . . . 130 Информационный дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Ориентирование. . 122 Дизайн интерфейса . . . 142 ГЛАВА 7 Уровень поверхности Визуальный дизайн. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Роли в команде и процесс разработки . . . . . . . . . . . . . . . . . . . . . 113 Что читать дальше . . . . . . . . . . . . . . . . . . . . . . . . . 175 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Контраст и единообразие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Определение поверхности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Как задать правильный вопрос . . . . . . 152 Цветовые палитры и типографика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

jjg.Об авторе Джесс Джеймс Гарретт (Jesse James Garrett) – один из ос нователей Adaptive Path. предназначенной для документирования информацион ной архитектуры и принятой в настоящее время во многих организациях по всему миру. Boeing. С 1995 года Джесс Гарретт работал над веб проектами для таких компаний. а сам Джесс являет ся автором множества статей и выступлений на темы ин формационной архитектуры и опыта взаимодействия. HewlettPackard и National Public Radio. среди прочего.net представляет собой один из самых посещаемых вебресур сов по информационной архитектуре. Его личный сайт www. Его вклад в развитие области опыта взаимодействия состоит. Motorola. Intel. . в разработке Visual Vocabulary (буквально – «визуальный словарь») – открытой нотационной системы. консалтинговой фирмы в Сан Франциско. как AT&T.

По мере написания глав эти увлеченные сво им делом профессионалы просматривали материал на предмет корректности содержания. свя занные с дизайном в Интернете.О научных редакторах 12 О научных редакторах Глубокие экспертные знания и опыт научных редакторов оказали существенное влияние на весь процесс работы над этой книгой. Genentech и др. Wrigley. до крупнейших и известнейших компаний Motorola и DEC. Nike. Два года Дэвид проработал ведущим проекти ровщиком в отделении Alexa Internet Division компании Amazon. Она часто публикует статьи на темы. В вопросах дизайна и разработки . С тех пор она руко водила разработкой архитектуры для более чем 60 сайтов таких компаний. и выступает на междуна родных конференциях. – от мелких предприятий.com. Дэвид оказывал консуль тации многим фирмам. Во многом именно их участие сделало книгу способ ной удовлетворить потребность читателей в высококачест венной технической информации. как Netscape. интерфейса и юзабилити. Дэвид обожает собак. работающим в области высоких тех нологий. Дэвид Хоффер (David Hoffer) имеет обширный опыт в об ласти информационной архитектуры и дизайна интерфей са. таких как NERDS и ActiveBuddy. структуры и изложе ния. Молли Райт Стинсон (Molly Wright Steenson) начала свою деятельность в Интернете в 1994 году. Сейчас он является ведущим проектировщиком поль зовательского интерфейса в отделе маркетинга и связей с клиентами CTB/McGraw Hill. Reuters. До перехода в McGraw Hill Дэвид работал ведущим информационным архитекто ром в Hill and Knowlton Public Relations – одной из круп нейших в США PRкомпаний. где курирует вопросы архи тектуры. Он получил степень бакалавра гуманитар ных наук в области промышленного дизайна в Рочестер ском институте технологии. где создал клиентские интерфейсы для броу зерных продуктов Amazon Alexa. входящей в состав второго в мире по величине глобального рекламного конгломерата WPP Group.

Она работает редактором сайта AIGA Experience Design. французском и голландском. ре дактируя рукопись. 13 . Вопервых. Их советы были исключительно важны для моей работы.com. Майк Кунявски (Mike Kuniavsky). и под влиянием его замечаний книга стала намного лучше. было выше всяких похвал. Ким Скотт (Kim Scott) и Эйрин Хауэлл (Aren Howell) уде лили большое внимание дизайну этой книги. Питер Мерхольц (Peter Merholz). Это Лэйн Беккер (Lane Becker). Джон Рам (John Rahm) и Джейк МакФарленд (Jake McFarland). Терпение. а особенно мне помогли Майкл Нолан (Michael Nolan). я хочу поблагодарить своих партнеров по Adap tive Path. Джесс МакМаллин (Jess McMullin) оказался моим самым строгим критиком во всех отношениях. Не каждому автору так везет. Сво бодно говорит на трех языках: немецком. ориентированного на пользо вателя. Кэйрин Уайтхаус (Karen Whitehouse). Благодарности Пусть количество имен на обложке не вводит вас в за блуждение: своим успехом книга обязана широкому кругу людей. Виктория Элзи (Victoria Elzey). с которым они принимали мои идеи. Джеффри Вин (Jeffrey Veen) и Инди Янг (Indi Young).Благодарности Молли – сторонник подхода. Молли Райт Стинсон (Molly Wright Steenson) и Дэвид Хоф фер (David Hoffer) оказали мне неоценимую помощь. а также является менеджером проекта Razorfish в СанФранциско и владельцем сайта Girlwonder. Дженис Фрейзер (Janice Fraser). Только с их разрешения я смог взяться за этот проект. Дебора ХиттельШауф (Deborah Hittel Shoaf). Я благодарен всем сотрудникам издательства New Riders.

Стив Круг (Steve Krug). кто вносил ценные предложения или просто оказывал мне моральную поддержку: Лайза Чен (Lisa Chan). Джун Коэн (June Cohen). Лу ис Розенфельд (Louis Rosenfeld). чьи советы помогли мне справиться с этим проектом и не сойти с ума. Питер Морвиль (Peter Morville) и (особенно) Стив Шемпьен (Steve Champeon). Ui. и Дэниел Грэссем (Daniel Grassam). Это вновь Джеффри Вин (Jeffrey Veen) и Майк Кунявски (Mike Kuniavsky). Хавьер Веласко (Javier Velasco). Джордж Олсен (George Olsen). никогда бы не оказался в этом бизнесе. Са манта Бейли (Samantha Bailey). Их взгляд на некоторые вещи отличается от моего. моя жена Ребекка Блад (Rebecca Blood). Музыкальное сопровождение моей работы над рукописью обеспечили Man or Astroman?. без поддержки которых эта книга никогда бы не была написана: Дина Сэндерс (Dinah Sanders). Терри Гуле (Thiеrry Goulet) и Деннис Вудт (Dennis Woudt). чтобы я кое с кем познакомился. Антонио Вольпон (Antonio Volpon). Кристина Уодтке (Christina Wodtke). Спасибо! . Mogwai. Майкл Энжелес (Michael Angeles). Do Make Say Think и (особенно) Godspeed You Black Emperor! Наконец. Dirty Three. Эрик Шайд (Eric Scheid). Tortoise. Джессамин Уэст (Jessamyn West). благодаря которой я станов люсь сильнее и мудрее день ото дня. Натан Шедрофф (Nathan Shedroff). одобрения и поддерж ки я. а это бесценно для настоящего сотрудничества. Don Caballero. Pell Mell. возможно. Назову тех.14 Благодарности Приношу благодарность многим более опытным авторам. Trans Am. Shadowy Men on a Shadowy Planet. Mermen. Turing Machine. которая однажды теплым техасским вечером на стояла на том. Вук Косич (Vuk Cosic). без чьей дружбы. есть три человека.

Адрес нашей электронной почты: errata@newriders. мы сделали правильно? Что можно было улучшить? Книги на какие темы вы бы хотели прочесть в нашем издании? Мы будем рады. Мы внимательно изучим ваши замечания и передадим их автору и редак торскому коллективу. на ваш взгляд. Ваша точка зрения очень ценна для нас. которые помогут нам стать лучше. не забудьте указать назва ние книги. работавшему над книгой. Обращаясь к нам.Поделитесь своим мнением Поделитесь своим мнением Дорогой читатель! Вы – самый главный ценитель и критик этой книги. имя автора. пожалуйста. ISBN. если вы поделитесь с нами своим мнением и любыми другими идеями и сооб ражениями. Что. а также ваше имя и адрес электронной почты для обратной связи.com 15 .

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

поскольку насыщенное расписание конференции временами напоминало марафонский забег. Одновременно с этим у меня копилась подборка связанных с новой работой материалов. Поначалу они относились ко мне настороженно и с подозрением. но со временем поняли.jjg. штат Техас. 17 .net/ia/. В конце 1999 года и январе 2000 года я пытался выработать внутренне непротиворечивый набор определений для всех этих понятий и искал способ выразить отношения между ними. Я в изрядной степени сам отвечал за определение своей роли внутри компании и за информирование коллег о том.Введение Предыстория Поскольку меня часто об этом спрашивают. Однако я был загружен на основной работе. В конце 1999 года я стал первым информационным архи тектором в серьезной фирме. чем занимаюсь я и как это согласуется с тем. То. я расскажу. А третий источник сваливал все в одну кучу под на званием «дизайн интерфейса». оказывающей консультаци онные услуги в области вебдизайна. На про тяжении этой интересной и плодотворной недели я почти не спал. (Впоследствии из этой под борки сформировалась страничка с ресурсами по информа ционной архитектуре на моем сайте www. и мо дель. никак не получа лась. я постоянно испытывал досаду на произвольное и случайное употребление терминов. что моя задача – упростить их работу и мое присутствие не подрывает их авторитет. как появились на свет «The Elements of User Experience» (Элементы опыта взаимодействия). чем занимаются они. В марте я отправился на ежегодную конференцию South by Southwest Interactive Festival в Остин. обо значающих базовые понятия в этой области. что в од ном источнике именовалось «информационным дизай ном». так что в конце января я забросил эту затею. в другом называлось «информационной архитекту рой».) Изу чая собранные материалы. которую я стремился построить.

которая пришла мне в голову. я превратил набросок в законченную схему.Введение 18 Конференция закончилась. Я терпеливо дождался посадки в самолет и. меня вдруг осенило: все мои идеи укладываются в трехмерную матрицу. . По возвращении в СанФранциско я почти сразу слег с из нурительной простудой и провел в горячке около недели. Я просто выбрал «элементы». Менделеева и книгой Странка и Уайта «Элементы стиля». Вскоре я доложил о диаграмме широкой аудитории на пер вой конференции Information Architecture Summit. – Примеч. и когда я уже проходил через терминал аэропорта в Остине.net/ia/elements. Первыми ею заинтересовались Питер Мерхольц (Peter Merholz) и Джеффри Вин (Jeffrey Veen).jjg. 1 Известное практически каждому американскому старше класснику краткое руководство по грамматике. стилистике и композиции текста. Я на звал ее «Элементы опыта взаимодействия». эти ас социации не возникли у меня. звучащий слишком техни чески. впоследствии ставшие моими партнерами в Adaptive Path. чтобы в общих чертах набро сать ту модель.1 К сожалению. как люди в самых разных уголках земного шара используют диа грамму для «просвещения» своих коллег и выработки внутри организации общего языка. немедленно открыл ноутбук. И. Посте пенно до меня стали доходить известия о том. что у многих людей это название вызывает ассоциа ции с периодической системой Д. чтобы не употреблять неук люжий термин «компоненты». ред. позволяющего обсуж дать эти вопросы. Пойдя на поправку. Позже я уз нал. когда я подбирал название.) Диаграмма привлекла внимание.pdf. которая целиком умещалась на листе бумаги. (Первоначальную диаграмму попрежнему можно най ти по адресу http://www. едва устроившись в кресле. 30 марта я опубликовал в Интернете окончательный вари ант.

Снова наступил март. что изложенные в ней идеи окажутся для вас на столько же интересными и полезными. и крупным органи зациям. Он отреагировал на нее с энтузиазмом – как. К этому времени я уже начал формулировать идею книги.net/elements/ 19 . и изложил ему свою идею. насколько инте ресным и полезным был для меня процесс ее создания. До меня доносились истории о том. которая удовлетворила бы эту потребность лучше. сотрудником изда тельства New Riders Publishing. к счастью. Вот так благодаря сочетанию моих усилий с везением по явилась на свет книга. Я на деюсь. Джесс Джеймс Гарретт (Jesse James Garrett) июль 2002 www. На ней я познакомился с Майклом Ноланом (Michael Nolan).jjg. чем листок бумаги. которую вы держите в руках. и руководство издательства.Введение В течение первого года своего существования «Элементы опыта взаимодействия» были загружены с моего сайта бо лее 20 тысяч раз. как эта схема помогает эффективнее работать и общаться и не большим группам вебразработчиков. и я опять оказался в Остине на кон ференции South by Southwest.

ГЛА ВА 1 Опыт взаимодействия: почему он так важен .

оказывает ся.Техника является частью повседневного окружения уже для нескольких поколений. что я имею в виду. Вы вытягиваете шею и видите. и порицания. если вы выскочите из дома через 10 минут. Вы включаете кофеварку и убегаете одеваться. почему будильник до сих пор не прозвенел. мы легко забываем. Но. Вы знаете. когда этого не про исходит. что ее делают люди и что ктото заслуживает благодарности. даже сталкиваясь с техникой каж дый день. Спотыкаясь. Повседневные напасти У каждого из нас время от времени бывают такие дни. она сближа ет и разделяет нас. вы слезаете с кро вати в поисках других часов – и обнаруживаете. ко гда ничего не получается. что кофе в кофеварке нет. что у вас еще есть шанс не опоздать на работу. Когда вы возвращаетесь за спасительной дозой кофеина. что на будильнике 3 часа ночи. Она помогает нам и подводит нас. На выяснение причин не ос талось времени – пора мчаться на работу! . Вы просыпаетесь от ярких солнечных лучей и недоумеваете. она упрощает нашу жизнь и усложняет ее. когда технологии ста новятся нам подспорьем.

ничего не поделаешь… Однако давайте разберемся. катится по дороге. что машину необ ходимо заправить. Опыт взаимодействия: почему он так важен Проехав квартал. Она произошла изза того. Будь устройство аппарата . отъезжаете – и слышите. как колпачок бензобака падает с крыши машины и. а кассир работает крайне медленно. Введение в опыт взаимодействия Все это кажется просто цепочкой случайных неудач – бы вают такие дни. подпрыгивая. И вы все еще не сделали ни единого глотка кофе. он бы допустил ошибку и был бы вынужден начинать все заново. и если бы кассир чуть ослабил внима ние при приеме платежа. усталость и раздражение – а день еще толком не начался. Если бы он был просто прикреплен к ма шине и его не нужно было бы кудалибо пристраивать. чтобы убавить громкость радиопри емника. Колпачок бензобака. И вот вы перед фактом: несмот ря на все усилия. однако там очередь. когда заправлялись. Кассовый аппарат. потому что кассовый аппарат не удобен в обращении. Вы потеряли колпачок. трогаетесь с места. Ему пришлось отвести взгляд от дороги. так как на ощупь отличить ручку громкости от других невозможно. вы опоздали. потому что по ложили его на крышу. который принимает к оплате кредит ные карты. Наконец вы добрались до своего рабочего стола. Очередь в кассу на бензоколонке про двигалась так медленно. Вам приходится зайти внутрь. Изза ДТП на магистрали вы вынуждены направиться в объезд. что водитель на секунду отвлекся. можно ли было избежать этих бед: Авария на дороге. вы бы его не потеряли.22 Глава 1. Наконец вы заливаете в бак бензин. опусто шенность. Вы чувствуете возбуждение. а потом в спеш ке забыли о нем. чем вы ожидали. вы спохватываетесь. На заправочной станции вы подъезжае те к тому автомату. но на этот раз он отвергает вашу карточку. так что путь до места работы отнимает больше времени. чтобы расплатиться через кассу.

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

Щелчок кнопки при нажатии кажет ся чемто несущественным. – это взаимодействие часто включает в себя нажатие множе ства кнопок. Опыт взаимодействия касается не того. нет. чем в случае других продуктов. ка кого мнения вы будете о кофеварке.24 Глава 1. Независимо от того. Во Всемирной паутине опыт взаимодействия играет еще более важную роль. как устройство работает. Однако с каждым продуктом. Если мы говорим о при борах – будильниках. связан опыт взаимодействия. нередко игнорируемая часть урав нения: зачастую именно то. отде ляет успех товара от его провала. бу тылка с кетчупом. что причиной проблем может быть конструкция кнопки. Так изза отсутствия щелчка кнопки те ряется клиент. Опыт взаимодействия: почему он так важен ведет. будь то газета. В ходе разработки устройства его создатели уделяют максимум внимания тому. сварите вы кофе или нет. кофеварках. Даже если вам никогда не приходило в голову. которым ктото пользуется. Опыт взаимодействия в Сети Эта книга посвящена опыту взаимодействия. о каком товаре идет речь. В других случаях речь идет о простых при способлениях вроде колпачка бензобака. . откидное кресло или шерстяной свитер. связанному с одним конкретным видом продуктов – с вебсайтами. однако если от него зависит. что оно делает. когда человек вступа ет с ним в контакт и использует его. как устройство функционирует «внутри» (хотя это иногда имеет большое значение). он приобретает огромное значе ние. как устройство работает «снаружи». кассовых аппаратах. мелочи иг рают большую роль. работающей через раз? А какое отношение сложится у вас к ее производите лю? Купите ли вы другой товар этой фирмы в будущем? Скорее всего. Опыт взаимодействия имеет отношение к тому. Опыт взаимо действия – это другая.

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

Именно опыт взаимодействия с сайтом формирует у посетителя впечатление о товарах или услугах. что наращивание функциональных возможностей дает лишь временное преимущество в кон курентной борьбе. Однако выяснилось. что высокое качество опыта взаимодействия является сущест венным и долговечным преимуществом в конкурентной борьбе. конкуренты стали делать упор на возможностях своих сай тов. .26 Глава 1. Сайты. неудобными в обращении и непривлекательными для новичков. быть может. ради которых все и затевалось. и именно он определяет. подобные Yahoo!. Расширение набора функций неизбеж но усложняло сайты. переманить некоторых клиентов у кон курентов). Солидные фирмы бросились разрабатывать веб сайты. боясь прослыть отсталыми. предла гаемых компанией. в лучшем случае отступал на задний план. а вопрос о том. добавляя туда все новое и новое содержимое и расши ряя функциональность в надежде привлечь новичков в Се ти (и. чтобы быть первыми на рынке. захватили лидерство. Опыт взаимодействия: почему он так важен Как это произошло? На заре существования Сети многие усматривали ключ к успеху в том. Однако в большинстве случаев уже сам по себе запуск вебсайта рассматривался как великое достижение. В наше время компании пришли к пониманию того. именно опыт взаимодействия отлича ет компанию от ее конкурентов. ко торое конкуренты впоследствии изо всех сил старались отобрать. делая их громоздкими. что нравится реальным клиентам. удобен ли сайт для людей. Чтобы отнять долю рынка у этих сайтовпервопроходцев. что они ценят и чем дей ствительно способны воспользоваться. В то же время многие организа ции попрежнему уделяли мало внимания вопросу о том. вернется ли посетитель на сайт.

Вы не принимаете участия в конкурентной борьбе в том смысле. если пользователи не смогут понять. но опыт взаимодействия оказывает на преданность клиентов гораздо большее влияние.Конкурентная борьба и возврат инвестиций Конкурентная борьба и возврат инвестиций Возможно. с помощью которого люди могут решать определен ные задачи (например. чтобы люди с лег костью воспринимали и понимали ее. а с сайтом вашего конкурента еще лучше. что вы предлагаете товары или услуги. то они уйдут к конкуренту. то одна из его целей – подать эту информацию самым эффек тивным образом. Никакие 27 . на своем сайте вы ничего не продаете. Недостаточно просто поместить ее на сай те. И даже если он сумеет найти эту информацию. Если опыт их взаимо действия с вашим сайтом будет положительным. Может пока заться. в которых он нуждается. а просто предоставляете информацию о компании. Самая пе редовая функциональность будут неуклюжей и потерпит неудачу. что с вами иметь дело так же трудно. вынуждены обращаться к вам. как с вашим сайтом. он может решить. Она должна быть представлена так. В противном случае до посетителя сайта может и не дойти. Даже если сайт представляет собой интерактивный инстру мент. покупать авиабилеты или управ лять банковским счетом). Короче говоря. то есть из информационного наполнения. Если сайт состоит в основном из того. Расширенные возможности и дополнительные функции. что в Сети называется «контентом». как с ней об ращаться. Од нако вы не можете позволить себе пренебречь тем опытом. важны. в каком в ней участвует книжный интернетмагазин. кому она нужна. конечно. который дает пользователю ваш сайт. они никогда не вернутся. если ваши посетители получат отрицатель ный опыт. эффективное взаимодействие с клиентом служит ключевым фактором успеха. что вы обладаете монополией на эту информацию: те.

Качественный опыт взаимодействия является решающим фактором для «конверсии» – превращения этих случайных посетителей в активных покупателей. Нередки случаи. чем совершающих там покупку. Для коммерческих сайтов уровень конверсии особенно ва жен. какую прибыль приносит инвести рованный капитал. ориентированные на конечный резуль тат. Одним из общепринятых способов выражения возврата инвестиций является уровень конверсии. стремятся понять. Даже незначительное увеличе ние уровня конверсии может вызвать заметный рост при были. какой процент пользователей «переходит» (конверти руется) на следующую ступень. А вот позитив ный опыт в состоянии это сделать – при этом еще одного шанса у вас не будет. гораздо больше. Все. как настройка сайта в соответствии со своими предпочтениями. насколько успешно потраченные деньги превращаются в нечто ценное для вашей компании. уделяя внимание опыту взаимодействия на своем сайте. ко гда вы поощряете клиентов сделать следующий шаг в по строении ваших взаимоотношений – будь то такая слож ная процедура. чего вы добье тесь. Людей. что вам нужно. Показатель под названием возврат ин& вестиций (ROI – return on investment) обычно измеряется в денежных единицах: сколько долларов вы заработаете в расчете на каждый потраченный доллар? Однако вовсе не обязательно выражать этот коэффициент в монетарных терминах. показывающая. – это мера. Всякий раз. Опыт взаимодействия: почему он так важен ультрасовременные технологии и маркетинговые ухищре ния не заставят посетителя прийти еще раз. когда повышение этого коэффици ента на одну десятую процента приводило к увеличению прибыли на десять и более процентов. Отслежи вая. или такая простая операция. . Преданность клиентов – не единственное. заходящих на коммерческий сайт.28 Глава 1. вы можете измерить. – возникает уровень конверсии. Компании. как подписка на рассылку по электронной почте. который можно подсчитать. на сколько эффективно ваш сайт служит целям бизнеса.

если вы потерпели неудачу в продвижении своего сайта. Этот коэффи циент способен дать вам более точное представление о вы годности ваших вложений в опыт взаимодействия. – неважно. есть уровень конверсии. Уровень конверсии показывает.Конкурентная борьба и возврат инвестиций 29 Уровень конверсии – общепринятый способ измерить влияние опыта взаимодействия. насколько успешно вы завлекаете тех. где посетители могут оставить какието деньги. который можно изме рить. корм для кошек или подписка на содержимое самого сайта. продаются ли там книги. У любого сайта. . чем го лые цифры объема продаж. Объем продаж может постра дать. кто уже пришел на ваш сайт с целью по тратить деньги.

И если вы хотите отвадить пользовате лей от своего сайта. Даже если предложенные способы измерения возврата ин вестиций неприменимы к вашему сайту. партнеры либо сотрудники вашей компа нии. Любой вебсайт. оказывает косвенное воздействие на финансовый ре зультат. независимо от того. это отнюдь не оз начает. это неразумно. трудно придумать более действенный способ. чем заставить их при посещении сайта чувствовать себя дураками. что опыт взаимодействия слабо влияет на ваш биз нес. а ко гда у людей возникают проблемы в обращении со сложны ми продуктами. В конце концов. пожираю щий все ресурсы. что они были недостаточно вниматель ны… Они чувствуют себя дураками… Да. потому что сам процесс покупки оказался трудоемким. улучшение опыта взаимодействия может со кратить количество отказов от корзины с покупками. непонятным или требующим много времени. пользователи не виноваты в том. однако слиш ком часто корзины оказываются брошенными. посещают ли его ваши клиенты. Помещение товаров в корзи ну указывает на желание сделать покупку. Но они все же чувству ют себя дураками. однако опыт взаимодействия все равно играет огромную роль. происходит забавная вещь: люди винят в неудаче себя. приносящим пользу фирме.30 Глава 1. Как и в случае с уровнем конверсии. и проектом. Вебсайты – это сложные технологические продукты. что сайт работает не так. превратившимся в кошмар. Они подозревают. как они ожидали. Опыт взаимодействия: почему он так важен Еще одной мерой возврата инвестиций в опыт взаимодей ствия на коммерческих сайтах служит количество бро шенных корзин с покупками. Возможно. . Часто он определяет разницу между проектом. что сделали чтото не так… Им кажется. никто за пределами вашей компании не видит ваш сайт (как в случае с интранетпорталом).

Здесь возможны два основных вари анта: помочь людям работать быстрее и помочь им реже ошибаться. как ожидалось. Чем меньше времени уйдет на выполнение конкретного . повышает продуктивность бизнеса в целом. Любое улучшение опыта взаимодействия нацелено на повы шение эффективности. заставляют людей чувствовать себя дураками. которыми вы пользуетесь. работающие не так.Конкурентная борьба и возврат инвестиций 31 Технологические продукты. даже если они в конце концов добились того. Рост эффективности инструментов. чего хотели.

но и повысят удовлетворение от работы. если они имеют дело с инструментами простыми и удобны ми в обращении. вернетесь ли вы домой в конце дня довольным или же до предела измотанным. выполняемой увлеченными и опыт ными сотрудниками. на худой конец. что «воевали» со своим инструментарием. Если речь идет о вас самих. Опыт взаимодействия: почему он так важен задания. что сотрудники начнут подыскивать себе новое место.) Если говорить о ваших работниках. инструменты могут оказать решающее влия ние на то. должно быть результатом осознанных решений. Люди получают от работы больше удовольствия. Смысл этого понятия чрезвы чайно прост: разрабатывая продукт. тем больше вы успеете за день. нужно на каждом эта пе помнить о пользователе. а не с теми. эффективность влияет не только на финансовый результат. ориентированного .32 Глава 1. В реальности вам по стоянно приходится идти на компромиссы изза того. позволит вам сэкономить на наборе и обуче нии персонала и принесет дополнительную выгоду от высо кого качества работы. (Либо. что относится к опыту взаимодействия. бу дете ли вы уставшим по какимто разумным причинам или изза того. Однако следствия этого просто го принципа на удивление сложны и многообразны. Однако процесс проектирования. сократив вероятность того. Все. А это. в свою очередь. ориентиро& ванным на пользователя. Помните о своих пользователях Практика обеспечения привлекательного и эффективного опыта взаимодействия называется дизайном. Впрочем. удобные инструменты не только увеличат их производительность. что наилучший подход требует больших затрат времени и де нег. которые вызывают замеша тельство своей неоправданной сложностью. В соответствии со старой истиной «время – деньги» экономия времени ва ших сотрудников оборачивается прямой экономией денег в вашем бизнесе.

гарантирует. Опыт взаимодействия важен для вас в первую очередь пото му. что он важен для ваших клиентов. они не вернутся на ваш сайт.Помните о своих пользователях на пользователя. работающий вхолостую в ожидании запроса. рас кладывая его на составные части и рассматривая эти части с разных точек зрения. – опыт взаимо действия с системой. который так никогда и не поступит… Вы должны позаботиться о том. наглядно и. 33 . в котором все логич но. что учли все побочные эффекты принятых решений. Обдумывая опыт взаимодействия. возможно. вы получите уверенность. в которой все работает как надо. даже приятно. А сайт без пользователей – это пыльный вебсервер. Если вы оставите их без позитивного опыта. как их день складывается в остальном. чтобы пришед шие клиенты вынесли с собой опыт. что эти компромиссы не бу дут случайными. неза висимо от того.

ГЛА ВА 2 Знакомимся с элементами .

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

являют ся просто иллюстрациями. Простое перечисление этих функциональных возможностей образу ет уровень набора возможностей сайта. Другие. Вопрос. По некоторым картинкам можно щел кать мышью. Уровень компоновки Под поверхностью находится компоновка страниц сайта – расположение кнопок. структура же определя ет. на пример просмотреть содержимое корзины.Глава 2. как раз относится к возможностям сайта. . завершив оплату. компоновка задает распо ложение элементов интерфейса на странице оплаты товара. состоящих из картинок и текста. а структура определяет. чтобы выполнить какоелибо действие. включена ли эта (или любая другая) функция в список функций сайта. Компоновка задает расположение навигационных элемен тов. Например. как пользователи попадают на эту страницу и куда они могут направиться. Компоновка проектируется так. позволяющих пользователям переходить от одной ка тегории в каталоге книг к другой. напри мер фотографии обложек книг или логотип сайта. Некоторые сайты. чтобы не пришлось указывать его повторно. когда она понадобится. что фактически кроется за этими категориями. вкладок. торгующие книгами. Уровень набора возможностей Структура определяет способ организации различных функ циональных возможностей сайта в единое целое. позволяют пользователям сохранять адрес. то есть чтобы вы запомнили логотип и смогли найти кнопку с корзиной. Знакомимся с элементами 36 Уровень поверхности На поверхности вы видите ряд вебстраниц. фотографий и текстовых блоков. чтобы организа ция этих элементов была максимально эффектной и эф фективной. Уровень структуры Компоновка является конкретным воплощением абстракт ной структуры сайта.

что хотят получить пользователи. Построение снизу вверх Эти пять уровней – стратегия. Однако другие цели могут оказаться не столь очевидными. на которые мы ищем ответы. становятся немного менее 37 . что хотят полу чить от сайта его владельцы. струк тура. Стратегия включает в себя не только то. С переходом на каждый последующий уровень вопросы.Построение снизу вверх Уровень стратегии Набор возможностей целиком определяется стратегией сай та. а мы хотим их продать. компоновка и поверхность – составляют концепту альную основу для обсуждения связанных с опытом взаи модействия проблем и средств их решения. набор возможностей. В примере с книжным интернетмагазином некоторые стратегические цели формулируются легко: пользователи хотят купить книги. но и то.

проекты «сходят с рельсов». Решения. которая зависит от набора возможностей. принятыми на уровнях выше и ниже. которая зависит от структуры. Знакомимся с элементами абстрактными и более конкретными. диапазон выбора решений на каж дом уровне ограничен решениями. . принятыми на нижних уровнях. а стоимость взлетает на заоблачную высоту изза того. На нижнем уровне мы совсем не думаем об окончательном внешнем виде сай та. расположенных ни же: поверхность зависит от компоновки. Хуже того: когда сайт все же будет запущен. С другой стороны. что ре шения. сроки срываются. зависящего от стратегии. Зависимость уровней означает. Нас волнует лишь то. принимаемые на каждом уровне. создают «волновой эффект» снизу вверх на всем протяжении цепоч ки. Если наши решения не согласу ются с решениями. сужают диапазон выбора уровнем выше. От уровня к уровню наши реше ния становятся более конкретными и обретают новую сте пень детализации. принимаемые на стратегическом уровне. Каждый уровень зависит от уровней.38 Глава 2. пользователи его возненавидят. кото рые не могут быть состыкованы естественным образом. насколько сайт впишется в нашу стратегию (удовлетворяя при этом потребности пользова телей). что команда разработчиков пытается собрать вместе компоненты. На самом верхнем уровне мы озабочены только де талями внешности сайта.

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

40 Глава 2. что работа на каждом уровне заканчивается до того. Принципиальная двойственность Конечно. что специалисты поразному употребляют одни и те же термины. чтобы работа на каждом уровне заканчивалась до того. Знакомимся с элементами Если требовать. как начнется работа на следующем. Ктото под «информа ционным дизайном» понимает то. результаты для вас и ваших пользователей окажутся неудовлетво* рительными. информационная архитектура… Что они означают? Чтото осмысленное? Или это просто набор ничего не значащих модных словечек? Ситуация осложняется тем. что комуто другому из вестно как «информационная архитектура». как закончится работа на следующем. инфор мационный дизайн. Ему то и дело будут попадаться похожие друг на друга термины: проектирование взаимодействия. Более удачный подход характеризуется тем. Новичку дисциплина «опыт взаимодействия» покажется довольно сложной. здесь постепенно выработался свой лексикон. А в чем раз ница между «проектированием интерфейса» и «проекти рованием взаимодействия»? Есть ли она? . пятью элементами опыта взаимодействия все не ограничивается: как в любой специализированной облас ти.

Поначалу все ухватились за Всемирную паутину как за но вое средство публикации работ. Возросшая интерактивность привела к тому. Будучи принятой широким интернетсообществом. При этом Сеть оставалась благодатной почвой для бесчис ленных сайтов газет и журналов. Когда Всемирная паутина только зарождалась. п. пополнивших ряды «только электронных» изданий. чтобы исследователи в области физики высоких энергий. форумы раз личных сообществ. онлайновые банковские услуги и т. но и собирать информа цию и даже управлять ею. что интернетсайты стали реагировать на вводимые пользователем данные почти так же. Обсуждение этих вопросов постепенно приобретает непро тиворечивые формы. мы должны проследить их происхождение. Тим Бер нерсЛи (Tim BernersLee) изобрел Всемирную паутину. Все мирная паутина приобрела более сложный и устойчивый набор функциональных возможностей. живущие в разных странах. все своди лось к гипертексту. позволявших веб сайтам не только распространять. что потенциал Всемирной паутины этим не исчерпывается. Однако по мере развития технологии и появления новых возможностей как у веб броузеров. Он знал. 41 . Люди могли создавать документы и свя зывать их ссылками с другими документами. С возникновением коммерческого интереса к Интернету эта функциональность «как у приложений» нашла широ кое применение: электронная коммерция. Однако чтобы понять сами термины. как огромен этот потенциал. но тогда мало кто действительно понимал. так и у вебсерверов облик Сети стал меняться. Технология тем временем наступала на обоих фронтах – и сайты всех видов соверши ли переход от статических хранилищ редко обновляемой информации к динамическим. основанным на базах дан ных и непрерывно развивающимся. могли иметь доступ к работам друг друга и ссылаться на них.Принципиальная двойственность К счастью. как тради ционные приложения для настольных компьютеров. опыт взаимодействия как дисциплина понем ногу перестает напоминать вавилонское столпотворение.

Это и стало камнем преткновения. что и как думают о выполнении этих шагов люди. поскольку сообщество не могло договориться даже о ключевых терминах.42 Глава 2. Другая группа мыслила о Все мирной паутине в терминах распространения и получения информации и применяла подходы. характерные для Всемирной паутины как программного интерфейса. типичные для изда тельского дела и средств массовой информации. свойственные гипертексто& вым информационным пространствам. Знакомимся с элементами В результате члены формирующегося сообщества специа листов в области опыта взаимодействия говорили на двух разных языках. На «программной» половине мы будем говорить главным образом о задачах – о шагах некоего процесса и о том. Прогресс практически остановился. необходимых пользователю для решения одной или нескольких задач. брали начало в общеприня той практике проектирования всех прочих изделий – от ав томобилей до кроссовок). ни к гипертекстовым инфор мационным пространствам: они были гибридами с призна ками обеих категорий. в свою очередь. Ситуацию осложнял еще и тот факт. разделим все наши пять уровней на две части. Одна группа рассматривала любую задачу как задачу разработки приложения и применяла подходы. принятые в среде создателей традиционного программного обеспечения для настольных компьютеров и серверов (а эти подходы. Слева расположим элементы. а справа разместим элементы. . Здесь мы смотрим на сайт как на инструмент или набор инструмен тов. Чтобы отразить эту принципиально двойственную приро ду Всемирной паутины. что многие вебсайты нельзя было с уверенностью отнести ни к приложениям.

Создание гипертекста – это создание информационного пространства.Принципиальная двойственность 43 На «гипертекстовой» половине нас интересует информа& ция – какую информацию предлагает сайт и что она зна чит для наших пользователей. Всемирная паутина как программный интерфейс Всемирная паутина как гипертекстовое информационное пространство Конкретность поверхность компоновка структура набор возможностей стратегия Aбстрактность . в котором могут перемещаться пользователи.

Глава 2. Уровень стратегии Стратегические задачи у программных продуктов и у ин формационных пространств одни и те же. На информационной половине возможно сти равнозначны требованиям к контенту – это описание различных элементов содержимого. Мы должны понимать. которые будут пользоваться нашим сайтом. Потребности пользователей – это цели сайта. Уровень структуры На «программной» половине этого уровня возможности приобретают структуру благодаря проектированию взаи& . которые необходимо создать. В главе 3 мы подробно обсудим эти элементы. Противовесом пользовательским потребностям являются наши собственные цели. источник которых нахо дится за границами нашей организации. участвующих в ближайших выборах»). мы сможем подробно об судить. образуя опыт взаимодействия пользователя. как эти разрозненные детали собираются в единое целое. Они определяют ся людьми. Знакомимся с элементами 44 Элементы опыта взаимодействия Теперь мы можем спроецировать всю совокупность непо нятных терминов на нашу модель. чего хочет от нас наша аудитория и как эти пожелания согласуются с другими ее потребностями. Элементы функциональности сайта обсуждаются в главе 4. Разделив каждый уро вень на составляющие элементы. Эти цели сайта могут быть бизнес целями («Заработать миллион долларов на интернетпрода жах в этом году») или какимилибо иными («Информиро вать избирателей о кандидатах. Уровень набора возможностей На программной половине стратегия преобразуется в на бор возможностей путем создания функциональной специ& фикации – подробного описания функциональных возмож ностей процесса.

как сис тема будет вести себя в ответ на действия пользователей. Всемирная паутина как программный интерфейс по ве р о хн ст Всемирная паутина как гипертекстовое информационное пространство ь Конкретность Визуальный дизайн ка о в Дизайн интерфейса ерфейса Дизайн навигации ви н о мп к о Информационный онны дизайн ст во р т ук ур а Проектирование вание Информационная ио вия архитектураа взаимодействия р й бо осте а н н Функциональная льная ож м з спецификация ия ст р е ат Требования ни к контентуу я г и Потребности ности пользователей пол те сай Целии сайта Aбстрактность . Эта тема подробно раскрывается в главе 5. в процессе которого мы определяем. У информационных пространств структура определяется информационной архитектурой – организацией элемен тов содержимого в пределах информационного простран ства.Элементы опыта взаимодействия 45 модействия.

Глава 2. Интерфейс для информационного пространства появляет ся в ходе разработки дизайна навигации. проектиро вание интерфейса и проектирование навигации в совокуп ности определяют компоновку сайта. позволяющих поль зователю перемещаться по информационной архитектуре. даже ес ли они делают это поразному. Например. в результате чего мы имеем набор экранных элементов. У программных продуктов компоновка также включает в себя дизайн интерфейса. На обеих его половинах мы имеем дело с информационным дизайном – представлением информации в таком виде. находится ли перед нами программный продукт или информационное пространство. Когда вы прини маете решение относительно одного элемента. чем может показаться. информационный дизайн. Независимо от то го. Знакомимся с элементами 46 Уровень компоновки Уровень компоновки включает в себя три компонента. мы поднялись на поверхность. Этот элемент сложнее. Применение элементов Очень мало сайтов оказываются целиком на одной стороне этой модели. позволяющую пользователям взаимодействовать с функциями системы. оно неиз бежно затронет и остальные элементы на этом уровне. ко торый облегчает ее восприятие. и вы узнаете о нем все из главы 7. Все элементы каждого уровня выполняют общую функцию (в данном случае определяют компоновку сайта). В пределах одного уровня все элементы должны совместно работать на достижение целей этого уровня. то есть организацию элементов интерфейса. мы имеем дело с визуаль& ным дизайном – внешним видом конечного продукта. Уровень компоновки обсуждается в главе 6. . Уровень поверхности Наконец.

вы ходят за границы. решающими вопросы опыта взаимо действия.Применение элементов Эта модель. связанной с опытом взаимодействия. не специализи руясь лишь на том. Поможет ли изменение визуаль ного дизайна или надо спускаться на уровень ниже и пере рабатывать навигацию? Некоторые задачи требуют работы сразу в нескольких областях. Однако в реальности границы между областями не такие четкие. который упомянут в названии должно сти. очерченные этой моделью. повидимому. – это контент. чтобы за каждую область обязательно ктонибудь отвечал. В некоторых организациях вы встретите людей на должностях инфор мационного архитектора или проектировщика интерфей сов – не воспринимайте такие названия буквально. Часто бывает трудно понять. Это абсолютно справедливо: единственное. Предположим. которой вы обладаете (или которую вы получаете и обрабатываете с помощью имеющихся у вас ресурсов). Вернемся к примеру с книжным магазином. Пользователи заходят на сайты не для того. занимаются многими элементами взаимодействия пользователя с системой. еще больше запутывает ситуацию. Первый – это контент. а другие. 47 . чтобы наслаж даться навигацией. расчерченная на аккуратные прямоугольники и плоскости. которыми торгуем. который их посетители могли бы счесть ценным. какому из элементов следует уделить осо бое внимание для решения конкретной задачи. как в компании распределены обязанности между сотрудниками. Информация. формирующих опыт взаимодейст вия. служит удобным инструментом при обсужде нии проблем опыта взаимодействия. Зачастую то. как правило. Нет необходимости иметь в команде специалиста по каждой из этих областей. что может пред ложить большинство сайтов. Достаточно поставить дело так. играет огромную роль в фор мировании вашего сайта. мы решили показать пользова телям изображения обложек всех книг. Старая (по меркам Всемирной паутины) поговорка гласит: «Контент – царь и бог Сети». Эти со трудники. В этой книге отсутствует подробное освещение двух допол нительных факторов.

если мы хотим обеспечить посетителей позитивным опытом взаимодействия с нашим сайтом. В свою очередь это дало толчок к появлению все более сложных подходов к организации опыта взаимодействия. Однако по мере разви тия технологии базы данных стали находить все более ши рокое применение в обеспечении работы сайтов. что у них общего и как они влияют друг на друга. Второй фактор. может оказаться не менее важным для создания успешного опыта взаимодействия. таких как динамические системы навигации. чем раз личаются элементы разных уровней. формируя опыт взаимо действия в целом. об новлять каталог? А что если мы не сможем получить фото графии обложек? Эти и подобные им вопросы относительно контента очень существенны. Мы увидим. уровень за уровнем. будет ли у нас способ организовать их в каталог. технология. обычно используе мые при создании каждого элемента. Характер опыта. предлагаемого вами пользо вателю. и область опы та взаимодействия должна постоянно адаптироваться. часто в большой степени определяется технологи ей.48 Глава 2. создать механизм поиска. Технология непрерывно развивается. . Но несмотря на это фундаментальные элементы остаются прежними. которые изменяются в зависимости от того. Мы внимательно изу чим некоторые инструменты и приемы. как пользователи передвигаются по сайту. В оставшейся части книги эти элементы рассматриваются более подробно. В самом начале существования Всемирной паутины средства связи вебсайтов с базами данных были довольно примитивными и ограниченными. чем контент. Знакомимся с элементами Если мы добудем эти изображения.

Применение элементов 49 .

.

ГЛА ВА 3 Уровень стратегии ЦЕЛИ САЙТА И ПОТРЕБНОСТИ ПОЛЬЗОВАТЕЛЕЙ .

Стратегия . Знание того. позволяет принимать решения по каждому аспекту опыта взаимодействия пользователя. чем кажется на первый взгляд. что мы хотим получить от сайта для нашей компании и что он должен делать для пользователей.Поверхность Компоновка Структура В основе успешного проектирования опыта взаимо* Набор возможностей действия лежит четко сформулированная стратегия. Однако ответить на эти простые вопросы труднее.

источ ником которых является наша компания. чего хотим сами и чего хотят от нас дру гие. диктуемым сайту извне. Всемирная паутина как программный интерфейс ст ра Всемирная паутина как гипертекстовое информационное пространство я г и Потребности пользователей е т Цели сайта Набор возможностей . Чаще всего вебсайты терпят неудачу потому. Чем четче мы сформулируем. явным образом сформули рованной стратегии. Тем удивительнее то. мы опишем цели сайта. Ключевые слова здесь – «явным образом». Цели сайта и потребности пользо вателей вместе образуют уровень стратегии – основу каж дого решения. рисованием первого пикселя и установкой первого сервера никто из нас не потрудился ответить на два принципиальных вопроса: • Что хотим получить от нашего сайта мы? • Что хотят получить от него наши пользователи? Ответив на первый вопрос.Глава 3. Второй вопрос относится к потребностям пользователей. тем точнее сможем согласовать наши решения с этими целями. то есть целям. что перед написа нием первой строчки кода. принимаемого в процессе проектирования опыта взаимодействия. Уровень стратегии 52 Определение стратегии Самая распространенная причина провала вебсайта кро ется не в технологии и не в опыте взаимодействия. что большое количество проектов по разработке опыта взаимодействия отнюдь не начинаются с четкой.

не все организации преследуют коммерческие цели). Например. не поясняет. заявление. Слишком часто цели сайта суще ствуют лишь в виде не высказанных явно мыслей его раз работчиков. На базовом уровне ком мерческие вебсайты преследуют одну из двух целей: по зволить компании зарабатывать больше денег или позво лить компании больше экономить. Я буду пользоваться термином «цели сайта».Цели сайта Цели сайта Первый этап прояснения стратегии состоит в изучении на ших собственных целей. Тем не менее остается неясным. Все остальное пока не имеет значения. что должен делать сайт. потому что не всякая внутрен няя цель является целью бизнеса (в конце концов. потому что понятие «бизнесце ли» я считаю одновременно слишком узким и слишком широким. Бизнес&цели Термин «бизнесцели» часто употребляется для описания внутренних стратегических целей. какими должны быть сайты для достижения этих целей. Большинство разработчиков начинают описывать цели сайта в самых общих терминах. Пока эти мысли остаются невысказанными. 53 . а слишком широким – потому что сейчас наша задача состоит в ис пользовании наиболее конкретных выражений при описа нии того. Слишком узким. С другой стороны. что одна из целей – «предоставить пользователям инструмент для общения в реальном времени. как этот инструмент будет слу жить целям организации и удовлетворять потребности пользователей. основанный на техноло гии Java». слишком конкретные цели неспособны адекватно описать стратегию. разные люди имеют различное представление о том. Иногда преследуются обе цели одновременно. каким должен быть результат проекта.

Идентичность бренда – комплекс концептуальных ассоциаций или эмо циональных реакций – важна потому. Брендинг не является прерогативой бизнеса: любая орга низация. мы думаем о логотипах. имеющая вебсайт.Глава 3. Идентичность бренда При формулировании целей любого сайта важной темой является идентичность бренда. и поэтому донесение идентичности бренда до пользо вателя служит достаточно распространенной целью сайта. вы повышаете вероятность того. . принятых при разработке сайта. Для создания успеш ного опыта взаимодействия мы должны убедиться. чтобы не забе гать вперед и удержаться от поиска решений. когда мы еще не полностью понимаем наши задачи. Формулируя конкрет ные аспекты этого впечатления в виде явно выраженных целей. что любое принимаемое нами решение основано на ясном понимании его последствий. от некоммерческих организа ций до государственных учреждений. формируя впечатление о вашей организации. Хотя визуальные аспекты бренда важны (мы вернемся к ним. когда дойдем до уровня поверхности в главе 7). создает впечатление о себе через опыт взаимодействия. что оно будет поло жительным. Большинство организа ций стремятся повлиять на то. Уровень стратегии 54 Мы пытаемся достичь баланса между слишком конкретны ми и слишком общими формулировками. само понятие бренда вы ходит далеко за рамки визуальных образов. будет ли это впечатление сформировано случайным образом или в результате осознанных решений. что ее невозможно обойти стороной: взаимодействие пользователей с вашим сайтом неизбежно оставляет след в их сознании. От вас зависит. цветовых решениях и полиграфических изысках. что ни что не произойдет случайно. как воспринимается их бренд. Когда большинство из нас слышит слово «бренд».

чтобы понять. связанного с опытом взаимодействия. но и дают вам в руки конкретное свиде тельство ценности опыта взаимодействия. насколько он соответствует нашим целям и потребностям наших пользователей. принимаемые по ходу рабо ты над проектом. когда вы сталки ваетесь со скептицизмом при обосновании бюджета вашего следующего проекта. насколько ценным является сайт для основной аудитории. .Цели сайта 55 Метрики успешности Во всякой гонке есть финишная черта. за которыми мы следим после появления сайта в Интернете. В этом примере еже* месячное измерение количества посещений сайта зарегистрирован* ными пользователями показывает. как вы уз наете об их достижении. Хорошие метрики не только влияют на решения. Под метриками успешности понимаются индикаторы. насколько хорошо опыт взаимо* действия отвечает стратегическим целям. Важная составная часть осознания ваших целей – понимание того. Метрики успешности – это конкретные инди* каторы того.

Если ваш сайт предоставляет клиентам решения типич ных проблем. исследовали ваши предложения. Эффективно работающий ин транетпортал может обеспечить вашим менеджерам по продажам удобный доступ к инструментам и ресурсам. стремясь предоста вить пользователю моментальный доступ к информации и функциям. чтобы пользователи комфортно чувствовали себя на вашем сайте. по зволяющим быстрее заключать сделки. Если вы хотите. вы. что. Для сайтов. рассчитывающих на доход от рекламы. нет. испытавших раздражение и решивших не возвращаться на ваш сайт. которое нужно пользовате лям. упа дет ниже изначального уровня. задерживались на нем. Добавление промежуточных страниц между главной страницей и тем содержимым. коли чество просмотров страниц – число запросов той или иной страницы в течение дня – является чрезвычайно важной метрикой успешности. И наоборот. возникающих при использовании вашей продукции. Сколько времени проводит средний поль зователь на вашем сайте в течение каждого посещения? (Это можно определить с помощью журналов посещений сервера). количество просмотров будет снижаться и. любое изменение которой можно легко привязать к опыту взаи . но бу дет ли оно служить интересам пользователей? Вероятно. Хорошая метрика успешности – это такая метрика. обернется возросшей прибылью. Не всякая метрика успешности связана с сайтом напря мую – вы можете замерять также косвенные последствия. возможно.56 Глава 3. вероятно. Однако вы должны соблюдать ба ланс между своими целями и потребностями пользовате лей. вас порадует растущее среднее время посещения. в свою оче редь. пожелаете уменьшить среднюю продолжительность посещения. Уровень стратегии Иногда метрики успешности связаны с самим сайтом и его использованием. количество звонков в службу поддержки кли ентов должно сократиться. безусловно. увеличит количество просмотров. И в долгосрочной перспективе это неминуемо про явится: по мере роста числа пользователей.

мы сможем вырваться за рамки наших ограниченных представлений и увидеть сайт глазами пользователей. кто они и что им нужно.Потребности пользователей модействия пользователя с сайтом. ориен тируясь на одного идеализированного пользователя – в точ ности такого. бывает трудно определить. будучи рассмотренной в отрыве от контекста. Измерение повторных посещений может стать хорошим способом оценки того. как мы сами. захотят ли новые по сетители прийти на сайт еще раз. придется ориенти 57 . может ввести в заблуждение. возможно. Однако будьте внимательны: иногда пользователи не возвращаются про сто потому. Конечно. Определение потребностей пользователей может оказаться сложным делом. нам. если после обновления версии сайта доходы от онлайновых транзак ций подскочат на 40%. Например. от вечает ли сайт потребностям пользователей. сам по себе опыт взаимодействия не может при влечь новых посетителей на ваш сайт. Но ведь мы создаем сайт не для себя. Потратив время на исследование пользовательских потребностей. что делается за преде лами вебсайта. В этом вам придется полагаться на репутацию сайта среди пользователей или на усилия отдела маркетинга. что ваш конкурент развернул масштабную рек ламную компанию или вы получили плохие отзывы в прес се. Если же изменения происходят мед ленно. Чтобы им понравилось наше творение и они захотели им пользоваться. Но опыт взаимодействия оказывает сильнейшее влияние на то. Обяза тельно оглянитесь вокруг и узнайте. чтобы получить полную картину. Любая метрика успешности. Даже если сайт создается для внутреннего исполь зования в организации. связь между причиной и следстви ем будет очевидной. Потребности пользователей При разработке сайта есть риск попасть в ловушку. поскольку пользователи бывают самые разные. является ли их причи ной опыт взаимодействия или другие факторы. мы должны понять. а для других.

Способов сегментирования аудитории существует почти столько же. возрасту. Сегментация пользовательской аудитории Всю массу пользовательских потребностей можно разбить на обозримые части путем сегментации пользовательской аудитории. Мы делим нашу аудиторию на группы (сегмен ты). Сколько часов в не делю проводят ваши пользователи в Интернете? Являются ли компьютеры частью их повседневной жизни? Нравится . образо вательному уровню. Уровень стратегии роваться на широкий диапазон потребностей. сколько видов пользовате лей. Исследователи рынка обычно делят аудиторию на сегменты по демографическим критериям – полу. состоящие из пользователей со сходными ключевыми характеристиками. Психографические про фили описывают взгляды пользователей и то. Эти демографические профили могут быть довольно общи ми («мужчины от 18 до 49 лет») или весьма конкретными («незамужние женщины со средним специальным образо ванием в возрасте от 25 до 34 лет с годовым доходом 50 ты сяч долларов и выше»). доходу и т. Демографический подход не является единственным при классификации пользователей. как они вос принимают окружающий мир в целом или конкретную те му вашего сайта. семейному положению. При разработке вебсайтов существует еще один важный момент – отношение пользователей к современным техно логиям и к самой Всемирной паутине.58 Глава 3. п. Однако документирование психографических профилей ваших пользователей позволит вам узнать то. нередко обладают сходными воззрениями. разнообразие возрастает экспоненциально. Зачастую психография сильно коррели рует с демографией: люди из одной возрастной группы. чего не ска жет демография. Если же сайт рассчитан на клиентскую аудиторию. но все же имеется пара общепринятых подходов. живущие в одной местности и имеющие одинаковый уро вень доходов.

и к другим. Сегментация пользовательской аудитории помогает лучше понять потреб* ности пользователей за счет разбиения аудитории на группы людей с общими потребностями. . но проектировщики должны приспосабли ваться и к тем.Потребности пользователей 59 ли им пользоваться техническими устройствами? Стремят ся ли они все время иметь самую последнюю модель или покупают компьютер раз в пять лет? Технофобы и опыт ные пользователи смотрят на вебсайты совершенно раз ными глазами. Ответы на подобные вопросы помогут нам в этом.

насколько они разбираются в предмете или теме сайта. Есть еще одна важная причина для определения сегментов пользовательской аудитории. чем продажа их профессиональному повару. На практике вам нужно столь ко сегментов. Процесс про дажи кухонных принадлежностей молодой хозяйке проис ходит иначе. скорее всего. вы. нам нужно понимание того. следует предло жить программу. а прямо проти воположны. Новичкам. То. с которыми работаете. если вы исследуете сегмент. что группа от 18 до 24 лет во многом схожа с груп пой от 25 до 34. Определение сегментов аудитории – только средство для раскрытия по требностей пользователей. Приложение для торговли акциями. Иногда потребности разных групп пользователей не просто различны. Уровень стратегии Кроме представления о том. их можно будет объединить. если вдруг ока жется. как люди используют информацию. ориентированное на новичков фондового рынка. нежели у самого абитуриента. возможно. сколько имеется различных групп пользова тельских потребностей. вклю чающий женщин со средним специальным образованием в возрасте от 25 до 34 лет. захотите разбить первоначальную группу от 25 до 34 лет на две. разбивающую процедуру покупки на простые шаги. должно работать иначе. вероятно. вы. Иденти фикация различных ролей посетителей вашего сайта по может вам разделять и анализировать их потребности. часто зависит от их социальных и профессиональных ролей. Например. насколько пользователи зна комы с современными технологиями и как чувствуют себя в их окружении. У родителей абитуриента будут. Вернемся к примеру с приложением для тор говли акциями. Если разница значительна. чем приложение для опытных инвесторов. Экспертам же подобный подход лишь соз . вероятно. пересмотрите сегменты. вы можете обнаружить отличия в потребностях возрастной группы от 30 до 34 лет от по требностей группы 25–29 лет. существенно иные потребно сти в информации.60 Глава 3. Проведя некоторые исследования групп ваших пользова телей. С другой стороны.

При этом все они ос нованы на одном принципе: пользователям нужны удоб ные продукты. посвященную вебди зайну. мы сна чала должны понять. опросы. что нужно нашим пользователям. встречали слово юзабилити. Юзабилити и исследование пользовательской аудитории Если вы уже изучали литературу. Раз ные люди вкладывают в него разный смысл. что это тестирование проекта на репрезентативной группе пользователей. Очевидно. что такое дизайн удобного для пользователя вебсайта. либо предоставить пользо вателям два разных способа решения одной задачи. Какой бы подход мы ни выбрали. иногда они даже согласуются друг с другом. фо кусгруппы – лучше подходят для сбора информации об общих взглядах и представлениях пользователей. кто они. Для других этот термин означает следование одной совершенно конкретной методологии. созданных для систематизации представлений о том. Одни счита ют. скорее всего. Существует множество различных определений и правил. Это действительно самая универсальная пользовательская потребность. это стратегическое решение скажется на всех наших последующих решениях в отно шении опыта взаимодействия. Однако в любом случае речь идет о стремлении сделать продукты простыми в использовании. Чтобы осознать.Потребности пользователей даст помехи – им нужен монолитный интерфейс. предос тавляющий быстрый доступ к широкому набору функций. мы не сможем одним решением удовлетворить потребности обеих групп пользователей. Здесь перед нами возникает выбор: либо сосредоточиться на одном сегменте аудитории и исключить другой. позволяющих достичь такого понимания. Исследование пользова& тельской аудитории состоит в сборе данных. вы. 61 . Некоторые методы исследования – интервью.

Уровень стратегии Другие методы – пользовательские тестирования и поле вые исследования – хороши для понимания конкретных аспектов поведения пользователей и их взаимодействия с сайтом. неизбежно ограничит количество уча стников исследования (хотя бы потому. Маркетинговые исследования. могут стать ценным источником общей информа ции о пользователях. подобно опросам и фокус группам. направленные на получение нужной информации. Вообще говоря. что сайт. Од нако при этом дополнительное время. почему они ведут себя именно так? Чем четче вы опишете свои интересы. позволяющий вам понять ваших пользователей в контексте их повседневной жизни (отсю да и название). Недостатками контекстуального иссле дования являются высокая стоимость и большие затраты времени. но хотите выяснить. а ваш проект требует глубокого знания пользова тельской аудитории. покупающих запча сти для самолетов. надо когданибудь запустить). тем более точно и эффек тивно будут сформулированы вопросы. которые в совокупности образуют мощный и всеобъемлю щий инструментарий. какую информа цию хотите получить с их помощью. Вам нужно знать. контекстуальное исследование может . чем больше времени вы сможете уделить каждому отдельному пользователю. примененные в более узком масштабе. позволяют изучить поведение людей. Однако если вы располагаете достаточными ре сурсами. Например. тем более подробную информацию вы получите в результате исследования. применяемые антропологами при изучении культур и сообществ. как ведут себя пользователи.62 Глава 3. В основе этого инструментария лежат мето ды. в конце концов. методы исследования поведения кочевых племен. если вы четко сформулировали для себя. Эти методы особенно эффективны. когда взаимодействуют с какой то конкретной функцией сайта? Или вы это уже знаете. потраченное на каж дого пользователя. Контекстуальное исследование – это целый набор методов.

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

Чтобы сделать пользователей более конкретными. как им кажется более естественным. как пользователи понимают предмет сайта. или профилями пользователей). предлагае мая вашим сайтом. Уровень стратегии Другим подходом к пользовательскому тестированию явля ется работа с прототипами. как в их мышлении представляется информация. Придавая облик и имя разрозненным элементам данных. каж дая из которых содержит название.64 Глава 3. и распределяют кар точки по стопкам так. создающих иллюзию законченного сайта. как пользовате ли классифицируют или группируют информационные элементы. описание или изобра жение элемента содержимого сайта. вы лучше поймете. персонажи помогут вам пом нить о людях в ходе работы над проектом. Вы можете пригласить пользовате лей. но иногда за всей этой статистикой вы рискуете проглядеть реальных людей. В крупномасштабных проектах на разных этапах используются различные виды прототипов с целью полу чения информации от пользователей на протяжении всего процесса разработки. от эскизов на бумаге или макетов с упро щенными вариантами HTMLстраниц до прототипов с рабо тающими ссылками. Пользователи получают пачку карточек. чтобы предложить им выполнить различные задания. . можно превратить их в персонажи (иногда называемые мо делями пользователей. которые позволят вам составить представление о том. Сбор разнообразной информации о ваших пользователях может дать исключительно ценные результаты. который представ ляет потребности целой группы реальных пользователей. Персонаж – это вымышленный герой. Карточная сорти& ровка – один из приемов выяснения того. Анализируя результаты сортировки карточек. Иногда сам сайт при пользовательском тестировании вооб ще не используется. Последние могут иметь самые разные формы. полученным в результате исследования и сегментации пользовательской аудитории. проведен ной несколькими пользователями.

чтобы персонажи соответствовали тому. с двумя детьми. и тогда. кто хочет на чать собственное дело. Мы хотим. Его зовут Фрэнк. призванным вдохнуть жизнь в этих героев. и он подумывает об откры тии фирмы по изготовлению и продаже мебели. Его знакомые хва лят мебель. он женат. Предположим. Это женщина 42 лет. принимая важные 65 .Потребности пользователей Рассмотрим пример. У нее вызы вает досаду необходимость работать на когото. стоит ли ему бросать работу водителя школьного авто буса ради такого бизнеса. наш сайт разрабаты вается для информационной поддержки тех. Из исследований мы знаем. добавив фотографии к собранной нами информации. Чтобы наши персонажи запоминались еще лучше. Перво му дадим имя Джанет. другие сталкиваются с проблемами ведения бизнеса впервые. но конкретные биографические подробности яв ляются полным вымыслом. мы возьмем пару подходящих фотографий и сделаем Джа нет и Фрэнка еще более реальными. Джанет и Фрэнк представляют тот диапазон потребностей пользователей. замещающих реальных людей. Наши пользователи уверенно чувствуют себя в Интернете и вообще свободно обращаются с компью тером. Последние два года она занимает пост ви цепрезидента крупной бухгалтерской фирмы. В этом случае имеет смысл создать два персонажа. что на ша аудитория в основном находится в возрастном диапазо не от 30 до 45 лет. Ему 37 лет. принимая решения об опыте взаимодействия пользователей с нашим сайтом. которую он делает. Другой персонаж – мужчина. Некоторые уже имеют большой опыт в мире бизне са. Много лет он занимается столярными работами в качестве хобби. Он не уве рен. и она хочет открыть собственную фирму. Эти профили можно рас печатать и развесить в офисе. замужняя. что мы знаем о пользователях из результатов иссле дований. Откуда взялась эта информация? По большей части мы ее сочинили. о котором мы должны помнить. имеет одного ребенка.

66 Глава 3. . они играют роль образцов при проектировании опыта взаимодействия. Персонажи – это вымышленные пользователи. Уровень стратегии решения. созданные на основе результатов исследова* ний пользовательской аудитории. мы будем спрашивать себя: «Подойдет ли это на шей Джанет? Как к этому отнесется Фрэнк?» Персонажи помогают нам помнить о пользователях на каждом этапе разработки.

67 . если сайт разрабатывается. а стратеги ни за один элемент сайта непосредст венно не отвечают.Распределение ролей в команде и процесс разработки Распределение ролей в команде и процесс разработки Вопросы стратегии касаются каждого. Заинтересованные сто& роны – это сотрудники. кто ежедневно общается с ними. Но несмотря на этот факт (или. что касается потребно стей пользователей. Одна группа сотрудников при формулировании стратегии часто оказывается не у дел. особенно в том. Речь идет о рядовых членах – людях. а не их менеджеры. Многое зависит от формальной процедуры принятия решений. А именно они. Они могут внести в формулировку стратегии гораздо больший вклад. разрабатывающего продукт и нуждающегося в этих от зывах. как раз по этой причине) за формулиров ку стратегических целей зачастую не отвечает никто. среди заинтересованных сторон долж ны быть представители отдела маркетинга. Просто удиви тельно. чем руководство. а что нет. на которые повлияет стратегия сайта. Однако поскольку такая специфическая услуга сто ит дорого. что годится. участвующие в принятии ключевых решений и отвечающие за работу тех структур организа ции. чтобы предоставить клиентам техни ческую поддержку. Обычно стратеги беседуют с большим количеством сотруд ников фирмы. Ино гда специально для решения этих вопросов на проекты своих клиентов консалтинговые фирмы приглашают стра& тегов. обычно имеют более точ ное представление о том. строчка «консультации по стратегии» вычеркивается из бюджета проекта в первую очередь. Никто не знает проблемы клиентов лучше тех. чтобы получить всесторонний взгляд на цели сайта и потребности пользователей. как редко отзывы клиентов доходят до коллекти ва. ответственных за повседневную работу компании. кто вовлечен в раз работку опыта взаимодействия. действующей в организации (и от неформальных отношений внутри нее). возможно. отдела по работе с клиентами и менеджеры продуктов. Например.

нежели произвести впечатление объемом и многосло вием. Старайтесь написать лако ничный и конкретный документ. чтобы принимать обоснован . Этот документ создавался не для того. специалисты по информаци онной архитектуре. Иногда по требности пользователей документируются в отдельном отчете об исследовании пользовательской аудитории (хотя имеются определенные преимущества в том. рядовыми сотрудниками и пользовате лями. Нет необходимости включать в документ все собранные данные и все цитаты. – он позволяет заручиться поддержкой других структур организации. менеджеры проекта – нуждаются в до кументе о стратегии сайта. Когда речь идет о документировании стратегии. Этот документ – не просто список целей. что вы можете сделать с документом о стра тегии сайта. «больше» не всегда означает «лучше». Если вы хотите окупить усилия. Помните. вовлеченной в проектиро вание опыта взаимодействия. Цели и их анализ часто подкреп ляются буквальными цитатами из бесед с заинтересован ными сторонами. Самое худшее. следует активно использовать его на протяжении всей работы над проектом. что многие из тех. затрачен ные на его создание. – ограничить доступ к нему членов команды. просто не имеют времени и жела ния продираться через сотни страниц сопроводительных материалов. программисты. чтобы отправиться в архив. кто будет его читать. Гораздо важнее донести до них суть страте гии. Эффективный документ по стратегии не просто явля ется руководством для команды.68 Глава 3. чтобы вся ин формация находилась в одном месте). подтвер ждающие вашу точку зрения. и отнюдь не только для горстки руководителей верхнего звена. Все участники – дизайнеры. в нем анализируется взаимосвязь между различными целями и их место в контексте дея тельности организации. Уровень стратегии Цели сайта и потребности пользователей часто определя ются в формальном документе под названием «Стратегия сайта» или «Общее представление о сайте». Эти цитаты наглядно иллюстрируют вопросы стра тегии проекта.

Определение стратегии должно произойти в начале процес са разработки опыта взаимодействия. Alan. но это не означает. Что читать дальше Cooper. – Пер. New Riders.jjg. – СПб. Morgan Kaufmann. Jared M.net/elements/resources/ 1 2 Алан Купер «Психбольница в руках пациентов.Что читать дальше ные решения в своей работе. или почему вы сокие технологии сводят нас с ума и как восстановить душев ное равновесие». Web Site Usability: A Designer’s Guide. Second Edition. или «не застав ляйте меня думать!». ответственной за реализацию стратегии.1 Krug. прежде чем работа над проектом продолжится. Вебресурсы: www. et al. Don’t Make Me Think: A Common Sense Ap proach to Web Usability. Такие документы часто содер жат конфиденциальную информацию. – Пер. с англ. Хотя погоня за движу щейся целью может привести к огромной трате времени и ресурсов (не говоря о внутреннем недовольстве в коллек тиве). The Inmates Are Running the Asylum: Why HighTech Products Drive Us Crazy and How to Restore the Sanity. 2е издание. 1999. Стив Круг «Вебдизайн: книга Стива Круга. значит ограничить ее способность справиться с задачей. 2004. с англ.: СимволПлюс. 2006.2 Spool. – СПб. 1998. что стратегия должна быть высечена в камне.: Сим волПлюс. 2008. 69 . Sams. Steve. но прятать их от команды. стратегия может и должна развиваться и уточнять ся.. При систематическом пересмотре она послужит посто янным источником вдохновения на протяжении всей раз работки.

ГЛА ВА 4 Уровень набора возможностей ФУНКЦИОНАЛЬНЫЕ СПЕЦИФИКАЦИИ И ТРЕБОВАНИЯ К КОНТЕНТУ .

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

Есть дела. какой смысл занудно протоко лировать все и вся. что заставляет вас выявлять потенци альные противоречия и «шероховатости» конечного про дукта на том этапе. представлявший собой постоян но меняющуюся мешанину функциональных возможно . Однако ни один из этих фактов не объяснял. мы ничего не знали о наших пользователях. которые мы выполняем. так как дает вашей ко манде точку отсчета для всей последующей работы над проектом и общий язык. – например. а я был единственным человеком в компании. когда сам результат существует лишь в вашей голове. Процесс ценен тем. Уровень набора возможностей Определение набора возможностей Есть вещи. Определение набора возможностей системы относится к обеим категориям сразу: это ценный процесс. а что придется отложить на потом. почему мы не можем закончить работу над продуктом. Результат представляет ценность. имевшим хоть какойто опыт разработки для Всемирной паутины.72 Глава 4. Мы можем определить. которое. который дает ценный результат. В конце концов. Определение требований убирает из про цесса разработки неоднозначность. бегаем трусцой по утрам или разучиваем гаммы на фортепиано. чтобы получить результат. навеки застряло в состоянии бетаверсии: почти (но не совсем) готово к передаче пользователям. за что следует взяться прямо сейчас. Многое в на шей работе было неправильным: технология была нена дежной. Главным камнем преткновения было наше нежелание документировать тре бования. каза лось. которые мы делаем ради самого процесса – на пример. печем пирог с сыром или чиним автомобиль. на котором вы сможете обсуж дать эту работу. если мы и так работаем в одной комна те? Да и нашему менеджеру необходимо было направить всю свою энергию на отслеживание новых технологиче ских веяний… Результатом был продукт. Однажды я работал над вебприложением.

Определение набора возможностей стей разной степени завершенности. Либо. что за нее отвечают другие. Работа кипела. скорее всего. Если никто не знал четкого набора возможностей продукта. будет напоминать детскую игру в испорченный теле фон: каждый участник проекта будет судить о продукте со слов другого участника. Любая прочитанная кемто из нас статья. то все сразу поймут это. что проект закончен? Существуют две основных причины для документирова ния требований к продукту. Сопроводительная документация и спе цификации могут показаться не связанными друг с другом на ранних этапах. Причина №1: вы будете знать. пришедшая комуни будь в голову во время возни с продуктом. без какихлибо контрольных точек – и это му не было ни конца ни края. Имея набор воз можностей перед глазами. что именно вы создаете Эта идея кажется очевидной. Конечный продукт перестанет быть смутной картиной в голове менеджера проекта и превратится в нечто осязаемое. и рано или поздно информация исказится. но без графика. Если вы точно опишете то. но для команды разработчи ков того вебприложения она была полной неожиданно стью. любая мысль. Без документированных требований ваш проект. потому что каждый будет предполагать. каждый будет знать цели проекта – и когда они будут достигнуты. но оформление их в виде требований 73 . хуже того. что собираетесь постро ить. какойто из важных частей проекта не будет заниматься никто. как можно было понять. вы сможете разглядеть те связи между отдельными составляющими. с чем может иметь дело любой сотрудник компании – от руководителей высшего звена до рядовых инженеров. Строго определенный набор требований позволит вам эф фективнее распределять ответственность. вдохновляла нас на обсуждение новой функциональности. которые иначе были бы неочевидными.

Документиро ванные требования снабдят вас механизмом оценки идей. только ко гда вам удается учесть их в долгосрочных планах. Причина №2: вы будете знать. когда про ект идет полным ходом. Когда вы знаете. которые им не соответствуют. вы знаете также. то и дело возникают разнообраз ные поводы для создания новых функций. Уровень набора возможностей к продукту ясно покажет. могут послужить основой для определения следующей контроль* ной точки в вашем рабочем цикле. что их содержание сильно пере крывается и отвечать за них должна одна и та же рабочая группа. что вы не создаете Многие функциональные возможности выглядят неплохо на уровне идей. Кроме того. появляющихся при работе над проектом. что не нужно делать прямо сейчас. Пред . не уклады* вающиеся в текущее расписание. Сбор всех возникающих гениальных идей обретает реальную ценность. Опреде лив конкретный набор требований и отложив на будущее реализацию всех запросов. вы сможете управлять рабочим процессом осознанно и це ленаправленно. Требования.74 Глава 4. что не будете делать. однако они не обязательно согласуются со стратегическими целями проекта. Без сознательного управления требованиями к продукту вы попадете в кошмарную «проектную лавину».

и в конце концов терпит неминуемое крушение. сметая на своем пути все сроки и бюджетные планы. что составляет «перечень функций» программного продук та. казалось бы. Всемирная паутина как программный интерфейс Всемирная паутина как гипертекстовое информационное пространство Cтруктура во з р й бо те н а н о сФункциональные ж м о спецификации Требования к контенту Cтратегия . а на него понемногу налипает снег – и в конце кон цов ком становится таким огромным. что остановить его движение просто невозможно. к новому вопросу: «Что мы собираемся создать?». На уровне набора возможностей проявляется разделение Всемирной паутины на программные интерфейсы и гипер текстовые информационные пространства. который задавали себе на уровне стратегии. Но в сумме они превращают проект в снежный ком. На «гипертекстовой» половине мы имеем дело с контен том – традиционной сферой издательских и маркетинго вых компаний. не прибавляет много работы. который катится. который медленно скатывается с горы.Функциональность и контент 75 ставьте себе снежный ком. Функциональность и контент На уровне набора возможностей мы переходим от абст рактного вопроса «Зачем мы делаем этот сайт?». Точно так же каждое допол нительное требование. На «программ ной» половине мы занимаемся функциональностью – тем.

чтобы охватить оба варианта. какую информацию должен доне сти контент сайта. В некоторых организациях эти термины обо значают два разных понятия: функциональные требова ния формулируются в начале проекта для описания того. так и характеристик содержимого. проводя мозговой штурм с участием . будь то база данных или коробка с газетными вырезками. При разработке программного обеспечения набор возмож ностей определяется в документах. предоставляемого пользователю. а требо ваниями – его содержимое. Чтобы понять. что с ними можно обра щаться почти одинаково. Далее в этой главе я буду упо треблять термин «возможность» для обозначения как про граммных функций. как правило. но когда мы начинаем определять набор воз можностей системы. эти термины взаимозаменяемы. Некоторые люди пользуются термином «спецификации функциональных требований». Язык этой главы по большей части является языком раз работчиков программного обеспечения. В других случаях спецификации разраба тываются вскоре после формулирования требований для уточнения деталей реализации. Я буду называть функцио нальными спецификациями собственно документ. что она дела ет в реальности. Этот неформальный процесс сбора требований к контенту на са мом деле не так уж радикально отличается от того. что де лают разработчики. содержащих требова ния к функциональности.76 Глава 4. контент и функциональность не имеют ниче го общего. оказывается. однако основные принципы остаются теми же. а спецификации созда ются на заключительном этапе и описывают. При разработке контента определение требований часто не включается в формальную процедуру. Однако. Уровень набора возможностей Казалось бы. что система должна будет делать. разработчику контента предстоит побе седовать с людьми или изучить исходные материалы. или в функциональных специ& фикациях. Однако изложен ное здесь в той же степени применимо и к контенту. типичную для раз работки программ.

Цели и подходы в обоих случаях одинаковы. Функциональность.Функциональность и контент 77 заинтересованных сторон и изучая имеющуюся докумен тацию. Вы сами решае те. В наше время для работы с наполнением сайта обыч но применяются системы управления контентом (CMS – content management system). В любом случае вам придется подстроить систему под нужды вашей организа ции и под контент вашего будущего сайта. до предельно облег ченных узкоспециализированных инструментов. способных ав томатически генерировать страницы на основе десятков различных источников информации. Требования к контенту часто имеют функциональный под текст. Должен ли каж дый прессрелиз визироваться шестью вицепрезидентами и юристом? Система управления контентом обязана под держивать цепочку сбора резолюций как часть рабочего . воспользоваться одной из множества систем с открытым исходным кодом или разработать собственную с нуля. зависит от природы самого контен та. предна значенных для максимально эффективного управления контентом какоголибо конкретного вида. Система управления контентом способна автоматизировать рабочий процесс подготовки контента и донесения его до пользователя. Такие системы бывают самы ми разными – от очень больших и сложных. Нужно ли вам поддерживать несколько языков и раз личные форматы данных? Системе управления контентом предстоит обрабатывать все эти элементы. которая вам потребуется от системы управления контентом. купить ли вам коммерческую систему.

Уровень набора возможностей процесса. Будут ли элементы содержимого сайта автомати чески переупорядочиваться в соответствии с предпочте ниями каждого пользователя? Система управления кон тентом должна уметь предоставлять данные в таком не простом режиме.78 Глава 4. Другой пример – технические требования (например. подразумевают краткое описание определенной возможности. поддерживаемые броузеры и опе рационные системы). Потребуются ли инструкции на экране настроек? Как насчет сообщений об ошибках? Все это ктото должен написать. Самым надежным источником требований всегда будут ва ши пользователи. упомянутые в главе 3. говоря о требованиях. и произошло это потому. Лучший способ узнать. когда я вижу на вебсайте сообще ние типа «Исключение: передана пустая строка». способны по мочь вам лучше понять. что в требования к кон тенту никто не добавил сообщения об ошибках. Есть требования. что в готовом продукте остался текст предупрежде ния. В большинстве случаев разработчики. . затрагивающие только какуюто отдель ную возможность. связанные с брендингом. Функциональные требования со своей стороны влияют на контент. если бы ктонибудь из их раз работчиков взял на себя труд пристально посмотреть на контент приложения. Огромное количество якобы высокотехнологичных проектов могло бы стать радикально лучше. чего они хотят. вставленный кемто из программистов в качестве за глушки. которой должен обладать ко нечный продукт. которые касаются сайта в целом. Каждый раз. Приемы исследования пользова тельской аудитории. – это просто спросить их. какие функциональные возмож ности нужны пользователям вашего сайта. я пони маю. Од ним из распространенных примеров являются требования. Сбор требований Бывают требования.

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

Нашел ли конкурент особо эффективный способ достижения ка койлибо из стратегических целей? Как он разрешил про тиворечия. почти наверняка пытается удовлетворить те же потребно сти пользователей и реализовать те же цели сайта. эта дискуссия может стать откровением для каждого. На большинстве корпоративных сайтов. покупать ли ему именно ваш товар. отличающейся от привычной для них. Уровень набора возможностей Если собрать в одной комнате инженера. называемые сценариями. При выявлении требований к продукту мы можем снова прибегнуть к помощи персонажей. Как ваш сайт сможет упростить для него процессы выбора и последующего приобретения вашего товара? В главе 3 мы рассмотрели технику создания вымышлен ных пользователей. Источником вдохновения могут послужить и наши конку ренты. с которыми мы столкнулись? Даже сайты. занимающийся тем же бизнесом.80 Глава 4. они начи нают шире смотреть и на связанные с разработкой сайта проблемы. мы сможем вы работать требования. Предположим. как оформляют . Ктото другой. мо гут послужить плодотворным источником требований. сочинив для на ших героев маленькие рассказы. через кото рую могли бы пройти наши пользователи. Представив себе процедуру. соответствующие их желаниям. Выработка требований часто сводится к поиску способов устранения препятствий. один из ваших пользователей уже решил сделать покупку. Изучив. и на способы их решения. например. сотрудника отде ла по работе с клиентами и специалиста по маркетингу и предложить им обсудить вебсайт. называемых персонажами. публику ется информация о вакансиях. но не опреде лился окончательно. которая по зволяет лучше понять потребности пользовательской ауди тории. и имеют возможность реагировать на нее. как пер сонаж пытается удовлетворить какиелибо пользователь ские потребности. простое описание того. Сценарий – это короткое. Когда люди сталкиваются с точкой зрения на сайт. не являющиеся прямыми конкурентами.

и все отдают себе в этом отчет – такова природа работы над техническими продуктами. В процессе реализации многое меняется. что их создание – пустая трата времени. найдем подход. что вероятнее. что потраченное на их чтение время – это время. как вы хотели. широкомасштаб ный тематический сайт может содержать однородный кон тент. а это лишь усиливает впечатление. так что будет достаточно сформулировать лишь са мые общие требования к этому контенту. Иногда то. что должно было работать. Если цель проекта со стоит в реализации одной очень сложной подсистемы.Функциональные спецификации такой контент компании за пределами нашей индустрии. Функциональные спецификации В определенных кругах функциональные спецификации имеют плохую репутацию. возможно. мы. который даст нам преиму щество перед прямым конкурентом. Правильное решение – не лениться син хронизировать спецификации с ходом разработки. мо жет потребоваться весьма высокая степень детализации. работает не совсем так. Однако это не повод объявлять спецификации за ведомо проигрышной затеей и отказываться от них. И наоборот. Программисты ненавидят спе цификации за их занудность и за то. В результате спецификации остаются непрочитанны ми. что они не отражают реальный продукт. На оборот. Уровень детализации требований часто зависит от специ фики набора возможностей проекта. не ра ботает или. отнятое от написания програм мы. нельзя сдаваться и заявлять о тщетности написания спецификаций. Если по ходу работы над проектом чтото меняет ся. даже если набор возможностей подсистемы невелик по от ношению ко всему проекту. этот факт лишь подчеркивает необходимость соз дания спецификаций и поддержания их в актуальном со стоянии. Одна из претензий к функциональным спецификациям со стоит в том. 81 .

Сайт будет удовлетворять Разделу 508 Акта о людях с ограниченными возможностями. Сравните эти примеры. 1. Что значит «доступен»? Если все картинки на сайте сопровождаются текстовыми описаниями. Убрав возможность различных интерпретаций. что сайт доступен для глухих? К счастью. лучше написать При попытке купить воздушный змей без веревки система направит пользователя на страницу. значит ли это. какие пробелы он содержит. 2. этого достаточно? Кто считается человеком с ограниченными физическими возможностя ми? Если на сайте не воспроизводится звук. Конгресс США уже выработал эти определе ния. второй ва . подробно формулирующему наши цели. вместо Система не позволит купить воздушный змей без веревки.Глава 4. Например. где он сможет приобрести веревку. выполнены ли эти требования. Сайт будет доступен людям с ограниченными физиче скими возможностями. Навскидку первый пример производит впечатление четко сформулированного требования. мы смо жем определить. но даже без глубокого анализа видно. Только оставив как можно меньше пу тей для неправильной интерпретации требований. Будьте позитивны. предот вращающие нежелательный поворот событий. Будьте конкретны. Вместо описания плохого или непра вильного поведения системы опишите ее действия. Второй пример отсылает нас к конкретному юридиче скому документу. Уровень набора возможностей 82 Независимо от размера и сложности проекта при формули ровании требований следует руководствоваться некоторы ми общими правилами.

что невозможно потребовать от сай та броскости. содержащему рекомендации о визуальном стиле бренда компании. Однако требования остаются довольно произвольными. Понятие «броскость» попросту исчезло из требований. а не на объективно сформулиро ванные критерии. Чтобы решить. Требования обязаны быть проверяемыми. Уэйн никаким образом не участвует в проекте. разбирающего почту.Функциональные спецификации риант требования исключает любые споры. Избегайте субъективных формулировок. Вме сто этого мы имеем ясную и однозначную ссылку на сущест вующие рекомендации. Мое представление о броскости может отличаться от вашего и почти наверняка не имеет ничего общего с мне нием президента компании. Это просто еще один способ выражаться ясно и исключать из требований двусмысленность (а значит. что сайту присущи такие субъ ективные качества. Вот очень субъективное утверждение: Стиль сайта будет броским и ярким. поскольку мы полага емся на суждение Уэйна. то есть должен существовать способ продемонстрировать. как «броский» и «яркий». Возможно. ответственный 83 . Явно показать. возможность разночтений). которые могли бы возникнуть в течение или после работы над проектом. но спонсор проекта полагается на его представления о том. – трудная задача. Сказанное не означает. Будем надеяться. что эти представления не расходятся с мнением пользователей. что явля ется броским. что требования нарушены. Вам просто нужно сформулировать крите рии оценки: Сайт должен быть броским с точки зрения Уэйна – клерка. насколько броским является корпоративный стиль компании. лучше всего будет такое тре бование: Внешний вид сайта должен соответствовать доку менту.

Уровень набора возможностей сотрудник отдела маркетинга может проконсультировать ся с Уэйном. Например. относящий ся к спортивному событию. мы скажем. со провождаемой фотографиями и видеофрагментами. вместо утверждения. В ходе обсуждения с заинтересованными сторонами требований к контенту одним из первых возникает поже лание: «На нашем сайте должны быть ответы на часто за даваемые вопросы». Кон кретизация всех типов контента. звук и видео тоже являются контентом. Подобно тому как метрики успешности делают измеримы ми стратегические цели. что требование не выполнено. мы по большей части имеем в виду текст. Однако нельзя забывать. можно ли его создать в принципе). чтобы удовлетворить како муто одному требованию. позволяет определить необходи мые для создания этого контента ресурсы (или хотя бы по нять. посоветоваться со своей дочерьюподростком или даже поинтересоваться результатами исследования пользовательской аудитории. Не следует путать формат элемента контента и его назна чение. что система должна иметь «высокую производительность».84 Глава 4. контент. Например. Зато мы теперь всегда уверенно скажем. сформулиро вав некоторые требования в количественных терминах. чтобы она была в состоянии одновре менно обслужить не менее 1000 пользователей. Требования к контенту Говоря о контенте. может состоять из статьи. Мы также можем устранить субъективность. формулировка требований в коли чественных терминах поможет нам понять. FAQ – Frequently Asked Questions) на са мом деле относится к формату контента: это простая по . удовлетворены ли эти требования. что изображения. выполнены ли наши требования. Это его дело. Эти разные виды кон тента могут комбинироваться. следует потребовать. связанных с данной возможностью системы. Если у ко нечного продукта поле со счетчиком пользователей будет трехзначным. Однако термин «часто задаваемые во просы» («ЧаВо».

необходимую для проек тирования сайта вокруг этого контента. Реальная ценность ЧаВо для пользователей состоит в организации непосред ственного доступа к часто требующейся информации. обоснованные решения на протяже нии всей работы над проектом. потому что элементы. мы сможем принимать разумные. которые будут размещены на сайте. но когда внимание сосредоточено на формате. Если мы заранее знаем размеры эле ментов. кто за какой элемент отвечает. будет за мечательной. Нам нужно лишь со брать существенную информацию. оказались трудны в реализации. которые смог придумать разработ чик контента. скорее всего. и в результате предлагаются ответы на те вопросы. 85 . Нередко «частотная» составляющая в раз деле «ЧаВо» игнорируется. которые всем нравились в проек те. Эти количественные оценки не обязаны быть точны ми – достаточно приблизительных. Ожидаемый объем каждого элемента контента оказывает огромное влияние на принимаемые вами решения. прошедшая проверку на соответствие стратегическим целям. Разработка сайта. Ваши требования к контен ту должны содержать приблизительные оценки объема ка ждого его элемента: количество слов текста. касаю щиеся опыта взаимодействия. получим «белые пятна» на сай те. отлича ется от разработки сайта. так и не определив шись с ответственными за каждый конкретный элемент контента. Если мы погрузимся в рабо ту над проектом слишком глубоко.Требования к контенту следовательность вопросов и ответов. а также аудио и видеофай лов. Важно как можно раньше решить. Любая идея относительно контента. чтобы выполнить требования к «ЧаВо». особенно если за ее реализацию и сопровож дение отвечает ктото другой. Дру гие требования к контенту могут служить той же цели. размеры отдельных скачиваемых файлов вроде PDFдокументов. о самой цели часто забывают. на котором выставлены полноэк раннные фотографии. мы. и в результате никто за них не взялся. размеры изо бражений в пикселях. предоставляющего доступ к миниизображениям.

требует иного подхода. Уровень набора возможностей При разработке требований нередко забывают. и другим. найти когонибудь из отдела маркетинга) и поручить ему подготовку контента к моменту ввода сайта в строй. то со временем ваш сайт будет все меньше и меньше соответствовать потребностям пользова телей. что достаточно разместить материалы на сайте и забыть о них. по крайней ме ре востребованный. значительная часть сведений о мате риалах хранится в реестре контента. Вы можете на нять специалиста на контрактной основе (или. решите. по их мнению. Исходя из потребностей пользователей. нуждается в какомто третьем подходе. как часто. нежели информация для их родителей. а содержимое. как часто пользователи должны возвращаться на сайт. – поможет вам принять наилуч шее решение о способе подачи этого элемента. В проектах. однако. для какой из них предназначен тот или иной элемент контента. когда потребности разных аудиторий вступают в противоречие. обращенная к детям. Вам придется найти разумный компромисс между ожидания ми пользователей и возможностями вашей компании. что идеальная для пользователя частота обновления («Я хочу знать все новости немедленно и круглосуточно!») может оказаться неподъемной для вашей компании. Однако наличие такого . Если вы считаете. Частота обновления определяется стратегическими целями сайта. Отталкива ясь от целей сайта. Составление реестра контента действующего сайта кажется (да и является) скуч ным и утомительным процессом. Но кто будет обновлять это содержимое? Контент. что проще. будет полезно определить. требует постоянного сопровождения. Вот почему для каждого элемента контента необходимо ре шить. как часто он будет обновляться. должна обновляться информация на сайте.86 Глава 4. Такое понимание – особен но в тех случаях. Если ваш сайт нацелен на несколько различных аудиторий. что зани маться контентом сайта – тяжелый труд. Информа ция. подумайте. адресованное и тем. Не забывайте. связанных с большим количеством уже суще ствующего контента.

а иногда одна цель ассоциируется с несколькими различными требованиями. людских или денежных. Ранжирование требований Собирать идеи относительно требований к продукту не так уж трудно. В дополне ние к этим соображениям при определении набора воз можностей появляется еще одно: насколько трудоемким будет процесс реализации этих требований? Некоторые возможности нельзя реализовать по технологи ческим причинам. нежели мы имеем в сво ем распоряжении. будь то сотрудники организации или внешние люди.Ранжирование требований реестра (обычно имеющего форму простой. нам придется оценить возможные требования с точки зрения их соответствия стратегическим целям (целям сайта и потребностям пользователей). что и наличие требований: каждый член команды будет точно знать. Поскольку набор возможностей определяется на основе стратегии. потому что потребуют больше ресурсов. кто сталкивается с продук том. Например. Сложность в том. Почти у любого. чтобы опреде лить. какую возможность следует в него добавить. На практике довольно редко удается найти взаимноодно значное соответствие между стратегическими целями и тре бованиями к продукту. есть хотя бы одно пожелание о том. хотя и про странной электронной таблицы) необходимо по той же при чине. нет способа передавать по Сети запах продуктов. как бы сильно ни хотели этого поль зователи. какие возможности действительно должны быть включены в набор возможностей проекта. 87 . Другие возможности (особенно если речь идет о контенте) не реализуемы. с каким материалом он работает при создании опыта взаимодействия. Иногда одно требование связано с несколькими целями. а мы должны открыть сайт через два. В некоторых случаях это вопрос време ни: на реализацию возможности уйдет три месяца.

(Однако совершенно не возможные вещи останутся невозможными. то технологические или организа ционные изменения иногда (но. что важно. В случае ограничений по времени вы можете отложить реализацию возможности до следующей версии или до очередного этапа проекта. не всегда) мо гут сделать ресурсы менее дефицитными и позволят вам реализовать требуемую функцию.) Возможности системы существуют не в вакууме.88 Глава 4. Даже эле менты контента на вебсайте обычно предполагают нали . Если же ограничения связаны с недостатком ресурсов. Уровень набора возможностей Иногда стратегическая цель определяет несколько требований (слева). В других случаях одно требование может служить разным стратегическим целям (справа). увы.

Впрочем. с которыми сайту приходится иметь дело. а потом вынужденно возвращаются на более глубокий уровень стратегических факторов. по определению выходит за гра ницы набора возможностей. не очевидных на стадии создания документа «Общее пред ставление о сайте». чтобы процесс размещения за каза состоял из одного шага. слишком рано перешли к формулированию требований. как обращаться с полученным содержи мым. В таких случаях решение о том. не в со стоянии принять всю информацию сразу. При этом возврат к рассмотрению стратегии означает. Например. попадут ли со ответствующие особенности системы в набор возможно стей. Следует ли оста вить многошаговый процесс или всетаки переработать ба зу данных? Ответ зависит от ваших стратегических целей. вы можете пересмотреть какието стратегические цели. При обсуждении стратегии заинтересованные стороны обычно начинают разговор с идей. поддерживающих пользователя и информи рующих его о том. Чтобы создать внутренне согласованный. целостный продукт. Любое предложение. Однако если предложение укладывается в вышеизложенные ограничения и при этом кажется неплохой идеей. Это неизбежно приводит к конфликтам возможно стей. Поскольку 89 . слишком часто в конечном итоге определяется кор поративной политикой. пусть даже и не попадающей в область возможностей. эти приоритеты должны стать ре шающими факторами при определении относительных приоритетов предлагаемых возможностей. скорее всего. Внимательно отслеживайте предлагаемые возможности. потребуются компромиссы. Если ваш документ «Стратегия сайта» или «Общее пред ставление о сайте» задает четкую приоритетность ваших стратегических целей. которые свидетельствуют о стратегических изменениях. некото рые пользователи захотят. что вы. касающихся возможно стей системы. но морально устаревшие базы данных.Ранжирование требований чие функций. не согласующее ся со стратегией проекта. ино гда сравнительная важность двух стратегических целей не очень ясна.

Microsoft Press.1 Robertson. – М. он перестанет считать.jjg. что стратегическая цель. с англ. Karl E. которой эта функция соответствует. некоторые возможности оказываются «фавори тами» при формулировке требований к продукту. может быть достигну та другими средствами. что интере сами его группы пренебрегли. Уровень набора возможностей 90 эти люди часто с трудом отделяют функциональность от стратегии. Кто сказал. это легче сказать. Лучшим способом разрешения конфликта заинтересован ных сторон является апелляция к заданной на предыду щих этапах стратегии. Конечно. В ре зультате сбор требований превращается в своего рода тор говлю между заинтересованными сторонами. Software Requirements. 2004. Управлять такими переговорами бывает очень трудно. что «технарям» не требуется умение работать с людьми? Что читать дальше? Wiegers. а не на предлагаемых способах их дости жения. Если вы сумеете убедить менеджера. Addison Wesley.: Русская редакция. 1999.net/elements/resources/ 1 Карл Вигерс «Разработка требований к программному обеспе чению». Suzanne and James Robertson. 1999. Вебресурсы: www. чем сделать. Для разрешения конфликта важно демонст рировать заботу о потребностях заинтересованных сторон. – Пер. Сосредоточьте внимание на страте гических целях. «зацикливше гося» на какойто возможности. .Глава 4. Mastering the Re quirements Process.

.

ГЛА ВА 5 Уровень структуры ПРОЕКТИРОВАНИЕ ВЗАИМОДЕЙСТВИЯ И ИНФОРМАЦИОННАЯ АРХИТЕКТУРА .

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

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

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

. накладываемые системой. как люди пользуются ими. на зывается проектированием взаимодействия. когда вычислительные мощности бы ли существенно ограниченными. и ими трудно пользоваться. но по мере того как компью теры становились все более мощными.96 Глава 5. а разработчики все лучше понимали. но игнорирующую интересы пользователей. неотступно преследовавшую его на всем протяжении его существования: программы сложны. наилучшим считался та кой подход. с ним работающего… Так программное обеспечение приобрело репутацию. который обеспечивал выполнение задания не смотря на ограничения. Уровень структуры По традиции программисты уделяют основное внимание двум аспектам программного обеспечения: что оно делает и как оно это делает. хорошо работающего с точ ки зрения машины. Потребовалось немало времени. Еще какихнибудь десять лет назад обучение «компьютерной грамотности». исключительно эффективную с технической точки зрения. непонятны. – и это позволит отказать ся от отправки клерков на курсы повышения компьютер ной грамотности. наиболее удачный с точки зрения компью тера. призванная помочь разработчикам программного обеспечения в этом деле. Однако подход. Такому положению вещей есть объяс нение: тщательное внимание к этим деталям делает про граммистов хорошими профессионалами. почти никогда не является оптимальным для челове ка. мы в конце концов пришли к мысли. то есть принципам внутреннего устройства и функциони рования компьютеров. хорошо работа ющих с точки зрения человека. считалось единственным способом помочь пользователям ужиться с программным обеспече нием. что можно перейти от разработ ки программного обеспечения. В прежние времена. к созданию программ. Новая дисциплина. Однако в резуль тате программисты могут зайти слишком далеко и постро ить систему.

нет ничего ужасного в нарушении соглашения. и поэтому мы «кладем покупки» в «кор зину» или «вынимаем» их оттуда. Пользователям легче адаптироваться к незнакомому сайту. который пользователь получает? На разных сайтах применяются различные подходы. а система должна пре доставить функции. например. если у вас есть на то веские причины. Конеч но. но только в том случае. чтобы сайт вел себя последовательно. концептуальной моделью компонента «корзи на с покупками» типичного коммерческого сайта является контейнер. так и модель каталога прекрасно подходят для размещения заказов в Сети. Как модель универсама. форма заказа по каталогу. решите придерживаться этого соглашения. вы. Знание концеп туальной модели позволит вам принимать последователь ные проектные решения. а не представлял элемент местом и объ ектом попеременно. которое посещает пользователь. – важно. Например. концептуальной моделью для этого компо нента был бы другой аналог из реального мира – напри мер. если там использу ются привычные для них концептуальные модели. так и на используемый в интерфейсе язык. позволяющие это сделать. скорее всего. типичные для традици онной корзины. Какую выбрать? Модель универсама широко распространена. 97 . Возьмем. а метафоре «оформить покупку» пришла бы на смену метафора «отправить заказ».Проектирование взаимодействия Концептуальные модели Собственное представление пользователей о поведении созданных нами интерактивных компонентов называется концептуальной моделью. Предположим. или объект. элемент контента: что это – место. будет ли элемент кон тента местом или объектом. то есть имеет статус соглашения. которая заменила бы функции «положить» и «вынуть». Тогда система обеспечива ла бы функцию «редактировать». Эта метафора влияет как на дизайн компонента. Контейнер со держит объекты. Неважно. Если ваши пользователи делают много покупок на других вебсайтах.

чтобы мы сами постоянно придержи вались концептуальной модели на протяжении всего про цесса проектирования взаимодействия. Гораздо важнее. позволяв шие «переворачивать страницы». телефоном на другой и т. Понимание моде лей. а на каждой странице располагался ее номер и элементы интерфейса. На практике это ино гда не только не помогает пользователям. но запутывает их. потому что его поведение будет соответ ствовать их ожиданиям. Раньше глав ная страница сайта авиакомпании Southwest Airlines со держала только изображение стойки для обслуживания клиентов со стопкой брошюр на одной стороне. Уровень структуры а также имеется альтернативная концептуальная модель. какой концептуальной модели мы следуем. В течение нескольких лет сайт служил на глядным примером концептуальной модели. с которыми пользователи приходят на сайт (считают ли они его универсамом или каталогом). Концептуальная модель может относиться к какомуто од ному компоненту системы. Сайт имел «обложку». но отсюда не следует. а может охватывать всю систему в целом. п. В идеальном случае нет необходи мости сообщать пользователям. Процедура бронирования билетов может быть аналогом телефонного звонка. что кон цептуальная модель реального журнала плохо переносит ся в онлайновую среду. Строить концептуальные модели на основе метафор. зашедшей слишком далеко. концептуальной моделью для него был обыч ный журнал.98 Глава 5. отвечающая потребностям пользователей. – очень удачный подход. и сайт Slate в конце концов отка зался от этой концепции. помогает нам вы брать концептуальную модель. Когда был запущен сайт Slate с новостями и ком ментариями. которая будет работать наиболее эффективно. вклю чающих в себя аналоги функций системы. но при этом важно не принимать метафоры слишком буквально. они все поймут интуитивно по мере общения с сайтом. Вовсе не обязательно предъявлять наши концептуальные модели пользователям в явном виде. взятые из реаль ного мира. . Время показало.

Старый сайт авиакомпании Southwest Airlines – классический пример концептуальной модели. слишком тесно связан* ной с объектами реального мира. авиакомпании надоело быть отрицательным примером. .Проектирование взаимодействия 99 что система бронирования билетов должна быть представ лена телефоном. Повидимому. и сейчас ее сайт менее метафори чен и значительно более функционален. На обновленном сайте Southwest Airlines контент и функциональ* ность стали более очевидными.

машина никуда не поедет. (Если вы работали с редактором Microsoft Word. Тогда система должна сделать все возможное. если рычаг выбора режима не находится в поло жении «парковка». но я всегда отключаю эти функции. случайно оказавшегося рядом с дернувшейся машиной. вы меня поймете: в Word встроены бесчисленные функции. и. связанного с проекти рованием взаимодействия. Это плохо для машины. Поскольку запустить двигатель при включенной трансмиссии невозможно. включает в себя обработку «оши бок пользователя». призванные исправлять некоторые распростра ненные ошибки. Что должна делать система. любой автомобиль с автомати ческой трансмиссией оборудован стартером. Однако в этом случае даже при самых серьезных мерах предосторожности некоторые ошибки обязательно произойдут. Следующий способ исключить ошибки – сделать их за труднительными. а лишь резко дернется вперед. В некоторых ситуациях система может да же устранить ошибку за пользователя.Глава 5. Попытка запустить мотор при включенной трансмис сии может повредить чувствительный и сложный меха низм. для водителя и для невинного пешехода. который не сработает. как чрезмерное рвение в устранении ошибок пользователя. К сожалению. в которой ошибки пользователей просто невозможны. Уровень структуры 100 Обработка ошибок Значительная часть любого проекта. чтобы . более того. прежде всего. когда лю ди совершают ошибки. ошибка никогда не будет совершена. большинство пользова тельских ошибок не столь легко предупредить. Хороший пример такого типа защиты мы ви дим в любом автомобиле с автоматической коробкой пере дач. Чтобы этого не случилось. но будьте осторож ны: ничто так не раздражает в поведении программного продукта. что она может предпринять для предотвращения этих ошибок? Первая и самая лучшая защита от ошибок – это разработ ка такой системы. чтобы помочь пользователю осознать ошибку и устранить ее.

задействованный при проектировании взаимодействия. Однако некото рые действия пользователя могут вначале казаться кор ректными. чтобы система могла их обработать. В таких случаях система должна предоставить пользователю способ восстановления после . получивших позитивный опыт. Информативные сообщения об ошибках и хорошо проду манные интерфейсы во многих случаях помогут пользова телям обнаружить совершенные ошибки. повышает процент поль* зователей. не занимаясь ис правлением исправлений. а потом будет слишком поздно.Проектирование взаимодействия 101 иметь возможность нормально работать.) Каждый уровень обработки ошибок.

. информировать и убеждать пользователей. Однако архитектура вебсайтов часто при звана решать более широкие задачи. Уровень структуры ошибки. Самым известным примером такой функции яв ляется «отмена действия». позволяющих пользователям легко находить нужную информацию. Начи ная с самых общих категорий будущего контента и функ циональных возможностей. то единственным доступным системе способом удержать пользователя от ошибки является большое количество предупреждений. только если пользователи дейст вительно обращают на них внимание.102 Глава 5. преду преждения эффективны. чем просто помощь в поиске информации: во многих случаях сайтам прихо дится обучать. необходимых для достижения этих стратегических целей. и поэтому последо вательность диалоговых окон «Вы уверены?. Ин формационная архитектура имеет прямое отношение к во просам информационного поиска – проектированию сис тем. однако восстановление после ошибки может принимать разные формы. Разумеется. Есть два подхода к разработке такой классификации: ни сходящий («сверху вниз») и восходящий («снизу вверх»). потребностям пользователей и контенту сайта. Если восстанов ление невозможно. Информационная архитектура Информационная архитектура связана с созданием орга низационных и навигационных схем.» больше раздражает. соответствующих целям сайта. Обычно решение задач информационной архитектуры тре бует создания классификационных схем. Получившаяся иерар хическая структура служит пустой оболочкой для контен та и функциональности. чем помогает. . обеспечивающих экономичное и эффективное перемещение по сайту. мы проводим логическое раз биение категорий на подкатегории. Нисходящий подход к созданию информационной архи тектуры заключается в ее построении непосредственно на основе целей сайта и потребностей пользователей.

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

безус ловно. архи тектура. Однако самый важ ный признак качества не количество шагов в процедуре. когда речь идет о нескольких месяцах. Пользователи. или количество щелчков. Уровень структуры Вебсайты почти как живые существа. которых вы собирались достичь с помощью сайта. а то. опирается на понимание целей сайта и потребностей поль зователей. Нет необходимости придерживаться какогото конкретного количества категорий на какомлибо из уровней или в ка комнибудь из разделов архитектуры. Если изменились цели. Одним из признаков эффективной структуры является ее способность приспо сабливаться к изменению и развитию сайта. Они требуют посто янной заботы и «подкормки». усеченной до трех шагов. Например. не должно приводить к полному пересмотру его структуры. Однако нако пление нового содержимого в конце концов приведет к пе ресмотру принципов организации сайта. позволяющая пользователям листать прессрели зы в режиме «день за днем». выполняемых пользователем для перехода в нужное место сайта. возникаю щих по ходу эксплуатации сайта. Структура сайта. Достаточно. В большинстве случаев не значительное количество новых требований. чтобы категории подходили вашим пользователям и удовлетворя ли их потребности. будьте готовы к со ответствующей переработке структуры сайта. необходимость структурных изменений редко обнаружи . Впрочем. или потребности пользователей. является ли каждый следующий шаг осмысленным с точки зрения пользователя и вытекает ли он естествен ным образом из предыдущих шагов. как и весь опыт взаимодействия в целом. которые вы стремились удовлетворить. вполне годится. Некоторым людям нравится подсчиты вать количество шагов. предпочтут четкую и ясную процедуру из семи ша гов непонятной процедуре.104 Глава 5. и затем оценивать качество структуры сайта с помощью этих цифр. однако через пару лет более удобной и практичной может стать организация прессре лизов по темам. Со временем они неизбежно разрастаются и изменяются. необходимых для решения задачи.

а может представлять собой целую библиотеку. обычно к тому времени. кроме прочего. Работая с узлами вместо страниц. пользователи уже порядком настрадались. Он может быть всего лишь числом (как. Абстрактное понятие узла. до кументов или компонентов. с которым мы имеем дело. мы можем пользоваться еди ным языком и единым набором структурных концепций для решения широкого круга разнообразных задач. что архитектуру необходимо переработать. Гибкая архитектура способна справиться с добавлением нового контента в пределах одного раздела (вверху) и с появлением новых разделов (внизу). Архитектурные решения Элементарной единицей информационных структур явля ется узел. Узел может соответствовать фрагменту инфор мации любого объема. цена товара). позволяет нам явным образом задать уровень детализации. Большинство проектов по созданию архи тектуры вебсайтов ограничиваются лишь упорядочением страниц. Идентифицируя страницу как базовый узел. что не будем заниматься ин . когда вы понимаете. мы недвусмысленно объявляем. например.Информационная архитектура 105 вается заблаговременно.

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

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

На другом сайте катего риями верхнего уровня будут. Последовательная структура Организационные принципы Узлы в информационной структуре расположены в соот ветствии с организационными принципами. в корпоративном информационном сайте в верх ней части дерева могут быть расположены такие катего рии. Во Всемирной пау тине последовательное представление используется для мелкомасштабных структур. Один конкретный при мер такой структуры вы держите в руках прямо сейчас. В основе сво ей организационные принципы являются критерием.Глава 5. например. «бизнес» и «инвесторы». какие узлы должны быть объ единены в группу. звуко и видеозаписи созданы специаль но для последовательного восприятия. Географический организа ционный принцип является одним из возможных подхо дов для удовлетворения потребностей глобальной пользо вательской аудитории. статьи. и мы обладаем врожденными способностями к его обработ ке. на которую рассчитан контент. . Более крупные структуры с последователь ной организацией обычно применяются в приложениях. таких как отдельные статьи или разделы. по которому мы определяем. На этом уровне организационным принципом является аудитория. как «клиенты». «Северная Аме рика». Книги. в которых порядок представления содержимого является существенным для удовлетворения пользовательских по требностей. «Европа» и «Африка». Уровень структуры 108 Последовательные структуры знакомы всем по традици онным источникам информации. а какие останутся сами по себе. В раз личных областях и на различных уровнях сайта будут дей ствовать разные организационные принципы. Например. например в инструкциях. Последовательный языковой поток является основным среди имеющихся видов информационной архитектуры.

Информационная архитектура

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

109

110

Глава 5. Уровень структуры

Для сайта, ориентированного на покупателя, это, скорее
всего, неверный способ организации информации. Боль
шинство людей в повседневной жизни не интересуются ве
сом автомобиля. Организация информации по производи
телю, модели или типу автомобиля будет более подходя
щей для такой аудитории. Зато если наши пользователи –
профессионалы, занимающиеся транспортировкой машин
через океан, то вес для них будет очень важным показате
лем. А вот тип двигателя и расход топлива с их точки зре
ния – куда менее важные характеристики автомобиля (ес
ли вообще стоящие внимания).
На языке библиотечного дела такие атрибуты называются
фаcетами. Они способны предоставить простой и гибкий
набор организационных принципов практически для лю
бого контента. Однако, как демонстрирует предыдущий
пример, применение неподходящих фасетов может приво
дить к худшим результатам, чем их полное отсутствие.
Распространенное решение этой проблемы – позициониро
вать каждый мыслимый фаcет как организационный прин
цип и предоставить пользователям возможность самим вы
бирать тот, который им важен.
К сожалению, за исключением тех случаев, когда вы имее
те дело с примитивной информацией, имеющей лишь не
сколько фасетов, такой подход быстро превращает архи
тектуру в нечто громоздкое и неупорядоченное. Критериев
сортировки так много, что пользователи уже ничего не мо
гут найти. Не следует перекладывать на пользователя бре
мя сортировки по всем атрибутам и выбора самого важно
го. Если стратегия помогла нам понять, что именно нужно
пользователю, а набор возможностей определил, какая ин
формация удовлетворит эти потребности, то при создании
структуры мы идентифицируем те конкретные аспекты
этой информации, которые будут важнейшими с точки
зрения пользователей. Успешным станет такой опыт взаи
модействия, в котором ожидания пользователей предви
дятся заранее.

Информационная архитектура

Язык и метаданные
Даже если структура безупречно отражает то, как пользо
ватели представляют себе тематику вашего сайта, они не
смогут ориентироваться в архитектуре, если не будут по
нимать вашу классификационную номенклатуру – описа
ния, заголовки и прочую терминологию, используемую на
сайте. Вот почему необходимо говорить на языке пользова
телей, причем употреблять его правильно. Средство, ис
пользуемое для этой цели, называется словарем норма&
тивной лексики.
Нормализованный лексикон – это всего лишь набор стан
дартных терминов, используемых на сайте. Это еще одна
область, где важно проводить исследование пользователь
ской аудитории. Самый эффективный путь разработки но
менклатуры, которую пользователи сочтут естественной, –
побеседовать с пользователями, чтобы понять, как они об
щаются. Создание (и применение) словаря нормативной
лексики, который отражает язык ваших пользователей,
является лучшим способом не допустить внутренний жар
гон вашей фирмы на страницы сайта, где он лишь будет
сбивать пользователей с толку.
Словари нормативной лексики помогут вам добиться не
противоречивости в организации контента. Независимо от
того, сидят ли люди, ответственные за контент сайта, за
соседними рабочими столами или находятся в офисах на
разных континентах, словарь нормативной лексики по
служит регламентирующим ресурсом, который гаранти
рует, что все они говорят на языке пользователей.
Более сложным подходом к нормализации лексикона явля
ется создание тезауруса. В отличие от простого списка одоб
ренных терминов, тезаурус документирует также и альтер
нативные термины, имеющие широкое употребление, но не
применяемые на сайте. Имея тезаурус, вы можете описать
соответствие между одобренными терминами с одной сторо
ны и профессиональным жаргоном, сокращениями, слен
говыми терминами и аббревиатурами – с другой. Тезаурус

111

как послед няя модель вашего продукта используется в пожарных частях. муниципальная орга низация или служба спасения) Имея эту информацию. что служба спасения является прибыльным сек тором рынка. может подсказать вам новые подходы к построению архитектуры. мы сможем рассмотреть целый спектр архитектурных подходов. вклю чающую в себя метаданные. узкие или близкие термины. тем большая гибкость предоставлена вам в плане структурирования этого контента. Наличие словаря нормативной лексики или тезауруса будет особенно кстати. указывая более широкие. Коро че говоря. чем более подробной информацией о контенте сайта вы располагаете. Если вдруг окажется.Глава 5. в свою очередь. а это. что было бы затрудни тельно (а то и вовсе невозможно) в противном случае. в который могла бы устремиться ваша ком пания. мы имеем дело со статьей о том. Предположим. статья или практическое иссле дование) • Название продукта • Тип продукта • Сфера деятельности клиента (например. наличие метаданных позволит вам на основе уже имеющегося контента быстро создать новый раздел сайта для удовлетворения потребностей этих пользователей. . Уровень структуры 112 может содержать и другие взаимосвязи между терминами. задействованных в контенте сайта. Метаданные об этой статье могут быть такими: • Фамилия автора • Дата размещения статьи • Тип текста (например. пожарная часть) • Прочая информация (например. если вы решите построить систему. Термин «метаданные» просто означает «информация об информации» и касается струк турированного подхода к описанию элементов контента. До кументирование этих взаимосвязей дает вам полную кар тину всего спектра понятий.

Ваш сайт сможет динамически объеди нять страницы по конкретной теме. который обеспечивается элементарным полнотекстовым поиском. Роли в команде и процесс разработки Состав документов. Вместо сообщения о том. При поиске не принятого на сайте термина она с помощью тезауруса смо жет поставить в соответствие этому термину одобренный вариант.Роли в команде и процесс разработки Впрочем. хорошо сфокусированные результаты и. Кроме того. очень и очень глупые: вы даете им строку символов – и они всего лишь ищут в точности такую же строку. вы можете положиться на автоматические инструменты при определении взаимосвязей между эле ментами контента. вообще говоря. что строка не найдена. Поисковые машины могут быть весьма мощными. пользователь получит релевантные. возможно. Вот здесь и приходит на по мощь словарь нормативной лексики. что для этого не обходимо. если сами данные слабо согласованы. – может значитель но варьироваться в зависимости от сложности проекта. связав ее с те заурусом и снабдив контент метаданными. – просто быть последовательным в применении терминов в метаданных. но при этом они. затем она проверит метаданные на наличие в них одобренного термина. и все. чем тот. рекомендации по потенциально интересным смежным темам. создание технических систем для сбора и отсле живания этих метаданных будет бесполезным. Можно сделать поисковую машину умнее. 113 . Они не понимают ее смысла. хорошие метаданные могут предоставить поль зователю более быстрый и надежный способ поиска инфор мации. Используя строго один термин для каждого самостоятельного понятия в со ставе контента. необходимых для описания структуры сайта – от конкретных деталей номенклатуры и метаданных до общей картины информационной архитектуры и кон кретной организации взаимодействия.

поэто му. п. С тех пор как в 2000 году я разместил ее в Сети. Эта схема вовсе не обязана документировать каждую ссыл ку на каждой странице сайта.net/ ia/visvocab/. называется Visual Vocabulary. загрузив образцы схем и средства для их создания с моего вебсайта www. а какие остаются сами по себе. Техника. и ее словесное описание. Гораздо важнее до кументировать концептуальные связи: какие категории сгруппированы. ее приняли в качестве ра бочего инструмента информационные архитекторы и про ектировщики взаимодействия во всем мире. однако это словосочетание используется также для обозначения конкретного средства навигации по сайту (которое подробно описывается в главе 6). . вероятнее всего. говоря об инструменте описания структуры сайта. Структура вебсайта по сути своей достаточно сложна. Визуальное представление струк туры – наиболее эффективный способ разобраться в от ветвлениях.114 Глава 5. В некоторых случаях для отражения нюансов сложной архитектуры потребуются электронные таблицы и базы данных. которую я создал для отражения структуры сай тов в схемах. группах и взаимосвязях компонентов сайта. как согла суются шаги в данной процедуре взаимодействия и т. На практике подобный уро вень детализации в большинстве случаев только сбивает читателя с толку и заслоняет информацию.jjg. действительно необходимую команде разработчиков. просто никто не ста нет читать. Однако самым главным инструментом документирования информационной архитектуры и проектирования взаимо действия является схема. сей час лучше использовать термин архитектурная схема. Уровень структуры В проектах с большим объемом иерархически организо ванного контента эффективным способом документирова ния архитектуры могут оказаться простые многоуровне вые списки. На заре существования Сети такие схемы назывались «картами сайта». Вы можете больше узнать о Visual Vocabulary.

Роли в команде и процесс разработки

115
Visual Vocabulary –
это техника для
построения схемы
любой архитектуры,
от простейшей (вверху)
до очень сложной
(внизу).
Подробности см. на
сайте www.jjg.net/ia/
visvocab/

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

116

Глава 5. Уровень структуры

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

Что читать дальше

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

Что читать дальше
Cooper, Alan. The Inmates Are Running the Asylum: Why
HighTech Products Drive Us Crazy and How to Restore the
Sanity. Sams, 1999.1
Norman, Donald A. The Design of Everyday Things. Revised
edition. Currency/Doubleday, 1990.2
Rosenfeld, Louis and Peter Morville. Information Architec
ture for the World Wide Web. 2nd edition. O’Reilly, 2002.3
Вебресурсы: www.jjg.net/elements/resources/
1

2

3

А. Купер «Психбольница в руках пациентов». – Пер. с англ. –
СПб.: СимволПлюс, 2004.
Норманн, Дональд А. «Дизайн привычных вещей». – Пер.
с англ. – М.: Вильямс, 2006.
Розенфельд Л., Морвиль П. «Информационная архитектура
в Интернете», 2е издание. – СПб.: СимволПлюс, 2005.

117

ГЛА ВА 6 Уровень компоновки ДИЗАЙН ИНТЕРФЕЙСА. ДИЗАЙН НАВИГАЦИИ И ИНФОРМАЦИОННЫЙ ДИЗАЙН .

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

то есть путем манипулирова ния кнопками. Помимо конкретизации представления информа ции. то на уровне компоновки наше рассмотрение сконцентриро вано практически исключительно на отдельных страни цах и на их составных частях. и дизайн навигации – это специализированная ветвь дизайна интерфейса. Уровень компоновки 120 Определение компоновки Уровень структуры. задачей которого является максимально доходчивое представле ние информации.Глава 6. Если на уровне структуры мы оперировали крупномас штабными понятиями архитектуры и взаимодействия. через весь уровень компоновки пролегает информационный дизайн. А вот информационные среды обладают специфи кой. какую форму примет эта функциональ ность. как будет работать наш сайт. На программной стороне этого уровня компоновка опреде ляется дизайном интерфейса. полями ввода и прочими элементами интер фейса. Наконец. занимающаяся представлением ин формационных пространств. представленный в предыдущей главе. Все три элемента связаны друг с другом очень тесно – в большей степени. принципиально требующим более глубокой детализации. Не так уж редко приходится сталкиваться Всемирная паутина как программный интерфейс к п ом он ка о в Дизайн интерфейса Всемирная паутина как гипертекстовое информационное пространство Поверхность Дизайн навигации Информационный дизайн Структура . обсуж даемые в книге. чем любые другие элементы. определяет. на уровне компоновки мы переходим к вопросам. Уровень компо новки определяет.

либо с вопросами информационного дизайна. поскольку ни дизайн интерфейса. то речь идет о дизайне интерфейса. дизайн навигации служит подзорной трубой. Когда мы предоставляем пользователям возможность со вершать действия. В процессе создания информационной архитекту ры мы структурируем список требований к контенту. Хороший дизайн навигации не способен ис править недостатки плохого информационного дизайна. мы име ем дело с информационным дизайном. мы не в состоянии определить. Когда мы предоставляем пользователям возможность пере ходить из одного места в другое. выделение таких облас тей и разбивка уровня компоновки на соответствующие части помогает нам оценивать правильность принимае мых решений. так и на сторо не гипертекстовых информационных систем. и средством передвижения пользователя по этой структуре. плавно переходящими в проблемы информационного дизайна. потенциально охватывающий или затрагивающий почти все. ориентированными на выполнение задач. Информаци онный дизайн пересекает границу между программными системами. решена ли она. Когда речь идет о донесении до пользователя идей. Посредством интерфейса пользователь входит в реальный контакт с функциональностью. ни дизайн навига ции не могут быть абсолютно удачными без хорошего ин формационного дизайна. и ин формационноориентированными гипертекстовыми систе мами. мы говорим о дизайне на вигации. кото рый составили ранее. определенной в специфи кациях и структурированной посредством продуманной схемы взаимодействия. сквозь которую пользователь видит структуру. которые на деле оказываются вопросами дизайна навигации.Определение компоновки с проблемами дизайна интерфейса. что мы видели до сих пор как на стороне программных интерфейсов. Если мы не понимаем. 121 . Несмотря на размытость границ. Это самый широкий элемент на данном уровне. к какой области относится пробле ма.

Периодиче ски появляются модели с круговым расположением кно пок. Представьте на минутку.122 Глава 6. Время от времени изготовители экспериментировали с расположением кнопок на аппарате. мы успевали бы за день гораздо меньше. конечно. если бы мы не умели превращать значительную часть своих действий в рефлексы. отходя от принятого стандарта 4×3. У меня была машина. что и в первый раз! Наше умение водить машину. Казалось бы. что оно составляет примерно три се кунды на звонок. выяснится. Телефоны – еще один хороший пример важности соглаше ний. Когда ктонибудь из них садился за руль. которое тратит человек. Если мы измерим время. расположение кнопок на телефоне не должно играть большую роль. В самом деле. пытаясь разобраться с расположением кнопок на нестандартном аппарате. он первым делом вклю чал дворники. Они пытались расположить кнопки в два ряда по шесть штук или в три ряда по четыре. И вовсе не потому. готовить еду или пользо ваться компьютером и при этом не погружаться в эти заня тия с головой возникает как результат выработки большо го количества мелких рефлексов. но на самом деле оно весьма важно. по мере того как их дис ковые предшественники скрываются в тумане технологи ческого забвения. действительно бы ло грязным). что вождение машины попреж нему вызывает у вас те же трудности. а потому. но для звонящего это не просто потерянное время – эти три секунды заполнены . Вроде бы немного. Уровень компоновки Соглашения и метафора Привычки и рефлексы лежат в основе нашего взаимодей ствия с окружающим миром. что пытался включить фары. Рас положение ручек управления в моей машине не соответст вовало соглашениям. что считал лобовое стек ло грязным (хотя иногда оно. Соглашения позволяют нам использовать эти рефлексы в различных обстоятельствах. но это происходит все реже. с ко торой у моих друзей всегда возникали проблемы. к которым все привыкли.

что стала стандартом для других устройств с кнопками. лю дям сравнительно легко адаптироваться к любому из них. 123 . обычно ре шаемая на рефлекторном уровне. у бан коматов. кассовых аппаратов и специализированных уст ройств для ввода данных. Достичь отсутствия внутренних противо речий вам помогут концептуальные модели функций ва шего сайта. что решение любой задачи в про цессе разработки интерфейса состоит в слепом следовании принятым соглашениям. не противоречащего тем интерфей сам. имеющие одну и ту же концеп туальную модель. (Инте ресно. Применение одинако вых соглашений в обоих местах позволит пользователю. матрица кнопок 4×3 настолько укоренилась. например в складских системах. Вы просто должны осторожно от носиться к любому отступлению от соглашений и предпри нимать его только тогда. Поскольку в обоих стандартах принята матрица 4×3.Соглашения и метафора отрицательными эмоциями. Десятиклавишный стан дарт первых электронных калькуляторов. однако еще важнее создать внутренне согласован ный интерфейс. сей час можно увидеть на компьютерных клавиатурах. например для микроволновых печей или пультов дистанционного управления телевизорами и видеомагнитофонами. хотя наличие единого стандарта было бы идеальным вари антом. Две функции. к которым привыкли ваши пользователи. что телефонная клавиатура не является единствен ным стандартом в этой области. вам потребуются явно сформулированные основания для лю бого принимаемого решения. когда это дает ощутимую выгоду. что изпод ног пользователя выбили почву соглашений. не имеющих никакого отношения к телефонам. Чтобы обеспечить успешный опыт взаимодействия. обратном порядку на телефоне. будут предъявлять сходные требования к интерфейсу. Более того.) Сказанное не означает. потому что задача. стала невыносимо мед ленной изза того. Создание интерфейса. вероятнее всего. – важная задача. в котором ряды кнопок идут в порядке.

она всего лишь одна из возможных ассоциа . как «начать». где пользо ватель «переворачивал» страницы аналогично страницам реального журнала. часто они не дают вообще никакого эффекта. Как и в случае с концептуальными моделями. Уровень компоновки знакомому с одной функциональностью. «сохранить». кото рого вам хотелось бы достичь. «вернуть ся». (Вспомним навигацию на сайте Slate. обусловленных законами физики.124 Глава 6. как следует обращаться с этими возможностями. нежели раскрывает ее. вы не должны поддаваться искушению построить сайт на наборе метафор. но они никогда не дают того эффекта. п. Непротиворечивая их интерпретация позволяет пользова телям применять знания. полученные при работе с другими частями системы. По правде говоря. на которых строится проектирование взаимодействия. Метафоры. В Сети подобных ограничений крайне мало. быстро адаптиро ваться к другой. Даже если для вас связь ме жду возможностью и ее метафорическим представлением прозрачна. Проведение аналогий между возможностями вашего сайта и реалиями из жизненного опыта ваших пользователей может показаться хорошим способом разъяснить им. встречаются в самых разных контекстах. свой ствами материалов и т.) Большинство интерфейсов и средств навигации в реальном мире подвержены влиянию различ ных ограничений. должны все гда восприниматься сходным (если не идентичным) обра зом. Даже когда концептуальные модели функций различны. Порой у вас может возникнуть желание подогнать интер фейс какойто функции под интерфейс ее аналога из реаль ного мира. «завершить». и достигать целей быстрее и с меньшим количеством ошибок. Такие понятия. применяемые для выражения функциональ ных возможностей вашего сайта могут быть остроумными и забавными. лежащие в основе нескольких моделей. идеи. Однако такой подход чаще затуманивает сущность некоторой функции сайта.

Что означает эта маленькая пиктограмма те лефона? Я могу позвонить по телефону с этого сайта? Про верить голосовую почту? Оплатить телефонный счет? Конечно. которые могут возникнуть в головах ваших пользова телей (особенно если они живут в иной культурной среде. Самая большая трудность в разработке интерфейса слож ных систем – определить. обозначающая список телефонных номеров. тем менее надежными будут такие догадки. какие функциональные возможности сайта пред ставлены теми или иными метафорами. и какаято часть пользовательской аудитории обязательно сделает не верное предположение. Хороший программист всегда принимает во внимание самые малове роятные варианты (называемые «частными случаями»). если вы во обще не станете полагаться на догадливость пользователей. вы реально уменьшите умственную на грузку на посетителя. а не столь важная остается незамеченной (иногда потому. контент вашего сайта должен обеспечить пользо вателей определенным контекстом. Дизайн интерфейса Удачные интерфейсы – это те. которые прежде занимались программированием. Он отличается от того. в которых пользователи сразу замечают важную информацию. Однако чем разно образнее контент и шире спектр возможностей вашего сай та. пытающегося сориентироваться на вашем сайте и воспользоваться его функциональностью. и перевести их в разряд неприметных (или ис ключить вообще). и сработает. В конце концов. какие аспекты не нужны поль зователям.Дизайн интерфейса ций. Пиктограмма телефонной книги. возможно. приходится приспосабливаться к такому стилю мышления. но картинка с изображением кафе для обозначения сетевого чата может породить проблемы. Людям. Избегая метафор. удачным продуктом для программиста 125 . к которому они привыкли. нежели вы). что ее нет совсем). который поможет им до гадаться. Будет лучше (и проще).

126

Глава 6. Уровень компоновки

будет такая программа, которая не дает сбоев, а выполне
ние программы, не учитывающей маловероятных ситуа
ций, скорее всего, при возникновении таких ситуаций за
вершится крахом. Поэтому программисты обучены одина
ково относиться к любому варианту, независимо от того,
встретится ли он у одного пользователя или у тысячи.
В дизайне интерфейса такой подход не работает. Интер
фейс, в котором маловероятным ситуациям придается та
кой же вес, как и потребностям огромного количества
пользователей, обречен на недовольство любой аудитории.
Хорошо продуманный интерфейс учитывает, какая линия
поведения пользователя наиболее вероятна, и облегчает
доступ к соответствующим элементам и работу с ними.
Это не означает, что для решения любой интерфейсной
проблемы достаточно сделать самой большой на экране ту
кнопку, по которой пользователь щелкнет вероятнее всего.
При проектировании интерфейса может быть задействова
но множество технических приемов, позволяющих упро
стить путь пользователя к цели. Один из этих приемов –
тщательно продумывать то, какие опции будут выбраны
по умолчанию при первом предъявлении интерфейса поль
зователю. Если ваше понимание задач и целей пользовате
лей говорит вам, что большинство из них предпочитает ва
риант с подробными результатами поиска, то флажок «По
казать подробные результаты», установленный по умолча
нию, устроит большую часть пользователей независимо от
того, потрудились ли они прочитать подпись флажка
и принять сознательное решение или нет. (Будет еще луч
ше, если система автоматически запомнит опции, выбран
ные пользователем при последнем визите, но такая функ
циональность иногда требует бо/льших ухищрений, чем ка
жется на первый взгляд, и в результате некоторым коман
дам разработчиков не удается ее реализовать.)
Две основные технологии, HTML и Flash, применяемые для
реализации интерфейсов во Всемирной паутине, имеют ес
тественные технические ограничения, сужающие круг до
ступных элементов интерфейса. Это и хорошо, и плохо.

Дизайн интерфейса

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

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

Текстовые поля позволяют пользователям (вы не повери
те!) вводить текст.

127

128

Глава 6. Уровень компоновки

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

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

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

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

и к их размещению на странице та ким образом. Дизайн интерфейса для Всемирной паутины сводится к выбору подходящих элементов с учетом задачи. Информационный дизайн играет важную роль в тех зада чах интерфейсного дизайна. скрывая важные варианты выбора (слева). но одновременно увеличит нагрузку на пользователя. содержащими различные наборы элементов интерфейса. лучше воспользоваться флажками. какие функ ции на каких страницах будут выполняться. пользователь обычно взаи модействует с несколькими страницами. пожалуй. еще одна – предоставление инст . как именно эти функции реализованы на странице. Классическая задача информаци онного дизайна при создании успешных интерфейсов – сообщения об ошибках. но и пере давать ему информацию. где интерфейс должен не толь ко получать какието сведения от пользователя. Если варианты поиска ограничиваются шестью категориями. Решая свою задачу на вебсайте. То. чтобы было легко понять и использовать их. Раскрывающиеся списки могут затруднить действия пользовате* лей. – тема дизайна интерфейса. снизит нагрузку на систему управления базами данных.Дизайн интерфейса 129 щиеся списки действительно позволяют сэкономить место на странице по сравнению с набором кнопокпереключате лей. Переключатели демонстрируют все доступные варианты. но занимают больше места в интерфейсе. стоящей перед пользователем. Ввод категории поиска в текстовое поле. – предмет проектирования взаимодействия на структурном уровне. То. но зато они прячут от пользователя другие варианты выбора.

Просто предоставить список ссылок недостаточно. на которую я сейчас смотрю? Эта информа ция поможет пользователю понять. чем другие? Какая между ни ми разница? Эта информация необходима пользовате лю для понимания того. дизайн навигации должен отражать связь между содержательной стороной элементов навигации и страницей. Каждый раз. • Вовторых. в числе прочего это подразумевает. трудности навигационного дизайна ста нут очевидными. Уровень компоновки 130 рукций пользователю (задача непростая уже хотя бы пото му. чтобы пользо ватель смог ориентироваться на сайте. когда система должна облегчить поль зователю работу с интерфейсом путем предоставления ин формации (например. какой выбор ему . Какое отношение имеет вся эта куча ссылок к странице. это задача ин формационного дизайна. то из общих соображений неразумно). какой у него есть выбор.Глава 6. он должен предоставлять пользователям способ попасть из одной точки сайта в другую. дизайн навигации должен отражать взаи моотношения между внутренними элементами навига ции. Как эти ссылки соотносятся друг с другом? Являются ли одни более важными. когда пользователь только начал работать с сайтом или совершил ошибку). приходится подбирать навигационные элементы так. Дизайн навигации на любом сайте дол жен одновременно решать три задачи: • Вопервых. Однако если загля нуть чуть глубже. Посколь ку во многих случаях связать каждую страницу со все ми остальными невозможно (а если и возможно. которая находится перед глазами пользо вателя. чтобы они упрощали ре альные передвижения пользователя. Дизайн навигации Дизайн навигации кажется простым делом: нужно всего то расставить на каждой странице ссылки. что ссылки должны быть рабочими. • Втретьих. что труднее всего заставить их прочитать эти инструк ции).

Мы до сих пор не знаем. дверь. (В конце концов. чтобы наилучшим образом достичь своей цели или решить стоящую перед ним задачу. как если бы любой шаг. точкой входа на сайт может оказаться любая страница. лучше всего предполагать. что поль зователи практически целиком полагаются на навигацион ные подсказки перед собой. в каком месте сайта они находятся и куда могут попасть. что пользователи ни чего не запоминают при переходе от одной страницы к дру гой. 131 . по сей день вызыва ет споры. находится гдето сзади и слева»). чтобы каждая страница веб сайта четко доводила до сведения пользователей. Термин «глобальная» здесь не означает. моментально стирался из их памяти. При ориентировании в физическом пространстве человек может в определенной степени полагаться на внутреннее ощущение направления.Дизайн навигации следует сделать. есть и такие люди. другие же утверждают. Вопрос о том. ко торые всегда чувствуют себя потерянными. сде ланный ими на сайте. совершенно бесполезны при поиске пути в информационном пространстве. как (и в какой мере) пользователи представляют в уме структуру вебсайта. На практике были выработаны не сколько типов систем навигации. как при посещении супер маркета или библиотеки. (Конечно. Некоторые специалисты рьяно отстаивают ту точку зрения. Пока мы это не выясним. через которую я вошел. что при посещении вебсайтов пользователи строят в уме небольшие карты. Глобальная навигация обеспечивает доступ к значитель ной части сайта. Вот почему жизненно важно. помогающие найти дорогу в физиче ском мире («хм… кажется. в какой степени пользователи могут ориентировать ся в информационных пространствах.) Большинство сайтов фактически предоставляют пользова телю несколько систем навигации. если общедоступная поисковая ма шина вроде Google проиндексирует ваш сайт.) Однако меха низмы нашего мозга. причем каждая играет свою роль в ориентировании пользователя на сайте в раз ных обстоятельствах.

Если ваша ар хитектура построена в соответствии с тем.Глава 6. которые необходимы пользователям. Уровень компоновки 132 что эта навигация обязательно появляется на каждой стра нице сайта – хотя это была бы неплохая идея. (Элементы навигации. например. как правило. следует помнить. Глобальная навигация Локальная навигация предоставляет пользователям дос туп к «ближайшим» элементам архитектуры. В строго ие рархической архитектуре локальная навигация может. В любое место сайта. что бы переходить с одного «конца» сайта на другой. что по стоянные элементы не всегда являются глобальными. как пользовате ли представляют себе контент сайта. нежели другие варианты навигации. страницампотомкам и страницамсоседям. мы будем называть «постоянными». вы сможете (так или иначе) попасть с помощью глобальной навигации. локальная навига ция.) Фактически глобальная навигация представляет собой на бор точек входа. присутствующие на всех страницах сайта. которое вам понадобится. Локальная навигация . оказывается наиболее часто востребо ванной. обеспечить доступ к родительской странице.

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

Сервисная навигация Некоторые средства навигации не встроены в структуру страниц. тем эффективнее будет развернутая вами контекстная на вигация. в ре альном мире на дверях магазина обычно указаны часы его работы. на формы обратной связи и на формулировку политики сайта являются рас пространенными элементами сервисной навигации. а существуют сами по себе независимо от контен та и функций сайта. помогает покупателю. Уровень компоновки 134 Возвращаясь к теме уровня стратегии. открыт ли сейчас магазин. которые не нужны пользователю повседневно. они будут справедли во воспринимать ее как мусор. когда за путались в предоставленных вами прочих навигационных .Глава 6. Для большинства покупателей львиную долю вре мени эта информация не имеет ценности: стоя рядом. лю бой может легко сообразить. к которым пользователи обращаются тогда. что эта информация легко доступна. что пользователи просто не в состоянии понять. Например. что чем лучше вы знаете своих пользователей и их потребности. Ссылки на контактную информацию. какие относятся к их потребностям). Это инструменты выносной навига& ции. но которые принято предоставлять ради его удобства. которому она вдруг понадобилась. Однако знание о том. ваш текст напичкан таким количеством гипер ссылок. Если ваши пользователи не будут получать от контекстной навигации очевидную поддержку при работе над своими задачами и для достижения своих целей (на пример. Сервисная навигация предоставляет доступ к элементам. заметим.

не пыта ясь охватить весь контент. состоящего из ссылок на разделы верхнего уровня. Такой инструмент наиболее эффекти вен для сайтов с большим количеством контента. В большинстве осталь ных случаев будет достаточно карты сайта и хорошо спроектированной архитектуры. у вас чтото неладно с верхним уровнем архитектуры). кото рый скрепляет другие компоненты дизайна. Этот подход может оказаться действенным. затраги вающего широкий диапазон тем. Будет ли секторная диаграмма оптимальной для представления этих данных или нашим пользователям лучше подойдет гистограмма? Сможет ли пиктограмма 135 . Карта сай та обычно имеет вид иерархического списка. Часто он является связующим материалом. который дает пользователю краткий одностраничный обзор всей архитектуры сайта. когда ваш сайт разбит на части. Иногда разработчики создают индексы для отдельных разделов сайта. Карта сайта – широко распространенный инструмент вы носной навигации. значит. под которыми с от ступом размещены ссылки на разделы второго уровня. Карты сайта редко показывают более двух уровней иерар хии – более глубокая детализация пользователям обычно не нужна (если на вашем сайте это не так. чтобы людям было легче воспринимать и использовать ее. аналогичный предметному указа телю в конце книги. Порой информационный дизайн принимает визуальную форму. Информационный дизайн Информационный дизайн не всегда можно «потрогать ру ками».Информационный дизайн системах или с первого взгляда пришли к выводу. предназна ченные для разных аудиторий с различными потребностя ми в информации. Индекс – это алфавитный список тем со ссылками на соот ветствующие страницы. что не стоит и пытаться в них разобраться. как представить информацию. Однако во всех случаях информационный дизайн сводится к приня тию решений о том.

пото му что привыкли к определенной организации часто встре чающейся информации. Например. рассмотрим следую щий список: • страна • профессия • номер телефона • улица и дом • имя • почтовый индекс • место работы • город • электронный адрес Он кажется странным.Глава 6. Уровень компоновки 136 с биноклем адекватно передать понятие «поиск на сайте» или пиктограмма увеличительного стекла будет понятнее? Иногда информационный дизайн подразумевает организа цию элементов информации. Мы часто воспринимаем этот аспект дизайна как нечто само собой разумеющееся. потому что обычно подобные спис ки выглядят так: • имя • профессия • место работы • почтовый индекс • страна • город • улица и дом • номер телефона • электронный адрес Но даже такая организация может быть уточнена: • личная информация • имя .

в том. но организация сле дующего списка будет уже довольно сложной задачей: • максимальная мощность • размер ротора • емкость бака • тип трансмиссии • средняя угловая скорость • тип шасси • максимальная производительность Секрет.Информационный дизайн • • • почтовый адрес • • • • • профессия место работы почтовый индекс страна город улица и дом прочая контактная информация • • номер телефона электронный адрес Этот пример кажется очень простым. когда нам приходится представлять эту структуру на странице. конечно. – ориен& тирование. а информационный дизайн выхо дит на сцену. которую информационный ди зайн и дизайн навигации выполняют совместно. Концептуальные отношения между этими элементами в действительности образуют микроуровневую информа ционную архитектуру. Ориентирование Есть одна важная функция. Идея пришла из области проектирования об 137 . кото рый отражает способ мышления ваших пользователей и помогает им в решении их задач и достижении их целей. чтобы сгруппировать и организо вать элементы информации специальным образом.

Хорошая система ориентирования позволяет пользователям быстро представлять. не выпол няющие навигационных функций. Например. на вебсай тах. на пар ковках иногда применяется цветовое кодирование. Навигационные системы. применяемые на сайтах. пока зывающего. – пиктограммы. автомобильные стоянки сильно выигрывают при наличии указателей. оно лишь подкрепляет уже имеющую ся систему ориентирования. где они на ходятся. куда могут перейти и что надо сделать. как и на автомобильных парковках.) Другие элементы информаци онного дизайна. связываю щую части в целое. где он находится. системы меток и приемы. Другая составляющая ориентирования связана с информа ционным дизайном и включает в себя элементы. Уровень компоновки 138 щественных мест в физическом мире. Макет страницы должен включать в се бя все навигационные системы. чтобы приблизиться к цели. но и способствовать осознанному осу ществлению выбора. цветовое кодирование почти никогда не исполь зуется само по себе. аэропорты. где он оставил свою машину. дизайна интерфейса и дизайна навигации. супермарке ты. Парки. имеющиеся на сайте и от ражающие разные взгляды на архитектуру сайта. Например. которые совместно формируют единую конструкцию. дороги. должны не только обеспечивать доступ к различ ным областям сайта. так и информацион ный дизайн. Система ориентирования пользователей вебсайтов обычно задействует как дизайн навигации. облегчить ориен тирование можно с помощью цветового кодирования. в каком разделе сайта находится посетитель. помо гающее человеку запомнить. все эле . дающие пользователю ясное понимание того. Прототипы страниц Макет страницы – это место встречи информационного ди зайна. карты и прочие указатели. (Впрочем. заимствованные из типографики. В аэропортах пассажирам помогают ориентироваться зна ки.Глава 6.

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

Кроме того. будет в определенный момент пользоваться ими. Для небольших или несложных сайтов в качестве образца всех будущих страниц достаточно иметь один прототип. трудно понять из общего вида прототипа и архитектурной схемы. Архитектурная схема. . Люди. могут обратиться к прототи пу страниц. которую мы обсуждали при рас смотрении уровня структуры. однако почти каждый. Прототип страницы является подробным докумен том. соответствует ли конечный продукт их ожиданиям. он может содержать и указатели на места хранения этих эле ментов. ответственные за фактиче ское построение сайта. на прототипах часто располагаются дополнительные комментарии относительно предполагае мого поведения сайта. чтобы можно было передать всю их сложность. Прототипы страниц иногда до полняются подробной спецификацией системы навига ции. ответственные за стратегию. Вслед ствие того. Сотрудники.140 Глава 6. могут с помощью прототипа стра ниц ответить на вопросы о том. где они служат первым ша гом процесса формального определения дизайна. Прототипы страниц необходимы прежде всего в работе над визуальным дизайном сайта. включающей в себя детальное описание всех навига ционных элементов. необходимо создавать большое количество прототипов. предлагает общий взгляд на проект. как этот общий взгляд будет вопло щен на уровне компоновки. кто вовлечен в разработку сайта. как сайт должен функцио нировать. набор функциональных воз можностей и структуру сайта. для описания всех стра ниц сайта необходимо создать относительно небольшое ко личество уникальных прототипов. что при создании архитектуры контент делится на несколько обширных классов. При этом вам вряд ли потребуются отдельные прототипы для каждой страницы сайта. Однако во многих проектах для того. возможно. чтобы проверить. которое. показывающим. Уровень компоновки ссылается на конкретные готовые элементы контента.

что создание прототипов требуют большого труда. когда сайт будет построен и все будут удивляться. начисто иг норируя их опыт и квалификацию в области визуальных коммуникаций. Все сказанное наводит на мысль. единственный способ создать удачные прототипы – наладить сотрудничество. Чтобы до кументация из проблемы превратилась в подспорье. вам следует создавать ее в точности столько. однако это вовсе не обязательно так. как было запланировано). сколько вам дей 141 . оно контрпродуктивно и действует деморализующе. Документация никогда не является конечной целью – это лишь способ достижения цели. почему это он ведет себя не так. которая сводит на нет все заложенные архитектур ные принципы. прототипы страниц становится предме том множества дискуссий и споров. Визуальные дизайнеры. Создание документа ции ради нее самой – не просто пустая трата времени.Прототипы страниц По мере того как сфера проектирования опыта взаимодей ствия росла и развивалась. что дизайнеры при создании прототипов страниц портят результаты их работы навига цией. которые низводят дизайнеров до уров ня раскрашивающих квадраты подмастерьев. ответственность за прототипы страниц время от времени становилась предметом междо усобных войн внутри компаний. что позволяет обнаружить и решить проблемы по ходу дела (а не потом. Совмест ная проработка деталей прототипов дает каждой стороне возможность встать на чужую точку зрения. Если ваши сотрудники разделены на информационных ар хитекторов и дизайнеров. Информационные ар хитекторы жалуются на то. что информационные архитекторы разраба тывают прототипы. В некоторых командах вебразработчиков разделение труда доходит до такой сте пени. что там существуют специальные должности (и даже целые отделы!) «информационных архитекторов» и «ди зайнеров». Находясь на стыке информационной архитектуры и визу ального дизайна. в свою очередь. сетуют на то.

Глава 6. Graphics Press. прототип способен задать компоновку. Joel.jjg. 1998. 2001. информацион ный дизайн – через размещение и расстановку по приори тету информационных компонентов. Некоторые из самых удачных прототипов. User Interface Design for Programmers. к тому же разбро санная по доброй половине земного шара. встречавшихся в моей работе. Tufte. Veen. The Art & Science of Web Design. O’Reilly.net/elements/resources/ . Envisioning Information. Что читать дальше Fleming. Jeffrey. в которой дизайнер и программист сидят за соседними столами. Apress. Для малень кой команды. 2000. были лишь карандашными эскизами с ком ментариями на желтых клейких бумажках. а целая группа. Уровень компоновки 142 ствительно требуется. Вебресурсы: www. Значимость прототипов страниц определяется тем. как они объединяют все три элемента уровня структуры: ди зайн интерфейса – через расположение и выбор элементов интерфейса. дизайн навигации – через идентификацию и задание главных навигационных систем. Собрав эти три со ставляющие в одном документе. Spolsky. требуется нечто более формальное. в полной мере опирающуюся на концепту альную структуру сайта и указывающую дорогу к визуаль ному дизайну. Web Navigation: Designing the User Ex perience. Edward. New Riders. наде ясь обойтись меньшим количеством. Jennifer. 1990. такого уровня документирования вполне достаточно. и не заниматься самообманом. Однако если программированием зани мается не один человек.

.

.

ГЛА ВА 7 Уровень поверхности ВИЗУАЛЬНЫЙ ДИЗАЙН .

которые будут заме* чены пользователями в первую очередь. сформулированным на предыдущих четырех уровнях. функцио* нальность и эстетика объединяются. Здесь контент. а именно на визуальном дизайне. соответствующий всем целям. чтобы породить законченный продукт. Стратегия .Поверхность Компоновка Структура На самом верху пятиуровневой модели мы концент* Набор возможностей рируемся на тех аспектах сайта.

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

визуальный дизайн подкрепляет структуру. отвлекает пользователя от его (или ваших) целей? Исследователи применяют сложное оборудование. размывая различия между архитектурными компонента ми и делая их неоднозначными? А может быть. Однако в целях оптимизации визуального дизайна страницы вы можете просто поспра шивать других людей или даже самого себя. Идентичность бренда передается разными способами – и с помощью язы ка. на что смотрят испытуемые и как их взгляд перемещается по странице. Это вопрос не только эстетики – это вопрос стратегии. Насколько эффективно дизайн поддержива ет цели. какие опции доступны пользователям? Например. то использование ярких красок и шрифта из комиксов вряд ли будет уместным. Но одним из основных инструментов переда чи идентичности бренда служит визуальный дизайн. попадающий в поле зрения. Если ваш бренд тяготеет к технологичности и внушительности. определенные на каждом из нижележащих уров ней? Не подрывает ли внешний вид сайта его структуру. трансляция бренда посетителям является ти пичной стратегической целью вебсайта. Следуйте за взглядом Один из самых простых способов оценить визуальный ди зайн страницы – ответить на такие вопросы: Куда в пер вую очередь направляется взгляд? Какой элемент дизайна первым притягивает внимание пользователя? Направлено ли оно на чтото важное для стратегических целей сайта или первый объект. кото рый они дают. отсле живающее движение зрачков (eyetracking). когда хотят точно знать. который посетители приобретают при обращении к возможностям вашего сайта. Такой подход 147 .Следуйте за взглядом Вместо оценки предложений по визуальному дизайну ис ключительно в терминах эстетической привлекательности вам следует сосредоточить внимание на результате. однозначно поясняя. и с помощью опыта. наоборот. которым вы пользуетесь.

и другое сразу). Вы обнаружите. которые можно выявить с помо щью специального оборудования. чтобы не видеть деталей. что вы. то траектория движения взгляда по странице обладает двумя важными характеристиками: • Вопервых. но не перегружая его подробностями. она плавная. попросите его на зывать элементы страницы в том порядке. Если в качестве испытуемого вы используете самого себя. означает. Еще один способ поиска доминирующих элементов дизайна – посмотреть на страницу искоса или расфокусировав взгляд. куда направляется взгляд. они в действитель ности реагируют на тот факт. это. Не особенно задумывайтесь о том. поскольку все элементы настойчи во требуют внимания. она предлагает пользователю своего рода «экскурсию» по странице. просто дайте взгляду естественно перемещаться по странице.Глава 7. хотите услышать (или и то. Когда люди говорят. • Вовторых. но в большинстве случаев простого опроса будет вполне достаточно. Если дизайн удачен. Когда ктото сообщает вам. что дизайн не ведет их плавно по странице. Их взгляд перескакивает с одного элемента на другой. на что вы смотрите. что ди зайн «тяжелый» или «громоздкий». что его взгляд следует по нетипичной траектории. Уровень поверхности 148 может дать не самые точные результаты и вряд ли сумеет отразить все те нюансы. что. раскрывая имеющиеся воз можности. что он не осознает действительное движение глаз или говорит вам то. Можно также прищуриться настолько. Затем постарайтесь определить. обратите внимание на непроизвольные движения глаз. по его мнению. Ес ли испытуемым является ктото другой. или отойти в другой конец комнаты и взглянуть на изобра жение оттуда. вообще говоря. Есте . в каком они привлекают внимание. скорее всего. движение глаз у раз ных людей происходит по практически одинаковым траек ториям – ведь это движение бессознательно и инстинктив но.

Что еще более важно. и задачам. Можно использовать контраст для ведения взгляда пользователя по странице (вверху справа) или привлечения его внимания к нескольким ключевым элементам (внизу слева). которые он хочет решить. необходимых ему для достижения своих целей. эти возможности должны соответствовать це лям. они не должны отвлекать пользователя от информации или функций. Оно определяется сложным набором глубоко . Злоупотребление этим приемом создает впечатление замусорен* ности (внизу справа).Следуйте за взглядом 149 ственно. На визуально нейтральном макете (вверху слева) нет выделяющихся частей. стоящим перед пользователем. Движение взгляда пользователя по странице не является случайным.

выделив среди всех элементов страницы те. Такой подход. общих для всех людей. будет действенным. по которой взгляд пользователя бесцельно блужда ет. Когда элементы дизайна различаются. Это инстинктивное поведение вы можете использовать в своих интересах. ни на чем не останавливаясь. контраст помогает пользо вателю разобраться в отношениях между навигационными элементами на странице. чтобы пользователь ясно по нял: оно имеет своей целью передачу какойто информа ции. Контраст жизненно ва жен для привлечения внимания пользователя к сущест венным аспектам интерфейса. сообщения об ошибках в вебинтерфейсах часто сливаются с остальной частью страницы. дизай неров. Контраст и единообразие В визуальном дизайне основным инструментом привлече ния внимания пользователя является контраст. выводя текст другим цветом (скажем. эти реакции поддаются нашему контролю: за столе тия было выработано множество эффективных визуальных приемов для привлечения внимания и управления им.150 Глава 7. наконец. вы избавитесь от этой проблемы. и. это сбивает пользователя с толку: «Почему они от личаются друг от друга? Может быть. Уровень поверхности укоренившихся инстинктивных реакций на зрительные стимулы. только если различие достаточно сильно. Дизайн без контраста воспринимается как серая невыразительная масса. но неидентичны по ди зайну. К счастью для нас. люди не могут не обратить на это внимание. однако. красным) или используя полужирный шрифт. это просто ошибка и они задумывались как одинаковые? Или же я должен тут на чтото обратить внимание?» Чтобы этого не проис . контраст служит ос новным средством обозначения концептуальных групп в информационном дизайне. Если вы заставите их контрастировать с остальными элементами. Например. Когда два элемента похожи. которые посетитель сайта должен увидеть обязательно.

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

Внутренняя и внешняя согласованность Поскольку вебсайты часто разрабатываются неправильно (частями. в от рыве от прочей дизайнерской работы в компании). под влиянием сиюминутных приоритетов.152 Глава 7. Уровень поверхности Использование сетки при работе над макетом позволяет добиться единообразия без ущерба для непротиворечивости. для них .

Опреде лите. пусть даже хорошо спроектированных. внешние противоречия. Эти проблемы принимают две формы: • Вопервых. Вме сто того чтобы снова и снова переделывать один и тот же элемент. но будет отнюдь не так уместна на пере полненной элементами странице. работать они все же должны совместно. Удачный дизайн – это не просто собрание отдельных. чтобы такой подход работал. • Вовторых. работающую как непротиво речивое единое целое. мы все равно должны проверить наш элемент в различных контекстах. Хотя многие элементы дизайна будут созданы изолирован но друг от друга. 153 . при которых сайт отражает иной подход к дизайну по сравнению с осталь ной продукцией компании. какие элементы дизайна вновь и вновь возникают в различных контекстах. возникающие изза применения разных подходов к дизайну различ ных частей сайта. спроектиро вать его. сопутствуя проблемам дизайна интерфейса. большая круглая кнопка «СТОП» хорошо подходит для страницы подтвер ждения платежа. Возможно. где уточняются характе ристики продукта. Ключ к удачному решению проблем внутренней согласо ванности кроется в понимании компоновки сайта. вы ясно увидите локальную проблему. вы можете изучить его изолированно. объектов. вызванные контекстом. разрабо тать один раз и затем использовать повсюду на сайте.Внутренняя и внешняя согласованность характерны проблемы с согласованностью визуального ди зайна. а затем при необходимости переработать. и не будете отвлекать ся на глобальные проблемы. Убрав соответствующий элемент дизайна из этих кон текстов до его разработки. Оптимальный подход состоит в том. Эти объекты должны образовать систему. протестировать в различных контекстах. в которых он появляется. Очевидно. чтобы изолировать каждый элемент дизайна. которую следует решить. внутренние противоречия. навигации и информационного дизайна сай та.

Отделы маркетинга. если корпора тивные стили для Сети и для офлайновых материалов бу дут максимально согласованными. Отде лы IT. сотрудников. встречаются все реже. как правило. Стремясь к согласованности дизайна в разных средствах пе редачи информации. открещивались от вебдизайна как от прими тивного средства. сотрудники кото рых. Тем не менее мы сильно выиграем. успехи технологии и совре менные изощренные методы реализации позволяют веб сайтам в большей степени походить на своих печатных и телевизионных собратьев. которые новая информацион ная среда накладывала на дизайн. что возможно в других средствах передачи инфор мации. на которое жалко тратить ресурсы. предоставленные самим себе.154 Глава 7. – они просто должны производить одинаковый эффект. потенциальных клиентов. привыкшие к практически безграничным возможностям печатных и радиотрансляционных средств передачи ин формации. Мы попрежнему не в состоянии достичь в вебдизайне все го того. Уровень поверхности Проблемы внешней согласованности часто имеют истори ческую подоплеку: многие вебсайты начинали свое суще ствование в корпоративных ITотделах. На заре развития Сети это усугублялось серьезными тех ническими ограничениями. что они должны быть абсолютно одинаковыми. В результате сайты. Это не означает. случайных посетителей) целостное впечатление о вашем бренде. Однако в наши дни в большинстве компаний отделы мар кетинга непосредственно контролируют внешний вид веб сайта компании. корен ным образом отличающиеся по внешнему виду от осталь ной продукции своих владельцев. имели смутное представление о корпо ративных стандартах визуального дизайна (и к тому же за частую располагали очень ограниченным доступом к ним). Согласованность идентичности бренда сказывает ся на дизайне вашего сайта на всех уровнях – от навигаци . вы создадите у вашей аудитории (кли ентов. приспособились к ог раничениям нового средства передачи информации и по степенно выработали собственные стандарты дизайна. Кроме того. акционеров.

как CocaCola. встречающейся лишь однажды. Наличие палитры. что фирма сама еще не до конца поняла.Цветовые палитры и типографика онных элементов. Непоследовательный визуальный стиль подрывает ясность образа вашей компании и оставляет у аудитории впечатление. Вспомните такие фирмы. ко торый представлен в других информационных средах. В большинстве случаев для элементов переднего плана. Это отнюдь не означает. отличного от того. не просто отрицательно влияет на мнение аудитории о сайте. появляющихся на каждой странице. до маленькой кнопки. что при одной лишь мысли о ком пании на ум автоматически приходит определенный цвет. Некоторые бренды настолько тесно ассоциируются с цветом. из которой мы мо 155 . что использование указанных цве тов исключает из репертуара дизайнера все остальные. Оно сказывается на мнении о компании в целом. чтобы создать в общественном сознании устойчивое представле ние о своей идентичности. чтобы они создавали общий эффект. можно использовать более яркие или насыщенные цвета. что она из себя представляет. Использование на вебсайте стиля. применяемой во всех материалах компании. которые нравятся широкому кругу пользователей. которым не нужно выде ляться на странице. не кон курируя и дополняя друг друга. UPS или Kodak. Ос новные цвета бренда обычно являются частью более широ кой цветовой палитры. Приглушенные цвета лучше под ходят для фоновых элементов. желтый). коричневый. Люди по ложительно реагируют на компании с четко определенной идентичностью. Цвета в стандартной палитре специально под бираются так. к которым вы хо тите привлечь внимание. – они в течение многих лет систематически используют кон кретные цвета (красный. Цветовые палитры и типографика Цвет – один из самых эффективных способов передачи идентичности бренда. Цветовая палитра должна состоять из цветов.

Уровень поверхности жем выбирать цвета. шрифты все равно по служат вам эффективным средством передачи вашей иден тичности через визуальный дизайн. чтобы посетители сайта отличали их друг от друга. – таким. с трудом воспринимаются на вебсайте. но не идентичных цветов снижает эффективность цветовой па литры. Такие фирмы. то есть использование шрифтов разного ри сунка и размера для создания определенного визуального стиля. Использование в одном контексте близких. В то же время одна из наших задач – сделать так. Но даже если вы не пойдете на такой радикальный шаг. и применяйте в дизайне последовательно.156 Глава 7. используемым «по умолчанию». настолько важна для идентичности бренда. Типографика. разумеется. Как и в других областях визуального дизайна. п. Просто если вы хотите использовать разные оттенки красного. стали популярной альтернативой менее удобо читаемым шрифтам. в создании цветовых палитр ведущую роль играют контраст и едино образие. одним от тенком синего и т. не означает. разработанные специально для вы вода текста на экран (например. По этой причине шрифты. безупречно выглядя щие на бумаге. облегчает нам поиск эффективных дизайнерских решений. как Arial или Times New Roman. Сказанное. сделайте их настолько различ ными. а применение чрезмерно широкого набора . что вы долж ны ограничить себя одним оттенком красного. Для больших фрагментов текста или коротких меток на элементах навигации вполне подходят шрифты без яркой индивидуальности. чтоб пользователи не сталкивались с визуаль ным шумом. что не которые компании заказали для себя разработку специаль ных шрифтов. Georgia или Verdana от Microsoft). как Apple Computer и Volks wagen. Изза недостаточной разрешающей способности компью терных экранов некоторые шрифты. а также Лондонский метрополитен для усиления своей идентичности пользуются при общении с внешним миром собственной типографикой.

. которую вы передаете. что бы привлечь внимание пользователя. так и в других средствах массовой информации.Цветовые палитры и типографика 157 шрифтов (или непоследовательное применение пусть даже небольшого их количества) может увеличить зашумлен ность дизайна. Используйте разные шрифты только для подчеркива ния отличий в видах информации. Во многих случаях для удовлетворения всех ваших коммуникационных потребностей достаточно весьма ограниченного набора шрифтов. Apple Computer последовательно исполь* зует типографику для передачи целостного образа своего бренда как на веб*сайте. Принципы эффективного использования шрифтов практи чески те же. что и для остальных аспектов визуального ди зайна: не применяйте похожие. но неидентичные шриф ты. но не перегружайте дизайн чрезмерным разнообразием шрифтов. Обеспечьте достаточный контраст между шрифтами. Как и многие другие фирмы.

представленное в прототипе страниц. касающиеся компоновки. он помогает выявить проблемные места и ограни чения. Макет может не повторять (и в большинстве случае не повторяет) компо новку прототипа буквально. Глобаль ные стандарты. Уровень поверхности Макеты и руководства по стилю Прямым аналогом прототипу страницы в области визуаль ного дизайна является графический макет. В некоторых случаях стандарты могут быть весьма де тализированными – вплоть до описания отдельных элемен тов интерфейса и навигации. обычно попадают в руководство по стилю в первую очередь. такие как сетки. составленную из специально подобранных компонентов. Макет представляет собой визуализацию законченно го продукта. если же им это не удается. По строение прототипа до создания макета позволяет нам вна чале изолированно рассмотреть вопросы. которые необходимо принять во внимание. поскольку предназначен для документирования компоновки. Важно уметь видеть простое взаимно однозначное соответ ствие составных частей прототипа и макета. цветовые палитры.158 Глава 7. Этот документ описывает каждый аспект визуального ди зайна – от крупномасштабных до самых мелких. Он демонстрирует. не учитывает тонкостей визуального дизайна. каким образом отдель ные элементы составляют единое целое. Помимо этого руководства по стилю содержат специфиче ские стандарты для отдельных разделов или функций сай та. Определяющим документом для всех принятых нами реше ний в отношении дизайна является руководство по стилю. даже если последние не отражают в точности разме щение элементов. затрагивающие каждую страницу сайта. концептуальные аспекты про тотипа (особенно те. или просто ма& кет. а затем перейти к вопросам уровня поверхно сти. Прототип. стандарты типографи ки или руководства по использованию логотипа. которые относятся к информационно му дизайну) должны быть ясно видны на графических ма кетах. Ключевая задача руководства . в свою очередь. Но как бы то ни было.

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

Заставить всех разработчиков следовать еди ному набору правил может оказаться непростой задачей. Если ваша деятельность в Сети построена как обширный набор независимых проектов. чем можно было бы предположить. Информация о том. могут перемешаться с решениями. сотрудники уносят с собой знания о том. которые запускаются и ведутся различными подразделе ниями. принимаемые по поводу частных проблем в специфических обстоятельст вах. представляет собой хаотическую мешанину стилей и стандартов. заставляющая нас документировать ди зайн. Конечно. но выполнимой . которая уже проделана. ваш сайт. Уровень поверхности по стилю состоит в том. чтобы снабдить разработчиков дос таточно подробной информацией для принятия правильных решений в будущем. ло жится на менеджеров более высокого уровня. Оперативные решения. По мере того как меняются долж ности людей. по которым мы выбрали то или иное решение. в децентрализованной организации создание ру ководства по стилю полезно еще и тем. Разработка единого руководства по стилю. вся организация постепенно начинает стра дать своего рода амнезией. что обеспечивает согласованность дизайна. отражающего послед ний вариант стандартов и сложившуюся практику. – случающийся время от времени переход сотрудни ков на другую работу. эти знания будут утрачены. составление всей этой документации требует больших усилий. стира ются из памяти. скорее всего. Наконец. разбросанными по всему миру. как изо дня в день проектировался и строил ся сайт. Без руководства по стилю. закладывающими основы для будущей работы. представив им результаты той боль шой интеллектуальной работы. является грандиозной. Другая причина. учитывающего потребности всех этих разнооб разных проектов. «уплывает» в другие подразделения или «растворяется» в рабочем коллективе. Уходя. почему применялись те или иные подходы.160 Глава 7. и поэтому ответственность за внедрение в практику стан дартов. сформулированных в руководстве по стилю. но они себя окупают: со временем причи ны.

1994.: СимволПлюс. The NonDesigner’s Design Book. – СПб.jjg. 2е изда ние. Williams. с англ. 2008.1 Вебресурсы: www. Kevin and Darrell Sano.Что читать дальше задачей. Robin. – Пер. Peachpit. Designing Visual Interfaces: Communication Oriented Techniques. 1994. Prentice Hall.net/elements/resources/ 1 Робин Уильямс «Недизайнерская книга о дизайне». Что читать дальше Mullet. причем это единственный эффективный способ заставить ваш сайт выглядеть единым целым. а не нагро мождением разрозненных кусков. 161 .

ГЛА ВА 8 Элементы опыта взаимодействия на практике .

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

Элементы опыта взаимодействия на практике 164 Всемирная паутина как программный интерфейс по к ве р п ом о хн ст Всемирная паутина как гипертекстовое информационное пространство ь Конкретность Визуальный дизайн ка о в Дизайн интерфейса ерфейса н о Дизайн навигации иг Информационный цион дизайн т ук ур а Проектирование вание Информационная он р вия архитектураа с т взаимодействия в оз р й бо осте а н н Функциональная альная ж мо ия спецификация р ст а г те ия Требования ния к контенту Потребности бности по пользователей тел ли сайта са Цели Aбстрактность Создание опыта взаимодействия – это нечто большее. что большая ли . в действительности определяется двумя базо выми принципами: • Необходимо понимать. вы выяснили. обреченным на провал.Глава 8. чем просто решение огромного набора маленьких задач. какую проблему вы пытаетесь решить. Предположим. Раз ница между удачным подходом и подходом.

когда структура опыта взаимодействия диктуется структурой вашей ор ганизации или ее технологических процессов. Аналогичным образом контент. возможно. Ди зайн навигации. . Хране ние истории заказов вашего клиента и информации об оплате заказов в отдельных базах данных. направлен ного вверх и вниз и вызванного вашим решением. как много мелких решений в процессе разработки опыта взаимодействия принимаются неосоз нанно. прихо дящий из разных подразделений вашей фирмы. Принятие решений. по большей части проходит по одному из следую щих сценариев: • Дизайн по умолчанию имеет место. которые с опаской относят ся к высоким технологиям? Такой подход к задаче проектирования опыта взаимодей ствия на вашем сайте кажется до боли очевидным. но понравится ли он тем вашим пользователям. а целостно. что всегда существует риск возникновения «волнового эффекта». касающихся опыта взаимодей ствия. может оказаться неподходя щим для другой части архитектуры. Помните. если будет представлен не по отдельности. Необходимо изменить ее размер и цвет (поверхность)? Или она неудачно расположена на странице (компоновка)? Или функция. работает не так. но отсюда не следует. лучше послужит пользователю. У мастера выбора товара может быть оригинальный и передовой дизайн взаимодействия с пользователем. удовлетворительно работающий в од ном разделе вашего сайта. но вы удивитесь тому. хорошо подходит для существующей у вас технической системы. что такое их разделение при взаимодействии пользователя с сайтом будет удач ным решением. как ожидают пользователи (структура)? • Необходимо осознавать последствия выбранного вами решения проблемы.165 ловая кнопка на домашней странице вызывает сложно сти у пользователей. которую пред ставляет эта кнопка.

которые должны были опреде лять ваши решения.Глава 8. эти кажущи еся простыми инструменты для их успешной реализации требуют принятия сложного комплекса решений. и сайты. Одним из примеров этого явления может служить широко распространен ное и беспорядочное применение вкладок в качестве системы навигации в конце 90х годов. или если в качестве навигационных элементов применяются только раскрывающиеся спи ски. приня тым на других сайтах. когда организация опыта взаимодействия следует соглашениям. Однако. в публикациях или приложени ях. что из вашего поля зрения исчезли стратегические цели. становятся вымирающим ви дом. Повсеместное присутствие поисковых механизмов на веб сайтах отражает растущее понимание того. . потому что их предпочитает ваш ведущий инже нер. что возмож ность получить информацию по заданным критериям – практически универсальная пользовательская потреб ность независимо от специфики аудитории или контента. • Дизайн по указанию сверху отличается тем. а не потребности пользователей или цели сайта. независимо от уместности этих соглашений для ва шей аудитории (и вообще для Сети). пожалуй. Пример: реализация механизма поиска Поисковые механизмы. Если оранжевый цвет доминирует в вашей палитре изза того. охваты вающих все уровни элементов опыта взаимодействия. несмотря на свою вездесущесть. не предлагаю щие возможностей поиска. что в осно ве решений в области опыта взаимодействия лежат лич ные предпочтения. являются самой распро страненной функциональностью в Сети. Элементы опыта взаимодействия на практике 166 • Мимикрический дизайн возникает. К их помощи вре мя от времени прибегает каждый. что он нравится одному из вицепре зидентов фирмы. это означает.

например поиск статей конкретного автора или материалов. поисковая функ ция будет такой сложной. Появятся ли все результаты на одной странице или они будут разбиты на несколько страниц? Как во втором случае пользователь будет переходить с одной страницы на другую? Сможет ли он выбирать страницы произвольно или в строго последо вательном порядке? 167 . Если какието метаданные не предназначены для поискового механизма. результаты поиска будут иметь собственную информационную архитектуру. поисковый механизм может предоста вить пользователям расширенные возможности поиска с учетом метаданных. Поисковый механизм начинает принимать определенные очертания. то есть до про ектирования взаимодействия и информационной архитек туры. какие варианты поиска будут доступ ны пользователям. Кроме того. что пользователю придется пройти через длительную структурированную процедуру. опубликованных за определенный период. Если поисковый механизм умеет учитывать информаци онную архитектуру сайта в целом. прежде чем он увидит результаты. Возможно. Если в число требований к сайту входит наличие мета данных о контенте. как именно пользователь будет ра ботать с механизмом поиска. Дизайн взаимодействия поисковой функции с поль зователем определяет. наоборот. в функциональных спецификаци ях можно уточнить. будет достаточно иметь на каждой странице поле для ввода клю чевого слова.Пример: реализация механизма поиска Удовлетворение этой потребности является ключевым стратегическим решением. Или. когда дело доходит до структуры. Требования к контенту сайта и функциональные специфи кации диктуют набор возможностей поискового механиз ма. он может предложить пользователю больше опций. например ограничение об ласти поиска какимто одним разделом сайта или автома тическую сортировку результатов по их местонахождению в архитектуре.

легко впасть в уныние. вы испытываете отчаяние и начинаете спраши вать себя. При решении проблем. позволяющих пользовате лю перемещаться по результатам. больше всего заинтересуют (и которые в против ном случае останутся незамеченными). Наконец. как составлять за просы. На поверхности все эти элементы связаны в единое целое с помощью визуального дизайна поискового механизма. имеющих отношение к задаче.168 Глава 8. ко торые необходимо решить в процессе организации опыта взаимодействия. Вам придется много кратно идти на компромиссы и оценивать достоинства и не достатки различных подходов. и предоставляет возможность найти интересующую их информацию при просмотре полученных результатов. Простая истина состоит в следующем: правилен тот подход. ве роятно. что ре шение одной задачи заставляет вас вернуться к другим. Как задать правильный вопрос Оказавшись лицом к лицу с клубком мелких проблем. с которыми вы сталкиваетесь. полей и других элементов интерфейса. информацион ный дизайн показывает пользователям. Случается. ко торые вы считали уже решенными. правильным ли путем вы идете. Элементы опыта взаимодействия на практике Структурные решения обретают конкретную форму при разработке компоновки поискового механизма. Ви зуальный дизайн придает интерфейсным и информацион ным элементам согласованный облик и привлекает внима ние пользователей к тем частям страницы. Любой ас . Информационная архитектура отражается в дизайне элементов навигации. Находясь в гуще всех этих проблем. Любое решение должно приниматься осо знанно и целенаправленно и опираться на ваше понимание круга вопросов. Дизайн взаимодействия на этом этапе оформляется в виде распо ложения кнопок. при котором ни один аспект пользовательского опыта не будет оставлен на волю случая. позволяющих сформировать и передать запрос поисково му механизму. которые их. ог ромное значение имеет правильный настрой.

признают ли они его. Самая большая ошибка. скорее всего. особенно если сроки сдачи проекта жестко зада ны. но у вас уже нет возможности (или денег) на исправления. когда все сроки заниматься этими вопросами уже прошли. хуже того. но не устраивающий пользователей. например содержимое сервер ных журналов или электронной почты от клиентов. а на том. потому что они спрятаны под слоями интерфейса и дизайна взаимодействия. Здесь очень показа тельно слово «признание»: акцент делается не на том. 169 . Не можете себе позволить аренду юзабилитилаборатории? Попросите друзей. вы получаете сайт. При пользовательском тестировании очень трудно об наружить эти допущения. коллег поучаствовать в неформальном тестировании сайта. нра вится ли сайт пользователям и будут ли они его использо вать.Как задать правильный вопрос пект разработки опыта взаимодействия может быть «отре гулирован» в соответствии с тем. отклады вая оценку опыта взаимодействия до последнего момента. Или. родственников. чтобы получить представление о потребностях пользователей. сколько времени. средств и сотрудников имеется в вашем распоряжении. В неко торых проектах оценка опыта взаимодействия откладыва ется на самую последнюю стадию разработки. Разра ботчикам кажется. который заведомо плохо работает. называя его «тестированием пользовательского признания» (user acceptance testing). Нет време ни проводить маркетинговые исследования пользователь ской аудитории? Возможно. – это закрыть глаза на фундаментальные вопросы опыта взаимо действия в проекте ради экономии времени и денег. когда бесчисленные допущения уже оказали свое влияние на опыт взаимодействия без какой бы то ни было провер ки. Это тестирование не редко проводится на самом последнем этапе разработки. будет сайт. Однако результатом. что нужно бежать к финишу не огля дываясь. которую вы можете сделать. вам удастся использовать уже имеющуюся информацию. удовле творяющий всем техническим требованиям проекта. В некоторых организациях предпочитают именно такой подход.

определяет содержание заданий для тестируемых респондентов: задания не долж ны затуманивать важные вопросы побочными эффектами. Такой ход мыслей предполагает. Однако тестирование никогда не заменит продуманный и учитывающий всю собранную информа цию процесс проектирования опыта взаимодействия. Слишком много команд вебразра ботчиков работают в состоянии непрерывного аврала. Вопросы.170 Глава 8. а пользо ватели соответственно будут давать не те ответы. Проведение тестов. Элементы опыта взаимодействия на практике Многие специалисты отстаивают тестирование на пользо вателях как главное средство обеспечения хорошего опыта взаимодействия. Лю бой проект воспринимается как реакция на некий гряду . предъявили его небольшой группе людей. что им не понравилось. Тестирование поможет вам разобраться в потребностях ваших пользова телей. то знание того. нацеленные на конкретные элементы опыта вза имодействия. как пользователи формулируют свои потребности. когда вы осуществляете тестирование с помощью ин терактивного прототипа. Марафон и спринт Подобно тому как нельзя отдавать на волю случая ни один аспект опыта взаимодействия. позволя ющих достичь той же цели. Трудность создания опыта взаимодейст вия состоит в необходимости понять потребности пользо вателей лучше. построенных без внимания к элементам опыта взаимодействия. приве дет к тому. чем они понимают их сами. а затем пошли переделывать то. какого рода про блемы вы намерены исследовать. помогут вам получить от пользователей бо лее ценную информацию. но это лишь один из многих инструментов. нельзя пускать на самотек и процесс разработки. Сводится ли проблема с панелью навигации к ее цветовому решению? Или дело в надписях на кнопках? Нельзя полагаться на то. что вы будете задавать не те вопросы. что вы произвели некий продукт. Напри мер.

что он добе жит до финиша. но это ошибка. Гораздо чаще вы то быстро продвигаетесь впе ред. проверяя согласованность отдель 171 . что марафон надо бе жать так. и они расходуют всю эту энергию в течение нескольких минут. и соответственно регу лирует темп бега. марафо нец непрерывно следит за своим состоянием. что у него получается. и бегите соответ ствующим образом. гораздо больше шансов на победу или хотя бы на то. словно он является последовательностью корот ких дистанций. Отдавайте себе отчет. Разработка вебсайта редко представляет собой спринтер ский забег.Марафон и спринт щий кризис и в результате выбивается из графика. я часто прибегаю к спортивной ме тафоре: марафон и спринт – разные дистанции. Однако присутствует и еще один фактор: чтобы не выйти за пределы своей выносливости. еще не начавшись. Спринтерская стратегия – бежать как можно быстрее от начала до конца – может показаться единственной разум ной при участии в забеге. то замедляетесь. сколько и спринтерам. Спринтеры долж ны задействовать огромное количество энергии в момент выстрела стартового пистолета. Успех в марафоне зависит от удачно выбранного темпа. но они расходуют ее совсем иначе. Одной из причин неудачи при таком подходе является ограниченная человеческая выносливость. Когда я описываю проблемы разработки опыта взаимодей ствия своим клиентам. Марафонцам требуется столько же энергии. в какой гонке вы участвуете. Кажется. наблюдая. Прямо со стартовой линии спринтер должен бежать как можно быстрее и не сбавлять темп. пока не добежит до финиша. При прочих равных у бегуна. а что – нет. тестируя свою работу. Марафон – это забег на длинную дистанцию. строя прототипы и генерируя идеи. знающего. когда ускориться. а когда сбавить темп. Спринт – забег на короткую дистанцию.

в которых эти элементы по стоянно находились под угрозой исключения. при решении оставшихся в плане задач вы оказы ваетесь в ситуации дефицита информации о глобальном контексте проекта и как следствие теряете целостность ви дения. Дизайнеры и разработчики часто жалуются на недостаток внимания к стратегии. в которых они принимают участие. которая не дает на выходе закон ченные компоненты сайта в виде графики или фрагментов кода. осознанные проектные решения потребуют много времени в краткосрочной перспективе. Я не раз был вовлечен в проекты. Однако эти виды работ были запланированы в проекте в первую очередь потому. но сэкономят вам гораздо больше времени в перспективе долгосрочной. Элементы опыта взаимодействия на практике ных частей и уточняя общую картину проекта. – берите с него пример. Когда вы смотрите на сайт извне (или впервые приступаете к разработке вебсайта). – в ущерб элементам. ваше внимание легко привлекают элементы. потому что теперь ва шим следующим большим «проектом» будет исправление недостатков последнего проекта – и цикл начнется заново. требую . Иро ния судьбы. Хороший марафонец знает. Такая деятельность сворачивается в первую очередь. что есть что. Когда вы доберетесь до конца. что элементы. вы получите продукт. набору возможностей и структуре сайта в проектах. если проект начинает отставать от графика или выходит за рамки бюджета. в то время как другие требуют более взвешенного под хода. расположенным ниже. состоит в том. Когда они исключа ются. что являлись подготовительны ми этапами для последующих задач. кото рый не соответствует ничьим ожиданиям. Многие не одобряют деятельность. однако. Вам не только не удалось решить изначальную задачу.172 Глава 8. относящиеся к верхним этажам пятиуровневой модели. Некоторые задачи действительно необходимо решить как можно ско рее. но вы фактически создали новую проблему для себя. Продуманные.

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

174

Глава 8. Элементы опыта взаимодействия на практике

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

Алфавитный указатель
F, H
Flash, 126, 128

визуальный дизайн, 46
возврат инвестиций, 28
количество брошенных корзин
с покупками, 30

HTML, 126, 127

уровень конверсии, 28

V
Visual Vocabulary, 114

А

восстановление после ошибок, 102
восходящий архитектурный подход, 103

Г

анализ задач, метод исследования, 63
архитектура информационная, 45, 94, 102
восходящий подход, 103
нисходящий подход, 102
архитектурная схема, 114

Б
БернерсЛи, Тим, 41
бизнесцели, 53
борьба конкурентная, 27
бренд, 147
идентичность бренда, 54, 147

В
взаимодействие с клиентом, 27
взаимодействия проектирование, 45

графический макет, 158

Д
двойственность опыта взаимодействия,
40, 75
гипертекстовое информационное
пространство, 42, 75
программный интерфейс, 42, 75
демографические профили, 58
дерево, информационная структура, 106
дизайн
визуальный, 46, 146
внешняя согласованность, 154
внутренняя согласованность, 153
графический макет, 158
единообразие, 151

45. 151 карточная сортировка. 76 К Е карта сайта. 166 маркетинговое. 146 исследование ориентированный на пользователя. 62 по указанию сверху. 156 узел–спица. 120. 168 И конверсии уровень. 106 Л иерархическая. 120. 146 информационный поиск. 61 требования к контенту. 60. 56 компоновки уровень. 125. 100 навигации. 158 органическая. 36. 61 контент. 150 организационные принципы. 46. 108 концептуальная модель. 97. 32 контекстуальное. 46. 106 руководство по стилю. 73 пользовательской аудитории. 62 интервью. 155 узел. 111 . 42 брошенных корзин с покупками. система выносной навигации. 146 информационный дизайн. 103 контента реестр. 102 мимикрический. 54. 62 по умолчанию. 156 последовательная. 130. 150 матричная. 106 интерфейса. 62 документирование требований. 120. 64 классификационная номенклатура. 110 информационная структура дерево. 108 цветовая палитра. 106 лексикон нормализованный. 98 фасеты. 28 идентичность бренда. 107 типографика. 123 на основе метафоры. 135. 102 контраст в визуальном дизайне. 46 информационный.Алфавитный указатель 176 контраст. 105 шрифт. 27 индекс. 119. 94. метод исследования. 165 полевое. 46. 76 функциональные спецификации. 102 восходящий подход. 135 единообразие в визуальном дизайне. 47 требования к. 135 контекстуальное исследование. система выносной навигации. 44 информационная архитектура. 46. 44. 87 нисходящий подход. 111 З количество задача. 30 заинтересованные стороны. 67 просмотров страниц. 166 исправление ошибок. 147 конкурентная борьба.

62 метаданные. 37. 44. 132 набора возможностей. 133 возврат инвестиций. 61 среднее время. 57 проектирование взаимодействия. 146 навигации. 102 набора возможностей уровень. 120. 95 индекс. 51. 100 маркетинговое исследование. 146 модель пользователя. 81 номенклатура классификационная. 102 функциональные спецификации. 130. 100 марафон. 166 двойственность. 24 навигация принятие решений. 79 информационный. 158 обработка ошибок макет страницы. документ. 55 определение требований. 89 метрики успешности. 31 . 52. 131 требования к контенту. 44. 125. 151 исправление ошибки. 56 опрос. 44. 98. 111 эффективность. 68. 98 визуальный. 165 выносная. 135 терминология. 171 предотвращение ошибки. 124 общее представление о сайте. 42 карта сайта. 71. 167 на вебсайтах. 23 микронавигация. 167 постоянные элементы. 36. 133 компоновки. 36. 46. 134 стратегии. 135 технология. 36. 167 нисходящий архитектурный подход. 84 структуры. 48 глобальная. 46. 134 потребности пользователей. 102 макетная сетка. 138 восстановление после ошибки. 135. 112 уровни. метод исследования. 41. 52. 146 мозговой штурм. 36.Алфавитный указатель 177 М О макет графический. 167 назначение элемента контента. 168 локальная. 56 опыт взаимодействия. 146 Н информационная архитектура. 64 интерфейса. проводимое на сайте. 72 количество просмотров страниц. 100 метафора. 123 дизайн на основе метафоры. 111 цели сайта. 36. 28 мимикрический дизайн. 53 нормализованный лексикон. 84 дополнительная. 119. 120. 120. 71. 97. 133 уровень контекстная. 44. 75 модель концептуальная. 93. 132 поверхности. 40. 145. 168 сервисная.

общее. 68. 132 пользовательское тестирование. 64 потребности пользователей. 52. 58 поисковый механизм. 135 интервью. документ. 133 полевое исследование. 167 разработка программного обеспечения. 80 прототип страниц. 102 демографические. 94. 36. 139 поверхности уровень. 61 карта сайта. 62 микронавигация. 89 принципы организации информационных структур. 168 размер элемента контента. 63 индекс. 110 ориентирование. 134 . 145. 45. 61 контекстная. 135 контекстуальное исследование. 137 представление о сайте. 131 маркетинговое исследование. 108 фасеты. 108 фасеты. 87 исследование. 57 методы исследования система навигации. 158 С полнофункционального вебсайта. 58 уровень компоновки. 61 сегментация. 151 карточная сортировка. 110 П палитра цветовая. 85 уровень стратегии. 94 уровень структуры. 62 распределение ролей в команде. 63 сегментация пользовательской аудитории. 67 пользовательская аудитория реестр контента. 62 дополнительная. 64. 87 полевое исследование.Алфавитный указатель 178 организационные принципы информа ционной архитектуры. 60. 64 сетка макетная. 64 поиск информационный. 61 постоянные элементы. 133 фокусгруппа. 167 Р уровень поверхности. 131 выносная. 62. 133 опрос. 166 психографические. 132 предотвращение ошибок. 62 локальная. 58 пользовательское тестирование. 63 руководство по стилю. 100 сервисная. 62 глобальная. 46. 134 анализ задач. 95 персонаж. 167 ранжирование требований. 58 прототипа. 168 профили пользователей. 44. 155 проектирование взаимодействия. 168 уровень набора возможностей.

167 матричная. 72 внутренняя. 114 фасеты. 55 . 87 соглашение. 139 фокусгруппа. 106 стратегии уровень. 154 определение. 77 179 требования. 36. 156 метрики успешности. 105 цели сайта. 52. 76. 36. 97. 46. 37. 54 типографика.Алфавитный указатель система управления контентом. 167 последовательная. 81 спринт. 52. 48 бизнесцели. 89 уровни обработки ошибок. 93. 44. 153 ранжирование. 73 согласованность визуального дизайна к контенту. метод исследования. 57 узел. 76 сортировка карточная. 145. 36. 122 функциональные. 44. 111 терминология в области опыта взаимодействия. 100 структура информационная уровни опыта взаимодействия дерево. 155 цели сайта. 51. 168 иерархическая. 44. 106 структуры уровень. 81 Ц цветовая палитра. 76 словарь нормативной лексики. 56 узел–спица. 36. 93. 167 схема Ф архитектурная. 37. 168 органическая. 44. 46. информационная структура. 84 внешняя. 76. 76. 41. 167 узел–спица. 52. 36. 111 документирование. 53 отношение пользователей. 167 уровень конверсии. 58 идентичность бренда. 106 поверхность. 44. 106 компоновка. 53 опыт взаимодействия. 71. 80 формат элемента контента. 44. документ. 28 стратегия сайта. 53 структура. 106 набор возможностей. 107 стратегия. 119. 108 потребности пользователей. 81. 44. 110 страниц. 64 спецификации функциональные. метод выявления требований. 171 У узел информационной структуры. 44. 76 тезаурус. 68. 105 среднее время. проводимое на сайте. 51. 42 технология функциональные спецификации. 61 сценарий. 84 Т функциональные требования. 44.

156 Э элементы интерфейса кнопки. 31 Ю юзабилити.180 Ч частота обновления элемента контента. 84 частота обновления. 127 флажки. 128 кнопкипереключатели. 86 Ш шрифт. 84 размер. 127 раскрывающиеся списки. 128 текстовые поля. 61 Алфавитный указатель . 85 формат. 128 списки. 86 эффективность опыта взаимодействия. 127 элементы контента назначение.

. Если Вы получили данный файл какимлибо другим образом. Вы нарушили международное законодательство и законодательство Российской Федерации об охране авторского права.ru). Элементы опыта взаимодействия» – покуп ка в Интернетмагазине «Books.По договору между издательством «СимволПлюс» и Интернетмагази ном «Books.Ru – Книги России».Ru – Книги России» единственный легальный способ полу чения данного файла с книгой ISBN 5932861088. где именно Вы получили данный файл. Вам необходимо удалить данный файл. а также сооб щить издательству «СимволПлюс» (piracy@symbol. название «Вебди зайн: книга Джесса Гарретта.

Книга Джесса Гарретта раскрывает сложную тему вебдизайна. ориентированного на пользователя. в разработке Visual Vocabulary – открытой нотационной системы. Его вклад в развитие области опыта взаимодействия состоит. одновременно удов летворяя потребности ваших пользователей. консалтинговой фирмы в СанФран циско. Гарретт работал над вебпроектами для таких компаний. Его сайт www. – кажется. так что на каждой странице вы найдете полезные сведения. что единственный способ построить удачный сайт – это пригласить специалистов. «Джесс Гарретт наконецто расширил свою знаменитую схему до объема целой книги. С момента своего появления в марте 2000 года схема Гарретта «Элементы опыта взаимодействия» (The Elements of User Experience) была загружена с его сайта более 20 тысяч раз. автор книги «Вебдизайн: книга Стива Круга или ìне заставляйте меня думать!î» Спрашивайте наши книги Стив Круг Вебдизайн или «не заставляйте меня думать!» Êàòåãîðèÿ: âåá-äèçàéí Óðîâåíü ïîäãîòîâêè ÷èòàòåëåé: ñðåäíèé www. 13:57 . Intel. Когда приходится учитывать массу вопросов – юзаби лити. Эта вводная информация позволит любой команде вебразработчиков. Даже самый интерес ный контент и самые передовые технологии не помогут вам сбаланси ровать эти две задачи без поддержки последовательного и непротиво речивого опыта взаимодействия.Многие компании уже осознали. HewlettPackard и National Public Ra dio.symbol. А поскольку он человек весьма умный. сосредоточиваясь на общих идеях. предназначенной для до кументирования информационной архитектуры и принятой во многих организациях по всему миру.jjg. (495) 9458100 31. идентичность бренда. которая проясняет довольно запутан ную тему разработки опыта взаимодействия. независимо от ее размера.03. Автор рисует перед читателем полную картину разработки опыта взаимодействия на вебсайте – от стратегии и требований к контенту до информационной архитектуры и визуального дизайна. а не на инструментах и технических приемах. среди прочего.p65 1 Дмитрий Кирсанов Вебдизайн Якоб Нильсен Вебдизайн ISBN-13: 978-5-93286-108-0 ISBN-10: 5-93286-108-8 ЭЛЕМЕНТЫ ОПЫТА ВЗАИМОДЕЙСТВИЯ Джесс Гарретт один из основателей Adaptive Path. Boeing. дизайн вза имодействия. разбирающихся во всех тонкостях.ru Web-Design_Garrett. спроектиро вать успешный опыт взаимодействия. что вебдизайн – это нечто большее.net – один из самых посещаемых вебресурсов по инфор мационной архитектуре. при помощи понятных объясне ний и четких иллюстраций. Понастоящему эффектив ный сайт служит вашим стратегическим целям. как AT&T. Motorola. чем код без ошибок и броская графика. информационную архитектуру. 9 785932 861080 Издательство «СимволПлюс» (812) 3245353. Однако создание опыта взаимодействия кажется невообразимо сложным делом.» — Стив Круг.2008. то сумел изложить все очень коротко.