Что такое прототип приложения
Прототип — это модель будущего приложения, по которой можно пройти главный сценарий: открыть, нажать, ввести данные, получить результат. В отличие от набора макетов, прототип связывает экраны переходами, поэтому человек не рассматривает картинки, а пользуется продуктом. В отличие от MVP, в прототипе нет настоящего сервера и базы данных: он показывает, как продукт будет работать, но не работает сам.
Прототипы различаются детализацией. Чем ближе прототип к готовому продукту, тем честнее реакция людей и тем дороже он стоит. Выбор уровня зависит от того, какой вопрос вы хотите проверить.
- Схематичный прототип: серые блоки, настоящие тексты, работающие переходы. Подходит для проверки логики и структуры.
- Кликабельный прототип в визуальном стиле: выглядит как готовое приложение и открывается на телефоне. Подходит для тестов с пользователями и показа инвестору.
- Прототип в коде: живая веб-страница с настоящими полями ввода, клавиатурой, анимацией и состояниями. Подходит, когда важно поведение, а не только вид.
Зачем нужен прототип, если можно сразу рисовать дизайн
Ошибку в сценарии дешевле всего исправить до того, как появились полный дизайн и код. Если на прототипе выяснилось, что человек не находит кнопку оплаты или не понимает, что от него хотят на втором шаге, правка займёт час. Если это выяснилось после релиза, придётся переделывать дизайн, вёрстку и логику.
Прототип решает и другие задачи. Команда перестаёт спорить о словах в ТЗ: у всех перед глазами одна модель. Разработчики оценивают объём точнее, потому что видят все экраны и развилки. Инвестор или партнёр понимает идею за минуту, держа телефон в руках, а не читая презентацию со схемами.
Бывает, что прототип не нужен. Если вы переносите в приложение давно работающий процесс без изменений, а пользователи — ваши сотрудники, которых можно обучить, логику проще согласовать на схеме экранов. Если же продукт новый, а пользователи — люди с улицы, которые закроют приложение после первой непонятной кнопки, прототип окупается почти всегда.
Что включить в прототип мобильного приложения
Прототип не обязан содержать все экраны будущего продукта. Он должен целиком провести человека по главному сценарию — ради которого приложение открывают — и показать развилки, важные для проверки. Остальные разделы можно обозначить и не прорабатывать.
Чек-лист, с которым мы начинаем любой прототип:
- Главный сценарий от входа до результата, без пропущенных шагов.
- Развилки: другой способ оплаты, повторная попытка, отказ, возврат назад.
- Ошибки: нет сети, ничего не найдено, платёж не прошёл. Если прототип показывает только идеальный путь, он проверяет презентацию, а не продукт.
- Настоящие тексты. На заглушках вроде «текст кнопки» сценарий проверить нельзя: люди спотыкаются как раз о слова.
- Состояния ожидания и пустые экраны: что видит человек, пока система думает или когда данных ещё нет.
- Устройство, на котором прототип будут смотреть: телефон, планшет или браузер на компьютере.
Как устроен прототип «Стоянки»
«Стоянка» — проект студии: оплата парковки в Уфе по QR-коду на табличке зоны. Водитель наводит камеру, вводит госномер, а сервис, которому камеры уже сообщили время въезда, печатает живой чек: сколько машина стоит, сколько из этого бесплатно и сколько к оплате прямо сейчас. Прототип можно пройти до кассового чека прямо на странице кейса, в рамке телефона.
Внутри четыре экрана — камера с QR-кодом, зона и номер, живой чек, оплачено с кассовым чеком — и восемь сценариев. Половина из них про то, что идёт не так: машина не найдена, нет сети, банк не подтвердил оплату, водитель забыл оплатить. Для каждой ошибки на том же экране есть следующий шаг: например, если камеры не видели номер, появляется кнопка «Оплатить по времени, без камеры». Ещё в прототипе семь шторок и наложений, включая имитацию приложения банка, чтобы путь оплаты был полным.
Прототип собран одним лёгким файлом и проверен на экранах шириной от 298 до 390 пикселей. Работают клавиатура, Enter и Escape, фокус возвращается к кнопке, которая открыла шторку, а чек и ошибки озвучиваются для читалок экрана. Такой уровень нужен не всегда, но здесь задачей было показать сервис, который можно потрогать, а не набор экранов.
Как проверить прототип на людях
Тест прототипа — это не опрос «нравится ли вам». Дайте человеку задачу и молча смотрите, как он её решает: «Вы поставили машину у дома, оплатите час парковки». Записывайте, где он задумался, куда нажал не туда, какое слово перечитал дважды. Вопросы задавайте после, а не во время.
Большая выборка не нужна. Якоб Нильсен из Nielsen Norman Group советует тестировать небольшими группами примерно по пять человек и повторять тест после каждой правки, а не проводить одно большое исследование. На практике это значит: проверили, исправили прототип, проверили снова на новых людях.
- Выберите людей, похожих на ваших будущих пользователей, а не коллег.
- Сформулируйте 3–5 задач на главный сценарий и важные развилки.
- Давайте прототип на том устройстве, на котором будут пользоваться продуктом.
- После теста соберите повторяющиеся проблемы и исправьте прототип до следующего круга.
Figma или код: какой прототип выбрать
Кликабельный прототип в Figma собирается быстрее и подходит для большинства задач: проверить структуру, показать идею, согласовать сценарий с командой. Его ограничение — поведение: поля ввода, клавиатура телефона, жесты и анимация в нём только изображены.
Прототип в коде нужен, когда продукт держится на взаимодействии: ввод данных с проверкой, шторки, которые тянутся пальцем, таймеры, реакция на ошибки сети. Его можно открыть по ссылке на любом телефоне и проверить на людях в реальных условиях. «Стоянка» сделана именно так, потому что живой чек и отсчёт времени в статичной картинке не показать.
Если сомневаетесь, начните с Figma: прототип в коде можно сделать позже, когда сценарий уже проверен и понятно, какие взаимодействия стоит довести до настоящего поведения.
Сколько стоит прототип приложения
У нас кликабельный прототип стоит от 30 000 ₽ и занимает ориентировочно от 1 недели. Прототип в коде — от 50 000 ₽, ориентировочно от 2 недель. Итоговая цена зависит от нескольких факторов:
В результате вы получаете карту сценариев, прототип, который открывается по ссылке на телефоне, настоящие тексты экранов и исходные файлы. Если после теста сценарий нужно поправить, правки входят в этап: прототип и существует для того, чтобы меняться, пока это дёшево. Точную сумму и сроки называем после брифа, когда понятно, какой вопрос должен проверить прототип.
- Число сценариев и развилок: каждый дополнительный путь добавляет экраны.
- Детализация: схематичный прототип быстрее прототипа в визуальном стиле продукта.
- Сложные взаимодействия: жесты, шторки, анимация переходов, ввод с проверкой.
- Платформы: прототип под телефон, под веб или под оба формата.
Что делать с прототипом после проверки
Прототип не выбрасывают. Карта сценариев, структура экранов и формулировки уже проверены, поэтому полный дизайн начинается с готового фундамента: дорисовываются остальные разделы, все состояния и UI-кит для разработчиков. Дизайн мобильного приложения у нас стоит от 90 000 ₽, ориентировочно от 6 недель; приложение под ключ с разработкой и публикацией в сторах ведём вместе с партнёрами студии — от 290 000 ₽, ориентировочно от 3 месяцев.
Если вы на этапе идеи, начните с прототипа главного сценария. Напишите нам в Telegram, позвоните или отправьте письмо: расскажите, что должен сделать человек в вашем приложении, и мы предложим, какой прототип нужен для вашей проверки.
