Что такое дизайн-мышление и как его использовать в создании сайтов

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

Рассказываем, что это за метод и как его применять при создании сайтов.

Что такое дизайн-мышление

Дизайн-мышление (от англ. design thinking) — креативный подход к разработке продуктов, услуг и сервисов, ориентированный на клиента. Он подразумевает выход за рамки банальных идей и поиск нестандартных решений, которые будут удовлетворять потребностям человека. 

На первое место ставится запрос пользователя. На второе — технические и экономические возможности заказчика. И только на третье — интересы бизнеса. 

Цели и задачи метода

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

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

В чем польза дизайн-мышления

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

• будет востребован на рынке;
• принесет компании прибыль;
• поможет обрести лояльную аудиторию.

Кроме того, такой подход можно использовать, чтобы оптимизировать уже существующие продукты. Например, редизайн интернет-магазина МТС повысил общую конверсию сайта на 1,8%. 

Так компания МТС обновила верхнее меню сайта

История возникновения дизайн-мышления

Термин «дизайн-мышление» придумал Герберт Саймон, лауреат Нобелевской премии по экономике. Впервые он использовал его в 1969 году в книге «Наука об искусственном», где сформулировал основы дизайн-мышления: описал принципы подхода и его этапы. Он предложил создавать прототипы и тестировать идеи, чтобы проверять их на совместимость с реальностью.

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

Большой вклад в развитие подхода внес Дэвид Келли. Он является одним из основателей дизайнерской и консалтинговой компании IDEO, сотрудники которой четко сформулировали ключевые особенности дизайн-мышления. Оно объединяет:

• то, что хочет клиент, 
• с тем, что осуществимо с технологической точки зрения,
• и с тем, что экономически целесообразно для бизнеса. 

На пересечении этих 3-х факторов рождаются инновации.

Особенности дизайн-мышления

Дизайн-мышление держится на 4-х китах:

Системное мышление

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

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

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

Интеграция разных дисциплин

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

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

Развитие креативности

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

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

Активное использование наблюдения

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

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

Подробнее об этом «ките» мы еще поговорим в следующем разделе.

Этапы и порядок дизайн-мышления

Процесс дизайн-мышления можно условно разделить на 6 основных этапов. Выполнять их рекомендуется последовательно.

Эмпатия

Чтобы понять, чего хочет клиент, необходимо поставить себя на его место:

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

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

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

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

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

Фокусировка

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

• Чего хочет большинство пользователей? 
• С какими трудностями они чаще всего сталкиваются? 
• Чего им не хватает?
• Что им не могут предложить конкуренты?

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

Разберем на примере. Инсайт — хочу похудеть к лету, но боюсь, что времени на полноценные тренировки не хватит. Как решить эту задачу? Можно разработать программу тренировок, которая поможет привести тело в форму, занимаясь по 15-20 минут в день.

Генерация идей

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

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

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

Отбор и разработка идеи

Теперь из всех придуманных способов решения проблемы нужно отобрать самые жизнеспособные:

• Вы должны понимать, что реализовать идею реально. На это хватит технических возможностей и бюджета компании.
• Цель оправдывает средства. Потенциала идеи достаточно, чтобы в будущем она окупила средства, потраченные на ее реализацию.
• Идея достаточно новаторская. Если кто-то уже делал что-то похожее до вас, нет смысла повторяться. 

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

Прототипирование

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

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

Что может стать прототипом?

• Презентация проекта. Поможет сформулировать цели, задачи и особенности вашей идеи и рассказать о ней другим людям.
• Макет из картона и бумаги. Из них можно наглядно изобразить хоть интерфейс сайта, хоть дизайн интерьера. Как говорится, дешево и сердито. 
• Digital-макет. Почти то же самое, что и бумажный макет, только в цифровом формате. Согласитесь, создать 3D-модель жилого комплекса дешевле, чем построить его, а потом снести.
• Прототип-сценарий. Можно пошагово расписать, как будет работать продукт.
• MVP (от англ. Minimal Viable Product — минимально жизнеспособный продукт). То есть базовая версия товара, услуги или сервиса с минимальным набором возможностей.

Пример нарисованного интерфейса приложения

Тестирование 

Пришло время опробовать прототип на аудитории. Для этого можно собрать фокус-группу и попросить ее протестировать ваш продукт. 

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

Инструменты дизайн-мышления

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

Визуализация

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

Способы визуализации:

• диаграммы и графики;
• концептуальные карты;
• шаблоны;
• рисунки и анимация.

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

Пример из мультсериала «Звездная принцесса и силы зла»

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

Mind maps (карта мыслей)

Майндмэп — метод генерации идей и визуализации данных.

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

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

Анализ ценностной цепочки

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

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

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

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

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

Тестирование предложений

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

Тестирование гипотез включает 4 этапа:

1. Создание ценности. Опишите задачи, которые клиент сможет решить с помощью вашего продукта.
2. Реализация идеи. Убедитесь, что продукт действительно будет решать эти задачи.
3. Масштабы применения. Проанализируйте, насколько продукт будет востребован. В нем нуждается пара человек или большая группа людей?
4. Пригодность. Сделайте вывод о пригодности вашей идеи.

Работа в команде

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

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

Дизайн-фреймы 

Фрейм (от англ. frame) переводится как «рамка». Образно говоря, это ограниченная рабочая область, внутри которой располагаются разные элементы. Если речь идет о дизайне сайта, внутри фрейма будут находиться заголовки, блоки информации, изображения и кнопки. 

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

Пример дизайн-фрейма — шаблон «Фотостудия» в конструкторе сайтов Craftum 

Дизайн-мышление в разработке сайтов

Дизайн-мышление активно применяется в бизнесе. Специалисты отмечают, что это универсальный метод. Его используют для решения задач в разных областях, от бьюти-индустрии до IT-технологий. Design-thinking может помочь как в разработке товаров и услуг, так и бизнес-процессов. Например, стратегии продвижения бренда или модели службы поддержки клиентов. 

Также данная методология распространена в сфере UX/UI и веб-дизайна. Ее используют многие крупные компании для создания онлайн-сервисов. В их числе ВТБ, ЦИАН, Samsung, Netflix и другие.

Рассмотрим кейс сервиса аренды жилья Airbnb. Авторы проекта — дизайнеры Брайан Чески и Джо Геббиа. Продумывая концепцию сайта airbedandbreakfast.com, они воспользовались дизайн-мышлением. Поставили себя на место путешественников и спросили себя: что важно человеку, который оказался в другой стране? В первую очередь — безопасность. 

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

Пример с сайта Airbnb

Как применить дизайн-мышление при создании сайтов

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

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

Чтобы найти ответы на эти вопросы, нужно пройти все этапы дизайн-мышления.

1. Поставить себя на место пользователя, то есть проявить эмпатию. Можно нарисовать карту пути пользователя — как человек взаимодействует с сайтом. Если вы работаете над улучшением проекта, стоит изучить отчетность, например в Яндекс Метрике или Google Analytics, и посмотреть, на каком этапе люди чаще всего прерывают покупку и покидают сайт.
2. Это поможет выявить потребности и проблемы пользователей и сфокусироваться на них.
3. Далее можно приступать к генерации идей. Продумать разделы, функции и структуру сайта, предложить варианты дизайна. Например, если пользователи заходят на сайт посмотреть, как добраться до вашей компании, не помешает раздел «как нас найти» со встроенной картой. А если их главная цель — покупка, нужно удобно оформить корзину и настроить способы оплаты для клиентов разных банков.
4. Перед тем, как приступать к делу, нужно отобрать хорошие и свежие идеи, а от банальных и нереализуемых отказаться.
5. Чтобы проверить идею и убедиться, что она решает задачи пользователя, нужно создать прототип веб-страницы — дизайн-фрейм. Если есть возможность, можно сделать несколько вариантов и из них выбрать лучший. 
6. И последний шаг — тестирование. Нужно собрать фокус-группу и попросить ее опробовать сайт. Если в процессе выяснится, что каких-то функций или разделов не хватает, добавить их. Если какую-то информацию сложно найти — сделать ее более видимой, выделив ее цветом или поработав над структурой сайта. Другими словами, все замечания пользователей нужно будет учесть и исправить.

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

Преимущества дизайн-мышления в создании сайтов

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

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

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

1. Поверхностное исследование. Чтобы найти реальную проблему, которую можно решить с помощью дизайна, нужно изучить разные пользовательские сценарии. Если ограничиться всего одним, финальный продукт может оказаться не таким удобным и полезным, как кажется его разработчикам. Потребности довольно большой части клиентов так и не будут удовлетворены.
2. Односторонний взгляд на проблему. Если решением задачи занимается веб-дизайнер в одиночку, он может не учесть технические нюансы работы сайта. Чтобы избежать проблем с реализацией, к генерации идей нужно подключать команду. Помимо дизайнера в брейншторминге могут участвовать, например, backend-разработчик, frontend-разработчик и маркетолог.
3. Критика идей. Это не только тормозит творческий процесс, но и ставит под угрозу действительно классные идеи. Возможно, некоторые из них на первый взгляд кажутся сумасшедшими и нереализуемыми, но на деле все оказывается не так страшно.

Заключение

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

Метод позволяет оставаться бизнесу гибким, подстраиваться под клиентов и постоянно совершенствовать свой продукт. Главное в процессе дизайн-мышления — не бояться думать масштабно и оригинально, генерировать и тестировать интересные идеи. 

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