подписка
Подписаться
Александра Гавдаева, Usabilitylab
03/07/2013

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

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

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



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


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



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


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

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

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


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


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

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

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

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

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


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

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




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





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


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


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




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





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


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


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


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




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




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

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

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




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





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


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


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


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




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



Об авторе:

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


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


Прокомментировать
Форматирование текста
Читайте также
15/07/2013
Через какие соцсети залогинится интернет-покупатель?
Во всем мире покупатели чаще всего логинятся на сайтах интернет-магазинов через Facebook, в России - через "ВКонтакте" ... Подробнее
Главная Новости Удержание клиентов Дизайн и usability
03/07/2013
Google совершенствует навигацию "Инструментов для вебмастеров"
"Webmaster tools" Google претерпели очередное изменение. На этот раз обновления затронули дизайн сервиса. Разделы теперь сгруппированы по этапам поиска, что сделало структуру функционала боле дружественной пользователю... Подробнее
Дмитрий Осипов
02/07/2013
Выслушаю конструктивную критику 2
Времечка мало, потому, - только по главной и только по юзабильности.
раз:
Code: Выделить всё
SyntaxError: syntax error
http://www.sarbc.ru/rich/i/js/common.js?5
Line 67
SyntaxError: syntax error
http://conditioner.360-ua.com/js/baloon/js/validate.js
Line 1
carouFredSel: No element found for "#thumblist". http://conditioner.360-ua.com/design/ai-climatteh/js/jquery.carouFredSel-5.2.2-packed.js (строка 15)
"NetworkError: 503 Service Temporarily Unavailable - http://conditioner.360-ua.com/%5bL%5d/"
/[L]/
"NetworkError: 503 Service Temporarily Unavailable - http://conditioner.360-ua.com/%5bL%5d/"
/[L]/
"NetworkError: 503 Service Temporarily Unavailable - http://conditioner.360-ua.com/%5bL%5d/"
/[L]/
"NetworkError: 404 Not Found - http://conditioner.360-ua.com/%5bL%5d/"
/[L]/

два:

фотографий в каруселях много, трафик и нервы пользователей не бережете.
можно не лениться и сделать постепенную подгрузку фотографий после загрузки страницы и при активации карусели.
Сейчас браузер пользователя подгружает абсолютно все фотографии из карусели, включая те из них (большинство), которые пользователь не видит:
Code: Выделить всё
<li class="banner">
<div class="item pol_car">
<form class="variants" action="/cart">
<div class="img_name_desc">
<div class="price_add">
</form>
</div>
</li>
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">
<li class="banner">

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

три:

Хороший дизайнер вам скажет, что заголовки блоков размечать, как ссылки, а ссылки, наоборот, размечать не как ссылки, - это "бе". Но это вам и без меня расскажут. Подобных нерациональных решений в дизайне, кстати, масса. Это плохая практика и т.д. и т.п. На это буквы тратить не буду.

напоследок:

Изображение
Firefox 18.0.2
Еще
Форум Удержание клиентов Дизайн и usability