Сторителлинг в проектировании интерфейсов. Как создавать истории, улучшающие дизайн - страница 92
>РИС. 15.4. Иллюстрация из отчета по юзабилити: цитаты, подтекст и контекст. Фотография взята из клипарта
Возможно, картинки – самое привлекательное в таких историях. Но они также позволяют раскрыть сложные темы всего в нескольких словах.
Раскадровка в визуализации истории
Каркасные модели и прототипы – традиционные инструменты для представления интерактивных возможностей продукта: перехода от экрана к экрану, изображений на разных экранах. Раскадровки позволяют узнать даже больше о взаимодействии пользователя и продукта (контекст, конкретные события).
Раскадровки используются для показа рабочих проблем или демонстрации того, как продукт сам ответит на возможные вопросы пользователей. Как и в комиксах, в них есть картинки (в хронологическом порядке) и окошки для текста. Раскадровки могут проиллюстрировать всю задачу целиком или показать мысли и реакцию пользователей на продукт (см. историю о Flow Interactive в главе 8).
Рон Соува проводит мастер-классы по созданию раскадровок. Он настаивает, что для создания хорошей раскадровки не нужно уметь рисовать или иметь много времени.
Раскадровки имеют много общего с устными и письменными историями, но есть два важных отличия.
Во-первых, истории задействуют воображение, слушатель сам связывает детали. Зато в раскадровках используется тот уровень детализации, который нужен автору, чтобы четко показать процесс. Иллюстрации подробны, поэтому зрителям проще одинаково воспринять события и контекст. Например, на рис. 15.5 показан не только человек, пользующийся принтером, но и контекст (его отношение к принтеру). Эта информация помогает определить, нужно ли в данном случае выводить документы на печать.
Это раскадровка Рона Соувы об исследовании, проведенном в колл-центре. Здесь не только показано, что у пользователя есть доступ к принтеру и на каком этапе он использует устройство. Видно также, насколько далеко сидит пользователь от принтера и что должен сделать, чтобы воспользоваться этим аппаратом (повернуться в кресле, выйти в другую комнату или пройти по коридору).
>РИС. 15.5. Раскадровка об использовании принтера (на создание ушло меньше 5 минут)
К тому же в раскадровках редко нужен перевод. Поэтому их поймут люди из разных стран, говорящие на разных языках, и сотрудники одной компании, пользующиеся разной терминологией и по-разному оценивающие проект. Например, исследователи пользовательского опыта могут с помощью раскадровок объяснить процесс IT-отделу, а разработчики – менеджерам.
Раскадровки, как и каркасные модели, помогают быстро обсудить разработку и прийти к соглашению. Однако раскадровки помогают передать детали, не относящиеся к пользовательскому интерфейсу: время, последовательность событий, место, размер, цвет, эмоции и пространственные отношения. На рис. 15.6 показана ценность итерационного процесса и доработок (не нужно даже слов).
>РИС. 15.6. В этой раскадровке Рон Соува показывает важность репетиции презентации перед выступлением (создана менее чем за 3 минуты)
Раскадровка – мощное средство детального и последовательного визуального представления истории о пользовательском опыте. Она отлично подходит для следующих целей:
• Визуальное представление идеи.
• Демонстрация работы, включая время и последовательность.
• Вовлечение разных групп.
• Преодоление географических и языковых барьеров.
• Пояснение идеи.
• Непосредственная обратная связь с аудиторией.
• Возможность обдумать каждое действие.
• Улучшение структуры путем определения взаимосвязей.
• Удовольствие: создавать и рассматривать раскадровки весело.
• Привлечение интереса аудитории с помощью различных инструментов.
Если вы представите себе основные моменты истории в визуальной форме, вам проще будет подобрать подходящие изображения. Тогда история станет для вас более реалистичной… и для аудитории тоже.
Визуальные элементы в детализации или демонстрации общей картины
Другая функция изображений в историях – добавление четких образов. Читатель может увеличить масштаб, чтобы внимательнее рассмотреть детали, или уменьшить, чтобы увидеть картину целиком. Визуальные истории можно проанализировать точно так же, как и словесные описания.
