Корзина на сайте, или 11 рекомендация по юзабилити Главной страницы

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

Пример из жизни: Маловероятно, что вам понравится закупать товары в крупном строительном супермаркете, где нет «тележек».

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

Нужна ли?

По статистике более 95% товаров, положенных в продуктовую тележку в обычном магазине будет куплено. В этом плане у интернет-магазинов совсем другая статистика — здесь покупателей не обязывают купить товар до того, как те покинуть магазин, поэтому можно смело положить множество товаров в корзину и спокойно уйти из интернет-магазина (что и делают около 84% пользователей).

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

Где расположить иконку мини-корзины?

Самыми распространенными на данный момент видами расположения иконки корзины являются:

Правый верхний угол шапки сайта:

Сохраненное изображение 2015-5-19_8-1-19.81

Чтобы корзина всегда находилась в поле зрения, корзину делают «приклеенной» к экрану (наиболее часто встречающийся функционал у CMS Битрикс).

Тулбар с привязкой к верхней/нижней части экрана:

Сохраненное изображение 2015-5-19_8-3-7.217

С привязкой корзины к нижнему тулбару(ulmart.ru):

Сохраненное изображение 2015-5-19_8-5-41.283

Еще одним не менее популярным вариантом стало расположение корзины в виде иконки привязанной к правой части экрана:

Сохраненное изображение 2015-5-19_8-9-59.27

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

Сохраненное изображение 2015-5-11_20-22-42.830

Как должна выглядеть?

Хороший и грамотно подобранный дизайн, несомненно, важен для интернет-магазина, но при всей «красоте оформления» не стоит забывать о важных деталях:

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

Плохой пример (корзина теряется на общем фоне, никак визуально не выделена):

Хороший пример(визуально заметна, пространственно отделена от остальных элементов):

Сохраненное изображение 2015-5-19_7-51-5.988

Корзина должна быть «живой».

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

Сохраненное изображение 2015-5-11_20-23-12.662

Каким функционалом должна обладать?

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

Во всплывающем окошке корзины обязательно должны отображаться:

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

В корзине необходимо сделать возможным «редактировать» заказ – должна быть возможность удалить товар прямо из мини-корзины.

Сохраненное изображение 2015-5-19_7-59-46.755

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

  1. Информация — до бесплатной доставки не хватает покупки на сумму … руб.
    Сохраненное изображение 2015-5-19_8-51-4.245
  2. Информация об уже имеющихся бонусах, этот способ позволяет избежать пустой корзины. Вместо фразы «Ваша корзина пуста», можно поместить в корзину извещение о подарке, который станет доступен при приобретении совершенно любой покупки (пробники, фирменные товары с символикой магазина):
    Сохраненное изображение 2015-5-19_8-54-12.147
  3. Сопутствующие товары или услуги (при покупке колес предлагаются сопутствующие услуги):
    Сохраненное изображение 2015-5-19_7-56-8.170
  4. Система скидок: информация о том, какая скидка будет применена к покупке при такой сумме заказа (часто используется в оптовых магазинах):
    Сохраненное изображение 2015-5-19_8-26-39.277
    Еще пример розничного магазина:
    Сохраненное изображение 2015-5-19_8-34-34.524

Для оптовых магазинов всплывающее окошко корзины должно содержать список товаров + с возможностью изменения количества товара.

Подытожим:

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

Сегодня мы разобрались с 11-ой рекомендацией по юзабилити, в следующей статье мы узнаем:

Hellobar на сайте — как использовать его рационально.

Продолжение следует…

Высоких Вам конверсий и продаж!

Как продавать больше конкурентов? (Часть 1)

Возникли проблемы с размещением корзины на сайте - пишите, подскажу.

 

 

Чем вы лучше остальных? или зачем нужен блок преимуществ на сайте

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

Пример из жизни: представим два конкурирующих магазина мясной продукции, на одном написано:

«Часы работы 9.00-21.00, будем рады.»

А на втором:

«Часы работы 9.00-21.00, без выходных. Только свежее мясо! Говядина, свинина, курица по самым низким ценам. «

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

Нужен ли?

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

Сохраненное изображение 2015-5-11_19-24-13.0

Только посетив этот интернет-магазин часов, покупатель получит интересующую его информацию:

  • «Свой сервисный центр – в случае поломки часов, я смогу отнести их обратно в магазин, и мне не придется обращаться за ремонтом к сторонней компании».
  • «Примерка перед покупкой – абсолютно не зная, какого размера часы мне нужны, а что если я куплю, а они окажутся не по размеру? Здесь, в этом интернет-магазине, смогу их померить перед тем как куплю».
  • «Гарантия на часы 1 год – это здорово, появляется уверенность, что потратив на часы круглую сумму денег, я знаю, что если по каким-либо не моим причинам часы сломаются, я смогу прийти в магазин и потребовать решения проблемы».
  • Коробка в подарок – ура! Не придется покупать красивую упаковку для подарка другу!

Возможно, именно эти факт повлияют на принятие решения о приобретении товара.

Как должен выглядеть?

Лет пять назад было в тренде «прописывать» все эти преимущества на странице «О нас», однако от такого варианта размещения блока отказались, ввиду того, что тексты преимуществ не читались, ввиду того, что текст должен быть подкреплен соответствующими иконками/иллюстрациями для наилучшего восприятия информации пользователями.
Пример:

Сохраненное изображение 2015-5-11_20-18-50.408

Длинные тексты в интернет-магазинах не читаются ( в отличие от новостных порталов/блогов), несмотря на форматирование текста. В таком случае текст преимущества должен быть длиной не более 40 символов, чтобы пользователь только взглянув на него, «проглотил» его за раз и не возвращался к прочтению снова.
Можно сделать преимущества в таком виде:

Сохраненное изображение 2015-5-11_20-7-12.665

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

Сохраненное изображение 2015-5-11_20-3-47.532

Где размещать?

Основные варианты размещения блока преимуществ это на Главной странице сайта и в карточке товара. Можете подобрать для своего интернет-магазина другой вариант, но не стоит забывать одно важное правило: не обязательно вешать блок преимуществ перед глазами пользователя, важно, чтобы этот блок просматривался покупателями (хотя бы единожды).

Блок преимуществ можно разместить:
Сразу под верхним меню:

Сохраненное изображение 2015-5-11_19-53-47.235

После баннера на витрине Главной:

Сохраненное изображение 2015-5-11_19-57-18.433

В левом тулбаре(toolbar):

Сохраненное изображение 2015-5-11_20-19-46.566

 

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

Сегодня мы разобрались с 10-ой рекомендацией по юзабилити, в следующей статье мы узнаем:

Корзина на сайте — как сделать ее  удобной.

Продолжение следует…

Высоких Вам конверсий и продаж!

Как продавать больше конкурентов? (Часть 1)

Возникли проблемы с размещением блока преимуществ на сайте - пишите, подскажу.