Для чего применяется прототипирование в дизайн мышлении
Почему прототипы так важны?
Что такое прототипирование? Как это помогает компаниям экономить время и деньги?
Процесс создания продукта включает в себя множество этапов, позволяющих достичь необходимого уровня, для массового производства. Каждый продукт имеет свою целевую аудиторию и решает определенные проблемы. Чтобы определить насколько хорошо продукт решает болевые точки своих пользователей, создается практически рабочая модель, которая тестируется потенциальными юзерами. После чего необходимо собрать отзывы, внести изменения, а затем повторить процесс, пока у вас не будет четкого понимания того, как будет выглядеть конечный продукт.
Эскизы продукта помогают спроектировать будущее видение результата. Приведу пример: когда я делаю сайт, я делюсь набросками страницы с клиентом, либо командой, чтобы понять, в какой направлении необходимо работать и не пропустил ли я что-нибудь. Так я могу получить подлинную обратную связь и улучшить продукт, над которым работаю.
Лучшее видение дизайна
Создание прототипов не только обеспечивает четкую визуализацию дизайна, чтобы понять внешний вид конечного продукта, но также помогает команде понять, что они проектируют, для кого и почему они проектируют.
Экономия времени и денег
Старайтесь оставаться в «режиме прототипирования» как можно дольше. Чем больше вы узнаете о проблеме проектирования, которую пытаетесь решить, тем быстрее будет реализация. В предварительную модель всегда можно внести желаемые изменения заранее, потому что к этому моменту не было вложены усилия для создания конечного продукта. Таким образом, ранние изменения помогут вам быстрее достичь ваших целей. И как побочный эффект экономии времени, прототипирование также сделает ваш процесс разработки более рентабельным, поскольку весь цикл разработки становится короче.
По словам Форда, благодаря прототипированию он экономит до 439 тыс. Долл. США и месяцы времени на подготовку.
Проверка перед дизайном и разработкой
Прототипирование позволяет проводить несколько обсуждений между итерациями, прежде чем приступить к окончательной разработке. Этот итеративный процесс позволяет вам быть уверенным в том, что вы делаете, именно то, что вам нужно.
Проектирование является одной из частей процесса. Но существуют различные подходы к созданию прототипов, и всегда необходимо выбирать правильный подход к вашему продукту. Поэтому, для начала, выберите точность вашего будущего прототипа, исходя из вашего времени и ресурсов.
Низкая точность : Lo-Fi
Зачастую, это бумажные прототипы, которые идеально подходят на ранних этапах. Этот тип помогает легко и быстро вносить изменения. В нем больше внимания уделяется структуре и функционалу, а не тому, как продукт будет выглядеть. Благодаря lo-fi команде и аудитории становится легче понять продукт. Но, поскольку сложность продукта возрастает, становится все труднее поддерживать прототипы lo-fi дальше в цикле разработки. Это делает бумажные прототипы неэффективными если проект требует более глубокого проектирования.
Необходимы прототипы для вашего будущего проекта? Я готов помочь вам с этим. Напишите мне и я сделаю прототип для вас!
Урок 4. Прототипирование
В этом уроке мы с вами разберём основные принципы эффективного прототипирования в дизайн-мышлении. Они помогут вам максимально быстро протестировать сгенерированные ранее идеи, найти их плюсы и минусы.
Содержание:
Начать же этот урок лучше всего с определения центральных понятий.
Прототип и прототипирование
Для начала дадим определение понятию «прототип».
Простыми словами, прототип – это макет решения, который можно собрать из подручных материалов.
Он используется для того, чтобы не тратить время и деньги на создание полноценного продукта, а создать что-то похожее на него и отыскать ошибки, допущенные на этапе проектирования. Собственно говоря, процесс создания прототипа и называется прототипированием, и у него есть свои плюсы и минусы.
Преимущества прототипирования:
Недостатки прототипирования:
Прототипирование является первой стадией Product Evolution Canvas (на русский переводится как «канвас эволюции продукта»), и дальше речь пойдет о нем.
Product Evolution Canvas
Product Evolution Canvas (PEC) – это инструмент для компаний, создающих различные продукты, отлично подходящий для мозговых штурмов. Он состоит из двух компонентов – это:
Временные рамки – это, как понятно из названия, время. А что такое эволюция продукта? Давайте рассмотрим подробнее.
3 этапа эволюции продукта
Эволюция продукта – это весь процесс от создания прототипа до готового товара.
Он делится на три этапа:
Образно говоря, минимально-жизнеспособный продукт – это скейтборд. Основной продукт – велосипед. Полнофункциональный продукт – автомобиль. Скейтборд даёт возможность передвигаться, но не позволяет делать это достаточно быстро. С помощью велосипеда можно ездить довольно быстро и на большие расстояния. А автомобиль перекрывает все потребности, т.к. проезжает расстояния в сотни километров в считанные часы.
Канвас эволюции продукта помогает ответить на вопросы коллег, клиентов и инвесторов о функционале продукта. Например:
Кроме того, Product Evolution Canvas упрощает:
Но чтобы получить от PEC максимальную пользу, с ним нужно научиться работать. Давайте поговорим об этом подробнее.
Как работать с PEC
Работа с PEC предполагает прохождение трех этапов:
На первом этапе спрашивайте себя: «Что делает мой продукт функциональным?»
Канвас можно применять для разработки продуктов и услуг практически в каждой сфере деятельности человека. Нужно выполнить всего лишь четыре простых шага:
А чтобы было понятнее, что все это значит, приведем небольшой практический пример. Представьте, что вы разрабатываете банковское приложение и заполняете канвас. На первом этапе ваш продукт будет обладать лишь самыми необходимыми функциями, без которых невозможно представить банковское приложение – это открытие личного счёта, перевод денег и оплата различных услуг.
На втором этапе вы добавляете счета для индивидуальных предпринимателей, все виды транзакций и возможность оформлять кредиты онлайн. И на третьем – копилки, списки желаний и интеграцию с чат-ботами. Конечно, система выглядит уж очень упрощенно, но суть этот пример передает хорошо.
Прототипировать можно:
В зависимости от того, что мы прототипируем, технологии прототипирования будут различаться.
Моделирование физических объектов
Физические объекты моделируют:
| A | С помощью подручных средств – бумаги, картона, пластилина, скотча, ножниц. |
| B | С помощью «Лего». |
| C | С помощью 3D принтеров. |
| D | С помощью программ для 3D моделирования. |
Давайте подробнее разберём каждую технологию.
Моделирование подручными средствам
При моделировании подручными средствами нужно всего лишь следовать простому алгоритму:
К плюсам данного вида моделирования можно отнести:
Среди минусов есть следующие:
Поэтому при моделировании подручными средствами избегайте перфеционизма, не тратьте много времени на каждый прототип, при создании модели постоянно думайте о том, как люди будут пользоваться продуктом.
Лего-моделирование
Моделипрование с помощью «Лего» выполняется не менее просто:
Для получения наилучшего результата советуем вам прочитать книгу Тима Брауна «Дизайн-мышление в бизнесе», где рассказывается о том, как компания IDEO создавала из конструктора прототипы устройств для введения в кровь инсулиновых инъекций. Каждый раз создавая прототип, представляйте, что вы рассказываете историю.
Моделирование с использованием 3D печати
Для создания 3D моделей используются следующие технологии:
FDM (Fused Deposition Modeling). Материал выдавливается слой за слоем на поверхность. Эта технология применяется в биомедицине, кулинарии и промышленном производстве.
3D-печать – это достаточно сложная технология, поэтому для ее применения лучше всего привлекать квалифицированных специалистов.
Моделирование с использованием программ
То же самое моделирование, что и в случае с 3D, только здесь не надо «марать» руки, ведь весь процесс происходит на экране компьютера. Вот список 10 лучших бесплатных программ, которые помогут вам прототипировать, не выходя из зоны комфорта:
Руководство пользователя для каждой из программ можно найти в свободном доступе в Интернете.
Прототипирование сайтов и интерфейсов программ и приложений
Прототипирование сайта, главным образом, означает проектирование его интерфейса. Оно помогает облегчить задачу программистам, дизайнерам и верстальщикам. Поэтому мы объединили эти два пункта в один.
Например, когда вы заходите на любой сайт, то, скорее всего, ожидаете, что справа или сбоку будет меню и название проекта. Чуть-чуть правее или левее центра – контент (статьи, фотографии, видео). А снизу – надпись «Все права защищены» и правовые документы.
Если же вы зайдёте и увидите совсем другую картину (к примеру, меню будет расположено где-то снизу, контентная часть будет слишком узкой и т.п.), вероятно, вы просто уйдёте на другой сайт – более привычный.
Однако не нужно потакать пользователям во всём, ведь сайт должен решать и ваши задачи. К примеру, человек задал в поиске такой вопрос: «С чего начать саморазвитие?» Увидел ссылку на наш сайт и перешёл на него. Задача человека – получить информацию. Наша задача – не только помочь ему, но и реализовать собственные цели, в том числе и финансовые.
Если мы просто расскажем пользователю о саморазвитии, он прочитает и уйдёт. Чтобы такого не происходило, мы во всех статьях делаем ссылки на тематические материалы, бесплатные курсы и платные тренинги. При этом мы не пишем призывы каждые три абзаца, не мешаем пользователю найти ответ на вопрос и удовлетворить любопытство, не ставим никаких скриптов, которые не дают человеку уйти с сайта, если ему что-то не понравилось.
Как создать прототип
Прототип можно создать в любой программе, где можно рисовать. Если вы новичок, используйте Photoshop, Paint, Adobe Illustrator или даже Google Docs. Профессионалам рекомендуем программу Axure. И вот что нужно сделать дальше (в упрощенной форме):
| 1 | Отрисовать основные элементы шапки – форму поиска, логотип, кнопку обратной связи, описание проекта, кнопку действия («заказать услугу», «купить курс», «совершить звонок»), а если сайт информационный, то либо кнопку «Блог», либо меню с рубриками. |
| 2 | Нарисовать контентную часть и сайдбар (то, что находится сбоку). Как будет располагаться текст, кнопки социальных сетей, комментарии и т.д. |
| 3 | Обрисовать подвал сайта – дополнительные ссылки, значок копирайта и прочее. |
Стиль сайта должен прослеживаться на всех его страницах. Не должно быть так, чтобы на главной странице преобладал минимализм (чёрно-белый дизайн и полное отсутствие лишнего), а в статьях – «рог изобилия», когда кажется, что попал совсем в другую реальность. Элементы нужно делать симметричными по размерам и расположению.
Не заставляйте человека ощущать себя неуютно, т.е. если пользователи мобильных устройств привыкли, что при нажатии на значок «гамбургера» (три горизонтальных черты) открывается меню, не надо выдумывать что-то новое. Если люди привыкли, что курсор мыши меняется на указательный палец, когда на блок можно нажать, делайте на своём сайте (или в приложении) точно так же.
И еще несколько советов о том, чего нужно избегать при создании сайтов и приложений:
Подробнее читайте в материале, подготовленном крупнейшим маркетинговым агентством России Texterra. Там очень хорошо и понятно изложено, что стоит внедрить на своём сайте/приложении, а что – убрать. Однако не старайтесь всё время следовать нашим советам: экспериментируйте и пробуйте выяснить самостоятельно, что хотят видеть потенциальные клиенты на вашем сайте или в приложении.
Прототипирование опыта
Прототипирование опыта – это тип прототипирование, которое представляет собой воссоздание ситуаций для тестирования решений. Чтобы смоделировать опыт, нужно правильно подобрать место и создать обстоятельства, при которых человеку может понадобиться ваш продукт или услуга. С помощью прототипирования опыта можно разыгрывать целые ситуации, объёмные опыты и нахождение в пространствах, где трудно обойтись одним предметом.
Прототипирование опыта проводится так:
Для чего применяется прототипирование в дизайн мышлении
Что такое Прототипирование?
Аудио перевод статьи
Прототипирование — это процесс, в рамках которого дизайнеры создают, экспериментируют и воплощают в жизнь концепцию, начиная от заметок на бумаге и заканчивая цифровым проектированием. По сути, прототип — это предварительный макет дизайна, который позволяет пользователям отчетливо представить его или взаимодействовать с ним до тех пор, пока не будет разработан конечный продукт. Это четвертый этап процесса дизайн-мышления, который сопровождается тестированием юзабилити.
Ключевой особенностью прототипов является то, что их проектируют без единой строки кода. Существует множество инструментов прототипирования, которые помогают дизайнерам связывать артборды, создавать анимации и интерактивный интерфейс без участия разработчика, что значительно снижает стоимость проекта. Разумно тестировать прототип с пользователями и заинтересованными сторонами, чтобы устранить все ошибки прежде, чем вкладывать деньги, время и трудовые ресурсы в разработку дизайнерского решения.
Нужно отметить, что прототипирование в качестве инструмента проверки идей можно применять на разных этапах процесса проектирования: как в начале, так и в середине пути. Тестирование прототипов позволяет оценить прогресс и удобство использования прежде, чем приступать к разработке.
Причины создания прототипов
Прототип — это интерактивный проект, который создан без кода, с целью проверки концепции перед запуском. С помощью прототипирования можно анализировать различные дизайнерские решения без участия разработчиков. Это также позволяет тестировать прототипы с реальными пользователями, чтобы выявить проблемы юзабилити перед выпуском конечного продукта. Этот процесс помогает дизайнерам сэкономить много времени, денег и усилий на протяжении всего жизненного цикла проектирования и разработки.
Рассмотрим несколько причин для создания прототипа:
Продажа новых идей. Прототипы — это отличный шанс вдохновить, мотивировать и, в конечном итоге, “продать” дизайнерские решения как заинтересованным сторонам внутри организации, так и сторонним лицам. Также прототипы стимулируют рынки на создание принципиально новых идей и процессов, поскольку не требуют больших усилий для демонстрации продуктов, производство которых обходится чрезвычайно дорого.
Какие бывают типы прототипирования?
Прототипы делятся по методу и способу выполнения, то есть они могут быть созданы с низкой, средней или высокой степенью детализации. Под этим подразумевается уровень конкретизации и функционального наполнения прототипа. Как правило, чем подробнее детализация, тем больше усилий и ресурсов требуется для ее создания. Различные сценарии предполагают разные уровни детализации, и у каждого есть свои преимущества и недостатки. Практические рекомендации содержат информацию о том, что включает каждый из этих уровней, а также как и когда их нужно применять.
Прототипы с низкой детализацией
Их часто называют бумажными прототипами, потому что их создание не требует много времени и усилий. Прототипы с низкой детализацией представляют собой простую неполную версию вашего продукта и являются отличным способом проверить концепции высокого уровня прежде, чем выделять дополнительное время и ресурсы на дизайн. Они также позволяют получать обратную связь и тестировать идеи на ранней стадии процесса проектирования. Поскольку для их создания требуется только ручка и бумага, дизайнеры могут легко проверять различные сценарии и вносить корректировки, прежде чем переходить к цифровым макетам.
Преимущества
Недостатки
Прототипы средней детализации
Прототипы средней детализации — это следующий уровень прототипирования. Их часто называют макетами, они являются цифровыми и создаются в серых оттенках. Прототипы этого типа включают в себя проектирование путей пользователя и построение информационной архитектуры, но в них нет элементов брендинга, фотографий и логотипов.
Ограничение прототипа проектированием путей пользователя и построением информационной архитектуры в сером цвете позволяет пользователю сосредоточиться на фундаментальных аспектах дизайна. Он не будет отвлекаться на цвета, расположение фотографий и логотипы. Это позволяет дизайнеру проверить самую суть юзабилити продукта до включения в проект визуальных элементов.
В интернете есть отличные ресурсы, где можно найти примеры макетов и шаблонов. Но сначала давайте обсудим преимущества и недостатки прототипов средней детализации.
Преимущества
Недостатки
Прототипы высокой детализации
После нескольких циклов тестирования прототипов низкой и средней детализации необходимо уделить время визуализации вашего дизайна с высокой степенью детализации. На этом этапе дизайнер добавляет фирменную символику, фотографии, текст, цвета и анимацию, чтобы воплотить свой интерфейс в жизнь. По мере приближения дизайна к завершающей стадии, важно тестировать прототипы высокой детализации до начала этапа разработки.
Преимущества
Недостатки
Что такое процесс создания прототипа веб-сайта?
Перед тем, как погрузиться в создание прототипа веб-сайта, вам следует определить, кто ваши пользователи и какие у них проблемы, а также придумать правильное решение для устранения их болевых точек. После выполнения этих шагов в процессе проектирования, можно приступать к созданию прототипа.
Ниже мы рассмотрим этапы эффективного процесса создания прототипа веб-сайта.
Что такое дизайн-мышление и как его применять
Всё чаще можно услышать формулировку «дизайн-мышление», при этом многие до сих пор не знают её точного определения.
Ни одна из сфер дизайна не требует такого глубокого погружения в мир клиента, как UI/UX-дизайн. Чтобы создать удобный и практичный продукт, необходимо понять боли и страхи пользователя. Дизайн-мышление как раз про это. Научиться правильно мыслить и решать задачи клиента на пользу бизнеса поможет курс «UX-дизайн».
Что такое
дизайн-мышление
Идею дизайн-мышления сформулировал Герберт Саймон в 1969 году в книге «Науки об искусственном» (The Sciences of the Artificial). Позднее её развили учёные Стэнфордского университета и основали Стэнфордский институт дизайна, или d.school, который продвигает идею дизайн-мышления.
Пишет про дизайн в Skillbox. Редактор и арт-директор собственного дизайн-бюро. Ведет рассылку о текстах, типографике и дизайне.
Наиболее ёмко это явление описали в Interaction Design Foundation. Там его определяют так:
Методика, с помощью которой мы стремимся понять пользователя, опровергнуть предположения и переосмыслить проблему, чтобы найти неочевидные альтернативные решения.
Любой, кто использует дизайн-мышление, подчиняет своё исследование и работу интересам человека, а не интересам компании, начальника, менеджера проекта или бюрократии.
Главная цель дизайн-мышления — выйти за пределы существующих стереотипов и привычных способов решения задачи. В оригинале это называется thinking outside the box — дословно «думать вне коробки».
Дизайн-мышление применяют в любой области, например: спланировать тур по Европе, продумать ремонт квартиры, запустить новое медиа или бизнес, разработать логотип и айдентику.
Как работает
дизайн-мышление
Процесс решения проблемы состоит из пяти этапов: эмпатия, фокусировка, генерация идей, прототип, тест.
Рассмотрим каждый этап подробно на двух контрастных примерах, когда дизайн-мышление помогло лично мне.
Владелец тюменского сервисного центра попросил меня разработать лендинг. Прежде я делал их только для своих проектов и мне было легко: я знал, что хочу рассказать и донести до пользователей. Но про ремонт смартфонов я не знал ничего.
1 этап. Эмпатия
Эмпатия — умение включиться в переживания и опыт других людей, понять, что на самом деле их волнует. Это главное качество дизайн-мышления, так как именно оно позволяет отстраниться от своих предположений и убеждений, взглянуть на проблему глазами пользователя.
Настоящий дизайнер — всегда эмпат. Он ищет наиболее комфортное решение. Делать проекты, в которых вы разбираетесь, — легко. Если вы увлекаетесь рэпом, сделать лендинг для рэпера просто. Но если заказчик торгует на финансовой бирже, придётся вникнуть в его бизнес, разобраться в процессах и понять, что он чувствует, когда общается с людьми. Посмотрим, как эмпатия работает на практике.
Чтобы понять, что важно для клиентов сервиса по ремонту телефонов, я погрузился в атмосферу заказчика. Взял интервью у владельца бизнеса и провёл с командой рабочий день. Наблюдал за тем, какие вопросы задают клиенты, что их волнует, когда они отдают свои смартфоны на ремонт.
2 этап. Фокусировка
Систематизируйте информацию, которую вы получили с помощью эмпатии, анализируйте наблюдения и выделяйте ключевые проблемы пользователя. Цель фокусировки — сформулировать вопрос, на который вы будете искать ответ на следующем этапе.
Общаясь с командой, я понял — большую часть времени они тратят, чтобы ответить на одни и те же вопросы: на какой срок даётся гарантия, какие случаи гарантийные, нужно ли вносить предоплату. В итоге я сформулировал вопрос: как сэкономить время клиента и команды?
3 этап. Генерация идей
Когда вы определили проблему пользователя, придумайте и проработайте нестандартные решения. Откажитесь от критического мышления, к которому мы все так привыкли. Критика может загубить хорошую идею. Записывайте всё, даже самые бредовые мысли. Как креатив кончится, отберите жизнеспособные идеи и переходите к следующему этапу.
Я предложил несколько решений проблемы:
4 этап. Прототипирование
Здесь задача — проверить работоспособность идей на практике. Достаточно сделать бюджетную версию продукта с функциями, которые помогут решить обозначенную задачу.
Если прототип удачный, переходите к следующему этапу. Если нет — попробуйте определить проблему заново.
Ответы на вопросы — понятный и универсальный вариант, который работает на всех платформах. Пользователь выбирает нужный вопрос, и ответ уже на экране.
5 этап. Тестирование
Тестируйте готовый продукт и лучшие решения, которые разработали в ходе прототипирования. И хотя это финальный этап, дизайн-мышление — повторяющийся процесс: используйте результаты тестирования, чтобы определить и решить другие проблемы. Это можно сделать с помощью обратной связи от клиентов.
Я сверстал прототип раздела, показал, как он будет выглядеть.
Вместе с заказчиком мы протестировали его с разных устройств и убедились, что всё работает. После этого я сверстал финальный вариант раздела, добавил фоновую картинку и анимацию.
Как применять
дизайн-мышление в дизайне
Представим, что продуктовый дизайнер разрабатывает прототип новой микроволновки.
Он может действовать стандартными способами: опросить людей, у которых есть микроволновки, собрать обратную связь, узнать плюсы и недостатки отдельных моделей — и на основе полученной информации предложить решение.
Или пойти нестандартным путём: пообщаться с людьми и узнать об их привычках и шаблонах поведения в определённых ситуациях. Так дизайнер поймёт, что все микроволновки греют по-разному: одна за три минуты едва нагревает еду, а вторая — перегревает.
Значит, людям нужна не более мощная микроволновка, а понятный интерфейс, который скажет, как сильно нагреется еда.
Важно! Момент озарения, когда вы понимаете истинную проблему клиента и пользователя, называется инсайт. Это ключ к прорывным продуктам.
Дизайн-мышление помогает найти инновационные решения, которые не лежат на поверхности, экономить время и деньги. Приведу пример из своего опыта.
Ко мне обратилась студия наружной рекламы, которая хотела увеличить продажи. Руководство решило сделать корпоративный сайт. Но обсуждение задачи и часовое интервью с клиентом привело меня к решению, что этой компании лучше сделать лендинг или развивать аккаунты в социальных сетях.
Почти все клиенты обращались в студию, потому что её рекомендовали как место, где могут быстро разработать и изготовить дизайн вывески или рекламного баннера. То есть для компаний была важна скорость работы студии, а не наличие корпоративного сайта с возможностью рассчитать стоимость работ, гигантским портфолио и способами оплаты. Для таких целей лучше подходят соцсети, мессенджеры или простой лендинг.
Эмпатия и умение мыслить за пределами нормативов, стремление прочувствовать ситуацию и предложить нестандартные решения формируют интуицию дизайнера.
Заключение
Если не общаться с заказчиком, а лишь изучать конкурентов, то уйдут месяцы и сотни тысяч рублей на бесполезные решения. Именно дизайн-мышление и эмпатия показывают проблемы изнутри и наводят на их решения.
На курсе «UX-дизайн» вы научитесь определять проблемы и находить решения для интерфейсов веб-сайтов, мобильных приложений и сложных сервисов. Курс полезен и для начинающих дизайнеров, и для арт-директоров. Они вместе работают на одну цель — найти самое эффективное решение.