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

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

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

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

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

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

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

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

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

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

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

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

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

Визуальные элементы в детализации или демонстрации общей картины

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

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

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

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

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

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

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

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

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

• Наши дни.

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

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

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

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

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

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

Мультимедиа, видео и анимация

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

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

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