Глава 7. От требований к пользовательскому интерфейсу

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

циональности и при необходимости вносить радикальные изменения. Часто оказывается полезным попробовать несколько вариантов расположения областей и выполнить проверочные сценарии (см. шаг 6 ниже) - и только тогда остановиться на лучшем решении. Трата слишком больших сил и времени на мелкие детали на ранней стадии проектирования затрудняет проектировщикам смену курса в сторону более правильного решения. Выбросить результаты работы и попробовать иной подход легче, когда затраты невелики.

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

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

Общая инфраструктура пользовательского интерфейса 171

сования высокоуровневых эскизов интерфейса применяются такие продукты, как Adobe Fireworks, Adobe Illustrator, Microsoft Visio, Microsoft PowerPoint и OmniGraffle от Omni Group. Главное здесь - найти наиболее удобный для вас инструмент, позволяющий быстро работать на высоком уровне, не вдаваясь в детали. Мы находим полезным применять для макетов инфраструктуры такой стиль, который подчеркивает схематичность предложенных решений (вспомним, что грубые наброски лучше всего стимулируют обсуждение проектных решений). Крайне важно также иметь возможность легко получить визуализацию набора последовательно связанных экранов, отражающую поведение продукта при выполнении ключевого сценария (система «фреймов»¹ в Fireworks делает этот инструмент особенно удобным для решения данной задачи).

Шаг 5: создание ключевых сценариев

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

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

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

В последней версии Adobe Fireworks CS4 фреймы были переименованы в «состояния» - удачное решение с точки зрения применения данного элемента. - Примеч. науч. ред.

Глава 7. От требований к пользовательскому интерфейсу

Раскадровка

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

Рис. 7.2. Пример более подробного варианта компоновки веб-приложения Cross Country TravCorps, связанного с поиском работы