Роль UX-раскадровки в создании продукта

Вы, вероятно, слышали о раскадровках в контексте кино, анимации и видеоигр. Но раскадровка является чрезвычайно ценным инструментом UX-дизайна. В UX и продуктовом дизайне раскадровки используются для визуализации пользовательского опыта работы с продуктом или услугой. Они отображают действия пользователя в хронологическом порядке, создавая в стиле комиксов картину его путешествия из пункта А в пункт Б в определенном контексте или сценарии.

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

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

Техника раскадровки была разработана студией Уолта Диснея в 1930-х годах как способ построения связных историй, которые впоследствии превратились в анимационные фильмы.

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

Подобно тому, как аниматоры Disney использовали раскадровки для создания связного и убедительного повествования, UX и продуктовые дизайнеры используют их, чтобы представить историю пользователя (главного героя истории) и продукта. При этом они могут выявить «сюжетные дыры», то есть пробелы или препятствия в пользовательском опыте, а также определить возможности для создания лучшего повествования с точки зрения пользователя.

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

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

Сценарий

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

Персона/главный герой

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

Под сценарием раскадровки вы можете дать краткое резюме персоны. Например: Анна, 43 года, родитель-одиночка с двумя детьми 5 и 8 лет; работает полный рабочий день, средний доход. Относительно хорошо разбирается в технологиях, но не располагает большим количеством времени; нуждается в простом, экономичном и удобном решении.

Визуальные средства

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

Заголовок

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

Сопроводительный текст

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

В UX раскадровка используется дизайнерами для лучшего понимания действий пользователей и объяснения их другим, визуализируя этапы их взаимодействия с продуктом вместе с короткими описательными подписями. Подписи должны содержать весь необходимый контекст, но основное внимание должно быть сосредоточено на изображениях. Этим UX-раскадровка отличается от других методов отображения взаимодействия пользователя с продуктом, таких как карта путешествия пользователя.

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

Так где же могут пригодиться раскадровки? Они могут быть полезны на разных этапах процесса проектирования продукта.

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

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

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

1. Как часть процесса создания идеи

Вы провели исследование пользователей и определили проблему, которую нужно решить. По мере того, как вы придумываете различные решения, раскадровка позволяет представить их в действии. Если вы разработаете решение X, как пользователь будет с ним взаимодействовать? Решает ли оно какие-то из пользовательских болей или порождает новые проблемы? Как оно соотносится с решением Y? Составление схемы потенциальных решений поможет вам оценить их обоснованность, прежде чем переходить к проектированию и разработке.

2. На протяжении всей фазы проектирования для принятия решений по продукту

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

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

Раскадровки позволяют быстро и четко донести свои идеи

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

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

Раскадровки сосредотачивают внимание на пользователе и развивают эмпатию

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

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

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

Экономия времени и денег

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

При этом вы можете обнаружить «сюжетные дыры» и понять, что на самом деле эта идея не стоит того, чтобы ее реализовывать. Или же вы обнаружите, что она хорошо работает и ее стоит продолжить. С помощью раскадровки вы можете получить предварительное представление о том, как ваши идеи могут работать в реальном мире, с реальными пользователями, что позволит вам отсеять неподходящие идеи до того, как вы потратите на них время или деньги.

1. Определите цель

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

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

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

2. Соберите полезные данные

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

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

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

3. Выбор инструментов для раскадровки

Этот выбор зависит от того, создаете ли вы низкодетализированную, нарисованную от руки раскадровку или более высокопробную цифровую.

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

Если вы идете по цифровому пути, вы можете использовать такие инструменты, как Figma.

4. Составьте свой сценарий

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

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

5. Создайте свою историю в письменном виде

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

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

6. Добавьте визуальные элементы и сопроводительный текст

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

Повторите этот процесс для каждого этапа повествования, пока у вас не получится полноценная раскадровка.

7. Презентуйте свою раскадровку

Кто должен увидеть вашу раскадровку? Будете ли вы представлять ее ключевым заинтересованным сторонам, чтобы поделиться в наглядной форме результатами ваших пользовательских исследований? Или вы будете использовать ее для того, чтобы вдохновить коллег-дизайнеров?

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