Какой должна быть корзина в интернет-магазине?

Продолжаем серию статей экспертов Usabilitylab под общим названием "Повышаем конверсию интернет-магазина".

В первой статье мы говорили о факторах доверия к онлайн-магазину. Главная "героиня" нашего сегодняшнего материала – корзина в интернет-магазине.

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

Почему это важно?

Один молодой человек так описал свой первый опыт покупки через Интернет.

"…Зашел на сайт книжного магазина – хотел купить маме книгу в подарок. Кнопочку "купить" не увидел, но спустя некоторое время заметил кнопку "в корзину" – она не сильно выделялась из общего интерфейса. Нажал "в корзину", сразу перешел в нее. Тут я растерялся, так было непонятно, что и как мне делать дальше: как перейти к оформлению заказа или, наоборот, выбраться оттуда обратно в каталог… В итоге я просто закрыл сайт и ушел, что оказалось проще всего".

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

Какой должна быть корзина?

Кнопка "Добавить в корзину"

Эта кнопка является ключевой в интерфейсе интернет-магазина. Она должна соответствовать нескольким требованиям:

• быть простой, заметной и понятной;
  

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

• размещать эту кнопку стоит также и на увеличенном изображении товара в товарной карточке.

После нажатия кнопки "Добавить в корзину" пользователь должен получить некую обратную связь. Например: после нажатия меняется вид кнопки: теперь на ней написано "В корзине". Пользователя можно сразу перенаправлять в корзину, или показать ему всплывающее сообщение о добавлении товара в корзину.

Хороший пример: в интернет магазине Е5 кнопка добавления в корзину называется "Заказать", она проста и ее трудно не заметить – даже на небольшом скриншоте.

Плохой пример: ну-ка, попробуем догадаться, как заказать пирог на сайте pirogidomoy.ru? То, что для этого нужно нажать на знак + рядом с пирогом, далеко не очевидно. Пользователь, не понявший это с первого взгляда, может просто уйти с сайта.

Ярлык корзины

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

Плохой пример: на сайте madrobots.ru вы не найдете изображения корзины – только надпись "Корзина пуста" в правом верхнем углу.

Интересный, но спорный пример: на сайте pichshop.ru кнопка для добавления в корзину выполнена в виде коробки, показанной сверху (см. правый нижний угол). Неплохое решение, но дело осложняется тем, что корзина непривычного вида расположена еще и на нетипичном для интернет-магазина месте. Чтобы корзина стала заметнее, к ней ведут рисованные "следы". И все-таки нетипичное расположение и непривычный вид могут затруднить поиск для пользователей, которые привыкли видеть корзину в правом верхнем углу страницы и обычно – в виде иконки с тележкой из супермаркета. Лично мне найти корзину сразу не удалось, пришлось потратить несколько секунд. Лучше бы такой дизайн сначала хорошо протестировать.

Что должно быть в корзине?

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

Когда мы находимся на странице товара, то обычно видим красивые фотографии, внятное описание. Если же посмотреть на список товаров в корзине, там товар, как правило, представлен не в лучшем виде. Чаще всего нет даже изображения, есть только название товара. В итоге, если пользователь "соблазнился" красивой фотографией товара или идентифицировал свою покупку только по изображению, то при переходе в корзину он может подумать-подумать – и отказаться от заказа.

Хороший пример: интернет-магазин Enter.ru в корзине показывает изображение товара. Пользователю легко вспомнить, что он добавлял в корзину.

Плохой пример: в корзине интернет-магазина orderit.ru представлены только названия товаров мелким, неудобочитаемым шрифтом. Если покупатель следовал логике "сначала добавить все понравившиеся товары в корзину, а потом выбрать нужные", то ему будет сложнее завершить покупку.

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

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

Хороший пример: в корзине интернет-магазина top-shop.ru есть возможность как просмотреть товар, кликнув на него, так и удалить. При этом кнопка "Удалить" (см. в правом нижнем углу) хоть и невелика, но заметна, и маловероятно, что пользователь нажмет на нее случайно.

Плохой пример: у интернет-магазина remont-vann.ru в корзине есть возможность удалить товар. Но она совершенно не очевидна покупателям: это микроскопическая кнопочка с красным крестиком перед номером заказа. Мало того, что трудно догадаться, для чего она нужна, по ней еще сложно попасть с первого раза.

Дополнительная информация в корзине

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

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

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

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

Об авторе:

Александра Гавдаева – ведущий специалист USABILITYLAB.

USABILITYLAB – крупнейшая профильная компания России, обладающая наиболее оснащенной и современной юзабилити-лабораторией.