Михаил Белов
109
Блоги

Добавление товара в корзину: обеспечение четкой и постоянной обратной связи

Перевод статьи UX-специалиста Пейджа Лаубхеймера.

Поделиться

В избранное

В избранном

Резюме: Чтобы подтвердить добавление товара в корзину, покажите значок на иконке и всплывающее окно подтверждения (или страницу) и измените метку кнопки «Добавить в корзину», сохраняя при этом возможность увеличивать количество этого элемента.

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

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

  • Неясно, обработал ли сайт действие "Добавить в корзину".
  • Если действие было обработано, нет никаких указаний о том, был ли добавлен правильный товар (включая конкретные параметры, такие как размер, цвет или количество) в корзину.

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

Значки на иконке корзины

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

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

  • Пользователи могут в какой-то степени сделать вывод, что была совершена большая ошибка (например, добавление более одного элемента).
  • Изменение промежуточного итога может привлечь внимание (особенно если оно сопровождается движением или анимацией).
  • Функциональное поле корзины увеличено и представляет собой более удобную мишень для мыши или пальцев, используя закон Фиттса.
Мобильный сайт Buddhiboxes.com показал значок корзины, количество предметов в корзине и промежуточный итог, доказывая, что отображение всех этих деталей возможно даже на маленьком экране. Пользователям была предоставлена полезная, легко узнаваемая информация. В большую целевую область корзины легко нажать, без случайного попадания в другие элементы пользовательского интерфейса.

Подтверждение добавления товара в корзину

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

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

В нашем юзабилити-тестировании участница покупок на Burberry.com добавила пальто к своей корзине, затем увидела всплывающее окошко, показывающее, что продукт был добавлен, и начала двигать мышку в направлении всплывающего окна, чтобы кликнуть по нему для уточнения размеров изделия. Однако, прежде чем она успела прочитать информацию на оверлее, он исчез. «Куда делась моя сумка? Наверное, это очень чувствительный к движению мыши элемент сайта.»

Оверлей на Burberry.com показал, что вещь была добавлена в корзину для покупок.Участники нашего исследования попытались просмотреть добавленное, чтобы убедиться, что они положили правильный предмет в свою корзину, но не смогли этого сделать из-за быстро исчезающего оверлея.

Вот рекомендуемые способы отображения обратной связи в корзине:

  • Всплывающее окно, которое не препятствует ключевой информации на странице продукта и не исчезает само по себе, или
  • Баннер, который отображается в верхней части страницы, или

Новая промежуточная страница, которая показывает сообщение «продукт Х был добавлен в корзину», с кнопками перехода – «Просмотр корзины», «Оформить заказ», и «продолжить покупки».

Saks Fifth Avenue продемонстрировала немодальное наложение, которое не исчезло само по себе после того, как пользователь добавил товар в корзину. В то время как наложение скрывало часть содержимого страницы (что мы не рекомендуем), оно все равно сохраняло основную информацию о продукте. Кроме того, немодальный характер наложения позволяет покупателям пользоваться сайтом за пределами наложения, не закрывая сам оверлей. Наконец, наложение не было похоже на тип всплывающих сообщений о рассылке новостей, которые пользователи в нашем исследовании часто игнорируют не читая.
BodenUSA отобразило баннер над продуктом, чтобы указать, что он был добавлен в корзину. Этот баннер с полосой покупок надлежащим образом показал изображение продукта, выбранные параметры и четкую ссылку на процесс оформления заказа. Тем не менее он также включал акционные рекламные товары, которые могут иметь два недостатка: (1) пользователи могли предположить, что рекламные акции являются товарами в их корзине и удивляться, почему вид карточек товаров отличается от вида карточек товаров, которые у них были добавлены в корзину, и (2) они также могут вызвать эффект баннерной слепоты и будут проигнорированы.
Приложение iOS от Macy перевело пользователей на новую промежуточную страницу, чтобы показать, что элемент был добавлен в корзину. Этот шаблон полезен, когда пользователи могут заказывать только несколько элементов во время сеанса; в противном случае он может быть разрушительным для потока пользователей.

Какой из этих вариантов подходит для вашего бизнеса, зависит от поведения ваших пользователей в шоппинге. В большинстве случаев оверлей или баннер, показывающий, что что-то было успешно добавлено в корзину, наиболее полезно, особенно на сайтах, где пользователи склонны покупать или сравнивать несколько предметов. Тем не менее на сайтах с ограниченным количеством опций (например, в магазине специализированной мебели) или с пользователями, которые покупают только 1-2 товара за сеанс (например, такие покупатели как на Amazon Prime, не утруждающие себя консолидацией нескольких товаров в одном заказе), новая промежуточная страница может держать пользователей сосредоточенными на процессе проверки покупок и таким образом ускорить его.

Какой бы шаблон вы не выбрали для своего сайта, обязательно покажите:

  • Изображение товара хорошего качества, которое правильно отражает цвет или другие параметры, выбранные пользователем;
  • Название продукта;
  • Цена товара;
  • Добавленное количество;
  • Дополнительный текст, в котором перечислены все выбранные параметры (размер, цвет и т. Д.).

Изменения в кнопке Добавить в корзину

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

  • Они могут забыть, что уже положили продукт в свою корзину, либо из-за отвлечения внимания, либо потому, что процесс покупки был разделен на более длительный период времени (например, несколько часов или даже дней).
  • При проведении сравнения покупок по разным схожим предметам люди могут сохранять продукты-кандидаты в своей корзине (форма внешней памяти).
  • Поскольку пользователи видят одни и те же товары в нескольких местах (например, со страницы результатов поиска и из списка « Сопутствующие товары» на странице продукта), они могут добавлять их в свою корзину каждый раз, не осознавая, что они их сохранили раньше.
  • Сайт может давать плохую обратную связь, указывающую, что элемент был добавлен в корзину, и пользователь может несколько раз нажать кнопку « Добавить в корзину».

Как дизайнеры могут напоминать пользователям, что элемент уже добавлен в корзину? Вот несколько вариантов:

  • Добавьте сообщение, указывающее, что товар уже находится в корзине. Это сообщение должно быть визуально значимым и размещаться рядом с кнопкой « Добавить в корзину». Кроме того, текст кнопки должен быть заменен на «Купить ещё один» (или аналогичный). Хотя не каждый пользователь заметит эти изменения, но всё же.
  • Выделение кнопки « Добавить в корзину» или изменение ее на кнопку « Просмотреть корзину», «В корзину» или на галочку, чтобы указать, что элемент находится в корзине. Мы не рекомендуем этот вариант, поскольку он не позволяет людям добавлять в корзину больше одного и того же элемента. Чтобы избежать этой проблемы, многие сайты, использующие это решение, делают переход на страницу корзины, а метку «В корзину» изменяют обратно в стандартное « Добавить в корзину» через несколько секунд. Это означает, что некоторые пользователи могут пропустить изменение метки и позже добавить элемент в корзину несколько раз
Rose & Rex изменили кнопку «Добавить в корзину» на галочку после того, как товар был добавлен в корзину; несколько секунд спустя эта метка вернулась к стандартному «Добавить в корзину», в котором не указано никаких признаков того, что элемент уже находится в корзине.
Freshdirect.com показал небольшое сообщение ниже кнопки «Добавить в корзину», чтобы указать, что в корзине уже было есть два таких предмета. Будучи потенциально полезным, такое сообщение легко пропустить.

Вывод

Дайте пользователям соответствующую обратную связь, когда они добавят элемент в корзину, включая все нижеперечисленное:

  • Значок на иконке корзины
  • Постоянный, не изчезающий оверлей или новую промежуточную страницу, показывающие, что элемент был успешно добавлен в корзину (вместе с информацией о продукте)
  • Измененная кнопка «Добавить в корзину», чтобы продемонстрировать, что товар уже в корзине (но с возможностью добавлять тот же самый товар в корзину)
{ "author_name": "Михаил Белов", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 2, "is_advertisement": false, "section_name": "blog", "id": "41229", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } } ]