Пользовательские сценарии: руководство для новичков

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

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

Что такое пользовательский сценарий в UX-дизайне?

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

Чтобы вы лучше поняли, о чем идет речь, давайте разберем один пример.

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

Сначала пользователь определяет, деактивирована или удалена его учетная запись. Если деактивирована, он восстанавливает ее и входит в систему по email. Если удалена — он может создать новый аккаунт. Каждое действие отображается в сценарии. Затем мы можем сопоставить эту блок-схему с текущим дизайном и найти точки оптимизации.

Какую роль играют пользовательские сценарии в UX-дизайне?

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

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

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

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

Когда применяются пользовательские сценарии?

Скорее всего, пользовательские сценарии пригодятся вам на одном из трех этапов:

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

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

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

Какие типы пользовательских сценариев существуют?

Существует четыре типа пользовательских сценариев:

1. Сценарий выполнения задачи (task flow)

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

2. Блок-схема (flowchart)

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

3. Последовательность вайрфреймов (wireflow)

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

4. Последовательность готовых экранов (screen flow)

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

Как создать пользовательский сценарий?

Шаг 1. Изучите аудиторию

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

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

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

Шаг 2. Сформулируйте цели и задачи, которых вы хотите достичь

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

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

Шаг 3. Перечислите возможные шаги

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

Шаг 4. Выберите тип пользовательского сценария

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

Шаг 5. Создайте пользовательский сценарий

Когда вы закончите всю подготовительную работу, можно приступать к разработке пользовательского сценария. Если на четвертом этапе вы выбрали task flow или flowchart, вам нужно понять, что означают те или иные фигуры, из которых состоят блок-схемы. После этого отправляйтесь в один из инструментов для создания ментальных карт (mindmaps), например XMind, или прототипов, например Mockplus. С их помощью вы сможете быстро создать нужный сценарий.

Шаг 6. Еще раз проверьте и подкорректируйте его

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

5 инструментов для создания пользовательских сценариев

1. Axure

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

Совместимые системы: Windows, Mac.

Цена: Бесплатная пробная версия на один месяц, затем $25 за пользователя в месяц.

Поддерживаемые типы пользовательских сценариев: Taskflow, flowchart, wireflow, screen flow.

2. Figma

Figma хорошо знакомый каждому дизайнеру инструмент проектирования, но в ней также можно создавать пользовательские сценарии. Используйте стандартные фигуры или рисуйте свои и добавляйте стрелочки, чтобы соединить их. Figma — отличное решение для создания wireflow и screen flow: создавайте низко- и высокодетализированные прототипы и выстраивайте из них сценарии.

Совместимые системы: Есть браузерная версия, которая может работать практически на всех устройствах.

Цена: Бесплатно с ограниченным функционалом, расширенный функционал — от $12 за пользователя в месяц.

Поддерживаемые типы пользовательских сценариев: Taskflow, flowchart, wireflow, screen flow.

3. Mockplus

Mockplus — инструмент, который подходит для создания всех разновидностей пользовательских сценариев. Здесь есть режим ментальных карт (mindmap), фигуры, из которых мы можем строить блок-схемы в несколько кликов, а также функция добавления заметок. 

Mockplus позволяет быстро создавать прототипы любого уровня детализации с помощью бесплатных шаблонов, UI-китов, иконок, компонентов и т.д. Как только прототип будет готов, вы можете сделать скриншоты и сохранить их на своем компьютере. После этого можно создать новый проект, выбрать пункт “design handoff” (передать дизайн), загрузить сохраненные изображения, соединить их в нужном порядке и отправить ссылку другим членам вашей команды.

Совместимые системы: Windows, Mac, Linux, iPadOs, iOS, Android.

Цена: Большинство функций бесплатно. Остальные — $5.95 за пользователя в месяц.

Поддерживаемые типы пользовательских сценариев: Taskflow, flowchart, wireflow, screen flow.

4. XMind

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

Совместимые системы: Windows, Mac, Linux, iPadOs, iOS, Android.

Цена: $59,99 в год

Поддерживаемые типы пользовательских сценариев: Taskflow, flowchart.

5. JustMind

Justmind — еще один инструмент для создания прототипов. Он похож на Mockplus, но работает только на Windows и Mac. Здесь есть линии, фигуры и специальные компоненты, которые необходимы для создания пользовательских сценариев и низкодетализированных прототипов. К сожалению, Justmind не подходит для разработки screen flow, единственный вариант — если у вас уже есть готовые страницы.

Совместимые системы: Windows, Mac

Цена: Бесплатно, дополнительные функции — $9 за пользователя в месяц

Поддерживаемые типы пользовательских сценариев: Taskflow, flowchart, wireflow.

Резюме

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