Идеальная корзина интернет-магазина. Какая она?

15f5465871b2adf681aacf93438826e2

В 2012 году в ходе работы над редизайном Сотмаркета было уделено много времени изучению работы интерфейсов других российских интернет-магазинов. Были проанализированы наиболее популярные из них, в сегменте электроники и техники. Ниже представлена таблица с экспертной оценкой удобства корзин некоторых интернет-магазинов:
1bad2117daf743533a223c6d9b18143a

Хорошая корзина обладает следующим чертами:

  • Крупная фотография товара, добавленного в корзину, его название и статус наличия
  • Указания количества и цвета товаров, с возможностью их редактирования и удаления
  • Поле для ввода промо-кода; демонстрация примененных акций и скидок, как инструментов маркетинга
  • Предложение сопутствующих товаров и рекомендации
  • Дополнительные возможности оформления заказа: обратный звонок и кредит
  • Наличие заметной кнопки “Оформить заказ” и итоговой стоимости заказа

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

Среди наиболее распространенных проблем можно выделить:

  • Отсутствие альтернативных способов заказа: кредит и заказ в один клик
  • Слабо выраженный основной CTA-элемент страницы, при высоком общем визуальном шуме
  • Отсутствие рекомендаций и сопутствующих товаров
Проблема: представление товара в корзине

b0baf0cad90666c83f4010c263d9b061

В обоих случаях выполнен минимум: достаточно крупная фотография, заметный ценник.
В обоих случаях плохо:

  • Не очевидно, что есть цена — стоимость за штуку, или сумма двух позиций
  • Невозможно сменить опцию цвета из корзины
  • Несколько неуклюже размещенные кнопки «Удалить»

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

de704557916af1cb0d14f0ca2230fa06

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

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

2d7cab8be4cd01a1264a8ad8bc970f0b

Недостатком корзины Озона можно считать лишь удаление товара из корзины в 2 клика и отсутствие возможности сменить опцию цвета. В Сотмаркете же можно менять цвет, количество, цена показывается суммированная с расшифровкой калькуляции, недорогие сопутствующие товары до 1450 руб. предлагаются прямо под данным предложением.

Проблема: блок покупки в карточке товара

Взаимодействие пользователя с корзиной начинается со страницы товара. Здесь распространенной ошибкой является отсутствие обратной связи при добавлении товара в корзину. Несколько неудачных примеров приведены ниже. На картинке слева до добавления товара в корзину, справа — после.

acea98728d67a5f8249bd635beda87cf
edef9b224df8ff662718f48c59d199f9

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

4b464d641d6ba5953523d9563871af97

Не стоит упускать из виду и техническую реализацию, в т.ч. скорость загрузки страниц на сайте. Например, на сайте Эльдорадо вы заметите отсутствие блока покупки до полной загрузки страницы, равно как и фотографии товара.

dbc58c8e976bdb2a160c151c863ad4be

Проблема: заказ в один клик

Часто на сайтах можно встретить форму «Быстрого оформления заказа» или «Заказа в 1 клик». В ней наблюдается больше всего маразматичных интерфейсных решений в виде рукотворных барьеров из усложненных форм. Например:

Чудовищно выглядит один клик в представлении М.Видео

1ce9ff7be9b0084a71ca0cbd1658a9bf0

Связной и Enter исповедуют похожий друг на друга подход к быстрому заказу.
94392241455c36c4a6a0989432cebff9

Евросеть оказались заботливее, всего 2 обязательных поля, но чтобы клиент не расслаблялся, ему предлагается расшифровать капчу.

25834f1252b9462c0bad01b9206ef4af

Викимарт просит изучить множество полей, интересуется с какой целью заказываются обратный звонок, задает, зачастую, неуместный вопрос «Не смогли дозвониться?».

314d7447259a443ba98629cb8f0aa9d6

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

1ce9ff7be9b0084a71ca0cbd1658a9bf

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

В завершении предлагаю посмотреть видео, демонстрирующее кейс работы корзины Сотмаркета.

http://youtu.be/nKWojLci_YQ