Использование 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-студия», «Разработчик дизайна мобильных приложений». И всегда первый обязательный этап нашей работы над созданием интернет-магазина — получение аналитики.
Веб-дизайнер с маркетинговым подходом:
- Разбирается в web-аналитике. Анализирует карту поведения пользователей, «тепловые карты» страниц сайта, карты кликов; проводит анализ главной страницы, страниц каталога, карточек товаров, корзины, страницы доставки и т. п.Это необходимо для того, чтобы понимать «белые пятна»: где чаще всего сливаются продажи, и где самое слабое место в воронке. Туда в первую очередь направляют силы по редизайну;
- Понимает важность сведений. О самой платёжеспособной аудитории, самых высокомаржинальных товарах, самых популярных группах товаров; умеет их анализировать и применять таким образом, чтобы рентабельность сайта росла. Умеет извлекать пользу из данных сквозной аналитики и когортного анализа из CRM/ERP. Если сквозной аналитики нет, ее нужно подключить; достаточное количество данных будет через две недели;
- Знает рекомендации для данной ниши от Baymard Institute. Может оценить их актуальность и эффективно использовать в своей работе.
Почему анализу юзабилити сайтов от Baymard Institute можно доверять?
- База для их исследований — более сотни интернет-магазинов в разных нишах. Чаще всего это магазины в США, и есть небольшая вероятность местечковых особенностей. Но по нашему опыту пока не было никаких противоречий между тем, что работает у них и что — в России.
- Вместе с нами эти данные используют более 3000 компаний в e-Commerce и дизайнеры UX в более чем 80 странах мира; только в России их пока что немного. Среди их клиентов — более 70 % компаний электронной коммерции из списка Fortune 500.
- Работают с 2009 года — опытные ребята.
- Вся наша практика подтверждает, что эти данные справедливы и действительно улучшают юзабилити сайтов, повышают конверсию и помогают нашим клиентам зарабатывать больше. Довольные клиенты не врут :)
Выгоды заказчика от использования UX-аналитики Baymard.
- Это упрощает процесс принятия решений. Не спать ночами в раздумьях на тему «Сказать ли дизайнеру, чтобы переделал кнопку оплаты заказа из синей в зелёную» — в прошлом! Читаем аналитическое исследование и понимаем, что цвет кнопки не влияет на конверсию, а вот размер может повлиять — с конкретным указанием, сколько мм лучше.
- Снижает вероятность роковых ошибок, которые могли бы стоить больших денег. Минимальное влияние человеческого фактора, всё по науке.
- Повышает конверсию, увеличивает прибыль. Все рекомендации имеют своей целью быстро, часто и много конвертировать посетителей сайта в продажи.
- Помогает опередить конкурентов. Чем лучше дизайн и юзабилити вашего интернет-магазина, тем крупнее слеза вашего соперника, клиенты которого уходят к вам (вместе с денежками).
- С помощью этой аналитики мы лучше понимаем тренды будущих лет. А значит, наши проекты будут актуальны ещё долго.
Baymard Institute не единственный, но очень полезный источник аналитических данных для современного data-ориентированного дизайна.
Он помогает нам максимально эффективно работать над проектами и делать наших клиентов лидерами в своих нишах.
А вы знали об этом ресурсе? Чем обычно пользуетесь для дизайн-аналитики?
Поддержите нас, если материал оказался полезным! А мы постараемся не медлить с продолжением этой истории в виде путеводителя по типичным ошибкам в UX-дизайне интернет-магазинов ;)
Разобрали бы пятёрку рекомендаций Baymard Institute, статья была бы интересней.
В следующую статью включим, будет много примеров ;)
".. сколько мм лучше." (для кнопки) - это топ 🤣
Жертва технопранка "Кнопочка": https://vocaroo.com/i/s17jDLXzkVpR
Классика, сапожник без сапог. Подкрутите навигацию с клавиатуры на своем сайте.
Привет, что ты имеешь ввиду? У нас работает клавиатурная навигация.
Я не говорил что она не работает. Порядок прехеода табом непонятный.
Таб на первом экране: fb - Be - Inst - Showreal - Vk - Лого - Меню в обратном порядке - Расчитать проект.
Таб на втором экране: Презентации - Графический дизайн - Картинка презентаций - Картинка - графическикй дизайн - непонятно куда следующий таб. Ссылки и не ссылки выглядят одинаково (Маркетинговые активности и Лендинги).
Ну и дальше вообще оч сложно табом.