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

в 2:03, , рубрики: Без рубрики

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

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

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

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

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

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

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

Неудачное представление товара в корзине

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

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

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

Неплохое представление товара в корзине

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

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

Хорошее представление товара в корзине

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

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

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

Евросеть, отсуствие обратной связи при добавление товара в корзину
Связной, отсуствие обратной связи при добавление товара в корзину

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

Блок товаров добавленных в корзину

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

Отсуствие картинок при загрузки сайта

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

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

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

image

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

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

image

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

image

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

Автор: a_amik

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js