Содержание:
Как создаются эффективные дизайны.
Методы, которые стоит внедрить в свой дизайн‑процесс
Как создать дизайн, который попадет точно в запросы пользователей и принесет продукту рост ключевых метрик? В статье расскажу, какие для этого применяются методы и как они влияют на конечный результат. Не буду углубляться в детали, а покажу весь процесс и взаимосвязи, выстроив их для вас в понятную цепочку.
Из чего состоит дизайн и что делает его эффективным?
Исследование рынка и пользователей. Что подсказывает нам рынок и как проводятся UX-исследования?
Проектирование визуального образа. Как синхронизировать его с брендом?
Создание интерфейса. Как в этом помогают дизайн-системы?
Оценка эффективности дизайна. Как собирать и оценивать продуктовые метрики?
Подводим итоги. Ключевые аспекты в создании эффективного дизайна
Из чего состоит дизайн и что делает его эффективным?
Чтобы в этом разобраться, посмотрим на процесс его создания.
Вот так выглядит дизайн-процесс
У каждой фазы есть свои особенности и секреты. Разберёмся, как создать грамотный и эффективный дизайн, следуя этим этапам — шаг за шагом:
- Discover — исследование рынка и пользователейРасскажу о пользе проведения исследований, их тонкостях и приведу реальные примеры, которые помогут определить целевую аудиторию и её потребности
- Define — проектирование визуального образаПоделюсь методами, как на основе исследований создать образ бренда, который будет откликаться пользователям
- Develop — создание интерфейсаПоговорим о том, как ускорить процесс создания дизайна и его разработку в несколько раз
- Deliver — оценка эффективности дизайнаРасскажу, как правильно обрабатывать результаты дизайна и влиять на продуктовые метрики
Discover — исследование рынка и пользователей
Создание дизайна — искусство, но не только. Чтобы дизайн решал реальные проблемы пользователей и был актуален для рынка, перед его проектированием проводятся исследования. Это одна из самых важных фаз в разработке продукта — без неё мы рискуем создать решение, не нужное для конечного потребителя.
Давайте разберёмся, как проводятся такие исследования.
Давайте разберёмся, как проводятся такие исследования.
Исследование рынка. Что подсказывает нам рынок и как учиться на ошибках конкурентов?
Чтобы понять, в каком направлении двигаться и какие решения будут наиболее эффективными, проводится исследование рынка. Делается это, как правило, в два этапа:
1. Анализ рынка
На первом этапе мы изучаем сам рынок, чтобы понять текущие тренды, конкурентную среду и определить сегменты целевой аудитории. Это поможет нам адаптировать продукт под их потребности и предпочтения.
На первом этапе мы изучаем сам рынок, чтобы понять текущие тренды, конкурентную среду и определить сегменты целевой аудитории. Это поможет нам адаптировать продукт под их потребности и предпочтения.
Пример анализа рынка, который мы провели для wcv — сервиса по развитию личного бренда
2. Анализ конкурентов
Далее мы смотрим, как конкуренты подходят к дизайну своих продуктов, анализируем их стратегии, решения и ошибки. Это позволит нам научиться на их опыте и создать наиболее привлекательный дизайн.
Далее мы смотрим, как конкуренты подходят к дизайну своих продуктов, анализируем их стратегии, решения и ошибки. Это позволит нам научиться на их опыте и создать наиболее привлекательный дизайн.
Матрица конкурентов wcv
Благодаря результатам этого исследования мы получим обобщённое понимание, рыночных трендов и поймём, кто наша целевая аудитория и как с ней взаимодействуют конкуренты.
UX-исследования. Как понять, что нужно пользователям?
Теперь остаётся погрузиться в детали и определить, что именно хотят пользователи. В этом нам помогут UX-исследования — с помощью них мы узнаем, как спроектировать удобный для пользователей дизайн.
UX-исследования помогают понять мотивы и потребности пользователей. Вот наиболее эффективные из них методы:
UX-исследования помогают понять мотивы и потребности пользователей. Вот наиболее эффективные из них методы:
- ОпросБыстрый и легко масштабируемый метод, заключается в сборе и анализе отзывов. Он помогает понять, насколько масштабна проблема или тенденция по отношению к определенной теме
- Глубинные интервьюНа основе заранее составленных вопросов респонденты подробно рассказывают о своих пожеланиях и проблемах, связанных с продуктом. Помогает детально погрузиться в проблемы и потребности аудитории
- Юзабилити-тестированиеПотенциальному пользователю дают задание, которое он выполняет, а потом рассказывает, насколько удобно было взаимодействовать с интерфейсом
- Фокус-группаВстреча с группой из 6−9 человек для обсуждения вопросов и проблем, связанных с использованием продукта. Помогает выявить предпочтения пользователей в процессе коллективного обсуждения
Для того, чтобы результат исследований был качественным, методы лучше использовать вместе. Так мы получим объёмное понимание, что именно нужно пользователям и выстроим взаимосвязи между их проблемами, потребностями и мотивами.
Результаты UX-исследований, представленные в виде дерева проблем
Способы интерпретации результатов исследований — о популярных методах — JTBD, CJM и других
Итак, мы провели исследования и получили результаты. Что с ними делать?
Существует несколько методов, которые помогают правильно интерпретировать результаты и на их основе сделать выводы:
Существует несколько методов, которые помогают правильно интерпретировать результаты и на их основе сделать выводы:
- Метод персонЗаключается в проработке и визуализации целевой аудитории. Представьте, что у вас есть вымышленные персонажи, которые пользуются вашим продуктом — вам нужно продумать их имя, характеристики, потребности, интересы и т. д. Так вы можете лучше понять их образ и получить структурное представление своей аудитории
- Jobs to be Done (JTBD)Помогает понять, какие задачи и проблемы персоны хотят решить с помощью продукта. JTBD фокусируется на том, что пользователи хотят достичь, а не на том, как они это делают. На выходе получаются Job Stories — ёмкие формулировки, содержащие мотивы и условия, при которых пользователи хотят пользоваться продуктом
- Customer Journey Map (CJM)Показывает путь пользователя во время решения своей задачи — от первого контакта до финальной точки взаимодействия. CJM помогает понять, как пользователи должны взаимодействовать с продуктом и какие эмоции у них будут возникать. С её помощью мы сможем понять, какой функционал нужен пользователям
- User FlowПомогает собрать в одном месте все сценарии взаимодействия пользователей с продуктом и выстроить между ними взаимосвязи. На основе этого метода можно уже рисовать прототипы, для которых потом будет сделан дизайн
Этими методами лучше пользоваться в связке друг с другом. Например, как в этом кейсе:
Define — проектирование визуального образа
Итак, мы провели исследования и выделили оттуда ценные инсайты. Пора применить их на практике.
Чтобы дизайн отражал основную идею компании, нужно правильно подобрать для него визуальный стиль. Цвета, шрифты, графические элементы — всё это создаёт уникальный образ и делает интерфейс гармоничным. Для этого определимся, что стоит за брендом компании — в этом нам поможет пирамида его ценностей.
Чтобы дизайн отражал основную идею компании, нужно правильно подобрать для него визуальный стиль. Цвета, шрифты, графические элементы — всё это создаёт уникальный образ и делает интерфейс гармоничным. Для этого определимся, что стоит за брендом компании — в этом нам поможет пирамида его ценностей.
Пирамида ценностей бренда. Для чего она нужна и как её построить?
Пирамида ценностей бренда — это иерархичная визуализация ключевых атрибутов бренда. С её помощью мы сможем чётко определить, какие аспекты и смыслы нужно подчеркнуть в дизайне.
Вот, как она выглядит:
Вот, как она выглядит:
Пирамида ценностей бренда
Чтобы её построить, нужно определить:
Далее, всё, что вам останется — заполнить пирамиду сверху вниз, пользуясь картинкой выше.
О пользе этого метода из реальной практики:
- основные принципы, которые лежат в основе бренда;
- эмоции и ассоциации, которые должен вызывать бренд у потребителей;
- конкретные атрибуты продукта и его преимущества.
Далее, всё, что вам останется — заполнить пирамиду сверху вниз, пользуясь картинкой выше.
О пользе этого метода из реальной практики:
Айдентика — визуальный образ компании. Как синхронизировать её с брендом?
У нас готова пирамида ценностей бренда. Теперь мы можем рисовать айдентику (фирменный стиль) — и рисовать её осознанно. По сути, это визуальный язык, который должен передавать идентичность и ценности бренда. Именно по нему продукт и будет запоминаться.
Так, например, если одной из основных ценностей бренда является инновация, фирменный стиль должна передавать современный и передовой характер компании. Это может проявляться в использовании смелых и современных шрифтов, инновационных цветовых сочетаниях или смелых графических решениях.
Так, например, если одной из основных ценностей бренда является инновация, фирменный стиль должна передавать современный и передовой характер компании. Это может проявляться в использовании смелых и современных шрифтов, инновационных цветовых сочетаниях или смелых графических решениях.
Айдентика — всё, что связывает дизайн с брендом
Также на это есть пример:
Как написать текст, понятный и близкий целевой аудитории?
Прорабатывая пирамиду бренда, мы также определили его «характер». Он должен отражаться не только в визуальном стиле, но и в тексте. Всё, до единой строчки: заголовки, описания, текст картинок и даже кнопок — должно быть написано в едином стиле, свойственным именно этому бренду.
Здесь нам на помощь приходит Tone of Voice — «голос» нашего бренда. Он определяет, как мы разговариваем с клиентами: дружелюбно и разговорно или более официально и серьезно, в зависимости от нашей целевой аудитории. Правильно подобранный стиль речи поможет нам не только передать ценности бренда, но и сделать дизайн понятнее и удобнее, подогревая дополнительный интерес к продукту.
Здесь нам на помощь приходит Tone of Voice — «голос» нашего бренда. Он определяет, как мы разговариваем с клиентами: дружелюбно и разговорно или более официально и серьезно, в зависимости от нашей целевой аудитории. Правильно подобранный стиль речи поможет нам не только передать ценности бренда, но и сделать дизайн понятнее и удобнее, подогревая дополнительный интерес к продукту.
Develop — создание интерфейса
Когда мы определили визуальный стиль и голос бренда, можем приступать к проработке элементов интерфейса — кнопок, карточек, слайдеров и т. д. Но, открою секрет — есть способ сделать это наиболее эффективно.
Как дизайн-системы помогают создавать эффективные интерфейсы?
Если вы посмотрите на любой топовый интерфейс, вы увидите, что в нем много повторяющихся элементов — все они выглядят практически одинаково. Эти элементы называются компонентами. Они используются, чтобы не тратить время на создание каждого элемента заново.
Компоненты в Фигме
Компоненты — это как шаблоны, которые можно переиспользовать. Если вы измените один из них, эти изменения автоматически применятся ко всем остальным. Это значительно экономит время в процессе создания интерфейсов: вы делаете это один раз, а потом просто используете.
Множество таких компонентов, стилей и правил собираются в дизайн-систему. Это значительно упрощает процесс создания интерфейсов и последующей разработки — можно просто брать готовые компоненты и внедрять их в проект. Также с помощью дизайн-систем мы можем создавать удобные и консистентные интерфейсы, в которых легко ориентироваться.
Множество таких компонентов, стилей и правил собираются в дизайн-систему. Это значительно упрощает процесс создания интерфейсов и последующей разработки — можно просто брать готовые компоненты и внедрять их в проект. Также с помощью дизайн-систем мы можем создавать удобные и консистентные интерфейсы, в которых легко ориентироваться.
А вот как выглядит дизайн-система
Дизайн-системы очень выручают. Многие проекты реализуются именно с ними, например:
Deliver — оценка эффективности дизайна
Мы сделали хороший, грамотный дизайн. Определить, насколько он эффективен, нам помогут метрики. Давайте разберемся, какие из них стоит отслеживать, с помощью каких инструментов это делать и как интерпретировать полученные результаты.
Ключевые метрики продукта: конверсия, удержание пользователей, MAU
Чтобы понять, насколько наш дизайн эффективен, для начала определим, какие метрики мы будем собирать. Они помогут нам понять, насколько успешно наш интерфейс привлекает, вовлекает и удерживает пользователей.
Топ метрик, на которые стоит ориентироваться при оценке дизайна:
Топ метрик, на которые стоит ориентироваться при оценке дизайна:
- КонверсияЭффективность привлечения пользователей и выполнения ими целевых действий
- Глубина просмотраСреднее количество страниц, просматриваемых пользователем за один сеанс
- ОтказыПроцент посетителей, покинувших сайт после просмотра только одной страницы
- Среднее время просмотраСреднее время, проведенное пользователем на сайте или в приложении
- Количество сеансовКоличество раз, когда пользователь заходит на сайт/приложение за определенный период
- MAU (Ежемесячно активные пользователи)Количество уникальных пользователей, взаимодействующих с продуктом ежемесячно
- Retention Rate (Коэффициент удержания)Показатель удержания пользователей и их активности в продукте на протяжении времени
- Churn Rate (Коэффициент оттока)Процент пользователей, прекративших использование продукта за определенный период
Каждая из них даёт нам понять, как пользователи взаимодействуют с продуктом и оценить эффективность этого взаимодействия.
Как собирать продуктовые метрики? Топ аналитических сервисов, которыми я пользуюсь
Следующий шаг — сбор метрик. Расскажу о сервисах, которыми пользуюсь я сам.
- Яндекс МетрикаНа мой взгляд, самый сильный аналитический сервис, доступный в России. В нём можно и отследить конкретные метрики, и понять, как они образуются по тепловым картам и пути конкретных пользователей на сайте. Все данные обезличены
- RoistatЕщё один полезный инструмент для анализа данных о поведении пользователей. Помогает анализировать трафик, конверсии и эффективность рекламных кампаний, и главное — делает этот анализ сквозным. В Ройстате можно посмотреть, откуда пришёл пользователь, как он себя вёл и насколько результативным оказалось взаимодействие с ним для бизнеса
- Google AnalyticsКлассика в мире веб-аналитики, с помощью которой можно отслеживать поведение пользователей, конверсии и трафик. Если интегрировать его с другими сервисами (например, Google Optimize или Search Console), можно получить комплексное понимание, почему метрики получились именно такими. Гугл Аналитика идеальна при работе с зарубежными проектами, но для России всё же рекомендую пользоваться решением от Яндекса
- HotjarСервис в дополнение к Аналитике от Google. Позволяет отслеживать поведение пользователей с помощью тепловых карт и собирать обратную связь через опросы и анкеты
Все сервисы предоставляют интуитивные графики и дашборды, по которым можно отслеживать динамику изменения показателей. Это особенно полезно, когда мы внесли изменения в дизайн и хотим понять, пошли ли они нам на пользу или нет.
Выбираем способы реагирования на изменения в метриках: при чём тут HADI-цикл, гипотезы и A/B тесты?
Итак, мы заметили, что некоторые метрики не соответствуют нашим целям — нужно понять, что именно могло на них повлиять. В таких случаях можно пользоваться подходом HADI.
HADI-цикл (Hypothesize, Act, Decide, Implement) — это подход к реагированию на изменения в метриках. Сначала мы формулируем гипотезу о том, какие изменения в дизайне могут улучшить наши показатели, затем проверяем её на практике, и, на основе полученных результатов, принимаем решение о внедрении этих изменений в продукт.
HADI-цикл (Hypothesize, Act, Decide, Implement) — это подход к реагированию на изменения в метриках. Сначала мы формулируем гипотезу о том, какие изменения в дизайне могут улучшить наши показатели, затем проверяем её на практике, и, на основе полученных результатов, принимаем решение о внедрении этих изменений в продукт.
HADI-цикл
Ключевой момент в HADI – правильное формулирование гипотез. Они должны утверждать, как конкретное изменение в дизайне повлияет на определенные метрики или пользовательский опыт.
Вот несколько примеров таких гипотез:
Эти гипотезы мы проверяем и выделяем среди них те, которые положительно повлияли на целевую метрику. Делается это с помощью A/B тестов в Яндекс Метрике или Google Optimize. Суть простая: делим пользователей на две группы и предлагаем каждой из них разные варианты интерфейса — с учётом гипотезы и без неё. Получив результаты, определяем, какая версия дала лучшие показатели и внедряем её в интерфейс.
Вот несколько примеров таких гипотез:
- Изменение цвета кнопки «Купить» на более контрастный увеличит конверсию на 15% за счет повышенного внимания пользователей к данной кнопке.
- Добавление анимации загрузки на странице оформления заказа сократит время ожидания пользователя и уменьшит процент отказов на этом этапе на 15%.
- Внедрение «Быстрого просмотра» в карточках товаров увеличит их среднее время просмотра на 30% за счет повышения удобства использования интернет-магазина.
Эти гипотезы мы проверяем и выделяем среди них те, которые положительно повлияли на целевую метрику. Делается это с помощью A/B тестов в Яндекс Метрике или Google Optimize. Суть простая: делим пользователей на две группы и предлагаем каждой из них разные варианты интерфейса — с учётом гипотезы и без неё. Получив результаты, определяем, какая версия дала лучшие показатели и внедряем её в интерфейс.
A/B тестирование
Такой подход позволяет регулярно отслеживать на изменения в метриках, проводить эксперименты и оптимизировать дизайн продукта для достижения лучших результатов.
Подводим итоги. Ключевые аспекты в создании эффективного дизайна
Итак, мы прошлись по всем стадиям дизайн-процесса. Давайте еще раз взглянем на них, учитывая полученный опыт:
- DiscoverНачинаем с исследования рынка и пользователей. Мы изучаем конкурентов, анализируем тренды и собираем данные о пользовательском опыте, чтобы понять, что важно для наших пользователей и какие идеи могут помочь нам создать успешный продукт
- DefineЗатем приступаем к созданию визуального образа бренда. Составляем пирамиду ценностей бренда и на её основе подбираем подходящую айдентику и определяем звучание бренда в тексте
- DevelopФирменный стиль готов, теперь создаём сам интерфейс. Здесь лучше всего пользоваться компонентным подходом и перед проектированием интерфейса разработать дизайн-систему. Это позволит «переиспользовать» его элементы и сэкономить время на дизайн и разработку
- DeliverКогда дизайн готов, измеряем его эффективность, определив ключевые метрики, способы их сбора и реагирования на изменения. Мы генерируем и проверяем гипотезы по улучшению метрик с помощью A/B тестирования, а затем внедряем самые удачные их них в продукт
Именно так создаются дизайны, которые приносят результаты продуктам и бизнесам. Буду рад, если сегодня смог научить этому и вас!
Максим Постников
Все права на данный материал принадлежат Постникову Максиму Дмитриевичу. Статью можно свободно распространять, сохраняя авторство. Присвоение материалов или использование без указания источника запрещено и может повлечь ответственность согласно законодательству РФ.
Расскажите о своём проекте в короткой форме или свяжитесь со мной в мессенджере.
Есть задача? Давайте обсудим!
Также можно написать мне на почту hello@postnikovmd.com
Расскажите о своём проекте здесь или свяжитесь со мной в мессенджере.
Другие статьи
© 2024 Максим Постников. Все права защищены.