Библиотека Интернет Индустрии I2R.ru

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

Copyright notice от переводчика: данная статья - перевод второй главы книги Джесси Гарретта Elements of User Experience. Данный перевод не является официальным. Он не может быть использован в коммерческих целях, а только для ознакомления с содержанием книги, которую можно приобрести на Amazon.

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

Пять уровней

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

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

Поверхность

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

Схема

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

Структура

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

Рамки

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

Стратегия

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

От фундамента к крыше

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

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

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

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

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

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

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

Двойственность

Разумеется модель поведения пользователя на сайте можно представить и по другому. Как и любая другая области знаний, наука разработки сайта тоже породила свой словарь терминов и выражений. Тому, кто столкнулся в первый раз с веб-дизайном, такое нагромождение похожих терминов может показаться хаотичным: дизайн интерактивности, информационный дизайн, информационная архитектура. Что эти термины обозначают? И обозначают ли что-либо вообще? Или может это просто модные словечки? К еще большему конфузу в разных ситуациях эти выражения используются по-разному. Один называет "информационным дизайном" то, что другой считает "информационной архитектурой". А какая между ними разница? Существует ли она?

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

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

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

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

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

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

Модель сайта

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

Уровень стратегии

На данном уровне в обоих частях действуют одни и те же стратегические цели. Нужды пользователя - это цели сайта, определяемые извне, - в частности, будущими пользователями нашего сайта. Мы должны понять, что хочет аудитория нашего сайта и как эти её желания согласуются с другими ее целями. В противовес им выступают цели сайта, которые мы определяем сами для себя. Целями сайта могут быть например коммерческие показатели ("Заработать на сайте за год 1 миллион долларов") либо что-то другое ("Проинформировать посетителей о нашем кандидате на выборах"). В Главе 3 мы более подробно рассмотрим эти элементы.

Уровень рамок

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

Уровень структуры

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

Уровень схемы

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

Уровень поверхности

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

Использование элементов

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

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

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

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

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

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

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