Создавая понятные и конкретные визуализации, компании могут снизить уровень недопонимания между отделами и повысить общую производительность. Эта статья предназначена для тех, кто хочет разработать продукт и усовершенствовать внутреннее взаимодействие.
Когда вы слышите слово «раскадровка» (Storyboarding), вы, вероятно, полагаете, что речь идет о создании фильма, видеоролика и тому подобных медиапродуктов.
Исторически сложилось так, что раскадровки использовались в вышеупомянутых отраслях творческой деятельности, но кто сказал, что мы не можем применить этот подход для разработки продуктов?
Раскадровки — это эффективный инструмент интернет-маркетинга для создателей контента, специалистов по проектированию пользовательского опыта и менеджеров по продуктам. В этой статье мы расскажем вам, почему раскадровки имеют важное значение для процесса разработки, а также почему они могут уменьшить несогласованность между отделами вашей компании и снизить накладные расходы.
Ниже в виде комикса отображена ясно определенная и общераспространенная ситуация, с которой сталкиваются большинство компаний. Одних лишь слов может оказаться недостаточно для эффективного объяснения сути дела, а недопонимание — обычное явление при разработке продуктов. Когда вы будете читать дальнейший текст, держите эту картинку в своем воображении и обращайте особое внимание на примеры, в которых раскадровка, или визуальное представление, помогает предотвратить подобные недоразумения:
Мы собираемся продемонстрировать вам сценарий, с которым регулярно сталкиваются практически все высокотехнологичные компании:
- У маркетолога Марии есть отличная идея для нового продукта. Мария полагает, что он станет хитом продаж, поэтому она отправляется в технологический отдел, чтобы предложить воплотить свою концепцию в реальный продукт.
- Разработчик Диана выслушивает идею Марии и говорит, что приступает к ее воплощению. По мере того, как Диана продолжает развивать функциональные возможности продукта, она понимает, что результат разработки будет намного эффективнее, если она добавит некоторые опции и избавится от других. Диана заканчивает проектирование продукта и передает его дизайнеру Борису.
- Борис встречается с Марией, чтобы обсудить пользовательский интерфейс (UI) продукта. Во время встречи Мария объясняет свои идеи, после чего Борис приступает к работе. Он начинает реализовывать идеи Марии, но быстро понимает, что у него есть гораздо лучшая и много более интересная концепция UI, и в конечном итоге завершает этот проект так, как ему кажется нужным.
- Когда проект завершен, Мария расстроена. Продукт не обладает ни функциональными возможностями, о которых она просила, ни пользовательским интерфейсом, позволяющим пользователю управлять продуктом надлежащим образом.
- Все три отдела возвращаются в исходную точку, чтобы переделать продукт заново, что означает, что значительное количество времени и денег было потрачено впустую.
Возникшая ситуация не является виной одного человека. Мария должна была четко объяснить Диане и Борису конечную цель продукта и позволить им осуществить проект, исходя из необходимости ее достижения. Диана должна была понять, что Мария просила об обеспечении конкретной функциональности по какой-то причине, и, хотя ее продукт казался более эффективным, он бесполезен, если не достигает поставленной конечной цели. Борису нужно было учесть, что, хотя концепция пользовательского интерфейса Марии, возможно, была не самой эстетичной, именно такой UI она предлагала не просто так. Они должны были трудиться вместе, чтобы создать концепцию, которая работает на общее благо.
Существует несколько идей относительного того, как преодолевать распространенные затруднения с непониманием, возникающие в ходе разработки продуктов, однако для многих из этих проблем было найдено успешное решение — создание раскадровки для процесса проектирования.
Раскадровка представляет собой набор ячеек, расположенных либо в линейной последовательности, либо базирующихся на центральной идее, рассказывающей какую-то историю. Каждая ячейка может содержать изображение, заголовок и описание, которое предоставляет конкретную информацию о некоторых аспектах истории. Раскадровки предназначены простого представления более широкой концепции и заставляют как своих создателей, так и пользователей разбивать большие сложные темы на простые пошаговые пункты.
Содержание статьи
1. Персоны пользователей
2. Персона покупателя
Раскадровка для проектирования опыта пользователя
Раскадровка для проведения итераций и улучшения продуктов
«Путешествие предпринимателя»
Вымышленное, но основанное на реальных событиях, путешествие предпринимателя (Journey Of Entrepreneur), в котором использовались раскадровки для того, чтобы помочь начинающей предпринимательнице Ирине и ее команде спроектировать, произвести и оптимизировать свой продукт.
Ирина уволилась из большой компании, чтобы воплотить свои мечты и начать собственный бизнес. У нее уже была идея — SoLoMoFoo. SoLoMoFoo — это приложение для предупреждения сотрудников компаний о том, что в помещениях общего пользования доступно бесплатное питание — например, в конференц-залах, общих офисных кухнях и т. д. На ее прошлой работе Ирина слишком часто замечала, что продукты пропадают зря из-за недостаточной осведомленности работников о бесплатном угощении. Она решила, что эта проблема нуждается в решении и что она знает, как это сделать. Для начала ей нужно было выяснить, кто именно станет целевой аудиторией ее приложения.
Полезным способом поиска потенциальных целевых пользователей является создание персон покупателей. Ирина решила, что определит несколько целевых пользователей и покупателей и запишет некоторые их уникальные характеристики.
Создание персон
«Создание персон поможет вам выйти за пределы своего восприятия. Этот метод может помочь в понимании того, что разные люди имеют отличающиеся потребности и ожидания, а также провести границу между вами и пользователем, для которого вы проектируете продукт»,
Рикке Дам (Rikke Dam), соучредитель Interaction Design Foundation
Создание персон для проектирования приложения SoLoMoFoo: HR-менеджер Хейли (HR Hailey); Бен, приносящий выпечку (Baking Ben); Голодный Хэнк (Hangry Hank). Для описания типажа достаточно ответить заполнить следующие 4 пункта шаблона раскадровки: кто это (about), случаи применения им продукта (use cases), требуемые функции (nice to have), испытываемые проблемы (concerns).
Ирина знает, что SoLoMoFoo решит реально существующую проблему (отсутствие осведомленности о доступном бесплатном питании), но перед кем именно стоит эта проблема? Кто будет использовать ее приложение? Прежде чем Ирина начнет создавать раскадровки, сначала ей нужно создать свои персоны. Как правило, компаниям необходимо сосредоточиться на двух разных типах персон: пользователей и покупателей.
1. Персоны пользователей
User Personas — это вымышленные образы типичных пользователей, соответствующих определенным критериям. Большинство разработчиков пытаются ограничиться количеством в две или — максимум — три ключевых персоны пользователей, а затем сосредоточить большинство маркетинговых усилий на привлечении их внимания. В случае SoLoMoFoo существуют 2 персоны, выявленные Ириной:
Бен, приносящий выпечку
Бен часто приносит на работу еду, чтобы угостить коллег. Он чувствует себя немного странно, когда рассылает по электронной почте оповещения каждый раз, когда приносит кексы, поэтому ему понравится приложение, которое вместо него уведомит сотрудников об угощении.
Голодный Хэнк (Генри)
Хэнк постоянно пропускает бесплатное угощение и расстраивается из-за этого. Он чувствует себя менее продуктивным, когда он голоден, и поэтому Хэнк очень заинтересован в приложении, которое сможет предупредить его в любое время, что появилась возможность перекусить.
2. Персона покупателя
Зачастую предполагаемый пользователь вашего продукта отличается от гипотетического покупателя. В бизнес-модели SoLoMoFoo компания от своего имени приобретает это приложение и просит своих сотрудников загрузить его на телефоны. Таким образом, каждый в офисе будет иметь возможность отправлять оповещения, когда он приносит коллегам угощение, и в свою очередь сможет получать предупреждения, когда будет искать, чем бы полакомиться. Ирина решает, что наиболее вероятным покупателем SoLoMoFoo станут отделы кадров компаний.
Ольга, HR-менеджер
Ольга является менеджером по персоналу и обладает правом совершать покупки за счет компании. Она постоянно ищет способы повысить моральный дух и вовлеченность сотрудников. Начальство вдохновляет Ольга на то, чтобы стимулировать энергию и взаимодействие в среде коллег. Она располагает бюджетом, предусматривающим расходы на приложения или инструменты, которые помогут ей выполнить свои задачи.
Создание этих персон поможет вам войти в положение как пользователей, так и покупателей (если они различаются). Это поможет вам дистанцироваться от вашего продукта и увидеть его глазами людей, для которых вы проектируете свое приложение/сервис.
Чтобы начать создавать нужные вам персоны, вы можете воспользоваться несколькими существующими онлайн-ресурсами. Например, вы можете использовать шаблоны рабочей таблицы, подобные нижеприведенным:
Шаблон создания персоны от Xtensio. Здесь требуется оценить личность в параметрах интроверсии/экстраверсии и т. д., указать ее цели и опасения, мотивации, предпочитаемые маркетинговые каналы, влиятельные для этой персоны бренды и авторитеты.
После того, как персоны созданы, следующий ваш шаг — узнать, как они будут контактировать с проблемой, решаемой вашим продуктом, и как он в конечном итоге улучшит их жизни. Отличный способ войти в положение ваших покупателей — создать карты путешествий.
Составление карт путешествий
«Отображение схем взаимодействия с продуктом поможет вам визуализировать опыт вашего клиента с точки зрения потребителя во всех различных точках контакта с вашим брендом в их стремлении достичь одну или несколько конкретных целях»,
Тандем Семи Экспертов
Теперь, когда Ирина определила ключевые персоны пользователей и покупателей SoLoMoFoo, ей пора выяснить, как они могут узнать о ее продукте, как они будут использовать его и с какими потенциальными препятствиями они смогут столкнуться на протяжении всего процесса. Отличный способ сделать это — создать карты путешествий в виде раскадровки. Создание этих раскадровок путешествий заставляет разработчиков продукта ставить себя на место пользователей или покупателей и пошагово совершенствовать свой продукт.
Карта путешествия клиента для SoLoMoFoo: возникновение проблемы — Голодный Генри перед совещанием входит в комнату отдыха и обнаруживает, что на его долю достались только крошки от кексов; поиск решения, заканчивающийся неудачей — в торговом автомате отсутствует печенье; обнаружение продукта — Голодный Генри во время совещания рассержен, заметив это, друзья предлагают ему установить на смартфон приложение SoLoMoFoo; испытания продукта — Бриджит привозит в офис свежие кексы, выпеченные во время уикенда, и рассылает уведомление об этом, надеясь, что коллеги обнаружат ее угощение; устранение проблемы — Бриджит отправляет уведомление, а Голодный Генри немедленно получает его; благоприятный результат — получивший свое угощение Счастливый Генри во время совещания пребывает в замечательном настроении.
Раскадровка путешествия, как правило, может быть разбита на шесть ключевых компонентов:
1. Указание на проблему, с которой сталкиваются персоны
Вы решили создать свой продукт по какой-то конкретной причине. Вы считаете, что у ваших целевых пользователей возникает проблема, которую они хотят решить. В чем заключается проблема, решаемая вашим продуктом?
2. Поиск решения
Вы полагаете, что после того, как у ваших персон возникнет проблема, они отправятся на поиски ее решения. Какие методы они будут использовать для поиска? — Это могут быть потенциальные маркетинговые каналы для осуществления вашей стратегии выхода на рынок.
3. Обнаружение продукта
Во время поиска ваши персоны обнаруживают лендинг со ссылкой ваш продукт и решают его попробовать. Как они узнают, что это продукт подходит для них? Как они начнут его использовать? С какими препятствиями они могут столкнуться?
4. Испытания продукта
Персоны в данной стадии начинают использовать ваш продукт и испытывать способы достижения намеченной цели. Каким образом они его применяют? Могут ли они использовать его немедленно или существуют еще какие-то другие шаги, которые им нужно предпринять?
5. Устранение проблемы
После достижения цели продукта проблема пользователей устраняется. Это та самая проблема, которую вы пытались решить в начале вашей раскадровки? Какие другие потенциальные проблемы могут возникнуть из-за вашего решения?
6. Благоприятный результат
Теперь, когда проблема пользователя устранена, как улучшилась его жизнь? Какую пользу решение проблемы приносит ему и как это улучшит его положение?
Нужен пример? Взгляните на приведенную ниже иллюстрацию:
- Указание на проблему: ясно покажите в своем сценарии, где у клиента располагается «болевая точка», для устранения которой он пожелает купить ваш продукт.
- Поиск решения: для большинства проблем имеются уже существующие решения, объясните, почему согласно вашему сценарию они не сработают в случае клиента.
- Обнаружение продукта: укажите возможный способ, которым пользователь мог бы ознакомиться с вашим продуктом/предложением (Это будет поиск в Google или «сарафанное радио»?).
- Испытания продукта: покажите клиенту «волшебное решение», позволяющие решить его проблему.
- Устранение проблемы: после того, как «волшебная кнопка» нажата, что происходит с потенциальным клиентом?
- Благоприятный результат: почему клиент счастлив? Какую выгоду он получил?
В случае с предпринимателем Ириной она должна подумать о том, как отсутствие доступа к оповещениям о бесплатном угощении повлияет на действия HR-менеджера Ольги, как последняя будет искать возможные решения проблемы, как она обнаружит SoLoMoFoo, каким образом эта платформа будет имплементирована на ее рабочем месте, а также потенциальные выгоды и конечные сроки, за которые должны будут реализоваться преимущества данного приложения.
Раскадровка путешествия покупателя с подробным пошаговым описанием действий:
- В компании обнаруживается проблема с моральным духом сотрудников. Генеральный директор сообщает HR-менеджеру Ольге, что нужно решить проблему текучки кадров.
- Ольга ищет идеи для выхода из кризиса, но не знает с чего начать и поэтому приступает к чтению блогов, надеясь найти таким образом подсказку.
- Ольга впервые открывает для себя SoLoMoFoo: идея оздоровить моральный дух в коллективе посредством бесплатного угощения заинтриговывает HR-менеджера.
- Почитав материалы сайта SoLoMoFoo, она еще больше убеждается в том, что имеет дело с великолепным продуктом и по электронной почте отправляет инструкции IT-специалисту Артему.
- Артем получает письмо и легко устанавливает и настраивает приложение. Уже на следующей неделе совместные чаепития улучшают моральную атмосферу в коллективе.
- Месяц спустя Ольга просматривает отчет об установках SoLoMoFoo и констатирует, что приложением пользуется множество сотрудников.
- Вскоре Ольга получает заслуженную благодарность: Степан, CEO компании, в личной беседе поздравляет HR-менеджера с тем, как она быстро и эффективно сумела улучшить моральный климат в коллективе.
Создание карт путешествий в виде раскадровки — полезный способ гуманизации покупателей вашего продукта. Важно помнить, что пользователи — это не просто цифры в отчетах, а настоящие люди. Наличие индивидуализированных человеческих характеров и личная история путешествия, связанная с каждой персоной, служит постоянным напоминанием о том, что пользователи — это люди, чьи потребности постоянно меняются.
Карты путешествий — это не только отличный инструмент для разработки «внешних» продуктов, но и отличный способ свести к минимуму внутреннюю несогласованность между отдельными департаментами компании.
Разрабатывая персоны пользователей и раскадровку карт путешествий клиентов, каждый сотрудник может визуализировать шаги, которые человек будет совершать при взаимодействии с вашим продуктом. Создание карт путешествий и представление их коллегам позволяет участникам команды реалистичным и ощутимым образом ознакомиться с вашим видением решения проблемы. Когда каждый отдел понимает ваши карты путешествий, вы легко можете достичь консенсуса относительно конечного продукта, и процесс разработки может продолжаться при полном взаимопонимании всех вовлеченных в процесс сторон.
Раскадровка для проектирования опыта пользователя
«Раскадровка в UX — инструмент, который может содействовать вам в визуальном предсказании и изучении опыта пользователя в процессе взаимодействия с продуктом».
Ник Бабич (Nick Babich), главный редактор UX Planet
Раскадровка пользовательского опыта
Предприниматель Ирина успешно определила, кто, как она считает, будет являться целевыми пользователями и покупателями ее приложения и как они будут вступать контактировать с ее продуктом и использовать его. Теперь для нее наступает время спроектировать опыт пользователя SoLoMoFoo.
Полезный способ посмотреть на ваш продукт со стороны — это формирование принципов UX с помощью раскадровки. Последовательное создание раскадровки, шаг за шагом, заставляет вас проходить через каждый этап вашего UX-процесса и увидеть его глазами пользователя. Вы можете легко создать несколько раскадровок и попробовать различные подходы к пользовательскому опыту, чтобы найти наиболее эффективную концепцию.
Ирина хочет спроектировать SoLoMoFoo в качестве простого приложения, поэтому она просматривает персоны и карты путешествий совместно с ее командами разработчиков и маркетинга, вследствие чего все они имеют четкое представление о продукте и начинают коллективно проектировать опыт пользователя.
Создание этих конкретных визуальных раскадровок указывает на потенциальные недостатки вашего UX — возможно, вы заставляете своих пользователей совершать долгий переход за «один прыжок», а интерфейс вашего приложения не понятен на интуитивном уровне. Или же, возможно, у вас предполагается несколько этапов пользовательской интеракции, которые без всякого ущерба могут быть объединить в один шаг, что устранит лишние действия.
По словам специалиста по UX Люка Моровиана (Luca Morovian):
«Раскадровка UX помогает визуально предсказать и изучить пользовательский опыт взаимодействия с продуктом. Происходит визуализация того, как люди будут взаимодействовать с сервисом или приложением. Раскадровка UX также способствует пониманию текущих мотивов и опыта пользователей, связанных с определенной проблемой».
Важность и ценность раскадровки для UX проявляется в процессе проектирования, позволяя вам испытать ваш продукт в качестве пользователя, что позволяет вам наилучшим образом осуществить оптимизацию для повышения производительности и коэффициента конверсии.
Раскадровка пользовательского опыта (см. предыдущую иллюстрацию) с подробным описанием ситуаций, могущих возникнуть на каждом этапе путешествия
Наконец, Ирина определила целевых пользователей и покупателей, составила карту своего процесса и спроектировала хорошо отлаженный UX, но процесс разработки продукта никогда не заканчивается.
Раскадровка для проведения итераций и улучшения продуктов
«Ваши клиенты знают ваши продукты лучше, чем кто-либо другой, так что пока вы задаете правильные вопросы и используете привлекательные раскадровки, вы можете запрашивать их мнения и начинать обсуждение того, что вам нужно узнать».
Андре Бурк (Andre Bourque), предприниматель
Итак, Ирина определила, кто, по ее мнению, будет использовать и покупать ее SoLoMoFoo, как они будут контактировать с продуктом и взаимодействовать с ним, и как будет спроектирован пользовательский поток платформы.
Как известно разработчикам, продукт никогда не бывает завершен полностью. По мере того, как меняются технологии, а пользователи приспосабливаются к ним, ваш продукт должен адаптироваться под изменения. Важно постоянно возвращаться к картам путешествия клиентов и персонам пользователей, чтобы убедиться, что они по-прежнему точно соответствуют вашему продукту. Как только вы получаете больше информации о своих клиентах и пользовательских сценариях, ваш продукт должен быть соответствующим образом адаптирован.
При изучении итераций продуктов большинству разработчиков с трудом удается изолировать сферу охвата и определить, какой аспект текущего продукта они хотят изменить. Раскадровка может помочь проектировщикам в «разделении» своего продукта на отдельные сегменты, что позволит им целенаправленно работать над одним аспектом продукта без задействования других.
Вот несколько вопросов, которые вы можете использовать в качестве руководства :
- У вас есть проблема с переходом на посадочную страницу, и вы хотите модернизировать пользовательский интерфейс?
- Пользователи не реагируют на ваш призыв к действию? Может быть, ваш UX слишком сложный? Или, может быть, люди просто не покупают ваш продукт, так что вы действительно решаете лишь свою предполагаемую проблему?
Наличие раскадровки вашего продукта позволяет вам ясно видеть, какие части вашего продукта отвечают за конкретные действия пользователей. В результате вы можете сосредоточить свой процесс итерации на одном аспекте своего продукта, а не на продукте в целом, что позволяет быстрее применять улучшения и получить более «чистый» процесс с минимумом отвлекающих моментов.
С чего начать?
Теперь, когда у вас есть знания о том, как использовать раскадровки в процессе разработки продукта, пришло время для начала практических действий.
Вот несколько маленьких советов, которые помогут вам сделать свою раскадровку:
1. Определите проблему, которую решает ваш продукт.
2. Идентифицируйте 1-3 персоны пользователей и 1-3 персоны покупателей (если они различаются).
3. Создайте карты путешествий для ваших персон.
4. Дизайн UX определяется потребностями вашей целевой аудитории.
5. Выполняйте итерации, повторяйте и улучшайте!
Теперь, когда у вас теперь есть наглядные примеры, вы можете внедрить раскадровку в процесс разработки своих продуктов. В самом начале вы определяете своих целевых пользователей, затем восстанавливаете опыт пользователя по шагам и проводите итеративные изменения вашего продукта для его улучшения.
Использование раскадровки в процессе разработки продукта поможет вам предотвратить банальное недопонимание между разными отделами вашей компании и заказчиком и позволит вам и вашей команде обладать четкой концепцией того, что ваш продукт будет выполнять и как будет выглядеть.
Начните раскадровку новой идеи продукта прямо сейчас!
Высоких вам конверсий!
По материалам: smashingmagazine.com
