Прототип помогает оценить целесообразность бизнес-идеи и нового продукта: что нужно знать для создания прототипа

Содержание
  1. Прототипы: как создать успешный продукт и сэкономить
  2. Что же такого важного в этих ваших прототипах?
  3. Прототип-прототипу — рознь
  4. Прототип – результат комплекса работ
  5. Исследования
  6. Разработка дизайн-решения
  7. Контент
  8. Прототип
  9. Как отличить хороший прототип от плохого
  10. Заключительная история
  11. Прототипы в промышленном дизайне: как создать успешный продукт и сэкономить | Rusbase
  12. Функциональный прототип
  13. Предсерийный образец
  14. Серийный образец
  15. Плюсы прототипирования
  16. Минусы прототипирования
  17. Пример: пенал для акварели
  18. Проблемы
  19. Как исправили
  20. Пример: подогреватель омывающей жидкости
  21. Проблемы 
  22. Пример: медицинский автоинъектор
  23. Чем прототип отличается от готового продукта?
  24. Как получить максимум
  25. Прототипирование: польза для дизайнера
  26. Почему дизайнеру полезно создавать прототипы
  27. Как создать прототип сайта
  28. Этап 1. Аудит компании и анализ конкурентов
  29. Этап 2. Разработка структуры сайта
  30. Этап 3. Разработка прототипа
  31. 2 совета по созданию прототипов для веб-дизайнеров
  32. 1. При создании прототипа учитывайте мнение других исполнителей
  33. 2. Ориентируйтесь на конечную целевую аудиторию
  34. Место прототипа в жизненном цикле продукта
  35. Что такое прототип?
  36. Какую цель преследуют прототипы?
  37. На какой стадии создания продукта пора думать о прототипе?
  38. Основные принципы прототипирования
  39. Инструменты для создания динамических прототипов
  40. Заключение

Прототипы: как создать успешный продукт и сэкономить

Прототип помогает оценить целесообразность бизнес-идеи и нового продукта: что нужно знать для создания прототипа

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

Недавно, прогуливаясь по Москве, вспомнил о стартапе и решил проверить его лично. Но уже через 15 минут понял, что шансов взять самокат в аренду нет, а рейтинг 1.5 в AppStore полностью оправдан и подтверждает, что сложности не только у меня. На запуск стартапа такого масштаба, вероятно, было потрачено довольно много денег. И рейтинг 1.5 как бы намекает, что тратить придется еще. Могли ли разработчики Делисамоката избежать такой ситуации и выпустить более удобное приложение сразу? Да, если бы сначала сделали прототип и протестировали его на реальных пользователях.

Из статьи вы узнаете:

  • Что такое прототипы
  • Как сделать первоклассный прототип
  • Как отличить хороший прототип от плохого
  • Как сэкономить бизнесу $25 000

Что же такого важного в этих ваших прототипах?

Концепция прототипов в обычном мире довольно стара. Строительству любого здания предшествует проект (проект = прототип), выпуску серийного автомобиля — концепт (концепт-кар = прототип).

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

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

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

Прототип-прототипу — рознь

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

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

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

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

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

Прототип – результат комплекса работ

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

Исследования

Исследования – важнейший этап, фундамент успеха всей последующей работы. Несмотря на это, на рынке до сих пор приняты два способа «исследований»: «пришлите нам ТЗ» и «заполните бриф на 150 вопросов».

Ни техническое задание, ни бриф не способны обеспечить необходимый уровень погружения для создания действительно эффективных решений: техническое задание ни что иное, как субъективное восприятие действительности клиентом, которое во многом заимствует существующие решения конкурентов, а любимые многими брифы – не только ставят разные бизнесы в один ряд, но и заставляют клиента потратить значительное время, отвечая на шаблонные вопросы, реальный смысл которых он, зачастую, не понимает до конца. Поэтому в вопросе исследования бизнеса самым эффективным является путь личного общения с клиентом. Это позволяет максимально погрузится в процессы и особенности каждого конкретного бизнеса, выявить едва заметные нюансы, которые в итоге могут и часто становятся основой всего последующего продукта. Многие UI/UX-дизайнеры не считают необходимым общаться с пользователями, тем не менее, исследование пользователей позволяет взглянуть на задачу с другой стороны, выявить причинно-следственные связи, понять мотивацию, обнаружить страхи, услышать сомнения, найти инсайты.

Разработка дизайн-решения

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

Для трансформации исследований в требования к продукту существует множество инструментов: User-Centered-Design, Value Proposition Canvas, Jobs-To-Be-Done и другие, но все они приводят к одному результату – осознанному проектированию интерфейса.

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

Контент

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

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

И тогда контент придется подгонять под заданные рамки. Поэтому сначала ЧТО (контент), а потом КАК (дизайн).

Прототип

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

Как отличить хороший прототип от плохого

Вот простой чек-лист, который без каких-то знаний в области проектирования взаимодействия позволит определить, подсовывают ли вам под видом прототипа «заливную рыбу» или результат реальной работы.

Итак, всего несколько пунктов:

  1. В прототипе используются только реальный контент, соответствующий теме продукта
  2. Вы полностью понимаете, что «сообщает» прототип без комментариев и помощи дизайнера
  3. Дизайнер аргументирует каждое интерфейсное решение ссылками на результаты исследований бизнеса и пользователей

Заключительная история

Как-то раз одна компания решила создать инновационный продукт, бюджет на разработку которого оценивался более чем в $25 000. Разработчики уже завершили написание технического задания и были готовы начинать. В этой компании у меня были знакомые и по чистой случайности речь зашла об этом проекте.

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

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

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

Если вам показалось, что все слишком сложно и долго, вот доказательство обратного: UX-challenge: проектирование приложения мобильного банка за 5 дней

Хабы:

  • Веб-дизайн
  • Разработка веб-сайтов
  • Интерфейсы
  • Usability
  • Прототипирование

Источник: https://habr.com/ru/post/432788/

Прототипы в промышленном дизайне: как создать успешный продукт и сэкономить | Rusbase

Прототип помогает оценить целесообразность бизнес-идеи и нового продукта: что нужно знать для создания прототипа

Сложно представить современный дизайн-процесс без прототипирования. Следуя методу «покажи, а не рассказывай», многие продуктовые команды используют прототипы для презентации или тестирования идей. 

Сооснователь и генеральный конструктор «Карфидов Лаб» Алексей Карфидов делится опытом создания прототипов в инжиниринговом дизайне и рассказывает о главных плюсах и минусах.

Прототипы в промышленном дизайне: как создать успешный продукт и сэкономить Алексей Карфидов

Чтобы создать продукт «без осечек», важно его заранее протестировать. Сделать это можно проверенным способом — создать прототип продукта. Этот этап в процессе разработки является одним из самых важных. Но до сих пор многие специалисты не до конца понимают, что это и как с этим работать. Давайте разбираться. 

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

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

Shutterstock / Gorodenkoff

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

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

Прототипы бывают разных видов и форм. Так, для начала создается простейший прототип, который печатается на 3D-принтере или режется/лепится из картона, глины или модельного пластика. Либо, если размеры очень большие или форма очень сложная, он проверяется с помощью VR/AR-технологии. В половине случаев этот прототип может остаться в таком же цифровом виде, без материальной оболочки.

Shutterstock / Gorodenkoff

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

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

Функциональный прототип

Данный вид прототипа максимально близкий к конечному изделию. На нем проверяется вся функциональность и работа продукта. В нем содержится вся электроника, покупные элементы и прочие составные части.

Электроника изначально собирается и тестируется отдельно на столе с проводами. И после тестов впервые вставляется в прототип. Обычно на этом этапе возникает необходимость разных доработок. 

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

Предсерийный образец

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

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

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

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

Например, у вас есть резиновые кнопки с метками «минус» и «плюс». Если они одинаковые и встают на свое место одинаково, сборщик, который получает оплату за количество собранных изделий, может собрать эти кнопки наоборот. «Плюс» будет работать как «минус», а пользователь, который будет впервые работать с прибором, этого не поймет.

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

Серийный образец

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

Плюсы прототипирования

  • Высокая скорость создания

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

  • Легкость и быстрота внесения изменений

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

  • Интерактивность прототипов

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

Минусы прототипирования

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

«Почему я должен использовать карандаш и бумагу, когда я имею мощнейшие инструменты для прототипирования?». Дизайнеры часто пропускают этап прототипирования на бумаге и идут сразу к компьютерам, чтобы сделать диджитал-прототип. Они верят, что это сэкономит их время. Но на самом деле бумажные скетчи позволяют дизайнерам двигаться в правильном направлении, несмотря на трату этого времени.

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

Пример: пенал для акварели

Для создания пенала для акварели наша команда разработала простейший прототип. Мы напечатали его на 3D-принтере по технологии SLA (смола) /FDM (обычный экструдер и нить) /SLS. Прототип отливался из двухкомпонентного пластика на силиконовой форме.

Из архива «Карфидов Лаб»

Проблемы

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

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

Как исправили

  1. Доработали защелки, корректируя металлическую оснастку и делая пробные отливки до нужного результата.
  2. Чтобы компенсировать защиту от протекания воды, доработали на пресс-форме геометрию зуба, который зайдет в резинку, буквально повторяя деформацию детали после отливки. Зуб в середине был сделан крупней.

Так, проблема была выявлена этапе прототипирования, и мы смогли исправить ситуацию.

Из архива «Карфидов Лаб»

Пример: подогреватель омывающей жидкости

При работе над этим продуктом не было сомнений, что нужен прототип. В тестовом варианте изделие представляло собой емкость с водой сложной формы, которая в серии должна изготавливаться методом ротационного литья. Прототипы мы напечатали на 3D-принтере по технологии SLA и проверяли работу.

Проблемы 

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

Пример: медицинский автоинъектор

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

Из архива «Карфидов Лаб»

Чем прототип отличается от готового продукта?

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

Как получить максимум

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

Конструктору всегда хочется что-то доработать, заменить, улучшить, проверить новую идею. Но продукт — это бизнес, и это сроки должны соблюдаться. 

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

Фото на обложке: Shutterstock / Chaosamran_Studio

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Про другие виды рассылок можно узнать в разделе ПОДПИСКА

Источник: https://rb.ru/opinion/prototypes-in-engineering-design/

Прототипирование: польза для дизайнера

Прототип помогает оценить целесообразность бизнес-идеи и нового продукта: что нужно знать для создания прототипа

Перед тем как начинать работу, веб-дизайнер определяется с основной концепцией сайта и планирует расположение элементов на странице. Детальный план страницы называется прототипом, а сам процесс планирования – прототипированием. В этой статье мы поговорим о пользе прототипирования для дизайнера, разберем основные приемы и инструменты.

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

Многие ошибки при создании дизайна сайта и его функционала связаны с неправильным взаимодействием между исполнителем (веб-дизайнером) и заказчиком проекта.

Непонятно, какие блоки предприниматель хочет видеть на сайте, дизайнер делает по-своему и в результате – взаимное неудовольствие и провальный проект. С помощью прототипирования можно избежать этой проблемы.

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

Еще один плюс прототипирования – возможность проектирования сайта с точки зрения юзабилити.

Именно на этом этапе внедряются основные элементы для взаимодействия с клиентом, для повышения конверсии и степени доверия пользователей (о таких элементах мы рассказывали здесь).

Впервые посещая сайт клиент хочет видеть привычную блочную структуру: меню, где можно выбрать нужную страницу, контакты для связи с компанией, ответ на его вопрос в контентной части. Это называется пользовательским опытом – «привычкой» пользователя к определенному макету сайта.

К примеру, пользователи мобильных приложений привыкли, что за значком «гамбургера» скрывается меню.

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

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

  • шапка, что в ней будет находится;
  • контакты для обратной связи;
  • призывы к действию;
  • футер (подвал сайта);
  • контентная часть (текст, изображения);
  • элементы навигации.

С помощью составления прототипа дизайнер:

  1. Сэкономит время. Четко разработанная структура и расположение блоков в дальнейшем поможет дизайнеру не вносить большие изменения в готовый макет, так как основная часть проекта будет согласована.
  2. Упростит работу. При непосредственном создании дизайна страницы разработчик действует по намеченному плану – не нужно думать, как правильно скомпоновать блоки и рассчитать расстояние до отдельных элементов.
  3. Упростит взаимодействие с заказчиком и другими исполнителями. При разработке дизайна прототип является своеобразным техническим заданием, которое уже согласовано с заказчиком и на которое ориентируются другие участники проекта – копирайтеры, маркетологи и так далее.
  4. Поможет владельцу бизнеса повысить продажи. Составление прототипа это не только проектирование отдельных страниц сайта с точки зрения юзабилити, но и составление стратегии продаж. Правильное размещение CTA-элементов и элементов навигации, баннеров с акциями, карточек товаров для покупки влияет на конверсию продающего сайта или интернет-магазина.

На этапе проектирования сайта важно не зацикливаться на мелочах и деталях, цветовой композиции. Основная цель создания прототипа – спроектировать страницу удобной для пользователя и в то же время удовлетворить потребности предпринимателя.

К примеру, цель сайта IDBI – убедить предпринимателей и маркетологов довериться профессиональным дизайнерам и заказать дизайн сайта в нашей студии.

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

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

Рассмотрим процесс создания прототипа и основные инструменты для его разработки.

Как создать прототип сайта

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

Этап 1. Аудит компании и анализ конкурентов

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

На этом этапе также просматривают и анализируют конкурентов – дизайн и наполнение сайтов, уникальные предложения.

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

Также на этом этапе придумывают отличительные признаки компании, уникальные торговые предложения, которые будут выделять сайт среди конкурентов. В чем задача будущего сайта? Какие потребности клиентов он сможет удовлетворить? Какие задачи для заказчика сайт сможет решить? Без ответов на эти вопросы создание прототипа становится бессмысленным.

Этап 2. Разработка структуры сайта

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

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

Подробнее о разработке структуры мы говорили здесь.

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

Этап 3. Разработка прототипа

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

  1. Статичный. Представляет собой обыкновенную картинку с отрисованными блоками и текстовыми пометками.
  2. Динамический. Полноценный проект, который связывает между собой прототипы других страниц с помощью ссылок. Можно перейти с одной страницы на другую, нажимать на кнопки и прочее.

Выбор варианта зависит от масштаба проекта. Если сайт небольшой, будет достаточно проработанной картинки с расположением основных элементов. Для крупных проектов разрабатывается полноценные макеты с перелинковкой, уточняющими деталями и написанием уникальных текстов и УТП.

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

  1. Графические редакторы. Для прототипирования можно использовать те рабочие программы, в которых непосредственно создается дизайн сайта – Sketch, Figma, инструменты Adobe, Corel и прочее. Сюда же можно отнести стандартные редакторы Microsoft Office.
  2. Специальные программы и онлайн-ресурсы. Есть как платные, так и бесплатные приложения, созданные специально для разработки прототипов. Это может быть как лицензированное ПО, устанавливаемое на компьютер, так и онлайн-сервис, работающее через браузер. Примеры таких программ: Axure, Mockflow, Principle, Flinto и другие.

Выбор инструмента также зависит от масштаба проекта, навыков и конкретных предпочтений дизайнера.

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

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

Например, так выглядит шапка интернет-магазина сладостей:

На прототипе все элементы изображаются схематично:

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

Контентная часть – это основная часть страницы. Здесь может располагаться:

  • слайдеры;
  • карточки товаров;
  • блок для отзывов;
  • баннеры;
  • статьи или промо-блоки для отдельных страниц;
  • текст и изображения;
  • блоки с призывом к действию и так далее.

Блоки с целевыми действиями следует проектировать отдельно. К примеру, это может быть форма для оформления подписки на рассылку, или форма для оставления заявки менеджеру. Проектирование форм – отдельная сложная работа, где должны учитываться различные параметры: количество полей, расстояние между ними, размер и расположение кнопок, сопутствующие изображения.

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

Все элементы в прототипе можно разделить на три вида:

  1. Информационные. Данные элементы предоставляют какую-либо информацию о сайте и его владельце, это весь потребляемый пользователем контент. Текст, изображения и иллюстрации, которые помогают клиенту найти ответ на поставленный вопрос: как осуществляется доставка, какие товары есть в наличии, как оплатить покупку и прочее.
  2. Функциональные. Нужны для целевых действий пользователя – подписаться, купить, оформить заказ. Как правило, это кнопки и формы.
  3. Навигационные. Чтобы пользователь комфортно чувствовал себя на странице, понимал, в какой части сайта он находится и мог беспрепятственно перейти в нужный раздел, разрабатываются элементы навигации. Мы перечисляли основные приемы в этой статье.

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

Если на протяжении всего макета просматривается единая концепция, страница выглядит стильной и завершенной.

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

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

Отдельно стоит отметить один из методов проектирования – атомарный дизайн. Он отличается от вышеописанной методики.

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

2 совета по созданию прототипов для веб-дизайнеров

От качества созданного прототипа зависит удобство использования элементов на странице, уровень конверсии сайта, восприятие страницы в целом. Поделимся некоторыми советами для веб-дизайнеров, которые заинтересовались проектированием веб-страниц.

1. При создании прототипа учитывайте мнение других исполнителей

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

2. Ориентируйтесь на конечную целевую аудиторию

Несмотря на все прогнозы и задумки маркетологов, часто бывает, что некоторые элементы «не срабатывают» – нет должного отклика от пользователей, не повышаются продажи, клиенты не замечают функциональных элементов.

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

Также стоит проработать всевозможные пользовательские сценарии для проверки элементов навигации и выявлении ошибок в макете.

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

Источник: https://idbi.ru/blogs/blog/prototipirovanie-polza-dlya-dizaynera

Место прототипа в жизненном цикле продукта

Прототип помогает оценить целесообразность бизнес-идеи и нового продукта: что нужно знать для создания прототипа

Во всем многообразии продуктовых терминов, прототип кажется одним из самых понятных и безобидных.

Но как определить его качество? В какой момент нужно задуматься о прототипировании продукта и нужно ли вообще? Какие инструменты для этого использовать? Перейти к реальным действиям часто оказывается сложно. Поэтому мы решили собрать небольшой мануал по использованию прототипов в продуктовой разработке.

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

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

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

Что такое прототип?

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

  • протестировать идею и/или гипотезу;
  • проверить, как пользователь будет использовать продукт для решения своей проблемы и найти препятствия на этом пути (если они есть);
  • получить обратную связь;
  • снизить риски запуска продукта/фичи.

Чем прототип НЕ является:

  • Макетом сайта или разрозненными wireframe'ами. Раньше под прототипом понимали стадию разработки до отрисовки дизайна, то есть проработку UX и интерфейса. Сейчас же под прототипом понимается именно динамическая модель продукта, позволяющая симулировать какой-то из сценариев его использования.
  • Финальным дизайном вашего продукта. Прототип совершенно не обязательно должен быть выполнен в вашей стилистике и согласно последним тенденциям онлайн моды. Если он решает свою задачу – проверку гипотезы – неважно, как он выглядит. Вам все равно придется его полностью переработать, прежде чем приступать к разработке продукта.

Можно выделить два основных вида прототипов технологических продуктов:

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

Выбор типа зависит исключительно от гипотезы, которую вы тестируете.

Какую цель преследуют прототипы?

Окей, прототип – это модель, которую мы собираем из подручных средств (в оффлайне или онлайне), чтобы проверить какую-то идею. Какие глобальные цели мы при этом преследуем? Их можно разделить на 4 категории:

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

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

На какой стадии создания продукта пора думать о прототипе?

Допустим, мы убедили вас, что прототип – это круто и он вам очень нужен. Но в какой момент стоит о нем задуматься? В классической концепции дизайн мышления предполагается следующий порядок действий:

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

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

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

Основные принципы прототипирования

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

  • Отражение сценария(ев) использования продукта. С помощью прототипа должно быть возможно проверить, как пользователь будет подходить к решению той или иной задачи и с какими преградами он столкнется на пути. Тестируя прототип, вы должны давать его пользователю, озвучивать задачу и отходить в сторону. Если отойти в сторону невозможно и вам постоянно приходится отвечать на вопросы и помогать – кажется, стоит пересмотреть и переработать сценарий использования.
  • Прототип всегда интерактивный. Это довольно логично вытекает из первого принципа: вы не сможете заложить сценарий в основу статичной картинки. Статичная картинка даст вам лишь ответ на вопрос, насколько конкретно этому человеку визуально нравится исполнение вашего прототипа. Здесь мы вспоминаем, что прототип может не иметь ничего общего с финальным дизайном, поэтому такая оценка вам будет абсолютно бесполезна.
  • В основе лежит гипотеза. Вы получите ценность, только если знаете, что конкретно хотите проверить. Сформулируйте гипотезу так, чтобы на нее можно было четко ответить “да” или “нет”. А после пропишите, как именно прототип даст вам ответ на этот вопрос.
  • Тестировать, а не валидировать. Человек всегда неосознанно ищет подтверждение своим идеям, поэтому важно повторять себе, что вам нужна объективная оценка и не будет никакого смысла, если вы подтолкнете пользователя к решению, которое вас устраивает. После этого вы потратите много времени и денег на разработку продукта, запустите его и обнаружите, что пользователи никак не конвертируются в покупателей. Не наступайте на эти грабли и будьте готовы к любому результату.
  • Минимум догадок. Постарайтесь проверить все, даже если вы уверены, что знаете своего пользователя.

Вы можете пройтись по этому списку как по чек-листу после того, как ваш прототип будет готов, задавая себе вопрос: отражен ли этот принцип? Если галочки стоят во всех пунктах – можно смело переходить к следующей стадии и тестировать прототип на пользователях, инвесторах и стейкхолдерах (этому процессу мы посветим отдельную статью).

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

Прекрасно, вроде бы все стало более ли менее понятно. Но теперь вы стоите перед проблемой чистого листа: что делать известно, а вот как начать? Для создания кликабельных прототипов существует много различных инструментов. Вот некоторые их самых популярных:

  • inVision, Marvel,Flinto – первый тип инструментов, который позволяет соединить макеты различных страниц в динамический прототип, то есть указать по клику на какую область одной страницы нужно отобразить другую.
  • Prott, POP – эти инструменты не требуют от вас даже макетов. Просто нарисуйте скетч карандашом на бумаге, сфотографируйте и соедините в приложении в пользовательский сценарий.
  • Proto.io, Framer, Origami, Form – более сложные инструменты, которые позволяют вам анимировать отдельные объекты (слои) и делать более сложные и интересные переходы. Но в их основе все так же лежат макеты страниц.
  • Webflow, Figma – эти инструменты уже являются конструкторами сайтов и с их помощью можно создать не только прототип, но и первую версию продукта. Однако они так же хорошо подходят для прототипирования в случаях, когда вам нужно сильно больше, чем переходы между статичными экранами.

Кроме всех этих инструментов у вас всегда есть еще одна опция – просто пишите нам на ineedmvp@mvplab.org и мы соберем вам первоклассный кликабельный прототип!

Заключение

Давайте подведем итоги:

  • Что: прототип – это простейшая модель вашего будущего продукта (или отдельной его части), в основе которой лежит гипотеза и пользовательский сценарий для её проверки.
  • Зачем: чтобы узнать и лучше понять пользователя и его боли, вовлечь пользователей и стейкхолдеров в тестирование продукта на ранней стадии и иногда даже привлечь инвестиции в продукт и вдохновить людей своей идеей.
  • Когда: когда есть понимание пользователя и его контекста и четко сформулированная продуктовая гипотеза, то есть ровно в тот момент, когда хочется собрать команду и начать разработку.
  • Как: выбрав подходящий для вашей ситуации инструмент либо обратившись к тем, кто сделает это за вас (например, к нам)

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

Источник: https://zen.yandex.ru/media/id/5bffe5356bf5b200aa770e60/mesto-prototipa-v-jiznennom-cikle-produkta-5c07983e59f30300aa958342

Бизнес
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: