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

Когда речь идет о создании IT-продуктов, дизайнеру важно не только делать продукт красивым и удобным, но и основывать свои решения на реальных данных. Здесь на помощь приходят метрики. Они показывают, как пользователи взаимодействуют с продуктом, что работает хорошо, а что нет. Без метрик мы можеи только гадать, что нужно улучшить. Но когда у тебя есть данные, ты видишь, что происходит на самом деле, и можешь точечно улучшать продукт.

Метрики дают ответы на такие вопросы:

• Как пользователи ведут себя в вашем продукте?

• Какие экраны или функции вызывают наибольший интерес?

• Где пользователи чаще всего ошибаются или покидают продукт?

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

Метрики как основа для принятия решений

Метрики — это не просто числа и графики, это данные которые принимать правильные решения на каждом этапе разработки.

Как метрики помогают понять поведение пользователя?

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

• Какие экраны пользователи посещают чаще всего?

• На каких шагах они покидают продукт?

• Какие функции или элементы продукта игнорируются?

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

Почему данные важны на каждом этапе?

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

Работа с существующими метриками

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

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

Ищите точки отказа (drop-off points)

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

Что сделать:

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

• Сократить лишние поля и экраны.

Анализируйте популярные экраны и элементы

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

Что сделать:

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

• Если важные элементы остаются незамеченными, попробуй изменить их расположение, размер или цвет. Например, CTA кнопка “Оформить заказ” должна выделяться на фоне остальных элементов интерфейса.

Следите за скоростью загрузки экранов

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

Что сделать:

• Если загрузка медленная, попроси инженеров оптимизировать ресурсы (картинки, скрипты и т.д.)

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

Ставьте гипотезы и тестируйте изменения

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

Что сделать:

• Внедряье изменения постепенно, а не сразу.

• Используй A/B тестирование, чтобы сравнить несколько вариантов.

Работайте вместе с командой инженеров

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

Что сделать:

• Регулярно проводите сессии с инженерами, чтобы обсудить данные и улучшения

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

Что делать, если метрик нет?

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

Продукт без аналитики. Если у клиента еще нет метрик, первым делом я прошу команду разработки добавить Custom events (пользовательские события) для интерактивных зон. Эти события помогут отслеживать, как пользователи взаимодействуют с продуктом: какие кнопки они нажимают, как двигаются по экранам, где бросают задачу. Пока метрики собираются, можно начать  работу над улучшением UI/UX на основе гипотез.

Как работать без метрик:

Добавить Custom events (на простом примере)

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

Пример:
Допустим, у тебя есть кнопка “Оформить заказ”, и вы хотите узнать, сколько пользователей нажимают на неё, нужно добавить Custom event, который срабатывает при каждом клике на эту кнопку.

button.addEventListener('click', function() { analytics.track('Order Button Clicked');});

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

Что сделать:

• Определи ключевые действия, которые важно отслеживать

• Добавить Custom events для этих действий.

•  Начинать собирать данные и использовать их в работе.

Формулируйте гипотезы для улучшения

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

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

Что сделать:

• Сформулировать гипотезы, которые мы сможешь протестировать, как только появятся данные.

• Начинать работу над улучшениями на основе этих гипотез.

Ставьте цели и следите за ними

Как только разработчики внедрят Custom events, и мы начинаем получать первые данные, важно сразу определить ключевые показатели успеха (KPI). Например, это может быть процент завершённых регистраций, количество кликов на кнопку “Оформить заказ” или время, проведённое на ключевых экранах.

Что сделать:

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

• Настроить дашборд, где мы сможешь отслеживать метрики в реальном времени.

• Следить за тем, как изменения влияют на показатели, и вносить дальнейшие изменения в дизайн.

Адаптируйтесь по мере поступления данных

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

Что сделать:

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

• Экспериментируте и тестируйте новые гипотезы.

Проектирование нового продукта с нуля

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

Проектирование начинается с набросков (scratch-версий), и уже на этом этапе можно предусмотреть использование метрик в будущем.

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

Вот несколько практических шагов, которые вам помогут:

Начните с исследования аудитории и конкурентов

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

Что сделать:

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

• Проанализировать продукты конкурентов.

Создавайте драфт-версии и wireframes

Не начинайте с высокоточных (high-fidelity) макетов сразу, делайте wireframes, чтобы быстро протестировать идеи и понять, как будет выглядеть структура продукта. Этот этап позволяет быстро вносить изменения без больших затрат времени.

Что сделать:

• Начать с простых набросков (бумажных или цифровых), чтобы определить общую структуру продукта.

• Протестировать наброски. Это поможет быстро выявить проблемы на ранних стадиях.

• Заложите основы для аналитики с самого начала.

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

Что сделать:

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

• Согласовать с разработчиками, что нужно будет отслеживать.

Тестируйте low-fidelity дизайн на реальных пользователях

Как только рание прототипы готовы (например, wireframes или low-fidelity макеты), начните тестировать их на реальных пользователях. Даже на этой стадии тестирование поможет выявить крупные проблемы, такие как сложная навигация или неудобные процессы.

Что сделать:

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

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

Переходите к high-fidelity и финальному дизайну

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

Что сделать:

• Создать финальные макеты, добавив все визуальные элементы и анимации.

• Внедрить все необходимые Custom events и другие инструменты для аналитики на основе ранее обсуждённых метрик.

Метрики и командная работа

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

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

Регулярные встречи для обсуждения данных

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

Что сделать:

• Запланировать еженедельные или двухнедельные встречи с командой.

• Анализировать, какие гипотезы подтвердились, а какие — нет.

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

Совместное принятие решений на основе данных

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

Что сделать:

• Вовлекать инженеров в процесс анализа метрик.

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

• Придумывайть решения и тестировать их совместно.

Разработчики как ключевые партнёры в работе с метриками

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

Что сделать:

• Работать с разработчиками над внедрением метрик с самого начала.

• Проверить, что можно улучшить на уровне кода (оптимизация загрузки, уменьшение объема файлов и т.п.).

Клиенты и стейкхолдеры тоже должны понимать метрики

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

Что сделать:

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

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

Регулярный анализ и итерации

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

Что сделать:

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

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

Заключение

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

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

Выводы:

1. Метрики как основа для UI/UX-улучшений

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

2. Работа с продуктами без метрик

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

3. Проектирование с нуля

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

4. Командная работа

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

Важность постоянного анализа

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