Откажитесь от MVP, внедрите минимально жизнеспособные прототипы (MVPr)

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

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

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

• Исследователи дизайна
• Дизайнеры пользовательского интерфейса
• Информационные архитекторы
• UX-дизайнеры
• Дизайнеры продуктов
• Менеджеры по продукту
• Контент-стратеги
• Эксперты бренда
• UX-копирайтеры
• и т.п.

Так или иначе, каждое из них пересекается. Например, пользовательский интерфейс продукта не может быть успешным, если не учитывать его пользовательский опыт. Взаимосвязанность требует понимания того, как дизайнерские решения влияют друг на друга: «Если мы сделаем X, как это повлияет на Y и Z?»

Этот тип стратегического прогнозирования может быть ценным, но он также может привести к стагнации процесса проектирования и застреванию в ужасной петле совершенства: «Мы должны получить X правильно, прежде чем мы сможем выполнить Y и Z» .

Итак, какова альтернатива? Есть ли способ быстро создавать, запускать, тестировать и улучшать цифровые продукты на основе реальных показателей и информации, полученной от реальных людей?

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

Моделирование запуска с минимально жизнеспособным прототипом

Никто ничего не знает... Ни один человек во всем киноиндустрии не знает наверняка, что сработает. Каждый раз это предположение и, если повезет, обоснованное. – Уильям Голдман, сценарист, лауреат премии Оскар.

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

Что, если бы был способ смоделировать запуск и определить жизнеспособность продукта задолго до того, как начнутся какие-либо серьезные усилия по проектированию?

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

Вот краткий обзор процесса разработки минимально жизнеспособного прототипа (MVPr):

1. Открытие
2. Исследование
3. Информационная архитектура
4. Визуальный дизайн
5. Запуск
6. Тестовое задание

Ждать! Разве не этот процесс используют все?

Да, и мы увидим, что, полагаясь на самые основные шаги, описанные выше, мы можем успешно…

• Имитация функциональности реального продукта;
• Имитация запуска реального продукта; а также
• Узнайте, стоит ли создавать настоящий продукт.

Шаг за шагом: как создать MVPr

1. Открытие: начните принимать решения

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

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

Обратите особое внимание на сильные и слабые стороны ваших конкурентов. Как вы можете использовать то, что они уже сделали (или не смогли сделать), чтобы сделать ваш прототип сильнее?

После 1-2 часов исследования вы сможете точно определить своих самых важных конкурентов и узнать ключевые аспекты каждого из них.

2. Исследование: определите своих пользователей

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

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

Вот некоторые практические области исследования, которые легко доступны в Интернете:

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

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

3. Информационная архитектура: структурируйте свой прототип

Как будет работать прототип и на какой информации следует сосредоточиться в первую очередь?

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

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

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

*Совет: при изучении информационной архитектуры сайта полезно делать скриншоты и делать их в оттенках серого, чтобы вас не отвлекало воздействие цвета (что может быть весьма убедительным).

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

Вот как это работает с помощью бесплатного набора пользовательского интерфейса:

Что мы сделали на изображении выше?

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

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

4. Визуальный дизайн: перепрофилируйте бесплатные ресурсы пользовательского интерфейса

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

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

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

5. Запуск: программировать или не кодировать?

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

MVPr без кода

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

Основные прототипы

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

Мультимедийные прототипы

• Для сложных взаимодействий, переходов и анимации Principle весьма полезен.

100% реалистичные прототипы

• Framer позволяет дизайнерам имитировать любой вообразимый цифровой продукт. Это идеальный вариант, когда прототип должен выглядеть и ощущаться как настоящий с точки зрения нативной анимации и логического кодирования (пример: если это, сделайте то).
• Webflow предоставляет возможности для проектирования, создания с помощью кода и запуска адаптивных веб-сайтов на 100% холсте «что видишь, то и получаешь».

Нажмите, чтобы увидеть полноразмерное изображение.

Закодированный MVPr

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

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

6. Тест: используйте рекламную статистику

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

Первый практический шаг к оценке интереса к вашему продукту — создать рекламу и настроить таргетинг на людей, найденных на этапе исследования. В зависимости от вашей аудитории и типа продукта, который вы разрабатываете, вы можете размещать рекламу в Google, LinkedIn, Instagram или Twitter. Для продуктов, предназначенных для бизнеса, рекомендуется использовать Facebook.

* Совет для профессионалов: AdEspresso — это удобное место для одновременного запуска сотен версий вашей социальной рекламы и сбора полезной сравнительной аналитики.

Запустите рекламу, и вы узнаете две вещи:

1. Количество людей, просмотревших вашу рекламу
2. Количество людей, которые нажали на вашу рекламу

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

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

Используйте эту стратегию, и вы получите:

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

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

Запускайте и учитесь смело

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

1. С легкостью создавайте прототипы — учебное пособие по InVision Studio
2. Как провести эффективный дизайн-спринт
3. Кто знал, что Adobe CC может использовать Wireframe?
4. UX-тестирование для масс: сделайте его простым и экономичным
5. Карты пути клиента — что это такое и как их создать