Прототипы: от бумаги до кликабельного

Прототип — это репетиция продукта. Можно отрепетировать на бумаге за час, а можно почти как настоящее — выбор зависит от вопроса.

«Если картинка стоит тысячи слов, то прототип стоит тысячи встреч». — IDEO

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

Низкая и высокая детализация

Низкодетальный прототип (lo-fi): бумажные экраны, грубые блоки, переходы «на словах» или простыми связями. Дёшево, быстро, для ранней проверки идеи. Высокодетальный (hi-fi): почти как настоящий продукт — цвета, реальный текст, анимации. Дороже, но даёт точную обратную связь, годится для финального теста.

  УРОВНИ ПРОТОТИПА

  lo-fi  [бумага/блоки]  -> быстро, дёшево, ранняя идея
  mid-fi [кликабельный   -> проверка потока
          вайрфрейм]
  hi-fi  [как настоящий] -> точный тест, презентация

Кликабельные связи

В инструменте прототипирования экраны соединяют связями: «при нажатии на эту кнопку показать тот экран». Получается интерактивная карта, по которой человек проходит сценарий. Так находят тупики («нажал — а дальше некуда») ещё до строчки кода.

  СВЯЗИ МЕЖДУ ЭКРАНАМИ

  [Главная] --кнопка "Войти"--> [Форма входа]
                                     |
                              --"Готово"--> [Профиль]

Как делают ПЛОХО

Сразу пишут код, чтобы «по-настоящему проверить». Любая правка после теста стоит дни разработки, поэтому правок избегают, и продукт выходит сырым. Прототип пропустили.

Как делают ХОРОШО

Под ранний вопрос берут lo-fi, под финальную полировку — hi-fi. Кликабельный прототип проверяют на людях, правят за минуты в дизайн-инструменте, и только устоявшийся вариант отдают в разработку.

Чек-лист

• Уровень детализации выбран под вопрос исследования.
• Ранние идеи проверяю дёшево (lo-fi).
• Прототип кликабельный, а не статичная картинка.
• В разработку идёт уже проверенный вариант.

Точность прототипа — не одна шкала, а несколько независимых: визуальная (насколько похоже на финал), содержательная (настоящие тексты или «рыба») и интерактивная (можно ли реально кликать). Можно собрать визуально богатый, но «мёртвый» макет — или, наоборот, грубый серый, но полностью кликабельный. Выбираете ту ось, которая нужна под ваш вопрос.

Кликабельный прототип со связанными экранами в инструменте вроде Figma даёт ощущение живого продукта, не написав ни строчки. Отдельный приём — «Волшебник из страны Оз»: пользователь думает, что отвечает умная система, а на самом деле за ширмой человек вручную имитирует её работу. Так проверяют идею, которую ещё дорого или невозможно собрать по-настоящему.

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

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

Итог

Прототип — это дешёвая репетиция. Чем раньше вопрос, тем грубее прототип; код — только для проверенных решений.

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