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

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

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

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

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

Для забавной визуализации того, как работают раскадровки в применении к фильмам, Flavorwire составил список раскадровок из некоторых известных фильмов. Помните знаменитую сцену с занавеской для душа из «Психо»? Вот как это выглядело в форме раскадровки:

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

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

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

Так как же это может выглядеть на самом деле? Вот пример от Челси Хостеттер из Центра дизайна Остина:

Обратите внимание, как раскадровка Челси отображает полную историю от начала до конца? Он не только посвящен тому, как Сьюзан использует приложение Heartline. Он начинается с реальной жизненной ситуации, заканчивается тем, что Сьюзен использует приложение для связи с Томом, и заканчивается реальным решением проблемы.

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

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

С раскадровкой у вас есть реальные люди, выполняющие реальные действия, а не абстрактные описания функций или аналитические данные.

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

Это означает, что вы можете внедрять изменения быстрее, чем это было бы возможно с прототипом.

Советы, которые помогут создать вашу первую раскадровку

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

Помните, ваша цель - создать что-то аутентичное и убедительное. Если нужно, вернитесь и еще раз взгляните на пример Heartline. Обратите внимание, как рассказ:

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

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

Вместо этого он помогает постепенно создавать конечный продукт.

Во-первых, помните, что ваша цель - иметь:

• Аутентичные персонажи
• Проблема реальной жизни
• Логичный и достоверный способ решить эту проблему с помощью вашего продукта.
• Фактическое разрешение в конце раскадровки

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

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

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

Если у вас есть художественные навыки, постарайтесь действительно привнести эмоции в свои иллюстрации при рисовании раскадровки.

Инструменты, которые помогут вам создавать раскадровки

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

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

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

Раскадровка

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

Инструмент довольно прост в использовании. Все, что вам действительно нужно сделать, это:

• Выберите фон для вашей сцены
• Добавить персонажей
• Введите текст или предметы

Например, я смог создать эту базовую раскадровку всего за пару минут:

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

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

Boords

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

Хотя на самом деле это не поможет вам создать эти иллюстрации, но зато поможет упорядочить их, добавить заметки и поделиться своими раскадровками через Интернет или PDF:

Так что, если вы планируете сотрудничать с другими над своей раскадровкой, Boords упрощает настройку на лету.

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

Заключение

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

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

А теперь за вас - используете ли вы раскадровки в процессе проектирования? Если да, считаете ли вы, что они стоят того времени, которое они потратили на создание?

Миниатюрное изображение статьи от CharacterFamily / shutterstock.com