Использование UX-аналитики Baymard Institute в дизайне интернет-магазинов

Делимся факапом, после которого мы познакомились с Baymard Institute, а наши дизайнеры прокачались и стали дизайнерами-аналитиками.

В закладки

А цены почему не красные?

Это случилось несколько лет назад. Команда TSEKH'а защищала готовый проект. Клиенты были из США; почти год мы делали им маркетплейс для американского рынка. Сделали круто, защищаем, ожидаем оваций. И видим, что у клиентов всё больше и больше округляются глаза, и есть некое недопонимание. После презентации слышим странный вопрос: «А цены почему не красные???»

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

Если бы тогда мы использовали аналитику Baymard Institute, то наверняка знали бы, что лучшие показатели конвертируемости в покупку в этом сегменте дают именно карточки с красным цветом цены. Либо могли бы предоставить клиенту чёткие аргументы, почему цена НЕ должна быть красного цвета, или почему ЛЮБОЙ цвет одинаково хорош.

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

Data-driven design

Маркетинговый подход к дизайну на основании статистики, исследований и аналитики называется data-driven design. А проверенный источник нужных для этого данных, мировой авторитет, которому доверяют Walmart, Nike, Columbia Sportswear, Sony и мы, — это независимая web-исследовательская организация Baymard Institute.

Помните шутку про семь прямых красных линий, часть из которых — зелёные, часть — прозрачные, а одна в форме котёнка? В data-driven design такого нет — если аналитика скажет, что конвертируют в продажу только прозрачные линии, значит, будем использовать именно их, а у котёнка нет шансов. И наверняка в Baymard Institute уже есть исследование о влиянии прозрачных линий на поведение посетителя сайта.

Сегодня за плечами web-студии TSEKH — более 30 проектов для электронной торговли. Три наши работы за 2018 год вошли в топ Behance Interaction, мы несколько раз входили в топ «Рейтинга Рунета» в номинациях: «Разработчик интернет-магазинов в премиум ценовом сегменте (отрасль: „Одежда, обувь")», «Web-студия», «Разработчик дизайна мобильных приложений». И всегда первый обязательный этап нашей работы над созданием интернет-магазина — получение аналитики.

Веб-дизайнер с маркетинговым подходом:

  1. Разбирается в web-аналитике. Анализирует карту поведения пользователей, «тепловые карты» страниц сайта, карты кликов; проводит анализ главной страницы, страниц каталога, карточек товаров, корзины, страницы доставки и т. п.Это необходимо для того, чтобы понимать «белые пятна»: где чаще всего сливаются продажи, и где самое слабое место в воронке. Туда в первую очередь направляют силы по редизайну;
  2. Понимает важность сведений. О самой платёжеспособной аудитории, самых высокомаржинальных товарах, самых популярных группах товаров; умеет их анализировать и применять таким образом, чтобы рентабельность сайта росла. Умеет извлекать пользу из данных сквозной аналитики и когортного анализа из CRM/ERP. Если сквозной аналитики нет, ее нужно подключить; достаточное количество данных будет через две недели;
  3. Знает рекомендации для данной ниши от Baymard Institute. Может оценить их актуальность и эффективно использовать в своей работе.

Да, в web-студии TSEKH мы используем данные не только от Baymard, но и из многих других источников. Это необходимо для более широкого обзора на все 360 градусов. Если вам интересно узнать об этом подробнее — спросите нас :)

Почему анализу юзабилити сайтов от Baymard Institute можно доверять?

  • База для их исследований — более сотни интернет-магазинов в разных нишах. Чаще всего это магазины в США, и есть небольшая вероятность местечковых особенностей. Но по нашему опыту пока не было никаких противоречий между тем, что работает у них и что — в России.
  • Вместе с нами эти данные используют более 3000 компаний в e-Commerce и дизайнеры UX в более чем 80 странах мира; только в России их пока что немного. Среди их клиентов — более 70 % компаний электронной коммерции из списка Fortune 500.
  • Работают с 2009 года — опытные ребята.
  • Вся наша практика подтверждает, что эти данные справедливы и действительно улучшают юзабилити сайтов, повышают конверсию и помогают нашим клиентам зарабатывать больше. Довольные клиенты не врут :)

Выгоды заказчика от использования UX-аналитики Baymard.

  • Это упрощает процесс принятия решений. Не спать ночами в раздумьях на тему «Сказать ли дизайнеру, чтобы переделал кнопку оплаты заказа из синей в зелёную» — в прошлом! Читаем аналитическое исследование и понимаем, что цвет кнопки не влияет на конверсию, а вот размер может повлиять — с конкретным указанием, сколько мм лучше.
  • Снижает вероятность роковых ошибок, которые могли бы стоить больших денег. Минимальное влияние человеческого фактора, всё по науке.
  • Повышает конверсию, увеличивает прибыль. Все рекомендации имеют своей целью быстро, часто и много конвертировать посетителей сайта в продажи.
  • Помогает опередить конкурентов. Чем лучше дизайн и юзабилити вашего интернет-магазина, тем крупнее слеза вашего соперника, клиенты которого уходят к вам (вместе с денежками).
  • С помощью этой аналитики мы лучше понимаем тренды будущих лет. А значит, наши проекты будут актуальны ещё долго.

Baymard Institute не единственный, но очень полезный источник аналитических данных для современного data-ориентированного дизайна.

Он помогает нам максимально эффективно работать над проектами и делать наших клиентов лидерами в своих нишах.

А вы знали об этом ресурсе? Чем обычно пользуетесь для дизайн-аналитики?

Поддержите нас, если материал оказался полезным! А мы постараемся не медлить с продолжением этой истории в виде путеводителя по типичным ошибкам в UX-дизайне интернет-магазинов ;)

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Артем Мальгин", "author_type": "self", "tags": [], "comments": 7, "likes": 4, "favorites": 29, "is_advertisement": false, "subsite_label": "design", "id": 82336, "is_wide": false, "is_ugc": true, "date": "Mon, 09 Sep 2019 17:38:30 +0300", "is_special": false }
0
{ "id": 82336, "author_id": 358578, "diff_limit": 1000, "urls": {"diff":"\/comments\/82336\/get","add":"\/comments\/82336\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/82336"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
7 комментариев
Популярные
По порядку
Написать комментарий...
1

Разобрали бы пятёрку рекомендаций Baymard Institute, статья была бы интересней.

Ответить
0

В следующую статью включим, будет много примеров ;)

Ответить
0

".. сколько мм лучше." (для кнопки) - это топ 🤣

Ответить
–1

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

Ответить
0

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

Ответить
0

Я не говорил что она не работает. Порядок прехеода табом непонятный.

Таб на первом экране: fb - Be - Inst - Showreal - Vk - Лого - Меню в обратном порядке - Расчитать проект.
Таб на втором экране: Презентации - Графический дизайн - Картинка презентаций - Картинка - графическикй дизайн - непонятно куда следующий таб. Ссылки и не ссылки выглядят одинаково (Маркетинговые активности и Лендинги).

Ну и дальше вообще оч сложно табом.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }