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

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

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

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

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

Магазины, которые попали в исследование. Юлмарт в этом году закрылся, но мы успели посмотреть его UX
Магазины, которые попали в исследование. Юлмарт в этом году закрылся, но мы успели посмотреть его UX

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

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

Геймификация акций

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

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

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

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

Активируемая скидка в М.Видео. Переключатель можно не заметить и тогда придётся купить вещь по полной цене — мир жесток

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

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

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

«Один дома» знают все, поэтому по факту скидку получит каждый покупатель. Но приятно, когда создаётся хотя бы видимость действия — чувствуешь, что промокод ты честно заработал
«Один дома» знают все, поэтому по факту скидку получит каждый покупатель. Но приятно, когда создаётся хотя бы видимость действия — чувствуешь, что промокод ты честно заработал

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

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

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

Связываться с азартными играми захотят не все компании, но концепция выглядит интересно (<i>Связной</i>)
Связываться с азартными играми захотят не все компании, но концепция выглядит интересно (Связной)

Офлайновый опыт

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

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

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

Пользоваться купонами удобнее, чем промокодами (OZON)

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

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

Продавец может отключить кнопку «Хочу скидку», но по умолчанию она включена на всех товарах (OZON)

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

Зачем нужен офлайн-буклет в онлайне? Загадка от Эльдорадо

Сторис в вебе

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

Магазины рассказывают в сторис о свежих акциях и рекомендуют сезонные подборки товаров (<i>OZON</i>)
Магазины рассказывают в сторис о свежих акциях и рекомендуют сезонные подборки товаров (OZON)

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

OZON позволяет смотреть сторис в вебе. Интересно, что в мобильной версии сайта историй нет — они появляются только на десктопе и в приложении

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

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

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

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

Подписывайтесь на Telegram-канал

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

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

1919
2 комментария

Комментарий недоступен

Ответить

Александр, спасибо! Мы старались — хорошо, если это приносит пользу.

Ответить