Проектирование в среде Всемирной паутины

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

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

Уже в те времена авторы веб'сайтов признавали, что источником но' вой проблемы проектирования являются гиперссылки в документах – проектирование, организация и структурирование содержания. Пред' ложенный Питером Морвилем (Peter Morville) термин видимость1 (findability) метко описывает эту проблему. Новое поколение проекти' ровщиков, назвавшее себя информационными архитекторами, созда' ло дисциплину и практику решения проблем невизуального проекти' рования, касающихся логической структуры и связей внутри инфор' мационного наполнения.

Некоторые из современных приложений, работающих в броузере (час' то называемых приложениями Web 2.0 – термин, предложенный Ти' мом О’Рейли (Tim O’Reilly)), стирают различия между настольными приложениями и веб'приложениями и даже предлагают возможность создавать новые идиомы взаимодействия, наилучшим образом поддер' живающие тех людей, для которых мы проектируем. С появлением так называемых насыщенных интернет'приложений (использующих такие технологии, как AJAX, Macromedia Flash, Java и ActiveX) про' ектирование интернет'приложений стало требовать гораздо большего внимания к тонким аспектам поведения продукта, чем в случае с преж'

1 Этому вопросу посвящена книга Питера Морвиля «Тотальная видимость. Как наши находки меняют нас». – Пер. с англ. – СПб: Символ'Плюс, 2008. – Примеч. науч. ред.

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

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

Информационные веб−сайты

Изначально веб'броузеры задумывались как средство просмотра опуб' ликованных и связанных документов без обращения к неудобным про' токолам вроде FTP (File Transfer Protocol), Gopher или Archie. Как следствие, изначально веб'среду составляли исключительно коллек' ции документов (или страниц) такого рода, известные как веб-сайты.Мы по'прежнему используем этот термин для описания информацион' ных служб Всемирной паутины, взаимодействие с которыми сводится к поиску информации и переходу по гиперссылкам. Такие веб'сайты легко придумать: набор страниц или документов, имеющих последо' вательную или ступенчатую иерархию, модель навигации для перехо' да с одной страницы на другую, а также функция поиска, обеспечи' вающая целеориентированный доступ к конкретным страницам. Су' ществует множество простых веб'сайтов – персональных, созданных для нужд маркетинга и технической поддержки, а также информаци' онных для интрасетей. В случае таких сайтов основные вопросы про' ектирования связаны с дизайном, визуальной композицией, элемен' тами навигации и структурой (информационной архитектурой). Веб' сайты, как правило, не демонстрируют сложного поведения (то есть такого поведения, где результат взаимодействия с пользователем за' висит от состояния приложения), а потому им редко требуется внима' ние проектировщиков взаимодействия.

Поскольку предмет этой книги – проектирование взаимодействия, мы не станем обсуждать многочисленные аспекты проектирования веб' сайтов, которые подробно описаны в имеющейся литературе. Ясное и доступное изложение важных базовых элементов сайтостроительст' ва дается, в частности, в книгах «The Art and Science of Web Design»

(Veen, 2000) Джеффри Вина (Jeffrey Veen), «Don’t Make Me Think!»1 (Krug, 2000) Стива Круга (Steve Krug) и «Information Architecture»2 (Rosenfeld and Morville, 1998) Луиса Розенфельда (Louis Rosenfeld) и Питера Морвиля. Еще один отличный источник информации – веб' сайт Якоба Нильсена useit.com.

Типы информационных веб−сайтов

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

Частота обновления содержимого сайта до некоторой степени предо' пределяет это поведение. Информационные сайты с постоянно обнов' ляемой информацией, естественно, привлекут больше постоянных по' сетителей, чем сайты, где содержимое обновляется раз в месяц. Редко обновляемые сайты используются скорее как источники справочного материала (если информация на них не является животрепещущей), чем как ресурсы, к которым пользователь обращается постоянно. Сле' довательно, они должны демонстрировать поведение, типичное для временного, а не монопольного приложения. Более того, такой сайт может подстраиваться под пользователя в зависимости от частоты его посещений, проявляя признаки монопольного типа.

Признаки монопольного типа

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

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

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

2 Л. Розенфельд, П. Морвиль «Информационная архитектура в Интернете», 2'е издание. – Пер. с англ. – СПб: Символ'Плюс, 2005.

ложения, хотя создателям таких приложений легче диктовать исполь' зуемое разрешение.) Разработчикам веб'сайта приходится уже на ран' них стадиях проекта принимать решение о том, какое наименьшее разрешение они готовы поддерживать. Технически возможно исполь' зовать адаптивную («резиновую») верстку для гибкого отображения содержания страниц при самых разнообразных размерах окон, однако все равно необходима оптимизация под распространенные экранные размеры и наименьшее допустимое для ключевого персонажа разре' шение. Качественные исследования помогут с прояснением этого во' проса: какое количество людей, похожих на персонажей сайта, рабо' тает с разрешением 800´600?

Признаки временного типа

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

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

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

Сервисные веб−сайты

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

Чтобы реализовать адекватное поведение функционально обогащен' ных элементов управления, в процессе проектирования сервисных

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

Типы сервисных веб−сайтов

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

Поисковые машины и порталы вроде Google и Yahoo! представляют со' бой особую разновидность сервисного сайта; их назначение – обеспечи' вать навигацию по другим веб'сайтам, а также доступ к подборкам но' востей и информации из многочисленных источников. Очевидно, что поиск и переход на сайты из результатов поиска – деятельность, нося' щая временный характер, однако для агрегации информации на порта' ле вроде Yahoo! при реализации иногда требуется использовать моно' польный подход. Мимолетность общения пользователей с временными функциями сервисных сайтов делает особенно важной минимизацию действий, связанных с навигацией. Возникает соблазн разбить инфор' мацию и функции на несколько страниц, чтобы снизить время загруз' ки и визуальную сложность (похвальное стремление), однако следует избегать путаницы и помнить, что аудитория устает щелкать мышью. В важном юзабилити'исследовании 2001 года, проведенном User In' terface Engineering и посвященном тому, как пользователи восприни' мают время загрузки страниц сайтов электронной коммерции, таких как Amazon.com и REI.com, выяснилось, что восприятие пользовате- лем продолжительности загрузки страницы в большей степени зави- сит от того, достигает ли пользователь своих целей, нежели от ре- альной продолжительности загрузки (Perfetti and Landesman, 2001).

Веб−приложения

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

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

Вот некоторые примеры веб'приложений:

• Программы для предприятий, начиная со старомодных интерфей' сов SAP, реализованных в броузере, и заканчивая современными средствами командной работы, такими как Salesforce.com и Base' camp компании 37signals.

• Средства персональных публикаций, включая приложения для блогов (MoveableType от SixApart), приложения для публикации фотографий (Flickr) и, конечно же, вездесущие wiki'системы.

• Рабочие инструменты, такие как работающий в броузере текстовый процессор Writely и электронные таблицы Google Spreadsheets.

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

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

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

Типы веб−приложений

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

Монопольные веб-приложениястремятся доставлять информацию и функциональность так, чтобы наилучшим образом поддерживать слож' ную деятельность человека. Часто это требует создания функционально насыщенных высокоинтерактивных пользовательских интерфейсов. Хорошим примером подобного веб'приложения служит Flickr – интер' нет'служба публикации фотографий, которая предоставляет такие возможности, как сортировка изображений посредством перетаскива' ния (drag'and'drop) и прямое редактирование текстовых меток и анно' таций (рис. 9.6). Многочисленные корпоративные программы, работа' ющие в броузере, также являются монопольными веб'приложениями.

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

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

Рис. 9.6. Инструмент Organize на сайте Flickr позволяет пользователям создавать наборы фотографий и менять свойства фотографий пакетно – и все в одном месте, не открывая для этого бесчисленные веб-страницы

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

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

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

Интернет−приложения

В результате непрерывного развития сети Интернет родились две уди' вительных особенности: мгновенный доступ к невероятным объемам информации и простота организации совместной работы. В основе этих особенностей лежит среда World Wide Web, но это не означает, что для их использования требуется веб'броузер.

Другой отличный подход – отказаться от броузера полностью и созда' вать интернет-приложения. Разработка приложения на стандартной для персонального компьютера платформе, такой как .NET или Java/ Swing, с использованием стандартных протоколов сети Интернет обес' печивает богатые, четкие, сложные взаимодействия, сохраняя воз' можность обращаться к данным Всемирной паутины. Развитие прото' колов доставки данных, таких как RSS, и интерфейсов прикладного программирования веб'приложений позволяет продуктам извлекать из веб'среды всю ту же информацию, которая доступна броузеру, но быть гораздо более приятными для пользователей благодаря возмож' ностям, доступным только «родным» для персонального компьютера приложениям.

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

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

Интранет−приложения

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

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

Прочие платформы

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