Дизайн
Racurs Agency
4475

Идеальная корзина, или «не заставляйте меня думать»

Начнём с того, что ничего идеального в этом мире не существует. Однако нет предела совершенству, поэтому стремиться к идеалу, бесспорно, необходимо.

В закладки
Аудио

Корзина в интернет-магазине — один из важнейших элементов, от оформления и функциональных возможностей которого напрямую зависят продажи.

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

Наиболее частой проблемой, связанной с количеством заказов (если, конечно, не брать в расчет отсутствие посещаемостиッ), является брошенная корзина. Покупатель кладет товар в корзину, переходит к оформлению, а затем покидает сайт, так и не совершив покупку.

Как? Почему? За что?

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

«Не заставляйте меня думать» — первый закон юзабилити.

Стив Круг

Все придумано до нас, или не изобретайте велосипед

За время существования Рунета сайты эволюционировали от простых невзрачных одностраничников до гигантских каталогов с красочным дизайном и сотнями функциональных решений.

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

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

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

И начнем мы не со страницы самой корзины, а с ее внешнего представления.

Расположение корзины

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

  1. Не мудрите с расположением корзины. Она должна находиться там, где ее ожидают увидеть посетители, а именно — в правом верхнем углу.

Расположение корзины на сайте интернет-магазина "Эльдорадо"​
Расположение корзины на сайте интернет-магазина "Озон"​
​Расположение корзины на сайте интернет-магазина "Дочки-сыночки"

Всплывающий блок корзины

Хорошим решением является блок, всплывающий при наведении на иконку корзины на любой странице сайта.

Блок всплывает, если в корзину добавлен какой-либо товар.

Это своего рода мини-корзина, которая призвана решать ряд определенных задач, а именно — дать пользователю возможность:

  • ознакомиться с содержимым корзины;

  • изменить количество того или иного добавленного в корзину товара.

  • удалить ненужный товар;

  • узнать итоговую сумму покупок;

О последних двух пунктах подробнее.

Удаление товаров и изменение их количества

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

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

Удаление товара из корзины без перехода в раздел.​

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

Управление количеством добавленных товаров

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

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

Покажите действие

Бывает так, что заходишь в интернет-магазин, выбираешь товар, нажимаешь кнопку «Добавить в корзину» и… ничего не происходит. Непонятно, добавился товар или нет.

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

Реализовать это можно так:

  1. «Летящий» в корзину товар.

    Анимация перемещающегося в сторону корзины товара:

2. Смена надписи/цвета на кнопке, либо и то и другое вместе.

​Визуальное оформление добавления товара в корзину

3. Всплывающее окно.

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

Как это выглядит:

Уведомление об успешно совершенном действии. Пример 1

Еще пример:

​Уведомление об успешно совершенном действии. Пример 2

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

Перейдем на страницу корзины.

Тут есть 2 варианта:

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

Пользователь попадает сразу на страницу корзины​

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

​Пользователь попадает на страницу оформления заказа.

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

Стоит отметить, что существуют и другие варианты реализации, основанные на первых двух. Например, когда оформление заказа разбито на шаги, находящиеся на разных страницах. Шагов может быть любое количество, но чем меньше, тем лучше: оптимально — от двух до четырех.

Пример:

Корзина – Выбор доставки – Выбор оплаты – Подтверждение заказа

Или:

Последовательность шагов оформления заказа. Пример 1​

Еще пример:

​Последовательность шагов оформления заказа. Пример 2

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

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

Отсутствие обязательной регистрации

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

Авторизация для совершения заказа​

Предложите пользователю выбор: регистрироваться или нет.

​Вариант с отказом от авторизации для совершения заказа

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

Соблюдение последовательности шагов

Шаги оформления заказа должны быть выстроены в правильном порядке.

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

Логичный вопрос: зачем оставлять свой адрес, если хочешь забрать заказ самостоятельно?

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

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

Автозаполнение полей​

Кроме того, стоит позаботиться о верном формате полей. Особенно это актуально для покупателей, совершающих заказ с помощью мобильного телефона.

Для поля ввода телефона это формат type=”tel”, для поля ввода email-адреса — type=”email”.

Ну вот, все сломалось…

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

Тестируйте свою корзину, оформляя разные заказы: с регистрацией и без; с ПК, планшета и мобильного телефона; с выбором различных способов доставки, оплаты и других опций. Только так можно найти функциональные и логические ошибки. А если они есть, их обязательно найдут реальные покупатели, что может привести к потере заказов, а, соответственно, и дохода.

Что должно быть внутри

Теперь поговорим о наполнении страницы корзины.

Обязательно добавить:

  • Возможность перейти на страницу добавленного в корзину товара. Название товара является ссылкой на страницу этого товара — все просто.

  • Блок с информацией об итоговой сумме заказа с учетом доставки, скидки и прочих параметров.

  • Выбор количества позиций.

  • Изображение товара.

  • Цену каждого добавленного товара.

  • Возможность удалить товар из корзины. Как уже говорилось выше, это должно быть просто и интуитивно понятно.

  • Автоматический пересчет суммы при удалении или добавлении товара, а также при изменении количества.
Обязательные элементы корзины​
  • Блок сопутствующих товаров. С помощью данного блока можно совершать дополнительные продажи.

Блоки сопутствующих товаров​

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

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

Что желательно сделать:

  • Добавить кнопку быстрого оформления заказа. Дайте клиенту возможность сэкономить время, позволив ему ввести лишь имя и телефон. Также время пользователя сэкономит кнопка «Купить в 1 клик», расположенная в карточке товара.

Функционал "Купить в 1 клик"​
  • Дарить подарки. Вариантов масса: подарок при заказе выше определенной суммы, самостоятельный выбор подарка покупателем, бесплатная доставка и т. д. Это не только улучшает конверсию, но и увеличивает средний чек.

Подарки при оформлении заказа​
  • Реализовать промокоды. Кто не хочет сэкономить? Используйте поле для ввода промокода. И не забывайте раздавать их или разыгрывать.

Промокоды для покупателей
  • Кратко рассказать о каждом способе доставки и оплаты.

Способы доставки и оплаты​
  • Дать для заполнения минимум полей. Имя, телефон, email — этого должно быть достаточно для оформления заказа, а все остальное может уточнить менеджер при подтверждении.

Минимальный набор полей для оформления заказа​
  • Сохранять товары пользователя с помощью cookies. Причин, по которым покупатель оставил корзину, так и не оформив заказ, может быть масса. Вспомнить о незавершенном заказе он может как через час, так и через несколько дней. Не заставляйте потенциального клиента начинать собирать корзину заново.

  • Предоставить на выбор больше способов доставки и оплаты.

  • После того как заказ оформлен, выслать на email клиента следующую информацию: состав заказа, дата доставки, данные для отслеживания, любые другие инструкции, которые могут быть полезны покупателю.
​Итоговая информация для клиента после оформления покупки

А в идеале еще и в СМС отправлять номер заказа, дату доставки, телефон поддержки.

  • Уведомляйте покупателя об изменении статуса заказа. Например, о том, что заказ передан курьеру, или о том, что заказ прибыл в пункт самовывоза. Так клиент поймет, что его заказ в обработке, и сам не забудет о нем.

  • Сделать страницу корзины отзывчивой. Добавьте подсказки там, где это необходимо.

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

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

Вывод

Необходимо, чтобы корзина в интернет-магазине работала без сбоев 24/7. Для этого нужно постоянно мониторить ее работоспособность. В идеале — тестировать с помощью фокус-групп.

Не лишними будут и постоянные улучшения, но обязательно после проведенных тестов.

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

Автор статьи:
Евгений Красняк,

Ведущий SEO-специалист компании RACURS

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

Написать
{ "author_name": "Racurs Agency", "author_type": "self", "tags": [], "comments": 25, "likes": 46, "favorites": 267, "is_advertisement": false, "subsite_label": "design", "id": 83983, "is_wide": false, "is_ugc": true, "date": "Fri, 20 Sep 2019 17:07:01 +0300", "is_special": false }
0
{ "id": 83983, "author_id": 193940, "diff_limit": 1000, "urls": {"diff":"\/comments\/83983\/get","add":"\/comments\/83983\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/83983"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
25 комментариев
Популярные
По порядку
Написать комментарий...
14

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

Ответить
2

Даже если доставка на 3-15 дней дольше?

Просто как вариант

Ответить
2

А как связаны удобство корзины и скорость доставки?

Ответить
0

точно также, как связана цена товара с удобством корзины)

Ответить
3

Статья годная, но позвольте не согласиться по некоторым пунктам.

Разбивка оформления заказа на несколько шагов:

Это становиться не актуально. Пользователей, которые не заканчивают оформление все больше и больше. Пользователи хотят оформить заказ быстрее не тратя свое время.

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

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

Ответить
2

шаги можно подгружать и без перезагрузки страницы

а по поводу оформления на одной странице - подмечено верно, но все-таки лучше протестировать в конкретной тематике на конкретной ЦА

Ответить
2

Полностью с вами согласен. Видно сразу, чувак в теме:)

Ответить
1

Не знал, что существует апельсиновый улун

Ответить
0

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

После этого я смогу зайти через месяц, пересмотреть подобранное и купить.

Ответить
2

На многих сайтах это и без регистрации работает - на ip, наверное, корзина создаётся

Ответить
3

нет, не по айпи. 

Ответить
0

Mac адрес?

Ответить
4

Сессии либо куки

Ответить
0

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

Ответить
0

вариантов миллион - куки, local storage, digital fingerprinting. Вот мак адрес с девайса получить как раз непростая задача

Ответить
0

да, а потом исчезает все, если клинером почистить

Ответить
1

Не ожидал в конце про сео-специалиста прочитать. А про юзабилити здорово все расписали, порой такой «креатив» встречаешь, что даже если 7/8 шагов заказа прошел, проще в 2 клика у другого магазина купить, чем разбираться почему кнопка «ок» не нажимается, а поле-причина не подсвечивается. 

Ответить
1

Добивает когда при нажатии добавить в корзину тебя сразу перекидываете на страницу заказа. Я ещё не все посмотрел, а вы меня уже «отправляете на выход»... если товар не эксклюзивный, стараюсь такие сайты обходить ;)

Ответить
0

Это прям в точку)

Ответить
1

Спасибо за ценную информацию!

Ответить
0

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

Ответить
1

нет корзины нет проблем))

а так спасибо за замечание, учтем)

Ответить
0

Супер статья, можете еще связку корзины и доставки расписать? 

Ответить
0

Не совсем понял, что имеете в виду

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }