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

• протестировать идею и/или гипотезу;
• проверить, как пользователь будет использовать продукт для решения своей проблемы и найти препятствия на этом пути (если они есть);
• получить обратную связь;
• снизить риски запуска продукта/фичи.

Чем прототип НЕ является:

• Макетом сайта или разрозненными wireframe’ами. Раньше под прототипом понимали стадию разработки до отрисовки дизайна, то есть проработку UX и интерфейса. Сейчас же под прототипом понимается именно динамическая модель продукта, позволяющая симулировать какой-то из сценариев его использования.
• Финальным дизайном вашего продукта. Прототип совершенно не обязательно должен быть выполнен в вашей стилистике и согласно последним тенденциям онлайн моды. Если он решает свою задачу — проверку гипотезы — неважно, как он выглядит. Вам все равно придется его полностью переработать, прежде чем приступать к разработке продукта.

Можно выделить два основных вида прототипов технологических продуктов:

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

Выбор типа зависит исключительно от гипотезы, которую вы тестируете.

Окей, прототип — это модель, которую мы собираем из подручных средств (в оффлайне или онлайне), чтобы проверить какую-то идею. Какие глобальные цели мы при этом преследуем?

Их можно разделить на 4 категории:
1. Исследование. Прототип дает нам возможность дешево исследовать проблемы пользователя и искать возможности для их решения.
2. Понимание. С его помощью можно понять динамику проблемы и вычленить, что именно заставляет ваш продукт работать или наоборот мешает ему.
3. Вовлечение. Он позволяет быстро и дешево вовлечь как пользователей, так и стейкхолдеров в тестирование продукта.
4. Вдохновение. Благодаря прототипу, новую идею можно продать еще до её реализации.

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

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

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

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

Разобрались что, зачем и в какой момент времени мы хотим делать. Остался главный вопрос: как же сделать прототип качественным?

Для этого нужно держать в голове ряд основных принципов:

• Отражение сценария(ев) использования продукта. С помощью прототипа должно быть возможно проверить, как пользователь будет подходить к решению той или иной задачи и с какими преградами он столкнется на пути. Тестируя прототип, вы должны давать его пользователю, озвучивать задачу и отходить в сторону. Если отойти в сторону невозможно и вам постоянно приходится отвечать на вопросы и помогать — кажется, стоит пересмотреть и переработать сценарий использования.
• Прототип всегда интерактивный. Это довольно логично вытекает из первого принципа: вы не сможете заложить сценарий в основу статичной картинки. Статичная картинка даст вам лишь ответ на вопрос, насколько конкретно этому человеку визуально нравится исполнение вашего прототипа. Здесь мы вспоминаем, что прототип может не иметь ничего общего с финальным дизайном, поэтому такая оценка вам будет абсолютно бесполезна.
• В основе лежит гипотеза. Вы получите ценность, только если знаете, что конкретно хотите проверить. Сформулируйте гипотезу так, чтобы на нее можно было четко ответить «да» или «нет». А после пропишите, как именно прототип даст вам ответ на этот вопрос.
• Тестировать, а не валидировать. Человек всегда неосознанно ищет подтверждение своим идеям, поэтому важно повторять себе, что вам нужна объективная оценка и не будет никакого смысла, если вы подтолкнете пользователя к решению, которое вас устраивает. После этого вы потратите много времени и денег на разработку продукта, запустите его и обнаружите, что пользователи никак не конвертируются в покупателей. Не наступайте на эти грабли и будьте готовы к любому результату.
• Минимум догадок. Постарайтесь проверить все, даже если вы уверены, что знаете своего пользователя.

Вы можете пройтись по этому списку как по чек-листу после того, как ваш прототип будет готов, задавая себе вопрос: отражен ли этот принцип? Если галочки стоят во всех пунктах — можно смело переходить к следующей стадии и тестировать прототип на пользователях, инвесторах и стейкхолдерах (этому процессу мы посветим отдельную статью).

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

Вот некоторые их самых популярных:

• inVision, Marvel, Flinto – первый тип инструментов, который позволяет соединить макеты различных страниц в динамический прототип, то есть указать по клику на какую область одной страницы нужно отобразить другую.
• Prott, POP – эти инструменты не требуют от вас даже макетов. Просто нарисуйте скетч карандашом на бумаге, сфотографируйте и соедините в приложении в пользовательский сценарий.
• Proto.io, Framer, Origami, Form – более сложные инструменты, которые позволяют вам анимировать отдельные объекты (слои) и делать более сложные и интересные переходы. Но в их основе все так же лежат макеты страниц.
• Webflow, Figma – эти инструменты уже являются конструкторами сайтов и с их помощью можно создать не только прототип, но и первую версию продукта. Однако они так же хорошо подходят для прототипирования в случаях, когда вам нужно сильно больше, чем переходы между статичными экранами.

Давайте подведем итоги:

• Что: прототип — это простейшая модель вашего будущего продукта (или отдельной его части), в основе которой лежит гипотеза и пользовательский сценарий для её проверки.
• Зачем: чтобы узнать и лучше понять пользователя и его боли, вовлечь пользователей и стейкхолдеров в тестирование продукта на ранней стадии и иногда даже привлечь инвестиции в продукт и вдохновить людей своей идеей.
• Когда: когда есть понимание пользователя и его контекста и четко сформулированная продуктовая гипотеза, то есть ровно в тот момент, когда хочется собрать команду и начать разработку.
• Как: выбрав подходящий для вашей ситуации инструмент либо обратившись к тем, кто сделает это за вас (например, к нам по ineedmvp@mvplab.org)

Надеемся, вам было интересно и полезно!