UX-дизайн интернет-магазина: пять свежих фишек для корзины
Мы провели исследование: взяли 20 крупнейших e-commerce в России и рассмотрели их дизайн под микроскопом. В статье собрали короткие видео с новыми UX-приёмами, которые можно применить в корзине онлайн-магазина.
В Ratio мы занимаемся веб-разработкой: создаём на заказ сайты и веб-сервисы, в том числе для e-commerce. В этом году провели исследование, чтобы понимать, в какую сторону развивается UX в онлайн-торговле.
Я директор и участвовал в исследовании как консультант, а сотрудники Ratio собирали и анализировали UX-решения. Данные актуальны на октябрь 2020 года.
Этот материал — часть цикла. Уже вышли статьи про главную страницу и про карточку товара, на очереди материалы про каталог и раздел с акциями.
Статьи будут публиковаться на разных площадках, так что подписывайтесь на телеграм-канал @panfilovonline — там я буду выкладывать ссылки по мере их появления.
Основные приёмы
Корзина и чекаут — чуть ли не самая важная часть сайта. Именно здесь пользователь принимает окончательное решение: купить или забыть.
Крупные e-commerce используют следующие UX-приёмы:
- Корзина сохраняется до следующего посещения. Конечно, если клиент не сотрёт файлы cookie. Исключение: магазины, которые быстро распродают запасы. В этом случае товары при добавлении в корзину резервируются — чтобы их не утащил другой покупатель, пока вы оформляете заказ. Магазин предупредит, что корзина будет автоматически очищена через какое-то время (Asos).
- Товары можно заказать без регистрации. Для этого на сайтах есть отдельная кнопка: «Купить в 1 клик» или «Купить без регистрации».
- Корзина и чекаут расположены на разных страницах. Когда между этими частями сайта есть явный переход, пользователь замечает начало оформления — и случайных заказов становится меньше.
Также мы нашли удачные UX-решения, каждое из которых используется всего парой сайтов. В будущем их наверняка будут применять чаще, уж очень они удобные.
Создать дополнительную корзину
Что вы подумаете, если увидите на сайте две корзины? А если их будет пять?
На первый взгляд это кажется странным решением. Раскладывать товары в разные корзины сложно, то и дело будешь путаться. Намного проще закинуть в корзину всё, что нужно прямо сейчас, а остальное добавить в список избранного.
Но дополнительная корзина может оказаться полезной. Допустим, вы часто заказываете расходники в офис, а ещё отправляете бабушке посылки с товарами для дома. Тогда вам лучше завести три корзины — для себя, покупок в офис и для бабушки.
С дополнительными корзинами удобно готовиться к праздникам. Если до Нового года ещё далеко, а идеальный подарок попался на глаза сейчас — можно сразу добавить его в новогоднюю корзину.
Где применить
Дополнительные корзины подойдут любому магазину с большим ассортиментом.
Это способ удержать клиента и повысить лояльность: если кто-то начал собирать новогодние подарки у вас, вряд ли он захочет заново составлять список на другом сайте.
Быстро добавить товары
В строительных магазинах Петрович и ВсеИнструменты.Ру в корзине можно воспользоваться дополнительным полем поиска. С его помощью удобно добавлять товары в корзину без перехода в каталог.
Где применить
Поле поиска будет полезной частью корзины профессионального магазина.
Их клиенты часто покупают одно и то же, хорошо знают товар и могут выбрать недостающие позиции по одному названию или артикулу.
Поменять размер
На сайте Asos можно поменять размер одежды прямо в корзине, через выпадающий список. Удобно, ничего не скажешь.
Где применить
Быстрое изменение характеристик товара в корзине будет уместно смотреться не только в магазинах одежды. Тем же способом можно менять цвет и количество памяти iPhone или размер матраса в IKEA.
Получить товар со склада
В DNS у покупателя есть выбор: получить товар из запасов в магазине или заказать его со склада. Иногда за покупку со склада полагается скидка.
Где применить
В крупных ecommerce-проектах, у которых есть магазины в офлайне.
С помощью таких акций можно закрывать слабые места в логистике. Например, распродать залежавшийся на складе товар без необходимости освобождать место под его хранение в магазине.
Заказать доставку на такси
М.Видео и Эльдорадо за дополнительную плату предлагают отправить товар с таксистом — это быстрее, чем ждать фирменного курьера.
Предложением нельзя воспользоваться, если покупаете что-то крупногабаритное или в рассрочку/кредит.
Где применить
Везде, где товары лёгкие и помещаются в такси.
Конечно, если вы крупная сеть и не боитесь брать на себя дополнительные риски по доставке таксистами. Всё-таки качество работы своих курьеров контролировать проще.
Подписывайтесь на Telegram-канал
Чтобы не пропустить другие материалы с результатами исследования, подписывайтесь на мой телеграм-канал @panfilovonline. Не все статьи будут опубликованы на vc.ru, поэтому телеграм-канал — единственный способ собрать их все.
Следующие материалы будут посвящены каталогу и разделу со скидками.
Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.
У Асос спорное обновление. Кажется, было бы удобнее, чтобы не было кнопки Обновить, а после выбора размера корзина обновлялась автоматически, выдавая сообщение, что обновлено.
У Asos адаптивный сайт, и возможно это сделано с учётом UX мобильных пользователей — когда с мобилы меняешь селект, может быть не очень комфортно, что сразу что-то меняется.
На мобилах обычно делают не выпадашки, а-ля поп-апы, которые закрываются после нажатия «Окей» или «Отмена». Но даже если не делать так, не могу представить себе, почему с телефона неудобно автоматическое обновление.
У меня иногда свайп в селекте срабатывает как тап — и автоматом выбирается значение, которое я не выбирал. Но, скорее всего, такой UX обновления размера на Asos сделали делали не из-за этого)
В DNS получить товар со склада скорее всего равносильно купить его в их же интернет-магазине Технопоинт, в котором на товары цена ниже и выдача происходит со склада.
Спасибо за статью! Подчерпнул для себя полезные моменты.
Спасибо, Дмитрий!
Из интересного только новогодняя корзина.