Что такое функциональный прототип
Что такое функциональный прототип
Что такое Прототипирование?
Аудио перевод статьи
Прототипирование — это процесс, в рамках которого дизайнеры создают, экспериментируют и воплощают в жизнь концепцию, начиная от заметок на бумаге и заканчивая цифровым проектированием. По сути, прототип — это предварительный макет дизайна, который позволяет пользователям отчетливо представить его или взаимодействовать с ним до тех пор, пока не будет разработан конечный продукт. Это четвертый этап процесса дизайн-мышления, который сопровождается тестированием юзабилити.
Ключевой особенностью прототипов является то, что их проектируют без единой строки кода. Существует множество инструментов прототипирования, которые помогают дизайнерам связывать артборды, создавать анимации и интерактивный интерфейс без участия разработчика, что значительно снижает стоимость проекта. Разумно тестировать прототип с пользователями и заинтересованными сторонами, чтобы устранить все ошибки прежде, чем вкладывать деньги, время и трудовые ресурсы в разработку дизайнерского решения.
Нужно отметить, что прототипирование в качестве инструмента проверки идей можно применять на разных этапах процесса проектирования: как в начале, так и в середине пути. Тестирование прототипов позволяет оценить прогресс и удобство использования прежде, чем приступать к разработке.
Причины создания прототипов
Прототип — это интерактивный проект, который создан без кода, с целью проверки концепции перед запуском. С помощью прототипирования можно анализировать различные дизайнерские решения без участия разработчиков. Это также позволяет тестировать прототипы с реальными пользователями, чтобы выявить проблемы юзабилити перед выпуском конечного продукта. Этот процесс помогает дизайнерам сэкономить много времени, денег и усилий на протяжении всего жизненного цикла проектирования и разработки.
Рассмотрим несколько причин для создания прототипа:
Продажа новых идей. Прототипы — это отличный шанс вдохновить, мотивировать и, в конечном итоге, “продать” дизайнерские решения как заинтересованным сторонам внутри организации, так и сторонним лицам. Также прототипы стимулируют рынки на создание принципиально новых идей и процессов, поскольку не требуют больших усилий для демонстрации продуктов, производство которых обходится чрезвычайно дорого.
Какие бывают типы прототипирования?
Прототипы делятся по методу и способу выполнения, то есть они могут быть созданы с низкой, средней или высокой степенью детализации. Под этим подразумевается уровень конкретизации и функционального наполнения прототипа. Как правило, чем подробнее детализация, тем больше усилий и ресурсов требуется для ее создания. Различные сценарии предполагают разные уровни детализации, и у каждого есть свои преимущества и недостатки. Практические рекомендации содержат информацию о том, что включает каждый из этих уровней, а также как и когда их нужно применять.
Прототипы с низкой детализацией
Их часто называют бумажными прототипами, потому что их создание не требует много времени и усилий. Прототипы с низкой детализацией представляют собой простую неполную версию вашего продукта и являются отличным способом проверить концепции высокого уровня прежде, чем выделять дополнительное время и ресурсы на дизайн. Они также позволяют получать обратную связь и тестировать идеи на ранней стадии процесса проектирования. Поскольку для их создания требуется только ручка и бумага, дизайнеры могут легко проверять различные сценарии и вносить корректировки, прежде чем переходить к цифровым макетам.
Преимущества
Недостатки
Прототипы средней детализации
Прототипы средней детализации — это следующий уровень прототипирования. Их часто называют макетами, они являются цифровыми и создаются в серых оттенках. Прототипы этого типа включают в себя проектирование путей пользователя и построение информационной архитектуры, но в них нет элементов брендинга, фотографий и логотипов.
Ограничение прототипа проектированием путей пользователя и построением информационной архитектуры в сером цвете позволяет пользователю сосредоточиться на фундаментальных аспектах дизайна. Он не будет отвлекаться на цвета, расположение фотографий и логотипы. Это позволяет дизайнеру проверить самую суть юзабилити продукта до включения в проект визуальных элементов.
В интернете есть отличные ресурсы, где можно найти примеры макетов и шаблонов. Но сначала давайте обсудим преимущества и недостатки прототипов средней детализации.
Преимущества
Недостатки
Прототипы высокой детализации
После нескольких циклов тестирования прототипов низкой и средней детализации необходимо уделить время визуализации вашего дизайна с высокой степенью детализации. На этом этапе дизайнер добавляет фирменную символику, фотографии, текст, цвета и анимацию, чтобы воплотить свой интерфейс в жизнь. По мере приближения дизайна к завершающей стадии, важно тестировать прототипы высокой детализации до начала этапа разработки.
Преимущества
Недостатки
Что такое процесс создания прототипа веб-сайта?
Перед тем, как погрузиться в создание прототипа веб-сайта, вам следует определить, кто ваши пользователи и какие у них проблемы, а также придумать правильное решение для устранения их болевых точек. После выполнения этих шагов в процессе проектирования, можно приступать к созданию прототипа.
Ниже мы рассмотрим этапы эффективного процесса создания прототипа веб-сайта.
Прототип приложения или сайта за 5 шагов: создание и тестирование
Разработка продукта — многоступенчатый процесс. И то, что получится в итоге, зависит от грамотно созданного прототипа. По сути, прототип приложения или сайта — это скелет, который затем обрастает мышцами в виде UI.
Его также можно сравнить с планом: прототип позволяет наметить ключевые моменты интерфейса и логики его работы, чтобы убрать страх белого листа перед разработкой основной версии продукта и чтобы в будущем не приходилось переделывать всё с нуля. Правки в любом случае будут стоит вам денег, а если они будут глобальными или их будет много — больших денег.
Поэтому на начальных этапах работы над продуктом так важно разработать прототип и, более того, сделать это правильно.
Мы, студия NoCode/LowCode-разработки Zero To One, постарались подробно рассказать о том, что же такое прототип, как его создавать и как это делают у нас 🙂
А еще мы запустили телеграм-канал о новостях из мира бизнеса и стартапов. Каждое утро говорим о главных событиях: кто сколько привлек, кто кого купил и какие стартапы сейчас поднимают самые большие раунды. Подписывайтесь!
Это тестовая версия будущего продукта, своего рода муляж с низкой степенью детализации. Прототип симулирует взаимодействие пользователей с интерфейсом и помогает продумать расположение элементов, проработать логику их взаимодействия, понять, что в данном конкретном случае сработает лучше, а что использовать не стоит.
Помимо этого прототип помогает:
В зависимости от инструментов, используемых при создании прототипа, можно выделить следующие его виды:
Ключевые характеристики lo-fi прототипа — наглядность и интерактивность. Он может быть выполнен с помощью карандаша в Paint или фреймов и фигур в Figma — неважно. Главное — он должен показывать алгоритм решения проблемы пользователя.
Один из прототипов нашей студии
При создании high-fidelity прототипа от точки А до точки Я прорабатывается логика взаимодействия элементов в каждом отдельно взятом сценарии, на каждую кнопку макета назначаются действия и кнопки демонстрируются во всех возможных состояниях, между собой связываются экраны приложения и т. д. Такой прототип должен давать полное представление о структуре сайта/приложения, навигации внутри них и решении всех возможных проблем пользователей.
Чаще всего все эти виды прототипов используются поочерёдно на различных стадиях разработки: всё начинается с бумажного наброска и приходит к high-fidelty прототипу.
Важная вещь, которую нужно помнить, если вы хотите создать хороший продукт — коммуникации в процессе разработки должно быть и будет много. Здесь всё как в любых человеческих отношениях: хотите что-то получить и чтобы это «что-то» было качественным — говорите о своих потребностях, идеях и сомнениях, обсуждайте их.
На этом этапе создаются макеты экранов и определяются размеры и расположение элементов. Кроме того, именно сейчас формируется базовый флоу навигации.
На этом этапе нет необходимости вникать в детали. По сути, вы просто создаёте базовый набросок экранов вашего продукта, который позволит клиентам, всем заинтересованным сторонам и пользователям просмотреть и опробовать его.
Создание low-fi обычно занимает около 7-14 дней. После того, как черновик создан, нужно вновь обсудить всё с заказчиком и скорректировать имеющийся макет.
Еще один аспект, отличающий прототипы класса hi-fi от прототипов более низкого класса, заключается в том, что они часто хранят как числовые, так и текстовые данные, а также определенные настройки, вводимые пользователем. Эти настройки могут сохраняться и влиять на другие элементы прототипа, как на одном экране, так и на разных.
Плюсы тестирования — в следующем:
Перед началом тестирования ставятся и распределяются по приоритетности цели, которые нужно достичь в процессе проверки прототипа. Например:
Дальше мы подробнее расскажем о том, как проводить тестирование так, чтобы финальный запуск вашего продукта был успешным.
Есть более и менее удобные для прототипирования инструменты, специально созданные для него и универсальные. Здесь мы не откроем Америку, если скажем, что лучше всего для работы с прототипами подходят Figma, Sketch и InVision. Figma мы регулярно используем сами, а Sketch и InVision доверяют тысячи других команд.
Для описания, например, дизайна вы можете прикрепить референсы интерфейсов, ссылки на приложения/сайты, визуал которых вам нравится и т. д. В пункте про желаемые сервисы/технологии можете указать либо конкретные инструменты, либо положиться в этом вопросе на нас — мы подберём наиболее подходящие решения и обсудим с вами. После заполнения брифа мы обычно созваниваемся с заказчиком и обсуждаем детали, пытаемся лучше понять видение клиентом его продукта.
Этап прототипирования, пожалуй, один из самых важных во всей разработке приложения или сайта. Правильно собранный прототип интерфейса позволяет установить рамки, не выходя за которые можно быстро и спокойно создать удобный продукт.
Чтобы узнать о сроках, ценах и возможностях разработки больше — на сайте нашей студии ZeroToOne можно записаться на бесплатную консультацию. За полчаса обсудим ваш проект, поможем рассчитать сроки, стоимость и подобрать подходящие инструменты 🙂
Прототипы в промышленном дизайне: как создать успешный продукт и сэкономить
Основатель и генеральный конструктор студии «Карфидов Лаб»
Сложно представить современный дизайн-процесс без прототипирования. Следуя методу «покажи, а не рассказывай», многие продуктовые команды используют прототипы для презентации или тестирования идей.
Сооснователь и генеральный конструктор «Карфидов Лаб» Алексей Карфидов делится опытом создания прототипов в инжиниринговом дизайне и рассказывает о главных плюсах и минусах.
Наглядность и экономичность макетов
Чтобы создать продукт «без осечек», важно его заранее протестировать. Сделать это можно проверенным способом — создать прототип продукта. Этот этап в процессе разработки является одним из самых важных. Но до сих пор многие специалисты не до конца понимают, что это и как с этим работать. Давайте разбираться.
Прототипом может быть все что угодно: от серии набросков на бумаге до интерактивной модели интерфейса. Одним словом, это пробная версия финального продукта, которая используется для проведения тестирования перед его запуском.
Прежде чем переоборудовать конвейерное производство под новую модель, можно изготовить прототип в единственном экземпляре, показать на выставке, собрать отзывы и предзаказы. Перед тем как строить новый дом, можно сделать модель микрорайона из папье-маше и посмотреть, как дом туда впишется. Прежде чем приступить к креативному оформлению лофта, лучше нарисовать макет на компьютере.
Нужно понимать, что прототип всегда отличается от конечного продукта. Продукт производится по серийным технологиям, которые позволяют быстро производить много единиц продукции, например, одну деталь за несколько секунд. Для такой скорости производства нужна дорогая оснастка и определенные материалы.
Чтобы не нести сразу большие затраты на оснастку, делают недорогие тесты. По своим свойствам тесты стремятся быть как можно ближе к продукту, но делаются по более простым и быстрым технологиям. Например, при сборке инновационного продукта обычно применяется специальный инструмент (скажем, пресс), а в случае с тестовым вариантом он не нужен.
Прототипы бывают разных видов и форм. Так, для начала создается простейший прототип, который печатается на 3D-принтере или режется/лепится из картона, глины или модельного пластика. Либо, если размеры очень большие или форма очень сложная, он проверяется с помощью VR/AR-технологии. В половине случаев этот прототип может остаться в таком же цифровом виде, без материальной оболочки.
Затем создается более детальный прототип для проверки удобства и порядка сборки, а также расположения компонентов. Он формируется из детально проработанной геометрии: печатается на принтере, выжигается на лазере, точится на станке, отливается в силиконовую форму.
При удачном исполнении данный прототип можно переводить в стадию функционального прототипа, то есть добавлять в него электронику, полезную начинку и испытывать по назначению. Используя эту форму, вы сможете понять, как пользователи будут взаимодействовать с интерфейсом конечного продукта, его эргономику, удобство формы, удобство взятия в руки и расположения элементов.
Функциональный прототип
Данный вид прототипа максимально близкий к конечному изделию. На нем проверяется вся функциональность и работа продукта. В нем содержится вся электроника, покупные элементы и прочие составные части.
Электроника изначально собирается и тестируется отдельно на столе с проводами. И после тестов впервые вставляется в прототип. Обычно на этом этапе возникает необходимость разных доработок.
После тестов и доработки этот прототип или опытный образец максимально близок к продукту. Отличие от конечного продукта зачастую только в производственных технологиях и некоторых материалах. И в том, что он сделан дешевым способом, который не масштабируется в тираж. При этом он удобен для изготовления одного образца.
Предсерийный образец
Это уже продукт, который впервые сделан на серийной оснастке и соответствует технологии материалов, в которой учтены доработки прототипов. На этом этапе также часто возникает необходимость доработки.
Например, детали после литья на термопласте ведет и изгибает из-за того, что материал отличается по механическим свойствам и формируется при определенной температуре с последующим остыванием. От этого, например, перестают работать защелки.
После тестов этого образца дорабатывают оснастку, проверяют собираемость. Иногда образцы отливают все еще на силиконовой форме в количестве 20–30 штук и проверяют собираемость партии, удобство сборки и выявляющиеся при этом сложности.
На этом этапе важно, чтобы любая деталь могла вставать в свое место только при правильном положении.
Например, у вас есть резиновые кнопки с метками «минус» и «плюс». Если они одинаковые и встают на свое место одинаково, сборщик, который получает оплату за количество собранных изделий, может собрать эти кнопки наоборот. «Плюс» будет работать как «минус», а пользователь, который будет впервые работать с прибором, этого не поймет.
Все эти нюансы важно выявить до начала серийного производства, чтобы снизить процент брака.
Серийный образец
Это уже окончательный продукт, который дойдет до прилавка магазина. Он прошел через все вышеперечисленные стадии и лишен «детских болезней». При этом он все равно продолжает дорабатываться. Отчасти поэтому производители и продавцы пишут, что то, что вы получите, может несколько отличаться от изображения.
Плюсы прототипирования
Простейший прототип можно создать за несколько минут. Конечно, если требуется более детализированный прототип, на него уйдет больше времени, но все зависит от сложности проекта.
Так как прототип — это черновик будущего продукта, проработка визуальной части зачастую не важна. Процесс не затрагивает других членов команды, кроме менеджера проекта, и изменения вносит проектировщик или дизайнер, поэтому прототипы корректируются минимальными усилиями.
В кликабельном прототипе можно проследить логику переходов. И прочувствовать продукт, представив взаимодействие будущего пользователя и создаваемого сервиса.
Минусы прототипирования
Несмотря на то что я говорил выше про небольшие затраты на создание прототипов, порой они превышают изначальную стоимость. Все зависит от каждого отдельного продукта. Иногда хватает прототипа, нарисованного от руки на листке бумаги, а бывает, что требуется прототип, точно соответствующий будущей модели оригинала.
«Почему я должен использовать карандаш и бумагу, когда я имею мощнейшие инструменты для прототипирования?». Дизайнеры часто пропускают этап прототипирования на бумаге и идут сразу к компьютерам, чтобы сделать диджитал-прототип. Они верят, что это сэкономит их время. Но на самом деле бумажные скетчи позволяют дизайнерам двигаться в правильном направлении, несмотря на трату этого времени.
Этот пункт можно отнести как к плюсам, так и к минусам, ведь в итоге для создания хорошего прототипа может потребоваться не меньше времени, чем для создания оригинала.
Пример: пенал для акварели
Для создания пенала для акварели наша команда разработала простейший прототип. Мы напечатали его на 3D-принтере по технологии SLA (смола) /FDM (обычный экструдер и нить) /SLS. Прототип отливался из двухкомпонентного пластика на силиконовой форме.
Из архива «Карфидов Лаб»
Проблемы
При изготовлении серийной оснастки перестали работать все удобные защелки деталей между собой. Детали приходилось буквально впрессовывать друг в друга, что означало одно — теперь потребитель не сможет собирать все своими руками.
И вторая потеря — в закрытом положении пенал должен быть водонепротекаемым, а на литье детали так изогнулись, что образовалась большая щель, через которую будет протекать вода.
Как исправили
Так, проблема была выявлена этапе прототипирования, и мы смогли исправить ситуацию.
Из архива «Карфидов Лаб»
Пример: подогреватель омывающей жидкости
При работе над этим продуктом не было сомнений, что нужен прототип. В тестовом варианте изделие представляло собой емкость с водой сложной формы, которая в серии должна изготавливаться методом ротационного литья. Прототипы мы напечатали на 3D-принтере по технологии SLA и проверяли работу.
Проблемы
Так как напечатанные детали со временем промокают и их свойства во времени меняются, сложно понять, как поведет себя конечный продукт. Но мы нашли решение и подготовили новый образец.
Как исправили
В соответствии с жизненным циклом материала мы сделали несколько образцов макета и герметизировали их, тестируя, пока материал держал воду. В итоге тестовая часть была завершена, и мы получили правильный продукт.
Пример: медицинский автоинъектор
В сердце прибора есть сложный механизм, состоящий из защелок и зубчатых передач. Этот механизм приводится в движение мотором и отвечает за ввод шприца в тело человека и его возврат обратно в корпус.
Из архива «Карфидов Лаб»
Проблемы
Сложность состояла в том, что оснастка для зубчатых колес — сложная и дорогая в производстве и переделке. То, о чем мы говорили в минусах прототипа: время и стоимость.
Как исправили
Так как на серийной оснастке механические свойства (прочность, упругая деформация) сильно отличаются от прототипа, нашей команде пришлось делать несколько итераций механизма и тестировать на ресурс. Но зато в процессе доработки были выявлены все недочеты — и продукт был готов к использованию.
Из архива «Карфидов Лаб»
Чем прототип отличается от готового продукта?
Как получить максимум
Чем больше производится образцов и прототипов — тем больше можно сделать тестов и довести продукт до совершенства. Главное при этом — не уйти в бесконечные итерации для проверки и улучшения не самых существенных частей конструкции.
Конструктору всегда хочется что-то доработать, заменить, улучшить, проверить новую идею. Но продукт — это бизнес, и это сроки должны соблюдаться.
При этом важно помнить, что и на запуске в серийное изделие еще будет требоваться работа инженера. Нужно просто быть к этому готовым, а не ожидать, что все с первого раза получится само по себе.
Что такое прототип?
8 из 10 заказчиков не знают, что такое прототип. Исправляем эту оплошность и рассказываем, почему прототипирование — основа продукта и как оно ускоряет процесс разработки в разы.
Прототип — это интерактивная модель будущего приложения. Она точно не отражает дизайн будущего приложения, скорее показывает логику работы.
Показываем на примере, как это работает:
Прототип — это когда список функций превращается в модель работающего приложения.
Зачем нужен?
Во-первых, чтобы согласовать с заказчиком первоначальную модель приложения. Разработчики ещё не потратили часы на реализацию функций, дизайнеры ещё не нарисовали интерфейсы, но концепт приложения уже перед вами, с работающими кнопками и возможностью увидеть логическую структуру приложения. Такой подход обеспечивает максимально безболезненное внесение правок, ведь не нужно будет переписывать “начинку” приложения.
Во-вторых, прототип ускоряет разработку мобильного приложения. Часы, потраченные разработчиками на реализацию функционала, который на этапе согласования будет вырезан из проекта, дизайнерами на внесение правок в интерфейсы … их просто нет! Конечно, правки есть всегда — в мире с прототипом и без него. Но их станет значительно меньше, если внимательно отнестись к прототипированию. Проверено на практике.
Прототипирование экономит деньги и время
В-третьих, прототип можно тестировать на потенциальных пользователях, чтобы проверить бизнес-логику проекта до начала разработки. Посмотреть, насколько понятна логика работы приложения пользователям, чего они ждут и что будет в итоге. Об этом в конце статьи.
Когда будет готов?
Заказчик получает прототип в первые 1-3 недели, чтобы увидеть, как функционал будет работать в едином приложении. Только после согласования можно начинать разработку.
Что входит в этап прототипирования?
Повторимся, прототип — результат проектирования. Чтобы получить один визуальный прототип, нужно пройти 3-4 этапа (в зависимости от сложности проекта).
Аналитический
Проводим анализ рынка, целевой аудитории, целей проекта.
Функциональный
Исходя из аналитики, продумываем минимальный функционал, прописываем сценарии взаимодействия пользователя с системой.
Интерфейсное проектирование
Продумываем, как сделать так, чтобы весь функционал приложения был логически структурирован по экранам и интуитивно понятен пользователю, а не представлялся набором кнопок. В основном, здесь продумывается, как будет выглядеть прототип.
Техническое проектирование
Подбираем, с помощью каких технологий будет реализоваться функционал.
Результат – готовый прототип.
О сценариях взаимодействия пользователя с системой
Эти слова мы столько раз упомянули в этой статье, что теперь точно нужно раскрыть вопрос подробнее.
Пользователь почти всегда приходит в приложение с целью. Если ему на пути к цели трудно разобраться в том, на какие кнопки нажимать для её достижения — какой-то другой сервис реализует нужную функцию удобнее и быстрее. Пользователь ищет аналоги на просторах магазинов приложений.
Против таких вещей мы боремся пользовательскими сценариями. Они помогают отследить слабые места в интерфейсе. В результате получаем приложение, которое максимально простым для пользователя путем реализует большое количество функций.
Для этого мы сегментируем пользователей по их целям и для каждого отдельного сегмента продумываем сценарии (цепочки экранов).
Делим пользователей на сегменты;
Прорабатываем портрет клиента из каждого сегмента (от пола и возраста до цели и пользовательского опыта);
Продумываем, как конкретному пользователю было бы удобнее достичь цели(некоторые из доступных функций одного пользователя только запутают, а другому они наоборот необходимы), какие паттерны ему привычнее?
Продумываем, какую дополнительную информацию об услуге стоит показывать пользователю, чтобы она была ему интересна.
Из этого складывается структура экранов.
Тестирование на пользователях
Прототип дает возможность тестировать приложение на пользователях и исправить глобальные ошибки до того, как они появятся в коде! Есть несколько вариантов тестирования прототипа на пользователях:
1. На бумаге
Можно распечатать каждый из экранов прототипа. Когда респондент нажимает на кнопку, мы просто даем ему новый лист. На этом листе будет экран, который должен появиться после нажатия. Кажется, что так не работает, но мы переубедим вас.
Когда пользователи видят прототип в качестве программного продукта, возникает много негатива. В нем нет базы данных, функций. Поэтому часто он работает не так, как ожидают пользователи. Скроллы не работают, некоторые кнопки не откликаются, дизайн примитивный, нет анимации и т.д. Так и должно быть, но респонденты не знают об этом. С бумажным вариантом такого нет — вопросы о скроллах и анимациях отпадают. Всем понятно, что это лишь макет.
2.Интерактивный прототип
Такие прототипы респондентами воспринимаются как “незаконченное приложение”. Это сбивает их с толку. Но они хорошо подходят для тестирования несложной логики и ожиданий пользователей.
Подготовка такого прототипа занимает больше времени. Нужно сделать его максимально похожим на конечный продукт: каждая кнопка должна откликаться, текст похож на оригинальный, изображения реалистичными.
Зато отклик пользователя больше: поведение будет максимально приближено к ожидаемому. Когда работаем с настоящей системой, респондент работает с той же скоростью, с какой работал бы с приложением, не уделяет лишнего внимания экрану (что бывает каждый раз с бумажным прототипом) — поведение более естественное.
Есть общие вещи для каждого типа тестирования:
Итак, самое важное о прототипе:
1) Прототип — живой результат проектирования, который заказчик может оценить
2) Прототип позволяет в кратчайшие сроки показать заказчику и тестовой группе, что будет представлять из себя приложение
3) Прототип экономит время разработки