Перевод материала специалиста по пользовательскому опыту в Nielsen Norman Group Рэйчел Краузе.

Сторителлинг играет большую роль в работе профессионалов в сфере UX. История привлекает внимание, привносит ясность и вдохновляет команду проекта. Есть много способов визуально подать историю; UX-истории, сториборды, карты путешествия пользователя и карты эмпатии — лишь несколько примеров того, как это можно сделать. В этой статье мы поговорим о сторибордах.

Что такое сториборд

Возможно, вы уже знакомы с концепцией сторибордов (storyboard — раскадровка) из фильмов, анимации или комиксов. В разных отраслях степень точности воспроизведения отличается, но их объединяет общий принцип — раскрытие истории через изображения.

Определение: сториборд передаёт историю через выстроенные в хронологическом порядке изображения, которые отражают основные события.

Этот сториборд рассказывает историю менеджера по закупкам Джеймса. Он проводит инвентаризацию и обнаруживает, что нужно купить стикеры. Персонаж садится за компьютер и добавляет в электронный список стикеры. Программа выдаёт ему окно с надписью “success!” (успешно), которое сообщает Джеймсу, что пункт добавлен.

Сториборд не обязан быть тщательно прорисованным. Простые визуальные эффекты и несложный конкретный сценарий будут запоминающимися для вашей команды и заинтересованных сторон.

В мире UX мы используем сториборды, чтобы предоставить дополнительный контекст командам и заинтересованным сторонам. Использование изображений даёт понять историю с первого взгляда и легко её запомнить.

Компоненты сториборда

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

Сценарий

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

Визуальная составляющая

Каждый шаг в сценарии представлен визуально. Сюжетные этапы можно отобразить через эскизы, иллюстрации или фотографии. В зависимости от цели сториборда и его аудитории изображения могут быть как наспех сделанными рисунками, так и тщательно проработанными проектами. Они содержат детали истории, например, предметы, окружающие пользователя, его слова и мысли в виде облаков диалогов или эскиз экрана, с которым взаимодействует пользователь.

Подписи

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

Сториборды или карта путешествия пользователя

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

Карта путешествия чаще всего представляет обзорную картину пользовательского опыта и служит инструментом, который помогает установить недочёты продукта или распределить ответственность между разными отделами в организации.

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

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

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

Почему стоит использовать сториборды

Сториборды можно использовать в разных сферах работы над UX, которые я раскрою ниже.

Исследования и юзабилити-тестирование

Если ваша команда или заинтересованные стороны не участвовали в юзабилити-тестировании, с помощью сториборда можно передать, как участники взаимодействовали с приложением или сайтом. Подведение итогов юзабилити-тестирования в тексте по-прежнему может быть полезным, но визуальные эффекты сделают вашу историю лёгкой для восприятия и запоминания.

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

Дополнение карты путешествия пользователя

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

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

Расставление приоритетов и формирование общего представления о ситуации

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

Например, команда, которая работает над улучшением процесса входа (кнопки, автозаполнение, индикатор прогресса), может использовать сториборд для описания существующих недочётов и как напоминание о них.

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

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

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

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

Оформление идей

Сториборд может быть инструментом для презентации идей. Если вы хотите визуализировать потенциальный опыт или лучше понять среду пользователя перед началом разработки, сделайте набросок своего представления о том, как он будет использовать определённую функцию.

«Идейные» сториборды должны использоваться как средство донесения своих мыслей, а не артефакт или инструмент приоритизации, потому что реальный сценарий, скорее всего, будет отличаться от воображаемого.

Процесс: как создать сториборд

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

Эффективный сториборд можно сделать за шесть шагов.

1. Соберите данные

Определите, какие данные вы будете использовать в сториборде — опросы пользователей, юзабилити-тестирования или метрики сайта.

Можно сделать сториборд без реальных данных, если вы ещё не собрали их или хотите использовать его для визуального оформления идеи.

2. Выберите стиль изображения

Подумайте о цели, с которой вы создаёте артефакт, и аудитории.

Используйте эскизы, чтобы быстро нарисовать сюжет для команды на мозговом штурме. Можно сделать сториборды совместно, используя листочки для заметок, на которых каждый член группы отразит своё видение ситуации.

Начните обсуждение с временной шкалы и шагов, которые пользователь предпримет. Во время обсуждения рисуйте каждый шаг на стикере и помещайте на доску или стену. Можно назначить одного человека для рисования, или рисовать может каждый, если это групповое обсуждение.

Сосредоточьте внимание на одном шаге, чтобы сохранить обсуждение продуктивным и не дать группе разбиться на несколько подгрупп с разными цепочками рассуждений, которые потом придётся объединять. Чем более разношёрстная команда присутствует на мозговом штурме, тем более полную картину вы сможете получить.

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

Этот метод также даёт возможность менять последовательность событий, переставляя стикеры (особенно если вы всё ещё выстраиваете хронологию сюжета) без необходимости перерисовывать весь сториборд. Цель состоит в том, чтобы сформировать общее понимание, а не идеальный и неизменимый артефакт.

Создание сториборда на стикерах позволит каждому внести свой вклад в работу и изменить последовательность событий, если откроется новая информация

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

Используйте подробные иллюстрации, созданные в программах вроде Adobe, Sketch или Powerpoint, чтобы представить сториборд клиентам.

Помните: сториборд нужен, чтобы рассказать историю. Не тратьте много времени на улучшение визуализации, если аудитория этого не требует.

3. Определите основу

Определитесь с персоной и сценарием сториборда или историей пользователя.

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

4. Распланируйте шаги

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

Если трудно с ходу рисовать изображения, начните с написания шагов и определения эмоционального состояния пользователя на каждом из них

5. Создайте визуальную составляющую и добавьте подписи

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

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

Сториборд должен быть в удобном для редактирования формате, чтобы вносить изменения в дальнейшие итерации, если будет нужно. Это ещё одно преимущество простых набросков или картинок на стикерах.

Есть много общего между сторибордами и комиксами. Можно почерпнуть идеи для визуального представления историй, эмоций, ситуаций и действий из классической книги Скотта Макклауда «Понимание комикса».

6. Представьте аудитории

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

Как следует из названия, сториборды (storyboard дословно — «раскадровка») помогают нам рассказывать истории о наших пользователях. Когда они основаны на реальных данных и исследованиях, сториборды могут:

• Отвлечь от предубеждений и помочь сфокусироваться на реальных эмоциях пользователей.
• Помочь клиентам и заинтересованным сторонам запомнить конкретные пользовательские сценарии.
• Помочь понять, что влияет на поведение пользователей.

Источник