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

Однако проблему неумения рисовать можно решить с помощью инструментов. Майк Хьюз в своей статье на сайте UXmatters (www.uxmatters.com/) рассказал, как представляет резюме для еженедельного отчета в виде комиксов. Он утверждает, что картинки помогают ему «сократить описание сложных проблем и к тому же… подать их в юмористическом и наглядном виде». Майк признает, что он не блестящий художник. Он использует бесплатное ПО под названием «Убедительный комикс» (Make Beliefs Comix). Пример его работы показан на рис. 15.2.

^{РИС. 15.2. Использование комиксов для внутрикомандного общения: www.uxmatters.com/mt/archives/2009/11/visual-methods-of-communicating-structure-relationship-and-flow.php}

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

Майк Хьюз

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

Комикс позволяет передать беседу

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

Идея не нова. Комиксы используются в этих целях много лет. В них можно в кратком виде показать длинную историю. Многие издательства выпускают комиксы вида «Классика в картинках». Даже американский военный журнал 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).