Кевин Брукс - Сторителлинг в проектировании интерфейсов. Как создавать истории, улучшающие дизайн

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

Комиксы и мультфильмы становятся все более популярным инструментом рассказа или обмена мнениями.

Идея не нова. Комиксы используются в этих целях много лет. В них можно в кратком виде показать длинную историю. Многие издательства выпускают комиксы вида «Классика в картинках». Даже американский военный журнал PS Magazine создал серию иллюстрированных историй о правилах безопасности и инструкций (рис. 15.3).

РИС. 15.3.Обложка июньского выпуска PS Magazine 1971 года dig.library.vcu.edu/cdm4/index_psm.php

Среди авторов этих комиксов были такие известные художники, как Уилл Айснер [102]. Стиль «Ежемесячника по профилактическому обслуживанию» постоянно менялся с учетом новых реалий.

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

РИС. 15.4.Иллюстрация из отчета по юзабилити: цитаты, подтекст и контекст. Фотография взята из клипарта

Возможно, картинки – самое привлекательное в таких историях. Но они также позволяют раскрыть сложные темы всего в нескольких словах.

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

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

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

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

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

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

РИС. 15.5.Раскадровка об использовании принтера (на создание ушло меньше 5 минут)

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

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

РИС. 15.6.В этой раскадровке Рон Соува показывает важность репетиции презентации перед выступлением (создана менее чем за 3 минуты)