Что такое прототип в дизайне
Коротко
Прототип — это рабочая модель продукта, которую можно потрогать и пройти по ней, как пройдёт покупатель. В цифровом продукте это связанные экраны с кнопками и переходами, в предметном — картонный или напечатанный образец. Прототип делают не для красоты, а чтобы увидеть, как человек им пользуется, и исправить до того, как продукт начнут делать всерьёз.
Чем прототип отличается от каркаса и макета
Каркас, макет и прототип — три разных этапа одной работы, и путать их дорого. Каркас — это схема экрана из прямоугольников и подписей: где заголовок, где кнопка, где список. Макет — тот же экран, но уже в цвете, с логотипом, шрифтами и картинками: он показывает, как продукт выглядит. Прототип показывает, как он работает: на нём нажимают кнопки, переходят между экранами и проходят путь целиком.
Разница видна по вопросу, на который отвечает каждый этап. Каркас отвечает, что где стоит. Макет — как это выглядит. Прототип — что произойдёт, когда человек нажмёт. Поэтому макет можно согласовать и на этом остановиться, а проверить догадку о поведении покупателя можно только на прототипе.
Каркас, макет и прототип рядом
| Каркас | Макет | Прототип | |
|---|---|---|---|
| Что показывает | Схему экрана: блоки и подписи | Внешний вид: цвета, шрифты, картинки | Работу: нажатия и переходы |
| На какой вопрос отвечает | Что где стоит | Как это выглядит | Что произойдёт после действия |
| Можно ли пройти путь | Нет | Нет | Да, от входа до результата |
| Что проверяют | Состав и порядок блоков | Восприятие и стиль | Понятность и удобство для человека |
Какие бывают прототипы
- Бумажный или картонный — набросок экранов на листах, между которыми человек переходит руками. Дешевле всего и годится для первой проверки идеи.
- Кликабельный из каркасов — связанные серые экраны без оформления. Проверяет структуру и путь, не отвлекая цветом.
- Интерактивный макет — оформленные экраны с работающими кнопками и переходами. На нём показывают заказчику и проверяют на людях весь сценарий.
- Прототип на реальных компонентах — собран из тех же блоков, из которых потом сделают продукт: формы проверяют данные, списки листаются. Ближе всех к готовому продукту и удобен для передачи в разработку.
- Прототип, который выглядит как продукт, — для предметов: внешний вид, материал, ощущение в руке.
- Прототип, который работает как продукт, — для техники: проверяют, справляется ли устройство с задачей, даже если вид у него пока грубый.
- Демонстрационный образец — и выглядит, и работает как готовый продукт. Его делают поздно, для показа и проверки перед серийным производством.
Что проверяют на прототипе
На прототипе смотрят не на дизайн, а на человека. Находит ли он нужную кнопку, понимает ли, что делать дальше, не бросает ли заполнение на середине, доходит ли до оплаты. Для этого дают задачу и молча смотрят, как он её решает: где останавливается, куда нажимает не туда, что перечитывает.
Ранние прототипы нарочно делают грубыми. Незаконченный вид даёт человеку разрешение говорить прямо и предлагать своё, а команде — не привязываться к первой идее и спокойно её поменять. Красивый макет, наоборот, жалко ломать, и замечания о нём звучат мягче, чем есть на самом деле.
Прототип нужен и внутри компании. На нём руководители, продажи и разработка видят один и тот же продукт и спорят о нём, а не о своих представлениях. Согласованное описание функции на словах каждый понимает по-своему, а прототип понимают одинаково.
Почему без прототипа дороже
Ошибка в прототипе стоит правки в редакторе, ошибка в готовом продукте — переделки кода, вёрстки и повторных согласований. Чем позже нашли непонимание, тем больше работы приходится выбрасывать. Поэтому прототип делают до разработки, а не после.
Прототип не заменяет исследование. Он отвечает, удобно ли человеку пользоваться тем, что уже придумано. А что именно придумывать — кому и зачем нужен продукт, чем он отличается от конкурентов — решается раньше, в разговоре с покупателями и в позиционировании. Прототип, собранный на выдуманном представлении о покупателе, аккуратно проверит неверную идею.
Частые вопросы
Прототип и макет — это одно и то же?
Нет. Макет показывает, как продукт выглядит, но по нему нельзя пройти. Прототип показывает, как он работает: на нём нажимают кнопки и переходят между экранами. Макет часто становится основой прототипа, но сам по себе им не является.
Обязательно ли делать прототип до дизайна?
Прототип делают до разработки, а не до дизайна. Сначала каркас, потом оформление, потом прототип, на котором проверяют путь человека. Проверять удобнее на связанных экранах, чем на отдельных картинках, поэтому прототип собирают из уже нарисованных экранов.
Сколько времени занимает прототип?
Зависит от того, что проверяют. Бумажный набросок нескольких экранов делают за часы, кликабельный прототип целого сценария — за дни. Точный срок называют после того, как понятен сценарий и сколько в нём шагов.
Можно ли сделать прототип без дизайнера?
Можно, если нужно проверить одну догадку: нарисовать экраны на бумаге и пройти по ним с человеком. Для проверки целого сценария с переходами и состояниями нужен инструмент и человек, который его освоил.
Что делать после проверки прототипа?
Собрать замечания, исправить то, на чём люди спотыкаются, и проверить ещё раз на новых людях. Когда путь проходится без подсказок, прототип передают в разработку как описание того, что нужно сделать.
Читать в журнале
Когда прототип нужен, чтобы не переделывать сайт
Чтобы страницы сайта делали под спрос, а не под вкус
Прототип проверяет, удобно ли человеку идти по странице. Но сначала нужно знать, с какими словами он приходит и что ищет: от этого зависит, какие страницы вообще нужны и что на них стоит.
Я собираю спрос и язык покупателей, по ним планирую страницы и только потом делаю сайт: структура и тексты вырастают из того, как люди ищут, а прототип проверяет путь до заявки.