Раскадровки идей и исследований: зачем UX-дизайнеру сториборд

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PDF-шаблон сториборда: