Роль раскадровки в UX-дизайне

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

Что такое раскадровка?

Раскадровка - это визуальная форма представления сценария, который содержит последовательность нескольких событий. Студия Уолта Диснея была первой, кто придумал эту идею в 1930-х годах. Многие другие области, включая UX-дизайн, приняли раскадровку как способ визуального представления сценариев.

В этот момент вы, вероятно, спрашиваете себя: "Почему я должен использовать раскадровки?".

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

Вот основные причины, по которым это так:

1. Изображение стоит тысячи слов - Наш мозг обрабатывает изображения гораздо быстрее, чем текст. Представляя сценарий визуально, вы ускоряете процесс создания идеи для всех участников.
2. Истории запоминаются - На протяжении веков люди использовали истории для передачи устных традиций молодым поколениям, потому что их гораздо легче запомнить, чем факты. Использование истории в качестве первого шага на пути к идее может с самого начала создать правильный настрой для проекта.
3. Разрыв любопытства - Истории, особенно те, которые содержат пробелы, могут естественным образом вызвать любопытство и активизировать наш мозг, чтобы попытаться заполнить недостающие детали. Этот тип "мозговой силы" - именно то, что вам нужно на ваших сессиях по разработке идей.
4. Сопереживать "реальному пользователю" - Точно так же, как мы используем персоны для создания эмпатии к пользователю, у которого есть лицо и имя, помещение этого пользователя в сценарий создаст еще более высокий уровень эмпатии к пользователям среди членов команды разработчиков.

Использование раскадровок в UX-дизайне

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

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

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

Чтобы создать всесторонне развитого персонажа, вам придется подумать о следующих вещах:

1. Сайт основное описание вашего персонажа, который может включать такие вещи, как имя, профессия, возраст, пол и все остальное, что имеет отношение к делу
2. Что мотивирует этот персонаж воспользуется вашим товаром или услугой?
3. В чем контекст пользуется ли ваш персонаж продуктом?

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

1. Осведомленность - как пользователи узнают о вашем продукте или услуге в первую очередь?
2. Рассмотрение - какие решения им придется принять, прежде чем они решат купить продукт и использовать его?
3. Купить - как ваши пользователи будут покупать продукт?
4. Первый опыт - как будет выглядеть их первый опыт использования вашего продукта?
5. Привычки использования - как будет выглядеть их регулярное использование?
6. Основные преимущества - что получат ваши пользователи от использования вашего продукта?

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

Начало работы с раскадровкой

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

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

Чтобы помочь вам составить хорошую раскадровку UX, давайте рассмотрим следующий пример реальный пример .

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

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

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

Давайте пройдемся по процессу.

Наша история начинается с главные герои Джейсон и Натали, молодая пара в возрасте около 30 лет. Они живут в пригороде Торонто, Канада. Они любят пить вино, и раз в три недели ходят в местный винный магазин, чтобы купить 2-3 бутылки вина. Обычно они покупают вина, которые рекламирует магазин, и иногда получают рекомендацию от друга о том, что купить. Недавно они захотели начать пить вино.изучают больше вин, и они хотят быть менее ошеломленными широким выбором в своем магазине. До сих пор они покупали практически одни и те же вина каждый раз. Вот что такое мотивирует они пытаются искать решение, чтобы узнать больше о вине.

Джейсон начал читать о вине в свободное время, но до сих пор не считает это очень полезным. Большинство вин, описанных в этих статьях, из Европы, а он живет в Канаде. Он не уверен, что местные вина, которые он находит в ближайшем магазине, можно с чем-то сравнить.

Однажды подруга Натали Элисон предлагает им попробовать новое приложение под названием "Wine Time". Приложение помогает узнать о вине и найти вина, которые вам понравятся. В этот момент Джейсон и Натали становятся... знать продукта.

Они загружают приложение и сразу же проходят быстрый курс "Введение в виноделие", в котором они узнают, какие вина могут им понравиться по различным характеристикам. Это соответствует их представлениям о вине. первый опыт с приложением и их момент "Ага" (скорее всего). Мы можем думать об этой части как о начале середина нашей истории .

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

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

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

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

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

1. Какие учебные пособия будут включены в приложение?
2. Где в мире будет доступно приложение?
3. С какими интернет-магазинами вина мы должны его связать?
4. Как будет выглядеть долгосрочное использование?
   Смотрите также: 10 лучших в своем классе примеров моушн-графики

Посмотрите на раскадровку, которую я создал для приложения "Время вина".

Путешествие пользователя "Время вина". Изображение автора.

‍

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