Как выполнить раскадровку

Лучшие книги и сериалы часто поражают наше воображение потрясающе сложными сюжетами. Взять ту же «Игру престолов», которая успешно продержалась на экранах целых 8 сезонов и задействовала в разных сюжетных линиях как минимум 52 значимых персонажа. Или «Властелина колец», где сюжет насыщен до такой степени, что автору романа Дж. Р. Р. Толкину пришлось посвятить целую книгу одним только родословным героев. Работая с произведениями такого масштаба, практически нереально удержать в голове всё до мелочей. 

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

Чаще всего титаны мысли прибегают к методу раскадровки. 

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

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

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

Зачем нужна раскадровка в UX-дизайне?

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

Раскадровка передает идеи наглядно

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

Ваше видение не искажается

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

Можно представить проект в выгодном свете

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

Раскадровка заблаговременно вскроет ошибки

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

Как провести раскадровку

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

1. Проанализируйте данные

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

2. Выберите один аспект

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

3. Познакомьтесь с героем

Кто пользуется вашим продуктом? Какое решение нужно клиенту? Чем ближе ваши персонажи к реальным людям, тем проще создать раскадровку, которая внушает доверие и решает реальные проблемы.

4. Перечислите важные точки контакта

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

5. Добавьте контекст

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

Как Lucidspark пригодится вам при работе с раскадровкой

Пожалуй, самый большой недостаток раскадровки заключается в том, что до недавнего времени она создавалась исключительно на бумаге. Допустили ошибку? Берите ластик и переделывайте. Ну а если в ход всё же пускалось базовое ПО, толку от него было мало: программы громоздкие, обучаться долго, а поделиться результатом — очень непросто. 

Другое дело Lucidspark. Объясним, почему наш сервис прекрасно подходит для UX-раскадровки:

Легко взяться за дело 

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

Творческая свобода

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

По-настоящему общее рабочее пространство

Чтобы скоординировать работу удаленной или распределенной команды, иногда нужны стальные нервы. Зато если вы занимаетесь раскадровкой в Lucidspark, все остальные участники проекта смогут внести свою лепту в реальном времени. Плюс ко всему, Lucidspark дает вам дополнительные рычаги прямого общения через комментарии, чат и упоминания в формате @mentions. Работать над такой раскадровкой просто и весело. Все знают, кто что предложил и кто за что отвечает, и у каждого перед глазами есть общая картина проекта.

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

С вами на всех этапах проекта

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