В 1968 году Дуглас Энгельбарт провёл демонстрацию, которую позже назовут «матерью всех презентаций». За 90 минут он показал миру компьютерную мышь, гипертекст, видеоконференцию и совместное редактирование документов — технологии, которые станут массовыми только через 30 лет. Но главное, что он показал — не технологии. Он показал способ думать о будущем, делая его осязаемым.
Это и есть суть прототипирования. Не рисование квадратиков. Не расстановка кнопок. А материализация мысли до того, как она станет слишком дорогой, чтобы её менять.
Почему мы называем это «думать руками»
Билл Бакстон, исследователь из Microsoft Research и один из пионеров интерактивного дизайна, различает sketch и prototype. Скетч — это вопрос: «А что если?». Прототип — это ответ: «Вот как это работает». Но между вопросом и ответом лежит нечто более важное — процесс понимания.
Когда дизайнер рисует интерфейс на бумаге или собирает его в Figma, происходит странная вещь: мысль, которая казалась ясной в голове, вдруг обнаруживает дыры. «А что будет, если пользователь нажмёт сюда?» — спрашивает коллега. И ты понимаешь, что не знаешь. Ты думал, что знаешь, но мысль была незавершённой.
Алан Купер, создатель Visual Basic и автор концепции персонажей, говорил: «Если вы хотите, чтобы людям нравился ваш софт, сначала поймите их цели». Но понять цели невозможно абстрактно. Нужно попробовать — и посмотреть, что получится.
Три уровня приближения к реальности
В IDEO — компании, которая придумала дизайн-мышление и первую мышь для Apple — любят говорить: «Fail early to succeed sooner». Провались рано, чтобы преуспеть быстрее. Но проваливаться нужно с умом.
Low-fidelity — это бумага и маркер. Грубые прямоугольники, стрелки, подписи от руки. Такой прототип создаётся за минуты и выбрасывается без сожаления. Его задача — не показать решение, а спровоцировать разговор. «Вот так?» — «Нет, совсем не так!» — и это уже прогресс.
Mid-fidelity — уже похоже на интерфейс, но без визуальной полировки. Серые блоки, настоящие пропорции, реальный текст вместо lorem ipsum. На этом уровне проверяется структура: понятна ли иерархия? Куда смотрит глаз? Что кажется главным?
High-fidelity — почти готовый интерфейс. Кликабельный, с состояниями кнопок, с реальными данными. Такой прототип можно показать пользователю и наблюдать, как он пытается решить свою задачу. Здесь уже не вопросы, а проверка гипотез.
Дональд Норман, автор «Дизайна привычных вещей», писал: «Дизайн — это акт коммуникации». Прототип — главный язык этой коммуникации между всеми участниками: дизайнером, разработчиком, заказчиком и, в конечном счёте, пользователем.
Чем прототип не является
Часто вижу, как команды путают прототип с техническим заданием. Заказчик утверждает прототип, и все расслабляются: «Ну вот, теперь понятно, что делать». А потом выясняется, что никто не подумал про состояние загрузки, пустой список, ошибку сети, экран без данных.
Прототип показывает счастливый путь — happy path. Но жизнь состоит не только из счастливых путей. Пользователь ошибается, сеть падает, данные не приходят, кнопка нажимается дважды. Зрелый прототип должен отвечать на вопрос: «А что будет, если всё пойдёт не так?».
Ещё одна ловушка — прототип как политический инструмент. Красивый интерактивный прототип производит впечатление на руководство, выбивает бюджеты, выигрывает тендеры. Но если за красотой нет продуманной логики — это не прототип, а декорация. Театральный задник, за которым пустота.
Инструменты: средство, а не цель
Споры о том, что лучше — Figma, Axure или Framer — напоминают споры о том, какой молоток лучше. Зависит от гвоздя.
Figma стала стандартом индустрии не потому, что она лучшая, а потому что решила главную проблему — совместную работу. Дизайнер, разработчик и продакт смотрят на один и тот же файл, оставляют комментарии, видят изменения в реальном времени.
Axure остаётся незаменимым для сложной логики: условия, переменные, состояния. Если ваш продукт — это не лендинг, а система с десятками экранов и нетривиальными сценариями, Axure позволяет всё это описать и протестировать.
Бумага и маркер — самый недооценённый инструмент. Когда команда собирается у доски и рисует вместе, происходит то, что не происходит в цифре: все вовлечены. Никто не смотрит в телефон, потому что нужно передать маркер, нужно объяснить свою мысль, нужно слушать других.
Том Келли из IDEO в книге «Креативная уверенность» пишет: «Прототип — это не финальная точка, а начало разговора». Инструмент должен помогать этому разговору, а не становиться его заменой.
Типичные ошибки (и как их избежать)
Слишком рано — слишком детально. Команда тратит неделю на пиксель-пёрфект прототип первого экрана, а потом выясняется, что весь сценарий нужно переделать. Правило простое: детализация должна соответствовать уровню уверенности. Не уверен — рисуй грубо.
Прототип в вакууме. Дизайнер создаёт прекрасный интерфейс, не поговорив с разработчиками. Потом оказывается, что анимация требует 40 часов кода, а данные приходят совсем в другом формате. Покажи прототип разработчику до того, как влюбишься в своё решение.
Отсутствие версий. «Прототип_финал_v3_правки_FINAL_2.fig» — знакомо? Без системы версионирования команда тонет в хаосе. Договоритесь о правилах именования. Используйте историю версий в Figma. Помечайте, что изменилось.
Фетишизация инструмента. Потратить полдня на выбор между Figma и Sketch — это не работа, это прокрастинация. Выбери что угодно и начни делать. Инструмент можно сменить, потерянное время — нет.
Прототип как страховка от дорогих ошибок
Мы в UsabilityLab видели десятки проектов, где отсутствие прототипирования обходилось в сотни часов переделок. Вот типичные сценарии.
Ошибка в логике формы. На этапе разработки выясняется, что поле «Способ доставки» влияет на поля ниже, но обратной связи нет. Переделка — 5-8 часов работы фронтендера и тестировщика. На прототипе это заняло бы 5 минут обсуждения.
Непродуманные состояния. Дизайнер нарисовал карточку товара, но не подумал, как она выглядит без фото, без отзывов, без цены. Доработка «на лету» ломает уже готовую вёрстку. Ещё 10-15 часов.
Конфликт бэкенда и фронтенда. Пользователь должен получить письмо после шага А, но данные для письма собираются на шаге Б. Обнаружение после релиза — это не просто переделка интерфейса, это изменение архитектуры. 20+ часов и нервы всей команды.
Прототип превращает эти потенциальные катастрофы в дешёвые эксперименты.
Заключение: прототип как образ мышления
Генри Петроски, инженер и историк технологий, написал книгу «The Evolution of Useful Things», где показал, как обычные предметы — вилка, скрепка, застёжка-молния — проходили через сотни итераций, прежде чем стать такими, какими мы их знаем. Каждая итерация — это прототип. Каждая неудача — это обучение.
Прототипирование — не этап в процессе разработки. Это способ мышления, при котором идеи проверяются действием, а не обсуждением. Это готовность выбросить результат своего труда, если он не работает. Это смирение перед фактом, что первая версия всегда будет неправильной — и это нормально.
В конце концов, даже «мать всех презентаций» Энгельбарта была прототипом. Он показывал не готовый продукт, а возможность. И эта возможность изменила мир.
Дмитрий Сатин, основатель UsabilityLab