Главная » Хабрахабр » [Из песочницы] В топку MVPs, внедряем MVPr (минимальный жизнеспособный прототип)

[Из песочницы] В топку MVPs, внедряем MVPr (минимальный жизнеспособный прототип)

Привет, Хабр! Представляю вашему вниманию перевод статьи «Ditch MVPs, Adopt Minimum Viable Prototypes (MVPr)» автора Alexandru Giuseppe Ispas.

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

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

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

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

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

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

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

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

Имитация запуска с минимальным жизнеспособным прототипом

В любом случае это будет догадкой, несмотря на вашу везучесть или образованность».
— Уильям Голдман, победитель сценария Оскар
«Никто ничего не знает… Ни один человек во всей области кинофильма не знает наверняка, что будет работать.

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

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

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

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

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

Подождите! Разве это не тот процесс, который каждый использует?

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

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

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

1. Постановка идеи: начните принимать решения

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

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

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

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

Tripadvisor

  • Ориентирован на отзывы пользователей
  • Сфокусирован на бронировании
  • Комплексно (отели, рестораны, чем можно заняться)

Lonely Planet

  • Ориентирован на личность
  • Красивые презентации
  • Много деталей и направлений
  • Фокус на опыт

TRAVEL+ LEISURE

  • Газетный стиль
  • Ощущение скуки
  • Черезмерное использование сленга

Personal TRAVEL BLOGS

  • Замечательные личные истории
  • Бедные презентации
  • Ощущение награможденности

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

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

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

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

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

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

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

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

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

Как будет работать прототип, и на какую самую важную информацию он будет сфокусирован?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MVPr без написанного кода

(далее no-code)
Когда вы закончите визуальный дизайн, на основе прототипа создайте landing page, чтобы посетители могли взаимодействовать с ним и предоставлять общие отзывы о вашей идее. На этом этапе процесса проектирования MVPr существует несколько способов создания прототипа no-code. Вот некоторые из них:

Базовые прототипы

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

Прототипы Rich Media (расширенные прототипы)

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

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

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

(Источник: Купер) Вот полезная диаграмма, которая разбивает сильные и слабые стороны нескольких проектных программ, которые могут быть использованы для создания интерактивных прототипов быстро и точно.

MVPr с кодом

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

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

Now UI Kit

Readymag — это инструмент онлайн-дизайна, который помогает творческим профессионалам легко создавать микросайты, портфели и многое другое.

Webflow позволяет дизайнерам создавать отзывчивые веб-сайты в браузере.

Themeforest предоставляет тысячи настраиваемых тем и шаблонов.

6. Тестирование: используйте рекламу для подтверждения заинтересованности вашей аудитории

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

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

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

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

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

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

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

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

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

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

Решительный запуск и обучение

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

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

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


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Расширяйте кругозор, Холмс! Или зачем физикам скрипка и кулинарные навыки

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

Спам звонки. Можно ли с ними бороться?

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