- PVSM.RU - https://www.pvsm.ru -
Привет! Представляю вашему вниманию перевод статьи «Ditch MVPs, Adopt Minimum Viable Prototypes (MVPr)» [1] автора Alexandru Giuseppe Ispas.
Стремление к совершенству — это тонкая ловушка, которая часто приводит дизайнеров в бесконечный цикл итераций и доработок. Это особенно справедливо в мире цифровых продуктов, где каждое взаимодействие и графический элемент могут стать объектом дизайнерской одержимости.
Но если абстрагироваться и посмотреть на междисциплинарный характер дизайна цифрового продукта, легко понять, как дизайнеры попадают в идеальную ловушку.
Подумайте о всех людях и ролях, которые задействованы в разработке всего лишь одного цифрового продукта:
Так или иначе, многие из них пересекаются. Например, пользовательский интерфейс [2] продукта не может быть успешным, если его пользовательский опыт [3] не продуман. Учитывая данные взаимодействия возникает большое желание понять, как проектные решения влияют друг на друга: «Если мы будем делать X, как это повлияет на Y и Z?»
Этот тип стратегического прогнозирования безусловно важен, но это также может привести к тому, что процесс проектирования застопорится и застрянет в страшном цикле совершенства: «Мы должны получить X, прежде чем мы сможем выполнить Y и Z».
Итак, какова альтернатива? Есть ли способ быстро создавать, запускать, тестировать и совершенствовать цифровые продукты на основе реальных показателей и выводов, полученных от реальных людей?
В этом руководстве мы рассмотрим эти вопросы сквозь призму минимальных жизнеспособных прототипов и оснастим дизайнеров удивительно простым процессом построения, тестирования и усовершенствования цифровых продуктов.
На этой иллюстрации нет реалистичной детали спутникового изображения, но она обладает достаточной визуальной информацией, чтобы сделать ее легко идентифицируемой как наша родная планета. Точно так же минимальные жизнеспособные прототипы предоставляют пользователям «достаточную» функциональность, чтобы решить, оправдана ли концепция продукта.
«Никто ничего не знает… Ни один человек во всей области кинофильма не знает наверняка, что будет работать. В любом случае это будет догадкой, несмотря на вашу везучесть или образованность».
— Уильям Голдман [4], победитель сценария Оскар
Самые ранние решения процесса разработки цифрового продукта в лучшем случае основаны на догадках. Пока продукт не находится в руках реальных пользователей, все теоретически. С другой стороны, запуск продукта до его готовности может нанести ущерб его репутации (дорогостоящая ошибка).
Что, если бы был способ имитировать запуск и определить жизнеспособность продукта задолго до начала каких-либо крупных усилий по разработке?
В этом состоит значимость минимального жизнеспособного прототипа (MVPr), подход к разработке продукта [5], который требует значительно меньше времени и денег, чем более знакомый «минимально жизнеспособный продукт».
Подождите! Разве это не тот процесс, который каждый использует?
Да, и мы увидим, что, опираясь на простые основы вышеперечисленных шагов, мы сможем успешно…
Отличным способом начать процесс развития идеи является поиск веб-сайтов, блогов и приложений, похожих на вашу идею. Изучайте их историю, их целевые рынки, то как они там взаимодействуют. Если вы обнаружите, что ни один из соответствующих конкурентов не делает то, что делает ваш прототип, продолжайте двигаться вперед.
Этот шаг не требует опыта. Секрет в действии — продвигайтесь от намерения к действию.
Обратите особое внимание на сильные и слабые стороны ваших конкурентов. Как вы можете использовать то, что они уже реализовали (или не смогли реализовать), чтобы сделать ваш прототип сильнее?
После 1-2 часов исследований вы сможете определить наиболее важных конкурентов и изучить ключевые аспекты каждого из них.
Tripadvisor
Lonely Planet
TRAVEL+ LEISURE
Personal TRAVEL BLOGS
Этот пример анализа конкурентов из индустрии путешествий который подчеркивает основную цель этапа постановки идеи: раскрыть проблемы и возможности, создаваемые сильными и слабыми сторонами конкурирующих компаний.
Кто ваш целевой пользователь и почему его должен волновать ваш продукт? Понимание этого является ключевым моментом, но мы должны начать с просчета предположений. Лучше всего начинать с самой сильной гипотезы. Не пытайтесь ее ставить под сомнение или предпринимать попытки сделать «что-то для всех». Нам не нужен расплывчатый дизайн.
Вместо этого внимательно ознакомьтесь с сайтами конкурентов, найденными на первом этапе, и позвольте здравому смыслу нарисовать портрет ваших потенциальных пользователей.
Вот несколько практических областей исследования, которые легко доступны в Интернете:
Ценные идеи могут быть получены на каждом из этих направлений без значительных финансовых вложений. Это особенно важно для небольших проектных групп, работающих на основе небольших бюджетов. Большие бренды тратят значительные деньги на исследования, но небольшие команды и отдельные фрилансеры должны найти способы быть более изобретательными.
Профили пользователей могут быть общими или достаточно подробными. В начале процесса MVPr важно как можно быстрее выявить как можно больше
Как будет работать прототип [6], и на какую самую важную информацию он будет сфокусирован?
Самый простой способ начать отвечать на это — проанализировать топовые сайты, похожие на прототип, который вы создаете. Общий внешний вид и опыт сайта, который вы выбрали для примера, должен быть первоклассным.
Начните с разбивки сайта на блоки. Каковы все основные страницы и как они структурированы визуально? Не бойтесь изменить каркас сайта, а затем воссоздайте его с помощью своей информации, цветов, изображений и т. д.
Почему надо действовать именно так? Ваш сайт, скорее всего, будет функционировать аналогично сайтам конкурентов — у вас просто разные цели. Не нужно изобретать сложную систему, если пользователи хорошо реагируют на установленный опыт.
* Лайфхак: При изучении информационной архитектуры [7] сайта, полезной техникой является создание скриншотов и перевод их в оттенки серого, чтобы вы не отвлекались на влияние цвета (что может быть довольно навязчивым).
Отличный способ избавиться от шума и сосредоточиться на том, что важно — преобразовать скриншоты продукта в оттенки серого.
После этого воспользуйтесь онлайн-ресурсами, которые позволяют дизайнерам быстро перейти от нуля к интерактивному прототипу. Существует множество наборов пользовательских интерфейсов, шаблонов HTML, тем WordPress и т. д. Не бойтесь модифицировать их, чтобы они соответствовали вашему прототипу, и не волнуйтесь о совершенстве пикселей или красивом коде. На этом этапе это никому не важно. А важно то, насколько полезен ваш продукт.
Вот как это работает с помощью бесплатного набора пользовательского интерфейса (UI Kit) [7]:
Набор пользовательского интерфейса, который вам нужен, будет зависеть от вида прототипа, который вы разрабатываете. В этом случае использование шаблона, ориентированного на визуальный контент, позволяет быстро и беспроблемно его реорганизовать.
Что мы достигли в изображении выше?
Менее чем через час у нас есть визуальная основа для дальнейшего развития нашего прототипа.
Визуальный внешний вид вашего прототипа не может быть отделен от того, как он работает. Речь идет не только о графике. Прочный визуальный дизайн рассказывает историю и дает опыт с реальной ценностью.
Здесь визуальная согласованность является ключевой, поскольку она помогает пользователям ознакомиться с продуктом и ориентироваться более эффективно. Чтобы достичь такой последовательности на ранних стадиях разработки вашего прототипа, разумно перераспределять бесплатные ресурсы пользовательского интерфейса.
Работая таким образом, вам не придется тратить часы на разработку целостной системы дизайна. Опираясь на типографию, стили кнопок, иконографию и все другие важные компоненты пользовательского интерфейса.
Вместо того, чтобы тратить время на создание согласованного пользовательского интерфейса на нескольких экранах, воспользуйтесь набором пользовательских интерфейсов и сосредоточьтесь на создании контента. В этом примере мы быстро перешли от каркаса к макету высокой точности.
Пришло время поделиться своим прототипом с миром. К счастью, проще превратить макеты в динамические прототипы. Благодаря множеству интуитивно понятных инструментов вам даже не нужно знать, как кодировать, но вы должны учиться?
(далее no-code)
Когда вы закончите визуальный дизайн, на основе прототипа создайте landing page, чтобы посетители могли взаимодействовать с ним и предоставлять общие отзывы о вашей идее. На этом этапе процесса проектирования MVPr существует несколько способов создания прототипа no-code. Вот некоторые из них:
Вот полезная диаграмма, которая разбивает сильные и слабые стороны нескольких проектных программ, которые могут быть использованы для создания интерактивных прототипов быстро и точно. (Источник: Купер)
Код может быть удивительным союзником. Без сомнения, это лучший способ создать свой продукт. Главный недостаток заключается в том, что вам нужно знать, как писать код, чтобы воспользоваться преимуществами расширенной настройки. Без надлежащей базы знаний выбор экспериментов с кодом замедлит вас.
Существует множество комплектов стартеров кода, которые помогают запустить проект. Например, набор пользовательского интерфейса, представленный выше, имеет собственную версию HTML, доступную для загрузки:
Now UI Kit [12]
Readymag [13] — это инструмент онлайн-дизайна, который помогает творческим профессионалам легко создавать микросайты, портфели и многое другое.
Webflow [11] позволяет дизайнерам создавать отзывчивые веб-сайты в браузере.
Themeforest [14] предоставляет тысячи настраиваемых тем и шаблонов.
Секретный соус для тестирования вашего прототипа заключается в инструментах, которые позволяют вам получить максимальную информацию с минимальными затратами усилий, сохраняя при этом ценность. Все, что вам нужно, это несколько долларов и некоторое терпение для устранения проблемных мест.
Практический первый шаг к оценке интереса к вашему продукту состоит в том, чтобы создать объявление и направить туда людей, найденных на этапе исследования. В зависимости от вашей аудитории и типа продукта, который вы разрабатываете, вы можете запускать рекламу в Google, LinkedIn, Instagram или Twitter. Для продуктов от бизнеса к потребителю рекомендуется использовать Facebook.
*Лайфхак: AdEspresso [15] — удобное место для одновременного запуска сотен версий ваших социальных объявлений при сборе полезной сравнительной аналитики.
Запустите рекламу, и вы узнаете две вещи:
После того, как вы подтвердите, что ваша целевая аудитория заинтересована, вам необходимо создать ценность для ваших ранних пользователей. Вот как:
Используйте эту стратегию, и вы получите:
В первый раз, когда вы получаете реальную обратную связь, ваш продукт в прямом эфире. Благодаря этому циклу создания выгодного предложения, анализу поведения и итерационным решениям вы узнаете, что работает, а что нет, и вы приблизитесь к продукту, который люди действительно хотят использовать.
Конечная цель минимального жизнеспособного прототипа заключается в следующем: переход от гипотез дизайна к реальной, эффективной обратной связи быстро и уверенно.
Это процесс, охватывающий неопределенность и ошибочные представления как возможности для улучшения. А более того, он вознаграждает действие. Хороший дизайн требует смелого принятия решений и готовности двигаться вперед перед лицом несовершенства.
Поэтому не преуспевайте в стремлении к совершенству и старайтесь не сравнивать себя с мега-брендами и их огромными ресурсами. Продолжайте предпринимать шаги вперед, и вскоре вы окажетесь со значительно полированным продуктом, от использования которого люди будут в восторге.
Автор: 3dstart
Источник [16]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ux/293707
Ссылки в тексте:
[1] «Ditch MVPs, Adopt Minimum Viable Prototypes (MVPr)»: https://www.toptal.com/designers/prototyping/minimum-viable-prototype
[2] пользовательский интерфейс: https://www.toptal.com/designers/ui
[3] пользовательский опыт: https://www.toptal.com/designers/ux
[4] Уильям Голдман: https://www.imdb.com/name/nm0001279/
[5] подход к разработке продукта: https://www.toptal.com/designers/product-design/effective-design-sprint
[6] прототип: https://www.toptal.com/designers/prototyping
[7] информационной архитектуры: https://www.toptal.com/designers/ia
[8] InVision: https://www.toptal.com/designers/ui/invision-studio-tutorial
[9] Principle: http://principleformac.com/
[10] Framer: https://framer.com/
[11] Webflow: https://webflow.com/
[12] Now UI Kit: https://www.creative-tim.com/product/now-ui-kit
[13] Readymag: https://readymag.com/
[14] Themeforest: https://themeforest.net/
[15] AdEspresso: https://adespresso.com/
[16] Источник: https://habr.com/post/424197/?utm_campaign=424197
Нажмите здесь для печати.