что такое функциональный прототип
Прототипы в промышленном дизайне: как создать успешный продукт и сэкономить
Основатель и генеральный конструктор студии «Карфидов Лаб»
Сложно представить современный дизайн-процесс без прототипирования. Следуя методу «покажи, а не рассказывай», многие продуктовые команды используют прототипы для презентации или тестирования идей.
Сооснователь и генеральный конструктор «Карфидов Лаб» Алексей Карфидов делится опытом создания прототипов в инжиниринговом дизайне и рассказывает о главных плюсах и минусах.
Наглядность и экономичность макетов
Чтобы создать продукт «без осечек», важно его заранее протестировать. Сделать это можно проверенным способом — создать прототип продукта. Этот этап в процессе разработки является одним из самых важных. Но до сих пор многие специалисты не до конца понимают, что это и как с этим работать. Давайте разбираться.
Прототипом может быть все что угодно: от серии набросков на бумаге до интерактивной модели интерфейса. Одним словом, это пробная версия финального продукта, которая используется для проведения тестирования перед его запуском.
Прежде чем переоборудовать конвейерное производство под новую модель, можно изготовить прототип в единственном экземпляре, показать на выставке, собрать отзывы и предзаказы. Перед тем как строить новый дом, можно сделать модель микрорайона из папье-маше и посмотреть, как дом туда впишется. Прежде чем приступить к креативному оформлению лофта, лучше нарисовать макет на компьютере.
Нужно понимать, что прототип всегда отличается от конечного продукта. Продукт производится по серийным технологиям, которые позволяют быстро производить много единиц продукции, например, одну деталь за несколько секунд. Для такой скорости производства нужна дорогая оснастка и определенные материалы.
Чтобы не нести сразу большие затраты на оснастку, делают недорогие тесты. По своим свойствам тесты стремятся быть как можно ближе к продукту, но делаются по более простым и быстрым технологиям. Например, при сборке инновационного продукта обычно применяется специальный инструмент (скажем, пресс), а в случае с тестовым вариантом он не нужен.
Прототипы бывают разных видов и форм. Так, для начала создается простейший прототип, который печатается на 3D-принтере или режется/лепится из картона, глины или модельного пластика. Либо, если размеры очень большие или форма очень сложная, он проверяется с помощью VR/AR-технологии. В половине случаев этот прототип может остаться в таком же цифровом виде, без материальной оболочки.
Затем создается более детальный прототип для проверки удобства и порядка сборки, а также расположения компонентов. Он формируется из детально проработанной геометрии: печатается на принтере, выжигается на лазере, точится на станке, отливается в силиконовую форму.
При удачном исполнении данный прототип можно переводить в стадию функционального прототипа, то есть добавлять в него электронику, полезную начинку и испытывать по назначению. Используя эту форму, вы сможете понять, как пользователи будут взаимодействовать с интерфейсом конечного продукта, его эргономику, удобство формы, удобство взятия в руки и расположения элементов.
Функциональный прототип
Данный вид прототипа максимально близкий к конечному изделию. На нем проверяется вся функциональность и работа продукта. В нем содержится вся электроника, покупные элементы и прочие составные части.
Электроника изначально собирается и тестируется отдельно на столе с проводами. И после тестов впервые вставляется в прототип. Обычно на этом этапе возникает необходимость разных доработок.
После тестов и доработки этот прототип или опытный образец максимально близок к продукту. Отличие от конечного продукта зачастую только в производственных технологиях и некоторых материалах. И в том, что он сделан дешевым способом, который не масштабируется в тираж. При этом он удобен для изготовления одного образца.
Предсерийный образец
Это уже продукт, который впервые сделан на серийной оснастке и соответствует технологии материалов, в которой учтены доработки прототипов. На этом этапе также часто возникает необходимость доработки.
Например, детали после литья на термопласте ведет и изгибает из-за того, что материал отличается по механическим свойствам и формируется при определенной температуре с последующим остыванием. От этого, например, перестают работать защелки.
После тестов этого образца дорабатывают оснастку, проверяют собираемость. Иногда образцы отливают все еще на силиконовой форме в количестве 20–30 штук и проверяют собираемость партии, удобство сборки и выявляющиеся при этом сложности.
На этом этапе важно, чтобы любая деталь могла вставать в свое место только при правильном положении.
Например, у вас есть резиновые кнопки с метками «минус» и «плюс». Если они одинаковые и встают на свое место одинаково, сборщик, который получает оплату за количество собранных изделий, может собрать эти кнопки наоборот. «Плюс» будет работать как «минус», а пользователь, который будет впервые работать с прибором, этого не поймет.
Все эти нюансы важно выявить до начала серийного производства, чтобы снизить процент брака.
Серийный образец
Это уже окончательный продукт, который дойдет до прилавка магазина. Он прошел через все вышеперечисленные стадии и лишен «детских болезней». При этом он все равно продолжает дорабатываться. Отчасти поэтому производители и продавцы пишут, что то, что вы получите, может несколько отличаться от изображения.
Плюсы прототипирования
Простейший прототип можно создать за несколько минут. Конечно, если требуется более детализированный прототип, на него уйдет больше времени, но все зависит от сложности проекта.
Так как прототип — это черновик будущего продукта, проработка визуальной части зачастую не важна. Процесс не затрагивает других членов команды, кроме менеджера проекта, и изменения вносит проектировщик или дизайнер, поэтому прототипы корректируются минимальными усилиями.
В кликабельном прототипе можно проследить логику переходов. И прочувствовать продукт, представив взаимодействие будущего пользователя и создаваемого сервиса.
Минусы прототипирования
Несмотря на то что я говорил выше про небольшие затраты на создание прототипов, порой они превышают изначальную стоимость. Все зависит от каждого отдельного продукта. Иногда хватает прототипа, нарисованного от руки на листке бумаги, а бывает, что требуется прототип, точно соответствующий будущей модели оригинала.
«Почему я должен использовать карандаш и бумагу, когда я имею мощнейшие инструменты для прототипирования?». Дизайнеры часто пропускают этап прототипирования на бумаге и идут сразу к компьютерам, чтобы сделать диджитал-прототип. Они верят, что это сэкономит их время. Но на самом деле бумажные скетчи позволяют дизайнерам двигаться в правильном направлении, несмотря на трату этого времени.
Этот пункт можно отнести как к плюсам, так и к минусам, ведь в итоге для создания хорошего прототипа может потребоваться не меньше времени, чем для создания оригинала.
Пример: пенал для акварели
Для создания пенала для акварели наша команда разработала простейший прототип. Мы напечатали его на 3D-принтере по технологии SLA (смола) /FDM (обычный экструдер и нить) /SLS. Прототип отливался из двухкомпонентного пластика на силиконовой форме.
Из архива «Карфидов Лаб»
Проблемы
При изготовлении серийной оснастки перестали работать все удобные защелки деталей между собой. Детали приходилось буквально впрессовывать друг в друга, что означало одно — теперь потребитель не сможет собирать все своими руками.
И вторая потеря — в закрытом положении пенал должен быть водонепротекаемым, а на литье детали так изогнулись, что образовалась большая щель, через которую будет протекать вода.
Как исправили
Так, проблема была выявлена этапе прототипирования, и мы смогли исправить ситуацию.
Из архива «Карфидов Лаб»
Пример: подогреватель омывающей жидкости
При работе над этим продуктом не было сомнений, что нужен прототип. В тестовом варианте изделие представляло собой емкость с водой сложной формы, которая в серии должна изготавливаться методом ротационного литья. Прототипы мы напечатали на 3D-принтере по технологии SLA и проверяли работу.
Проблемы
Так как напечатанные детали со временем промокают и их свойства во времени меняются, сложно понять, как поведет себя конечный продукт. Но мы нашли решение и подготовили новый образец.
Как исправили
В соответствии с жизненным циклом материала мы сделали несколько образцов макета и герметизировали их, тестируя, пока материал держал воду. В итоге тестовая часть была завершена, и мы получили правильный продукт.
Пример: медицинский автоинъектор
В сердце прибора есть сложный механизм, состоящий из защелок и зубчатых передач. Этот механизм приводится в движение мотором и отвечает за ввод шприца в тело человека и его возврат обратно в корпус.
Из архива «Карфидов Лаб»
Проблемы
Сложность состояла в том, что оснастка для зубчатых колес — сложная и дорогая в производстве и переделке. То, о чем мы говорили в минусах прототипа: время и стоимость.
Как исправили
Так как на серийной оснастке механические свойства (прочность, упругая деформация) сильно отличаются от прототипа, нашей команде пришлось делать несколько итераций механизма и тестировать на ресурс. Но зато в процессе доработки были выявлены все недочеты — и продукт был готов к использованию.
Из архива «Карфидов Лаб»
Чем прототип отличается от готового продукта?
Как получить максимум
Чем больше производится образцов и прототипов — тем больше можно сделать тестов и довести продукт до совершенства. Главное при этом — не уйти в бесконечные итерации для проверки и улучшения не самых существенных частей конструкции.
Конструктору всегда хочется что-то доработать, заменить, улучшить, проверить новую идею. Но продукт — это бизнес, и это сроки должны соблюдаться.
При этом важно помнить, что и на запуске в серийное изделие еще будет требоваться работа инженера. Нужно просто быть к этому готовым, а не ожидать, что все с первого раза получится само по себе.
Почему прототипы так важны?
Что такое прототипирование? Как это помогает компаниям экономить время и деньги?
Процесс создания продукта включает в себя множество этапов, позволяющих достичь необходимого уровня, для массового производства. Каждый продукт имеет свою целевую аудиторию и решает определенные проблемы. Чтобы определить насколько хорошо продукт решает болевые точки своих пользователей, создается практически рабочая модель, которая тестируется потенциальными юзерами. После чего необходимо собрать отзывы, внести изменения, а затем повторить процесс, пока у вас не будет четкого понимания того, как будет выглядеть конечный продукт.
Эскизы продукта помогают спроектировать будущее видение результата. Приведу пример: когда я делаю сайт, я делюсь набросками страницы с клиентом, либо командой, чтобы понять, в какой направлении необходимо работать и не пропустил ли я что-нибудь. Так я могу получить подлинную обратную связь и улучшить продукт, над которым работаю.
Лучшее видение дизайна
Создание прототипов не только обеспечивает четкую визуализацию дизайна, чтобы понять внешний вид конечного продукта, но также помогает команде понять, что они проектируют, для кого и почему они проектируют.
Экономия времени и денег
Старайтесь оставаться в «режиме прототипирования» как можно дольше. Чем больше вы узнаете о проблеме проектирования, которую пытаетесь решить, тем быстрее будет реализация. В предварительную модель всегда можно внести желаемые изменения заранее, потому что к этому моменту не было вложены усилия для создания конечного продукта. Таким образом, ранние изменения помогут вам быстрее достичь ваших целей. И как побочный эффект экономии времени, прототипирование также сделает ваш процесс разработки более рентабельным, поскольку весь цикл разработки становится короче.
По словам Форда, благодаря прототипированию он экономит до 439 тыс. Долл. США и месяцы времени на подготовку.
Проверка перед дизайном и разработкой
Прототипирование позволяет проводить несколько обсуждений между итерациями, прежде чем приступить к окончательной разработке. Этот итеративный процесс позволяет вам быть уверенным в том, что вы делаете, именно то, что вам нужно.
Проектирование является одной из частей процесса. Но существуют различные подходы к созданию прототипов, и всегда необходимо выбирать правильный подход к вашему продукту. Поэтому, для начала, выберите точность вашего будущего прототипа, исходя из вашего времени и ресурсов.
Низкая точность : Lo-Fi
Зачастую, это бумажные прототипы, которые идеально подходят на ранних этапах. Этот тип помогает легко и быстро вносить изменения. В нем больше внимания уделяется структуре и функционалу, а не тому, как продукт будет выглядеть. Благодаря lo-fi команде и аудитории становится легче понять продукт. Но, поскольку сложность продукта возрастает, становится все труднее поддерживать прототипы lo-fi дальше в цикле разработки. Это делает бумажные прототипы неэффективными если проект требует более глубокого проектирования.
Необходимы прототипы для вашего будущего проекта? Я готов помочь вам с этим. Напишите мне и я сделаю прототип для вас!
Как создаются прототипы сайтов
Когда к нам в компанию обращаются клиенты с целью разработки нового сайта, мы объясняем, какие этапы нас ждут впереди. Чтобы разработать сайт, нужно пройти как минимум 6 шагов:
В этой статье мы – команда DIGIMATIX поговорим об одном из самых важных этапов – прототипировании: о том что это и зачем нужно.
Прототипирование — это один из ранних этапов разработки. На наш взгляд, основная его задача — проверка гипотез, о том как пользователи максимально быстро и просто могут достичь своих целей на сайте. Благодаря прототипированию продукта, можно существенно снизить затраты на разработку, так как у разработчиков на руках будут задокументированы структура продукта, карта взаимодействия пользователя с продуктом и конечный дизайн. Также считаем важным отметить, что в процессе проектирования дизайн-команда формирует полный набор способов и инструментов для взаимодействия пользователей с продуктом. Это очень важный момент, так как необходимо сохранить баланс между новизной и изобретательностью, чтобы у пользователей не возникло затруднений и их опыт был положительным.
Резюмируя, прототип нужен для:
Прототип — достаточно широкое понятие, так как это может быть просто эскиз от руки на бумаге, схема в формате картинки, либо детальный интерактивный прототип.
По глубине проработки деталей выделяют прототипы:
По возможности взаимодействия с прототипом выделяют:
В процессе работы могут быть использованы все типы прототипов, в частных случаях некоторыми из них можно пренебречь.
Выбор типа и детализации прототипа зависит от того, какое исследование проводится и какие гипотезы мы хотим проверить. Стоит учитывать, что не стоит детализировать прототип больше, чем нужно для проверки гипотез.
Прототип — результат целого комплекса работ специалистов смежных областей и других участников проекта. Самым первым шагом для нас в DIGIMATIX является встреча с клиентом и коллегами, на которой мы ставим цели для будущего продукта. Чем они четче и яснее сформулированы, тем точнее в последующем будут и гипотезы о том как их достичь.
Если в предыдущем шаге можно допустить размытые формулировки, то на этапе формирования гипотез требования выше. Сложно оценить ценность прототипирования, если вы не знаете, что хотите проверить. «Набросать эскиз страницы, чтобы просмотреть примерное расположение блоков» — сомнительное мероприятие, а «Автоматически подобрать ПК указывая задачи для которых он требуется» — на наш взгляд отличная гипотеза для проверки.
Очень важный этап. Ни одно техническое задание, ни один заполненный бриф на 100500 вопросов не сможет дать такого полного погружения в бизнес клиента как исследование. Понимание бизнес-процессов помогает создавать наиболее эффективные решения. К сожалению, наличие исследования часто обусловлено бюджетом проекта.
Этот шаг характерен «перегонкой» результатов исследований или гипотез в требования к продукту. Может содержать всё от требований к навигации до описания функционала способов закрытия потребностей. И только сейчас этот чистый дистиллят трансформируется в наброски и прототипы низкой детализации.
И только на данном этапе прототип начинает обрастать подробностями и контентом. Прототипы высокой детализации легко тестировать, они дают полное представление о работе будущего проекта и помогают выявлять проблемные места в логике работы продукта и пути пользователей.После этой итерации прототип готов стать дизайном. Но это уже совсем другая история…
При выборе инструмента для прототипирования мы руководствуемся как это ни странно — ленью. Для нас важно удобство переноса прототипа и контента в редактор, где будет происходить игра со шрифтами.
Абсолютный лидер в нашем топе. Прекрасный инструмент как для прототипирования, так и для UI-дизайна. Бесконечно радует возможности совместной работы и быстрого шеринга для презентаций. В последних проектах практически всю анимацию готовили здесь.
Самая известная и популярная программа по созданию прототипов веб-сайтов и приложений. В достаточной степени глубокая, чтобы делать сложные элементы, при этом достаточно легкая, чтобы уже через десять минут ковыряния в интерфейсе подготовить макет даже для неподготовленных пользователей.
Отличный редактор. Большие возможности. Ограничение платформой.
Еще один продукт американской компании Adobe Inc. Направлен на разработку интерфейсов.
Если вы старовер, то при помощи этих связок ПО, вы вполне можете создать кликабельный, но простенький прототип и презентовать его команде или клиенту.
Перед тем как приступить непосредственно к созданию прототипа, мы проделываем предварительные шаги, о которых мы уже говорили: ставим цели, формируем гипотезы, проводим исследования. На основе полученных данных мы формируем список необходимого функционала и выстраиваем сценарии поведения.
Это лишь малая часть функционала, который может использоваться на будущем сайте, поэтому очень важно определить его до начала создания прототипа. Совместно с определением функциональных возможностей мы составляем список уникальных страниц, которые нам предстоит разработать.
Как только проделаны все подготовительные работы, мы совместно с клиентом определяемся с типом прототипа, который создаем. Для интернет-магазина мы обычно делаем интерактивный прототип с высокой детализацией.
В самом начале работ мы выстраиваем сетку будущего сайта, создаем необходимые текстовые стили и собираем минимальный набор UI-компонентов, чтобы уже на этапе дизайна нам проще и быстрее было приводить все элементы в единую стилистику. Все элементы мы делаем в черно-белой палитре, чтобы на данном этапе не отвлекаться на цветовое решение, а сосредоточиться на тестировании.
На первом шаге разработки прототипа мы создаем главную страницу сайта, на основе которой будут построены все остальные. Также на данном этапе мы работаем над хедером, футером, навигационными элементами и выстраиваем все блоки в рамках страницы. Мы не забываем прорабатывать все используемые интерактивные элементы, с которыми будет взаимодействовать пользователь. К таким элементам могут относиться кликабельные ссылки, ховеры, всплывающие формы, слайдеры. В программе Figma такие элементы достаточно просто создавать с помощью функции Variants. Она находится в стадии бета-тестирования, но пользователи уже могут оценить все ее возможности. Основное преимущество интерактивных элементов заключается в их кликабельности и возможности проверить и улучшить понимание того, как будет выглядеть будущий сайт без привлечения программиста и верстальщика.
После того как прототип главной страницы утвержден, мы приступаем к разработке внутренних страниц. На данном этапе мы также собираем блоки контента, прорабатываем структуру и не забываем про элементы взаимодействия: переходы между страницами, клики, выпадающие списки.
Прототипы: как создать успешный продукт и сэкономить
Полгода назад в статье о том, как мелкие юзабилити-ошибки создают бизнесу большие проблемы, я упоминал неудачный запуск Делисамоката, сырое приложение которого, вызвало большую волну негатива.
Недавно, прогуливаясь по Москве, вспомнил о стартапе и решил проверить его лично. Но уже через 15 минут понял, что шансов взять самокат в аренду нет, а рейтинг 1.5 в AppStore полностью оправдан и подтверждает, что сложности не только у меня.
На запуск стартапа такого масштаба, вероятно, было потрачено довольно много денег. И рейтинг 1.5 как бы намекает, что тратить придется еще.
Могли ли разработчики Делисамоката избежать такой ситуации и выпустить более удобное приложение сразу? Да, если бы сначала сделали прототип и протестировали его на реальных пользователях.
Из статьи вы узнаете:
Что же такого важного в этих ваших прототипах?
Концепция прототипов в обычном мире довольно стара. Строительству любого здания предшествует проект (проект = прототип), выпуску серийного автомобиля — концепт (концепт-кар = прототип). Несмотря на это, в цифровом мире долгое время даже высокобюджетные проекты фактически разрабатывались методом тыка, а продукты для среднего и малого бизнеса вообще по наитию подрядчиков.
Прототип в цифровом мире – это визуализация будущего продукта, достаточная для проверки гипотез среди пользователей этого продукта, и/или для донесения идей до людей, принимающих решение о его создании. Прототип позволяет быстро и, главное, дешево получить обратную связь: решает ли разработанный вами интерфейс бизнес-задачи, удобен и понятен ли ваш инновационный способ взаимодействия пользователям, правильно ли вообще понята проблематика и задачи. В противном случае решать все это придется уже после запуска продукта, а это не только потраченное время, но и деньги.
Прототип-прототипу — рознь
Прототипы, как средство быстрой визуализации идей, в последние годы получили большое распространение и оказали позитивное влияние на качество цифровых продуктов в целом.
Вместе с тем, взяв на вооружение инструменты прототипирования, рынок все еще не до конца усвоил, что прототип – часть юзабилити-процесса, а не проджект-менеджмента.
За последние несколько лет я общался со многими дизайнерами, у которых в портфолио есть пара десятков прототипов, при этом часто они не только не понимают до конца процесс создания прототипов, но и не всегда уверенно могут объяснить зачем они вообще нужны.
В итоге, все чаще можно встретить прототип, в котором нет и намека на реальный контент, а графическая форма преобладает над содержанием. В быстрорастущем сегменте UI/UX-дизайна доходит до того, что прототипом начинают называть полноценные дизайн-макеты, на создание которых были затрачены десятки человеко-часов.
Влияет на ситуацию и развитие рынка инструментов прототипирования, где все больший акцент получает работа с визуальной частью. Все это подталкивает к соблазну уделить особое внимание композиции и красоте прототипа, забывая о главном — структуре и контенте.
Формирование эффективной структуры и подготовка контента – наиболее длительный и трудозатратный процесс, при этом, как показывает практика, максимально влияющий на конечный продукт.
Прототип – результат комплекса работ
Рассмотрим шаги, выполнение которых позволит создать действительно эффективные интерфейсные решения, основанные на потребностях пользователей и решающие конкретные бизнес-задачи:
Исследования
Исследования – важнейший этап, фундамент успеха всей последующей работы. Несмотря на это, на рынке до сих пор приняты два способа «исследований»: «пришлите нам ТЗ» и «заполните бриф на 150 вопросов».
Ни техническое задание, ни бриф не способны обеспечить необходимый уровень погружения для создания действительно эффективных решений: техническое задание ни что иное, как субъективное восприятие действительности клиентом, которое во многом заимствует существующие решения конкурентов, а любимые многими брифы – не только ставят разные бизнесы в один ряд, но и заставляют клиента потратить значительное время, отвечая на шаблонные вопросы, реальный смысл которых он, зачастую, не понимает до конца.
Поэтому в вопросе исследования бизнеса самым эффективным является путь личного общения с клиентом. Это позволяет максимально погрузится в процессы и особенности каждого конкретного бизнеса, выявить едва заметные нюансы, которые в итоге могут и часто становятся основой всего последующего продукта.
Многие UI/UX-дизайнеры не считают необходимым общаться с пользователями, тем не менее, исследование пользователей позволяет взглянуть на задачу с другой стороны, выявить причинно-следственные связи, понять мотивацию, обнаружить страхи, услышать сомнения, найти инсайты.
Разработка дизайн-решения
На этом этапе результаты исследований интерпретируются в конкретные требования к продукту: какой должна быть навигация, какие нужны экраны, какие потребности они должны закрывать и многое другое.
Для трансформации исследований в требования к продукту существует множество инструментов: User-Centered-Design, Value Proposition Canvas, Jobs-To-Be-Done и другие, но все они приводят к одному результату – осознанному проектированию интерфейса.
Результатом разработки дизайн-решения становятся бумажные наброски – скетчи, которые в дальнейшем превращаются в прототипы высокой детализации.
Контент
Прежде, чем перейти от скетчей к прототипам высокой детализации, нужно подготовить весь контент. Соблазн использовать текстовую рыбу чреват последствиями: такой прототип невозможно реально оценить, к тому же, когда реальный контент все-таки появится, окажется, что он не ложится в уже разработанный продукт. И тогда контент придется подгонять под заданные рамки.
Поэтому сначала ЧТО (контент), а потом КАК (дизайн).
Прототип
Пройдя весь путь от исследований и выработки дизайн-решений до написания контента, команда находится в максимальном вовлечении и способна выдать действительно свежие интерфейсные решения, учитывающие потребности целевой аудитории и поставленные бизнес-задачи. Такие прототипы легко тестировать на пользователях и/или использовать для донесения идеи людям, принимающим решение о создании продукта.
Как отличить хороший прототип от плохого
Вот простой чек-лист, который без каких-то знаний в области проектирования взаимодействия позволит определить, подсовывают ли вам под видом прототипа «заливную рыбу» или результат реальной работы.
Итак, всего несколько пунктов:
Заключительная история
Но все решилось уже в процессе исследований, когда выяснились, что пользователям не нужен такой продукт и эффективней использовать более простое, и, главное, уже существующее решение.
Эта история хороша тем, что отлично иллюстрирует, с одной стороны, важность создания прототипа перед разработкой реального продукта, с другой — важность процессов, необходимых перед слепым проектированием интерфейса.
Если вам показалось, что все слишком сложно и долго, вот доказательство обратного: UX-challenge: проектирование приложения мобильного банка за 5 дней