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

Раскадровка в визуализации истории

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

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

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

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

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

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

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

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

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

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

Раскадровка – мощное средство детального и последовательного визуального представления истории о пользовательском опыте. Она отлично подходит для следующих целей:

• Визуальное представление идеи.

• Демонстрация работы, включая время и последовательность.

• Вовлечение разных групп.

• Преодоление географических и языковых барьеров.

• Пояснение идеи.

• Непосредственная обратная связь с аудиторией.

• Возможность обдумать каждое действие.

• Улучшение структуры путем определения взаимосвязей.

• Удовольствие: создавать и рассматривать раскадровки весело.

• Привлечение интереса аудитории с помощью различных инструментов.

Если вы представите себе основные моменты истории в визуальной форме, вам проще будет подобрать подходящие изображения. Тогда история станет для вас более реалистичной… и для аудитории тоже.

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

Вспомните историю о Тэннере:

Тэннер увлекся компьютерной игрой Skatepunkz. Он уже дошел до 12-го уровня, когда получил сообщение от своего друга Стива. Тот задал Тэннеру вопрос о домашнем задании. Тэннер испуганно взглянул на часы. Пора спать, а домашнее задание он так и не сделал. Скоро могут зайти родители…

Посмотрите на фотографию (рис. 15.7). Соответствует ли она описанию?

РИС. 15.7. Это Тэннер?

На изображении деталей меньше. Например, вы не знаете имя мальчика, его друзей, есть ли у него родители. Вы не видите, что он делает за компьютером. Однако он того же возраста, что и герой истории, и пользуется компьютером. Живет он явно в городе. За окном темно (вечер). Квартира выше первого этажа (видите фонари в окне)? Можно кое-что сказать и о социальной среде:

• У мальчика есть собственная комната. Там никто за ним не присматривает.

• Он может пользоваться компьютером в любое время.

• Уютный дом представителей среднего класса.

• Наши дни.

• Западная культура.

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

Визуальные элементы в любом случае добавляют новое измерение – не важно, используются ли они в качестве иллюстрации или история состоит только из них:

• Диалог, разрывы во времени и последовательность событий можно показать в форме комиксов.

• С помощью фотографий можно продемонстрировать контекст, место действия и культурные условия.

• Простые диаграммы – хорошая иллюстрация последовательности событий и взаимосвязей. В них также можно выделить конкретные детали.

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

Однако если вы хотите использовать видеоролик, помните: записать историю на камеру недостаточно. Большинство людей смотрят фильмы и телепередачи, поэтому имеют точное представление о том, что такое качественное видео. Простая видеозапись их не устроит.