UX-дизайн интернет-магазина: свежие фишки для промокодов, акций и распродаж

Внутри статьи короткие видео с UX-приёмами, которые используют маркетплейсы и онлайн-магазины. Этот материал — часть исследования: мы изучили UX-дизайн 20 крупнейших сайтов российского e-commerce.

В Ratio мы занимаемся веб-разработкой: создаём на заказ сайты и веб-сервисы, в том числе интернет-магазины. В этом году провели исследование, чтобы понимать, в какую сторону развивается UX в онлайн-торговле.

Я директор и участвовал в исследовании как консультант, а сотрудники Ratio собирали и анализировали UX-решения. Данные в этой статье актуальны на декабрь 2020 года.

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

Чтобы гарантированно прочитать все статьи, подписывайтесь на мой телеграм-канал @panfilovonline — там я буду выкладывать ссылки по мере их появления.

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

Скорее кажется странным, когда человек покупает товар по полной цене. Сэкономить 10-15% можно всегда, достаточно потратить пару минут на поиски подходящего промокода или подписаться на рекламную рассылку в обмен на скидку.

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

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

UPD: В первые дни акции скидка по умолчанию была отключена, но теперь сайт сам активирует её при переходе в карточку товара. Это работает против первоначальной концепции и похоже на вынужденный шаг. Видимо, не все покупатели поняли механику акции.

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

Книжный магазин Book24 применяет на сайте практики геймификации, обычно характерные для социальных сетей. «Скидка за смекалку» — элементарный ребус, за решение которого полагается промокод.

Также мы наткнулись на спорный способ геймификации, который не каждый интернет-магазин захочет применять. Связной использует механику, похожую на казино или лутбоксы в видеоиграх. Правда, здесь клиент ничем не рискует (если не считать риском подписку на рекламный спам).

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

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

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

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

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

Также OZON довольно прямолинейно трактует слово marketplace (по-русски «рынок»). Пару недель назад сайт добавил возможность торговаться с продавцами: нажимаете на кнопку «Хочу скидку», пишете свою цену и, если продавец согласится, сделка пройдёт на ваших условиях.

Продавец может принять решение в течение 48 часов. Если за это время он не посмотрел заявку, покупатель получит автоматический отказ.

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

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

Из приложений формат сторис потихоньку переезжает в веб. Пока он воспринимается не очень естественно: область просмотра слишком маленькая, на экране остаётся много неиспользуемого пространства.

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

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

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

Чтобы не пропустить другие материалы с результатами исследования, подписывайтесь на мой телеграм-канал @panfilovonline. Следующая статья будет посвящена каталогу.

Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.