Прототипирование приложений и интерфейсов

Подробно

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

Зачем нужен прототип до разработки

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

Прототип полезен, когда:

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

О типах прототипов и о том, чем прототип отличается от MVP и дизайн-макета, мы писали в статье что такое прототип.

Что входит в создание прототипа

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

Сценарии и структура

Для каждого ключевого сценария рисуем user flow (схему шагов от входа до результата): регистрация, поиск, оформление заказа, оплата, обращение в поддержку. На схеме видно, сколько экранов нужно, где ветвления и где пользователь может получить ошибку. Из сценариев собираем карту экранов приложения.

Вайрфреймы

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

Кликабельный прототип в Figma

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

Прототип приложения, веб-сервиса и внутренней системы

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

Проверка прототипа на пользователях

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

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

Что вы получаете на выходе

• карту экранов и user flow ключевых сценариев;
• кликабельный прототип в Figma с доступом для вашей команды;
• описание логики экранов: что происходит при нажатиях, ошибках и пустых состояниях;
• итоги тестов на пользователях, если они входили в работу;
• список вопросов и решений, которые нужно учесть в ТЗ и дизайне.

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

Как считаем стоимость

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