Добавление товара в корзину: обеспечение четкой и постоянной обратной связи
Перевод статьи UX-специалиста Пейджа Лаубхеймера.
Резюме: Чтобы подтвердить добавление товара в корзину, покажите значок на иконке и всплывающее окно подтверждения (или страницу) и измените метку кнопки «Добавить в корзину», сохраняя при этом возможность увеличивать количество этого элемента.
На сайтах электронной торговли первым шагом покупки продукта является добавление его в корзину покупок. Четкая обратная связь, что этот шаг был успешно завершен, дает пользователям чувство контроля и позволяет им уверенно продолжать покупки или приступать к их оформлению.
Тем не менее, тестирование юзабилити сайтов электронной торговли показывает, что многие сайты плохо справляются с подтверждением того, что продукт добавлен в корзину. В частности, возникают эти два вопроса:
- Неясно, обработал ли сайт действие "Добавить в корзину".
- Если действие было обработано, нет никаких указаний о том, был ли добавлен правильный товар (включая конкретные параметры, такие как размер, цвет или количество) в корзину.
Когда эти проблемы встречаются, пользователи часто вынуждены дважды перепроверять свои действия и следить за тем, чтобы товар был добавлен в корзину. Такое поведение покупателей говорит о том, что с подобной проблемой они встречаются довольно часто.
Значки на иконке корзины
Уведомляющий значок, наложенный на иконку, четко указывает количество предметов в корзине и может косвенно гарантировать пользователям, что продукт был успешно добавлен. Это уведомление будет четко выделяться, если его цвет контрастирует со значком корзины.
Если это возможно, покажите промежуточную итоговую стоимость товаров в корзине рядом с иконкой. Это поможет пользователям в некоторых случаях:
- Пользователи могут в какой-то степени сделать вывод, что была совершена большая ошибка (например, добавление более одного элемента).
- Изменение промежуточного итога может привлечь внимание (особенно если оно сопровождается движением или анимацией).
- Функциональное поле корзины увеличено и представляет собой более удобную мишень для мыши или пальцев, используя закон Фиттса.
Подтверждение добавления товара в корзину
Однако просто изменить значок корзины, чтобы отразить количество покупок недостаточно. В дополнение к этому цифровому значку на иконке корзины используйте дополнительный, более заметный индикатор, подтверждающий, что продукт был добавлен в корзину. Типичные примеры включают в себя анимацию или отдельные страницы, показывающие, какой продукт был добавлен в корзину. Используйте изображение продукта и его название прибегая к этим приемам. Однако не злоупотребляйте анимацией: небольшое количество движения может привлечь внимание, но много движений одновременно отвлекают и раздражают.
Держитесь подальше от всплывающих окон (оверлеев), которые быстро исчезают из виду. Временная природа этих элементов не позволяет пользователям легко просматривать то, что конкретно попало в корзину - были ли размер и цвет правильными? Просмотр всплывающего окна поторапливает пользователя и может создавать стресс, а также неопределенность в отношении того, как получить доступ к этой информации снова, после того, как она исчезла.
В нашем юзабилити-тестировании участница покупок на Burberry.com добавила пальто к своей корзине, затем увидела всплывающее окошко, показывающее, что продукт был добавлен, и начала двигать мышку в направлении всплывающего окна, чтобы кликнуть по нему для уточнения размеров изделия. Однако, прежде чем она успела прочитать информацию на оверлее, он исчез. «Куда делась моя сумка? Наверное, это очень чувствительный к движению мыши элемент сайта.»
Вот рекомендуемые способы отображения обратной связи в корзине:
- Всплывающее окно, которое не препятствует ключевой информации на странице продукта и не исчезает само по себе, или
- Баннер, который отображается в верхней части страницы, или
Новая промежуточная страница, которая показывает сообщение «продукт Х был добавлен в корзину», с кнопками перехода – «Просмотр корзины», «Оформить заказ», и «продолжить покупки».
Какой из этих вариантов подходит для вашего бизнеса, зависит от поведения ваших пользователей в шоппинге. В большинстве случаев оверлей или баннер, показывающий, что что-то было успешно добавлено в корзину, наиболее полезно, особенно на сайтах, где пользователи склонны покупать или сравнивать несколько предметов. Тем не менее на сайтах с ограниченным количеством опций (например, в магазине специализированной мебели) или с пользователями, которые покупают только 1-2 товара за сеанс (например, такие покупатели как на Amazon Prime, не утруждающие себя консолидацией нескольких товаров в одном заказе), новая промежуточная страница может держать пользователей сосредоточенными на процессе проверки покупок и таким образом ускорить его.
Какой бы шаблон вы не выбрали для своего сайта, обязательно покажите:
- Изображение товара хорошего качества, которое правильно отражает цвет или другие параметры, выбранные пользователем;
- Название продукта;
- Цена товара;
- Добавленное количество;
- Дополнительный текст, в котором перечислены все выбранные параметры (размер, цвет и т. Д.).
Изменения в кнопке Добавить в корзину
В наших UX исследованиях многие участники случайно добавили один и тот же элемент в свою корзину несколько раз, а затем были удивлены во время проверки, когда заметили дубликаты. Есть много причин, по которым люди могут добавить товар в корзину несколько раз:
- Они могут забыть, что уже положили продукт в свою корзину, либо из-за отвлечения внимания, либо потому, что процесс покупки был разделен на более длительный период времени (например, несколько часов или даже дней).
- При проведении сравнения покупок по разным схожим предметам люди могут сохранять продукты-кандидаты в своей корзине (форма внешней памяти).
- Поскольку пользователи видят одни и те же товары в нескольких местах (например, со страницы результатов поиска и из списка « Сопутствующие товары» на странице продукта), они могут добавлять их в свою корзину каждый раз, не осознавая, что они их сохранили раньше.
- Сайт может давать плохую обратную связь, указывающую, что элемент был добавлен в корзину, и пользователь может несколько раз нажать кнопку « Добавить в корзину».
Как дизайнеры могут напоминать пользователям, что элемент уже добавлен в корзину? Вот несколько вариантов:
- Добавьте сообщение, указывающее, что товар уже находится в корзине. Это сообщение должно быть визуально значимым и размещаться рядом с кнопкой « Добавить в корзину». Кроме того, текст кнопки должен быть заменен на «Купить ещё один» (или аналогичный). Хотя не каждый пользователь заметит эти изменения, но всё же.
- Выделение кнопки « Добавить в корзину» или изменение ее на кнопку « Просмотреть корзину», «В корзину» или на галочку, чтобы указать, что элемент находится в корзине. Мы не рекомендуем этот вариант, поскольку он не позволяет людям добавлять в корзину больше одного и того же элемента. Чтобы избежать этой проблемы, многие сайты, использующие это решение, делают переход на страницу корзины, а метку «В корзину» изменяют обратно в стандартное « Добавить в корзину» через несколько секунд. Это означает, что некоторые пользователи могут пропустить изменение метки и позже добавить элемент в корзину несколько раз
Вывод
Дайте пользователям соответствующую обратную связь, когда они добавят элемент в корзину, включая все нижеперечисленное:
- Значок на иконке корзины
- Постоянный, не изчезающий оверлей или новую промежуточную страницу, показывающие, что элемент был успешно добавлен в корзину (вместе с информацией о продукте)
- Измененная кнопка «Добавить в корзину», чтобы продемонстрировать, что товар уже в корзине (но с возможностью добавлять тот же самый товар в корзину)