Дизайн кошика інтернет-магазину: покрокова інструкція з оформлення

Як новий дизайн кошика інтернет-магазину може підвищити конверсію та середній чек?  Які елементи впливають на ефективність цієї сторінки? Які підходи до її оформлення існують?

У цьому матеріалі — 5 кроків до оптимізації кошика з наочними прикладами, а також типові помилки, яких варто уникати.

Крок 1. Mobile-only — єдиний підхід до дизайну кошика інтернет-магазину, що працює

Згідно зі статистикою, 79% покупок здійснюється з мобільного телефона або планшета. Така тенденція свідчить про те, що основний фокус має бути спрямований на дизайн кошика інтернет-магазину саме для мобільних користувачів.

Товари займають увесь перший екран, і якщо в кошику їх більше двох-трьох, для перегляду підсумкової суми доведеться скролити до самого низу. Крім того, у такому форматі складніше впровадити інструменти cross-sale та upsell. Як усе це вмістити на невеликому екрані?

Ми зібрали основні моменти, на які варто звернути увагу при проєктуванні кошика для мобайл версії:

• "Липка" кнопка оформлення замовлення.

Зафіксуйте кнопку «Оформити замовлення», щоб вона завжди була в полі зору користувача. Це скорочує шлях до фінальної дії без додаткового скролу.

За даними Baymard Institute, скорочення одного кроку в кошику може підвищити конверсію в середньому на 35%.

• Видима підсумкова сума і кількість товарів.
  

Користувач повинен бачити, скільки товарів у кошику та яку суму він заплатить — без необхідності шукати цю інформацію на сторінці.

• Компактність і зручне редагування замовлення

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

• Розумна інтеграція cross-sell та upsell.

На мобайлі пропозиції супутніх товарів потрібно впроваджувати дуже обережно: горизонтальні каруселі або невеликі блоки під основним списком покупок, щоб не відволікати від оформлення.

• Швидке відображення бонусів і промокодів.

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

Крок 2.Обираємо загальний вид кошика інтернет-магазину: pop-up чи повноцінна сторінка

Існує два основні підходи до оформлення кошика: окрема сторінка та pop-up. Останнім часом суттєва різниця між використанням цих 2-ох варіантів розмилася, фахівці навчилися адаптувати обидва варіанти під різні задачі бізнесу без втрати ефективності. 

Наприклад, в інтернет-магазині Intertop, наразі, реалізована повноцінна сторінка кошика.

Раніше недоліком pop-up дизайну кошика інтернет-магазину вважали неможливість повноцінно опрацювати cross-sale та upsell, щоб вони були досить дієві. Але ці часи пройшли й ці інструменти успішно реалізують. Як, наприклад, в інтернет-магазині Varus.

Ви можете навіть зробити комбінований варіант, де після додавання товару в кошик користувач бачить pop-up з короткою інформацією (товар додано, сума, короткий CTA), як підтвердження виконаної дії додавання товару. А згодом вже перехід на повноцінну сторінку кошика для перевірки деталей і завершення покупки. Як це реалізовано в інтернет-магазині електроніки Comfy. 

Тому не важливо, який саме варіант ви оберете, головне: кошик повинен бути максимально простим, інтуїтивним і зрозумілим. Ваше головне завдання — не змушувати покупця думати або сумніватися, а впевнено провести його до цільової дії — оформлення замовлення.

Крок 3. Визначаємо необхідні елементи кошика

1. Інформація про товар

Яка інформація обов’язково має бути в кошику:

•  Розміщуйте фотографію товару — зображення має бути точно таким же, як і в каталозі.
•  Додайте можливість перейти на сторінку товару безпосередньо з кошика.
•  Вказуйте розмір, колір і артикул. В ідеалі — дайте змогу змінювати ці параметри прямо в кошику.
• Повідомляйте про обмеження та наявність товару на складі. Актуальна інформація про залишки — критично важлива, щоб уникнути ситуацій, коли користувач додає до кошика 3 упаковки лез для бритви, а в наявності лише 2. Неприємно, якщо про це покупець дізнається від менеджера. І зовсім погано — якщо вже після оплати.

2. Видалення, відновлення товару та список бажань

Варто надати можливість відновлення товару — раптом користувач випадково видалив товар із кошика. Дайте можливість швидко повернути його назад без необхідності повторного пошуку в каталозі.

При видаленні товару з кошика запропонуйте додати його до обраного або до списку бажань. Можливо, зараз у покупця немає гострої потреби в цьому товарі, але в майбутньому він захоче до нього повернутися.

3. Бонуси, акції та промокоди

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

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

На етапі кошика вказуйте, скільки бонусів буде нараховано за покупку.

4. Інформація про додаткові витрати

Не приховуйте додаткові витрати, наприклад, на доставку товару. Якщо доставка безкоштовна при замовленні на певну суму — повідомте про це.

5. Cross-sale та upsell 

У кошику можна і потрібно використовувати інструменти cross-sale та upsell. Дайте можливість клієнту додавати супутні товари, додаткові послуги або витратні матеріали без необхідності залишати кошик.

Можна використовувати елемент гейміфікації для збільшення середнього чека. Наприклад, що більше заповнена шкала, тим привабливіший подарунок отримує користувач.

6. Зрозумілі кнопки

Передбачте у кошику кнопку «Продовжити покупки». Можливо, це не єдина річ, яку покупець хоче придбати. Також краще використовувати принцип очікуваного результату: замість звичайної кнопки «Далі» краще писати «Оформити замовлення» тощо. Так покупець точно розумітиме, що його чекає на наступному етапі.

Крок 4. Усуваємо поширені помилки

Щоб зменшити кількість покинутих кошиків, варто запобігти найпоширенішим помилкам ще на етапі створення дизайну:

1. Товар займає весь екран, і користувач не бачить ціну та/або підсумкову суму замовлення. Незрозуміло, що робити далі: немає помітного заклику до оформлення замовлення або продовження покупок.

2. Щоб побачити загальну суму замовлення, користувачеві потрібно прокручувати сторінку донизу.
3. Кнопка оформлення замовлення не потрапляє на перший екран.

4. Не виводиться кількість товарів і/або немає можливості регулювати кількість.
5. Немає ціни за одиницю товару, тільки загальна сума.
6. Не відображається знижка.
7. Кошик автоматично не оновлюється.

Якщо показник покинутих кошиків високий, з ним потрібно працювати. Один зі способів повернути покупця — нагадати йому про залишені товари через ремаркетинг або email-розсилку. Другий спосіб — запобігти виходу з цієї сторінки, усуваючи помилки юзабіліті.

Крок 5. Експериментуйте!

Існує безліч варіантів попапів і дизайнів кошика інтернет-магазину, які допомагають утримати увагу покупця.

Креативна анімація

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

‍

Видимі дії додавання в кошик

При натисканні на кнопку «Купити» реалізуйте анімацію переміщення товару в кошик.

Це допоможе візуально підтвердити дію та м'яко направити покупця до наступного кроку — оформлення замовлення.

Але експериментуючи, важливо пам’ятати про юзабіліті. Дизайн кошика інтернет-магазину, яким би креативним він не був, має залишатися у стилі основного сайту, бути зрозумілим і зручним для користувача.

То що краще: pop-up чи окрема сторінка кошика?

Однозначної відповіді немає. Головне пам`ятати, що кошик — це фінальна точка, де користувач приймає рішення про покупку. Продуманий мобільний UX, зручне редагування замовлення, видимі підсумки, інструменти cross-sell та прозора система бонусів вирішують долю вашої конверсії та середнього чека.

Обидва варіанти працюють. Який саме підходить для вашого проєкту — допоможуть визначити UX/UI дизайнери, вивчивши аналітику та бізнес-цілі. Але незалежно від формату (pop-up чи окрема сторінка), суть одна: кошик має бути настільки простим і зрозумілим, щоб покупець міг якнайшвидше здійснити бажану покупку.