Прототипирование: что это такое и зачем оно нужно

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

В ходе прототипирования создается макет, который имитирует взаимодействие пользователя с интерфейсом проекта. Нередко прототипы делают интерактивными (кликабельными).

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

Прототип может быть нарисован на бумаге или создан в графическом редакторе. Основное отличие этих способов — в уровне детализации и кликабельности элементов.

Прототип, нарисованный в графическом редакторе, хорошо проработан и отлично подходит для проверки юзабилити. Источник

Зачем делают прототипы

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

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

Проверять, так ли это, лучше всего с помощью кликабельных прототипов, которые достаточно быстро можно собрать с помощью Фигмы. Как их делать, можно посмотреть в уроке от Алексея Бычкова.

Ирина Хафизова

Дизайн-директор Mailfit

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

Прототипирование решает несколько важных задач:

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

Прототипы помогают последовательно вносить правки в проект и согласовывать каждый этап с заказчиком. Источник

Типы прототипов

По глубине проработки прототипы бывают с высокой и низкой детализацией. Все зависит от количества элементов в итоговом варианте.

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

Этапы прототипирования

1. Постановка цели. Происходит на встрече всех участников, среди которых клиент, дизайнер, маркетолог, копирайтер, программист, то есть все те, кто заинтересован в успешности проекта. Чем четче и точнее сформулированы цели, тем легче выдвигать и проверять гипотезы для детализации прототипа.
   Цели нужно ставить максимально конкретные: например, разработать продающий лендинг для презентации новой услуги, продумать корпоративный сайт для повышения охвата и узнаваемости бренда.
2. Проведение исследования. Чтобы создать качественный прототип, важно изучить бизнес клиента, особенности его продукта и целевой аудитории.
3. Формулирование гипотез. Важно понять, что именно вы хотите проверить с помощью прототипов. Не «посмотреть, получится ли разместить все блоки на сайте», а «оценить, насколько пользователю удобно будет выбрать товар и сделать заказ таким способом». Это поможет сделать прототипирование максимально эффективным.
4. Создание прототипа. С учетом результатов исследования и сформулированных гипотез создается макет будущего сайта или приложения.

Проектирование прототипа сайта состоит из нескольких основных шагов:

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

Прототипирование помогает разработать структуру сайта и наметить блоки контента

5. Тестирование на фокус-группе. Позволяет проверить, как будет работать пользовательский интерфейс, есть ли пробелы в логике; понять, какие нужно внести правки до передачи проекта разработчикам, верстальщикам и дизайнерам. Прежде чем переходить к тестированию, важно не забыть согласовать прототип с заказчиком.
6. Доработка. Добавление новых деталей, внесение правок по результатам тестирования.

Инструменты для разработки макетов

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

Проекты удобно создавать при помощи различных инструментов прототипирования, которые не требуют значительных финансовых вложений. Axure и Sketch можно использовать бесплатно 30 дней. У Figma есть стартовый тариф с достаточным набором функций, которым можно пользоваться без ограничений по времени.

Figma — графический редактор для командной работы над прототипами сайтов и приложений. Подходит для обсуждения правок в режиме реального времени.

В Figma можно создавать связи между элементами прототипа, чтобы сделать его максимально похожим на готовый продукт

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

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

Sketch — инструмент для быстрого прототипирования дизайна приложений. С его помощью можно рисовать фигуры, выравнивать и распределять объекты, выстраивать композицию, добиваясь необходимого уровня детализации.

Таким образом, прототипирование позволяет имитировать функционал готового проекта, сайта или приложения. Это необходимо для тестирования гипотез и выявления проблемных участков еще до передачи проекта в дизайн и разработку.

Для оценки юзабилити и минимизации рисков лучше делать интерактивные прототипы высокой детализации.

Главные мысли

Что такое прототип. Виды прототипов – ProductSense Academy

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

В этом модуле вы узнаете, для каких задач стоит использовать прототипы, чем они отличаются от MVP и как правильно выбрать вид прототипа для решения своих проблем.

Если коротко, то прототип — это примитивная форма чего-либо, которая позволяет протестировать гипотезу в более-менее реальных условиях.

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

Слово «прототип» происходит от греческого πρωτότυπος — «оригинал, примитив», а оно в свою очередь образовалось из двух слов: πρῶτος — «первый» и τύπος — «впечатление».

Prototyping is the conversation you have with your ideas — Tom Wujec, (исследователь из Autodesk, автор книг о развитии интеллекта, спикер TED)

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

Прототип ≠ MVP

У прототипа в первую очередь исследовательские задачи:

• найти решение; 
• валидировать идею; 
• протестировать гипотезу. 

У MVP более конкретная цель — проверить «продажеспособность» работающего решения.

Какими бывают прототипы?

Вид прототипа, который вам необходимо создать, зависит от условий и ограничений — то есть от того, что именно вы хотите протестировать, на каком уровне проработки находится тестируемый объект, сколько ресурсов вы готовы потратить на тестирование и т.д.

Прототип низкой точности (low fidelity, sketch, lean/business canvas)

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

Очень интересный пример lo-fi-прототипа Google Glass показал Tom Chi на конференции TED в Киото:

Но когда сложность продукта увеличивается, становится все труднее поддерживать lo-fi-прототипы в цикле разработки и приходится переходить к прототипам следующего уровня.

Плюсы

• Дешевые, быстро создаются.
• Позволяют итерировать в realtime.
• Могут быть созданы кем угодно, независимо от навыков.
• Позволяют быстро проверить идеи разного уровня абстракции и жизнеспособности.

Минусы

• Могут быть сильно далеки от реальности.
• Почти не подходят для тестирования на реальных пользователях.
• Не подходят для тестирования сложных гипотез.

Прототип средней точности (medium fidelity, wireframe, interaction map, storyboard)

Очень хорошее определение прототипов среднего уровня проработки дала Елена Сахарова в своей статье о прототипах на Medium:

Wireframes — это организация полного функционала конечного продукта в виде структуры с представлением элементов интерфейса и навигации, их взаимодействия друг с другом. Как правило, в wireframes не используются типографика, цвет и любые другие графические элементы оформления, так как основное внимание уделяется функциональности, поведению и содержанию.

Если под словом Wireframes понимать Medium Fidelity-прототипы — это будет идеальной интерпретацией моего мнения на этот счет 🙂

По факту, это самый часто используемый внутри команды вид прототипов — lo-fi недостаточно хорош для проверки содержания решения, а hi-fi (следующий уровень) зачастую излишне детализирован, слишком дорогой и создается довольно долго.

Плюсы

• Все еще достаточно быстрый в создании.
• Хороший баланс между ценой создания и получаемым знанием.
• Позволяет проводить полноценные тесты с живой аудиторией.
• Позволяет проверить полноту проектируемого решения. Например, «как закрыть всплывающее окно если нет крестика?».
• Можно использовать как документацию к разработке продукта.

Минусы

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

Прототип высокой точности (high fidelity, interactive)

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

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

Интересный пример hi-fi-прототипа — «фейковая» страница App Store, на которой тестируют опыт принятия решения о скачивании мобильного приложения. На такие странички привлекаются реальные пользователи — и они даже не особо догадываются, что попали не в App Store, а на тестовую страницу. Это помогает более-менее корректно оценить конверсии в установку еще до публикации приложения.

Плюсы

• Привычнее всего для пользователя, хорошо вовлекают.
• Лучше всего «продают» идею или решение.
• Подходит для тестирования сложных продуктов (или частей продукта).

Минусы

• Дорогие и долгие в создании.
• Их сложно интерпретировать тем, кто не погружен в продукт, могут увести «не туда» своей привлекательностью.

В следующих модулях вы узнаете, зачем нужны прототипы, как их создавать и тестировать, как создавать MVP. Следующий модуль — «Зачем нужен прототип».

Определение и значение прототипа — Merriam-Webster

про·​до·​типа

ˈpro-tə-ˌtīp 

1

: оригинальная модель, на которую что-то наложено по образцу : Архетип

2

: Человек, который демонстрирует основные особенности более позднего типа

3

: Стандартный или типичный пример

4

: A First Full Scal обычно функциональная форма нового типа или конструкции конструкции (например, самолета)

Знаете ли вы?

Префикс prot- или proto- происходит от греческого языка и имеет основное значение «первый во времени» или «первый сформированный». Прототип — это кто-то или что-то, что служит моделью или источником вдохновения для тех, кто придет позже. Успешная кампания по сбору средств может служить прототипом для будущих кампаний. Легендарный Робин Гуд, «прототип» добросердечного и благородного преступника, был источником вдохновения для бесчисленного множества других романтических героев. И более века Винсент Ван Гог был прототипом гениального, измученного художника, которого не оценили в свое время.

Синонимы

• кейс
• пример
• экземпляр
• пример
• иллюстрация
• экземпляр
• представитель
• образец
• образец

Просмотреть все синонимы и антонимы в тезаурусе 

Примеры предложений

Они испытали прототип автомобиля .

Он разрабатывает прототип для своего изобретения.

Он прототип консервативного бизнесмена.

Истории о Шерлоке Холмсе — это прототипа современных детективных историй.

Недавние примеры в Интернете

Первоначально Уордл сделал прототип из игры еще в 2013 году и отложил его в долгий ящик.

Джонатан Ли, Washington Post , 7 ноября 2022 г.

Вальдес — физическая противоположность Верландера, прототип высокого мощного питчера.

Тайлер Кепнер, New York Times , 30 октября 2022 г.

Итальянская марка только что поделилась первыми изображениями 9.0033 прототип спортивного кабриолета GranCabrio нового поколения.

Брайан Худ, Robb Report , 26 октября 2022 г.

51-летний Маск вышел на сцену AI Day 2022 в пятницу, чтобы помочь представить прототип робота , также известного как Optimus, который, согласно CNN и CNBC, использует технологию автономного вождения Tesla.

Эбигейл Адамс, Peoplemag , 3 октября 2022 г.

Сообщается, что на мероприятии компании AI Day, организованном для демонстрации ее достижений в области искусственного интеллекта, Маск планирует представить работающий прототип робота.

Саманта Масунага, Los Angeles Times , 30 сентября 2022 г.

30 сентября Tesla планирует представить прототип своего робота-гуманоида Optimus после того, как впервые представил его в августе 2021 года во время Дня искусственного интеллекта Tesla.

Пратхана Пракаш, , Fortune , 20 сентября 2022 г.

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

Маргарет Осборн, Smithsonian Magazine , 11 августа 2022 г.

Commonwealth строит новый кампус, включая свой прототип термоядерного реактора , который называется SPARC, на участке площадью 47 акров в Девенсе.

Globe Staff, BostonGlobe.com , 1 декабря 2021 г.

Узнать больше

Эти примеры предложений автоматически выбираются из различных онлайн-источников новостей, чтобы отразить текущее использование слова «прототип». Мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв.

История слов

Этимология

Французский, от греческого Prōtotypon , от среднего из Prōtotypos Archetypal, от PROT- + Типовые Тип

Первый известный использование

1552, в значении определено в смысле 1

Travelyer

9 2

.
Первое известное использование прототипа было
в 1552 г.

Другие слова того же года

Подкаст

Музыкальная тема Джошуа Стэмпера ©2006 New Jerusalem Music/ASCAP

Получайте Слово Дня на свой почтовый ящик!

Словарные статьи рядом с прототипом

прототип

прототип

прототипический

Посмотреть другие записи рядом 

Процитировать эту запись

Стиль

MLAChicagoAPAMMercriam-Webster

«Прототип. » Словарь Merriam-Webster.com , Merriam-Webster, https://www.merriam-webster.com/dictionary/prototype. По состоянию на 27 ноября 2022 г.

Copy Citation

Kids Definition

прототип

про·​до·​типа

ˈprōt-ə-ˌtīp 

: оригинальная модель, на которой что-то повторяется

Еще от Merriam-Webster о прототипе

Britannica.com: статья в энциклопедии о прототипе

Последнее обновление:
19 ноя 2022
— Обновлены примеры предложений

Подпишитесь на крупнейший словарь Америки и получите тысячи дополнительных определений и расширенный поиск без рекламы!

Merriam-Webster без сокращений

Прототип Определение и значение | Dictionary.

com

• Основные определения
• Синонимы
• Викторина
• Связанный контент
• Примеры
• Британский

Показывает уровень сложности слова.

[ proh-tuh-tahyp ]

/ ˈproʊ təˌtaɪp /

Сохранить это слово!

См. синонимы для: прототип / прототипы на Thesaurus.com

Показывает уровень оценки в зависимости от сложности слова.

Определение прототипа

существительное

оригинал или модель, на которой что-то основано или сформировано.

кто-то или что-то, что служит для иллюстрации типичных качеств класса; модель; пример: Она является прототипом студенческой активистки.

что-то аналогичное другой вещи более позднего периода: ренессансный прототип нашего современного государственного жилья.

Биология. архетип; примитивная форма, рассматриваемая как основа группы.

глагол (используется с дополнением), pro·to·typed, pro·to·typing.

для создания прототипа или экспериментальной модели: для создания прототипа автомобиля на солнечной энергии.

ДРУГИЕ СЛОВА ДЛЯ прототипа

1 образец.

См. синонимы для слова «прототип» на Thesaurus.com

ВИКТОРИНА

ВЫ ОТПРАВИТЕСЬ НА ЭТИ ВОПРОСЫ ПО ГРАММАТИКЕ?

Плавно переходите к этим распространенным грамматическим ошибкам, которые ставят многих людей в тупик. Удачи!

Вопрос 1 из 7

Заполните пропуск: Я не могу понять, что _____ подарил мне этот подарок.

Происхождение прототипа

Впервые записано в 1595–1605 гг.; от нового латинского prototypon, от греческого protótypon, использование существительного среднего рода от protótypos «оригинал»; см. прототип, тип

ДРУГИЕ СЛОВА ОТ прототипа

прототипический [прох-тух-тип-и-кул]; /ˌproʊ təˈtɪp ɪ kəl/; pro·to·typ·ic, pro·to·typ·al [proh-tuh-tip-uhl], /ˌproʊ təˈtɪp əl/, прилагательное

СЛОВА, КОТОРЫЕ МОЖНО СПУТАТЬ С прототипом

архетип, прототип

Слова рядом прототип

протостом, команда прото, прототерий, прототроф, прототроф, прототип, прототип, протоксид, протоксилема, простейшие, простейшие

Dictionary. com Unabridged
Основано на словаре Random House Unabridged Dictionary, © Random House, Inc., 2022 г.

Слова, относящиеся к прототипу

макет, модель, предшественник, предок, антецедент, архетип, критерий, первый, предшественник, идеал, норма, парадигма, образец, прецедент, предшественник, стандарт, тип, предшественник

Как пользоваться прототип в предложении

• Тем временем SpaceX строит в Бока-Чика, штат Техас, прототипы своего тяжелого космического корабля Starship и ракеты Super Heavy.

  Компания Илона Маска SpaceX получила невероятную оценку благодаря последнему финансированию|Верн Копытофф|18 августа 2020 г.|Fortune

• Меньший прототип под названием Starhopper в прошлом году поднялся на высоту 490 футов.

  SpaceX впервые запустила прототип своего корабля Starship|Нил Патель|5 августа 2020 г.|MIT Technology Review распределение.

  Дело об оперативном домашнем тестировании на COVID для всех — такие романтичные факты|Роберт Базелл|5 августа 2020 г. |Наутилус

• Их прототип основания, напечатанный в октябре прошлого года в Копенгагене, имеет высоту 10 метров и был напечатан слой за слоем, две его стены соединены извилистой линией бетона, уложенного слоями посередине.

  GE напечатает на 3D-принтере основания ветряных турбин выше, чем Спейс-Нидл в Сиэтле|Джейсон Дорриер|21 июня 2020 г.|Центр Singularity контролировать рост ткани.

  Ученые напечатали на 3D-принтере уши внутри живых мышей с помощью света|Веер раковины|9 июня 2020 г.|Центр Singularity 

• Прототип FC-31 был спрятан, за исключением случаев, когда он летал, и подробностей было мало.

  Как Китай будет отслеживать и убивать новейшие американские реактивные самолеты-невидимки|Билл Свитмен|2 декабря 2014 г.|DAILY BEAST

• Две недели спустя у программиста Эда Логга был рабочий прототип, который выглядел очень и очень хорошо.

  «Астероиды» и «Рассвет века геймеров»|Дэвид Оуэн|29 ноября, 2014|DAILY BEAST

• Макдоно помог создать прототип имплантата, но в итоге «ничего с ним не случилось», — заявил Уильямс в суде.

  Пациенты, облажавшиеся после операции на позвоночнике, «мошенничество»|Центр журналистских расследований|3 ноября 2014 г.|DAILY BEAST

• Компания Haloid потратила почти 15 лет и 75 миллионов долларов на разработку прототипов копировальных аппаратов, даже построив завод в 1954 году, намного опередив спрос .

  Пионеры полиграфии|The Daily Beast|21 октября 2014 г.|DAILY BEAST

• Халл был разочарован тем, что на изготовление небольших пластиковых прототипов ушло много времени и денег.

  Пионеры в полиграфии|The Daily Beast|21 октября 2014|DAILY BEAST

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

  Children’s Ways|Джеймс Салли

• Черный Капюшон понял, что ему придется солгать, чтобы защитить своего прототипа, Кипа Берланда.

  Детектив в капюшоне, том III, № 2, январь 1942 г.|Разное

• Первые два действия пьесы «Акты Холмов» во многом повторяют манеру своего прототипа, с близкими языковыми параллелями.

  This entry was posted in Популярное