Data-driven дизайн: как данные помогают делать сайты, которые работают

Портной не шьёт костюм на глаз: сначала он снимает мерки. Data-driven design — тот же принцип в дизайне. Прежде чем рисовать, мы смотрим, как люди на самом деле пользуются сайтом, чего хочет бизнес и где между этими двумя желаниями пропасть. Отсюда и две буквы в нашем названии: DD+ — это data-driven design.

Почему одного вкуса недостаточно

Вкус дизайнера важен, но он отвечает на вопрос «как красиво», а не на вопрос «как работает». Спор «синяя кнопка или зелёная» можно вести бесконечно. Спор «почему 70% посетителей не доходят до формы» решается за час, если открыть аналитику.

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

Какие данные нужны дизайнеру

Не нужно собирать терабайты. Обычно хватает того, что у бизнеса уже есть:

• Веб-аналитика. Яндекс Метрика или Google Analytics: откуда приходят люди, с каких страниц уходят, где бросают форму, какую долю составляют телефоны.
• Вебвизор и карты кликов. Куда смотрят и нажимают, до какого места дочитывают, что пытаются нажать, хотя это не ссылка.
• Поисковые запросы. Какими словами люди ищут ваш продукт. Это готовый словарь для заголовков и навигации.
• Отдел продаж и поддержка. Какие вопросы клиенты задают чаще всего. Каждый частый вопрос — это недостающий блок на сайте.
• Цели бизнеса. Что считается успехом: заявки, звонки, регистрации, средний чек. Без этого непонятно, что именно мы улучшаем.

Если сайта ещё нет, данные берутся из исследования конкурентов, интервью с клиентами и статистики спроса в Яндекс Вордстате.

Как данные превращаются в макет

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

• Метрика показывает, что две трети посетителей приходят с телефона. Значит, мобильную версию проектируем первой, а не «ужимаем» десктоп.
• Вебвизор показывает, что люди долго ищут цены. Цена или понятный ориентир по стоимости поднимается выше.
• Продажи жалуются, что в заявках нет нужной информации. Форма получает одно точное поле вместо пяти общих.
• По поисковым запросам видно, что услугу называют иначе, чем в компании. Меняем названия в меню на слова клиентов.

Где здесь человек

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

Что происходит после запуска

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

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

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