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

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

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

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

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

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

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

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

Основные приёмы

Корзина и чекаут — чуть ли не самая важная часть сайта. Именно здесь пользователь принимает окончательное решение: купить или забыть.

Крупные e-commerce используют следующие UX-приёмы:

  1. Корзина сохраняется до следующего посещения. Конечно, если клиент не сотрёт файлы cookie. Исключение: магазины, которые быстро распродают запасы. В этом случае товары при добавлении в корзину резервируются — чтобы их не утащил другой покупатель, пока вы оформляете заказ. Магазин предупредит, что корзина будет автоматически очищена через какое-то время (Asos).
  2. Товары можно заказать без регистрации. Для этого на сайтах есть отдельная кнопка: «Купить в 1 клик» или «Купить без регистрации».
  3. Корзина и чекаут расположены на разных страницах. Когда между этими частями сайта есть явный переход, пользователь замечает начало оформления — и случайных заказов становится меньше.

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

Создать дополнительную корзину

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

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

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

На сайте ОНЛАЙН ТРЕЙД.РУ можно создать несколько корзин

С дополнительными корзинами удобно готовиться к праздникам. Если до Нового года ещё далеко, а идеальный подарок попался на глаза сейчас — можно сразу добавить его в новогоднюю корзину.

Чтобы поменять корзину, нужно кликнуть на иконку в шапке или нажать «Переложить» в поп-апе при добавлении товара

Где применить

Дополнительные корзины подойдут любому магазину с большим ассортиментом.

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

Быстро добавить товары

В строительных магазинах Петрович и ВсеИнструменты.Ру в корзине можно воспользоваться дополнительным полем поиска. С его помощью удобно добавлять товары в корзину без перехода в каталог.

Строителям часто нужна мелочёвка, которую легко забыть. Удобно, когда не нужно лезть обратно в каталог

Где применить

Поле поиска будет полезной частью корзины профессионального магазина.

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

Поменять размер

На сайте Asos можно поменять размер одежды прямо в корзине, через выпадающий список. Удобно, ничего не скажешь.

Для применения изменений страницу нужно обновить — Asos резервирует товары при добавлении в корзину

Где применить

Быстрое изменение характеристик товара в корзине будет уместно смотреться не только в магазинах одежды. Тем же способом можно менять цвет и количество памяти iPhone или размер матраса в IKEA.

Получить товар со склада

В DNS у покупателя есть выбор: получить товар из запасов в магазине или заказать его со склада. Иногда за покупку со склада полагается скидка.

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

Где применить

В крупных ecommerce-проектах, у которых есть магазины в офлайне.

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

Заказать доставку на такси

М.Видео и Эльдорадо за дополнительную плату предлагают отправить товар с таксистом — это быстрее, чем ждать фирменного курьера.

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

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

Где применить

Везде, где товары лёгкие и помещаются в такси.

Конечно, если вы крупная сеть и не боитесь брать на себя дополнительные риски по доставке таксистами. Всё-таки качество работы своих курьеров контролировать проще.

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

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

Следующие материалы будут посвящены каталогу и разделу со скидками.

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

5252
8 комментариев

У Асос спорное обновление. Кажется, было бы удобнее, чтобы не было кнопки Обновить, а после выбора размера корзина обновлялась автоматически, выдавая сообщение, что обновлено. 

1
Ответить

У Asos адаптивный сайт, и возможно это сделано с учётом UX мобильных пользователей — когда с мобилы меняешь селект, может быть не очень комфортно, что сразу что-то меняется.

Ответить

В DNS получить товар со склада скорее всего равносильно купить его в их же интернет-магазине Технопоинт, в котором на товары цена ниже и выдача происходит со склада.

1
Ответить

Спасибо за статью! Подчерпнул для себя полезные моменты.

1
Ответить

Спасибо, Дмитрий!

Ответить

Из интересного только новогодняя корзина. 

Ответить