Прототипы имеют решающее значение не только для того, чтобы коллеги, инвесторы или деловые партнеры поверили в вашу идею. Они используются на протяжении всей разработки, чтобы помочь вам спланировать, оценить и протестировать продукт, прежде чем вкладывать слишком много времени и денег. Давайте посмотрим, как это делается?
В 2001 году в Эдинбурге трое друзей собрались, чтобы представить друг другу свои бизнес-идеи. Они хотели вместе создать что-то успешное, поэтому у каждого было несколько предложений, за которые остальные могли проголосовать и выбрать лучший. Только один из друзей принес прототип. Гарет Уильямс поделился таблицей Excel, которую он создал, чтобы помочь себе найти дешевые авиабилеты, что сразу же всех воодушевило его идеей создания веб-сайта для проверки рейсов. Так в 2002 году родилась первая версия Skyscanner.
- Резюме
- Что такое прототип и зачем он нужен
- Зачем вам нужен прототип?
- Проверка концепции — прототип — MVP
- Подходы к прототипированию
- Быстрое одноразовое прототипирование
- Эволюционное прототипирование
- Инкрементное прототипирование
- Экстремальное прототипирование
- Этапы прототипирования
- Сбор требований
- Быстрое проектирование
- Эскизы
- Бумага
- Разработка прототипа
- Кликабельные каркасы
- Мокапы
- Высокоточный прототип
- Тестирование и доработка прототипа
- Внедрение продукта
Резюме
Прототип – это проводник идеи. Нет лучшего способа поделиться с другими тем, как продукт выглядит в вашем воображении, чем построить модель, симуляцию.
Прототип — это аргумент, подтверждение того, что вы знаете, о чем говорите, поскольку проделали некоторую предварительную работу и имеете приблизительное представление о том, каким будет конечный результат.
Наличие прототипа — это здравый смысл и нормальный повседневный процесс проектирования и разработки продукта. Одно из главных правил, если вы хотите разместить свой проект на Kickstarter, — продемонстрировать прототип — честное и четкое представление вашего продукта в его текущем состоянии с минимальным редактированием фотографий. Это важно для получения долгосрочной поддержки спонсоров и создания атмосферы доверия на сайте.
Имея прототип, вы можете довериться себе, своей команде, заинтересованным сторонам и поставщикам и создать что-то потрясающее с минимальным риском.
Что такое прототип и зачем он нужен
В разработке программного обеспечения прототип — это ранний проект продукта, с которым могут взаимодействовать пользователи. Прототипы не кодируются, а визуализируются с помощью специальных инструментов для переключения между экранами и имитации конечного пользовательского опыта. Прототипирование позволяет вам сэкономить время и деньги на разработке, поскольку вы можете обнаружить проблемы с удобством использования на ранней стадии и отшлифовать дизайн перед созданием продукта.

Зачем вам нужен прототип?
- Для идей. Прототип — это простой способ экспериментировать и выражать различные идеи внутри команды дизайнеров.
- Для привлечения заинтересованных сторон. Как говорит Гарет Уильямс из Skyscanner: «Если вы можете показать кому-то, что вы хотите сделать, и хотите, чтобы он помог вам в этом, это гораздо эффективнее, чем пытаться написать кому-то или объяснить кому-то».
- Для связи между проектными и инженерными командами. Прототип уменьшает неопределенность, которую могут испытывать разработчики при знакомстве с дизайном.
- Для выявления проблем с удобством использования. Кликабельный прототип позволяет дизайнерам наблюдать за взаимодействием конечных пользователей еще до того, как будет написана хотя бы одна строка кода. Для пользователей прототипы выглядят и ощущаются как конечный продукт, поэтому их реакция будет естественной и максимально приближенной к реальным сценариям.
Существует большая путаница в отношении того, что является прототипом, а что нет, поскольку для аналогичных целей также используются такие понятия, как макеты, каркасы и подтверждение концепции. Давайте рассмотрим различия между ними.
Проверка концепции — прототип — MVP
Доказательство концепции (proof of concept, PoC) — это самое дешевое и простое представление вашего продукта, которое вы можете создать. Его основная цель – выяснить, осуществима ли идея продукта с технической точки зрения. Это может быть презентация, видео или диаграмма, ранняя реализация функциональности, в общем, что-то, что покажет лицам, принимающим решения, что это можно и нужно делать, часто с учетом объема и технологий, необходимых для проекта.
Минимально жизнеспособный продукт (minimum viable product, MVP) — это большой шаг вперед по сравнению с PoC, поскольку это ранняя версия продукта с некоторыми минимальными функциями, которые используются для того, чтобы увидеть, как аудитория примет продукт. Их часто публикуют для сбора отзывов и тестирования.
Прототип находится где-то посередине: он гораздо более детализирован и практичен, чем PoC, но ориентирован только на дизайн и фактически не имеет никаких функций, в отличие от MVP.
Доказательство концепции | Опытный образец | MVP | |
Цель | Подтвердите техническую возможность | Тестирование дизайна продукта | Оцените жизнеспособность рынка |
Время до завершения | Несколько дней -недель | Несколько недель | Несколько месяцев |
Целеваяаудитория | -Внутренние заинтересованные стороны -Инвесторы | -Внутренние заинтересованные стороны -Инвесторы -Конечные пользователи | Широкий круг конечных пользователей |
Форма | Технология Документация Диаграммы, Каркасы Презентации Реализованный функционал | Кликабельная демоверсия | Рабочий инструмент с ключевыми функциями |
По сути, вайрфреймы (каркасы) и макеты — это разные версии прототипа.

Каркасы — это контуры дизайна, показывающие расположение контента, кнопок, текста и т. д. Их можно нарисовать от руки или создать с помощью специальных инструментов.
Каркас представляет собой базовый скелет пользовательского интерфейса, не вдаваясь в детали, но позволяя дизайнерам быстро редактировать элементы и их положения. Они являются первым шагом в процессе проектирования после сбора информации и обычно создаются командой UX.
Мокапы (макеты) — это обновленные каркасы, наполненные контентом: логотипами, изображениями и реальным текстом. Созданные дизайнерами пользовательского интерфейса, они уже имеют цвета, названия и шрифты, которые могут оказаться в конечном продукте.
Функциональный (или работающий) прототип — окончательная форма, которую может принять прототип. Это кликабельная версия макета, которая может точно имитировать реальный пользовательский опыт. Оно также может принимать разные формы:
- Прототип технико-экономического обоснования: вы тестируете, какая технология лучше всего подойдет для реализации вашей идеи продукта, чтобы исключить риски.
- Высокоточный (hi-fi) прототип, предназначенный для сбора данных о производительности пользователей (уровень удовлетворенности, количество проблем за сеанс и т. д.).
- Прототип с реальными данными, в котором вы заполняете прототип реальными, а не выборочными данными, чтобы сделать среду тестирования более предсказуемой.
Вы можете еще больше запутаться во всех этих типах прототипов. Это нормально, потому что каждая организация может выбирать концепции, которые лучше всего подходят для нее, и не обращать внимания на терминологию. Независимо от того, какой прототип вы планируете создать, вы можете применить любой подход к его созданию.
Подходы к прототипированию
Как и в случае с программным обеспечением, при создании прототипа можно подойти по-разному. Вот несколько методов и случаи, когда они могут быть полезны.
Быстрое одноразовое прототипирование
Как следует из названия, одноразовое прототипирование означает, что такой прототип будет актуален лишь в течение короткого времени, например, в течение одного спринта. За это время он пройдет несколько циклов модификации и тестирования, но в конечном итоге будет отброшен. Бумажные прототипы по определению являются «одноразовыми», потому что после того, как все будут ими удовлетворены, будет построен новый прототип.
Одноразовые прототипы полезны для сбора первоначальных отзывов пользователей, которые затем используются для создания реального рабочего прототипа.
Эволюционное прототипирование
Этот метод наиболее близок к обычному подходу к прототипированию. После создания прототипа вы представляете его пользователям и собираете отзывы. Затем вы вносите улучшения на основе этих отзывов и еще раз показываете прототип пользователям. Вы делаете это несколько раз, пока прототип не будет полностью принят пользователями. Таким образом, прототип развивается до финальной версии.
Такой подход гарантирует, что конечный продукт, скорее всего, будет соответствовать требованиям пользователей, поскольку они активно участвовали в процессе.
Инкрементное прототипирование
Инкрементное прототипирование, которое часто используется для крупных корпоративных продуктов, включает в себя разбиение продукта на несколько более мелких частей и подготовку прототипов для них индивидуально. Каждый прототип отдельно тестируется и дорабатывается перед объединением в единый прототип. Чтобы убедиться, что разные предметы сочетаются друг с другом по внешнему виду, вам необходимо заранее подготовить руководство по стилю.
Этот прием значительно сократил время прототипирования, поскольку вы работаете над разными частями системы параллельно.
Экстремальное прототипирование
Экстремальное прототипирование используется специально в веб-разработке и разделено на три этапа в соответствии с тремя уровнями веб-приложения:
- Создание статических каркасов в HTML для уровня представления.
- Преобразуйте каркасы HTML в функциональные прототипы, подключив их к смоделированным сервисам.
- Внедрите сервисы в окончательный прототип.
Экстремальное прототипирование позволяет продемонстрировать прототип пользователям любого уровня. Не зацикливайтесь на классификации, а используйте эти подходы в своих интересах. Ниже мы опишем основные этапы прототипирования независимо от метода.
Этапы прототипирования
Создание прототипа — это задача проектирования, поэтому вы можете подойти к ней, как к любому другому проекту проектирования: от сбора информации о том, что должно быть в проекте, до проверки того, насколько хорошо вы интерпретировали требования пользователя с помощью готового проекта.
- Сбор требований
- Быстрый дизайн
- Разработка прототипа
- Оценка пользователя
- Уточнения
- Внедрение продукта
Сбор требований
В разработке ПО требования — это цели или потребности, которым должен соответствовать конечный продукт. Обычно их разделяют на функциональные (функции продукта) и нефункциональные (производительность системы), подробнее о требованиях можно почитать здесь.
Прототип обычно строится на основе функциональных требований, которые собираются разными способами.
Интервью. Обычно бизнес-аналитик (БА) — человек, непосредственно ответственный за документирование требований — проводит собеседование с одним или группой заинтересованных сторон и конечных пользователей.
Бизнес-аналитик может задавать вопросы о работе, задачах и типичных проблемах собеседника. Он также может попросить показать, как он в настоящее время решает эти проблемы, какие инструменты он уже использует и как. Часто интервью записываются и расшифровываются, поэтому остальная команда знает все детали и ничего не упускает. Групповое собеседование может быть преимуществом, поскольку вопросы могут спровоцировать дальнейшее обсуждение, и бакалавр может принять к сведению, по каким вопросам группа согласна. Наши советы по проведению интервью с пользователями читайте в специальной статье.
Опросы. Анкеты и опросы используются, когда ваши пользователи/заинтересованные стороны разбросаны географически и вы хотите охватить от десятков до сотен из них за один раз. Создание хорошего опроса само по себе является искусством, поэтому убедитесь, что вы делаете его минимальным и понимаете, как вы будете использовать результаты опроса. Начните с определения того, какие решения вы планируете принять на основе этих ответов, а затем определите количество ответов, которые вам понадобятся для принятия решения. Например, если не менее 15% респондентов проявили интерес к определенной функции, вы включите эту функцию в документ с требованиями.
Наблюдения за пользователями. Как и в случае с собеседованиями, Бизнес-аналитик встречается с пользователем на сеансе, но на этот раз он наблюдает за выполнением задачи. Пользователя просят показать, как он обычно выполняет задачу, а интервьюер тщательно записывает каждое событие, иногда уточняя определенные процессы. Также можно использовать записи экрана и видео. К сожалению, пользователь по-прежнему может вести себя ненормально во время наблюдений, и зачастую для сбора всех деталей требуется множество сеансов.
После сбора информации от пользователей и заинтересованных сторон все ответственные лица просматривают записи и выбирают наиболее важные требования, которые могут стать отличным началом для прототипа.
Быстрое проектирование
Здесь создается простейшая версия прототипа (вайрфреймы и макеты). Есть несколько способов быстро разработать пользовательский интерфейс.
Эскизы
Вы можете рисовать в блокноте, на доске в офисе или в цифровом виде, используя инструменты рисования или онлайн-карты. Создание эскизов — это самый быстрый способ воплотить в жизнь идеи пользовательского интерфейса, а также наброски для следующей, лучшей идеи. Мы бы не советовали рисовать эскизы в качестве основного метода проектирования, поскольку есть более эффективные методы, но они определенно лучше всего подходят для быстрого обмена идеями.
Используемые инструменты: Miro, Diagrams.net, Sketch.io, инструменты физического рисования.
Бумага
Старый, но любимый дизайнерами метод: бумажные прототипы дешевы, могут быть созданы кем угодно и являются отличным занятием для совместной работы команды. Бумажные прототипы обычно имеют форму каркасов и используют складные или раздвижные элементы и различные слои. Хотя создание сложных бумажных каркасов требует времени, они по-прежнему выглядят грубо, что может помочь вашим пользователям чувствовать себя более комфортно, делясь своими критическими замечаниями.
Используемые инструменты: шаблоны прототипов для печати, трафареты для телефонов, инструменты физического рисования.

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

Инструменты вайрфрейминга: Microsoft PowerPoint, Balsamiq, Figma, Justinmind, Lucidchart, Mockflow и т. д.
Когда использовать. Кликабельные каркасы можно использовать на более ранних этапах, когда вы хотите протестировать различные версии дизайна, прежде чем переходить к одной.
Мокапы
Мокапы — это статичные, но более реалистичные изображения конечного продукта, которые позволяют удовлетворить требования заинтересованных сторон в отношении брендинга, цветов, шрифтов, иконографии и других элементов. Мокапы не пользуются большой популярностью, так как многие дизайнеры решают не терять время и создают Hi-Fi прототипы поверх каркасов. Однако макеты очень важны для эмоционального воздействия и тестирования важнейших визуальных элементов.
Инструменты для создания макетов: InVision, Sketch, Figma, Adobe XD, Framer.
Когда использовать. Включайте макеты в маркетинг и презентации, чтобы эмоционально связать стейкхолдеров с продуктом еще до создания прототипа.
Высокоточный прототип
Прототип Hi-Fi, наиболее близкий к конечному продукту, позволяет проверить, как люди реагируют на визуальные эффекты продукта и пользовательский поток. Кроме того, это единственный способ протестировать анимацию, переходы и микро-взаимодействия. Кроме того, такой прототип дает команде хорошее представление о том, сколько времени и усилий потребуется для реальной реализации. К сожалению, создавать прототипы Hi-Fi сложнее и дольше, а внесение исправлений требует времени по сравнению с каркасными моделями. Однако возможности моделирования очень широки: некоторые инструменты предоставляют доступ к реальным данным и даже к простому программированию.
Инструменты прототипирования: Proto.io, Figma, Flinto, Framer, Принцип, Invision.
Когда использовать. Заключительный этап проектирования — прототипирование Hi-Fi — выполняется непосредственно перед началом разработки, чтобы проверить удобство использования продукта. Это также незаменимый помощник в питчах и презентациях. Мы рекомендуем не начинать проектирование до того, как прототип будет готов и согласован, поскольку это избавит вас от многих непредсказуемых проблем в будущем.
Тестирование и доработка прототипа
Независимо от того, решите ли вы сделать только каркасы или подготовить окончательный прототип, следующим шагом будет представление прототипа заинтересованным сторонам и пользователям для обратной связи. Для этого вам нужно будет встретиться с ними онлайн или офлайн и попросить их поработать с прототипом.
Когда пользователю предоставляется прототип, ему предлагается выполнить задачу без подсказок о том, как он должен это делать. Все действия, клики, а иногда даже отслеживание взгляда записываются, при этом особое внимание уделяется любым проблемам или отклонениям от предполагаемого пользовательского потока. Пользователя обычно просят озвучить любые мысли, комментарии или возникающие затруднения.
Это можно сделать лично, посредством видеозвонка или даже без прямого контакта с пользователем. С помощью специальных инструментов пользовательского тестирования, таких как Maze, Lookback или UserTesting, вы можете опубликовать свой прототип в Интернете, а платформа соберет полезные данные о кликах, пользовательских потоках и шаблонах.

Как и в случае с интервью, результаты сеансов оценки пользователей передаются всем, кто отвечает за анализ. Команда собирается, чтобы решить, нуждается ли прототип в дальнейшей доработке (обычно — да), и начинает планировать задачи по редизайну. После этого цикл повторяется. Только ваша компания решает, внесли ли вы достаточно доработок и готов ли прототип, поскольку всегда будет что изменить.
Внедрение продукта
Проверенный прототип передается команде инженеров, и начинается долгий и сложный процесс разработки. Тем не менее, работа команды UX/UI на этом не заканчивается. Следуя методологии гибкой разработки, каждая часть системы должна регулярно тестироваться и повторяться, поэтому удобство использования будет проверяться на реальном работающем продукте. Такое тестирование будет следовать той же практике интервьюирования и проверки, что и прототипирование.
После запуска удобство использования продукта регулярно отслеживается и тестируется, особенно перед внедрением новых функций. Если через несколько лет вы решите провести редизайн, возможно, вам захочется создать прототип еще раз.