Розробка дизайну корзини та оформлення замовлення на сайті
Корзина та чекаут — останні кроки перед грошима. Тут втрати максимальні: середній показник брошених корзин в e-commerce — 70%. Дизайн цих екранів напрямую впливає на конверсію, та кожен додатковий крок, кожна незрозуміла форма, кожен неочікуваний сюрприз з доставкою — це втрачений замовлення.
Корзина: сторінка або sidebar
Два архітектурних підходи:
Повна сторінка корзини (/cart) — традиційний. Підходить для корзин з великою кількістю товарів, складним вибором (кілька адрес, подарункові опції). SEO-індексується.
Sidebar/Drawer корзина — виїжджає справа при додаванні товара, не уходит з поточної сторінки. Прискорює impulse-покупки. Не підходить для довгих корзин з 10+ товарами — вертикальний скрол всередині drawer незручен.
Для більшості магазинів: drawer для швидкого перегляду + повна сторінка /cart для детального редагування.
Дизайн сторінки корзини
Список товарів. Кожен елемент включає:
- Фото товара (кликабельне, ведёт на сторінку)
- Назва + вибрані варіанти (колір, розмір)
- Ціна за одиницю
- Лічильник кількості (−/+/поле вводу)
- Сума по позиції
- Кнопка видалення
- Посилання «Зберегти на потім» (перенос в wishlist)
Блок з підсумками (фіксований справа на десктопе, знизу на мобайлі):
Товари (3): 24 870 ₽
Скидка −20%: −4 974 ₽
Промокод SAVE10: −1 990 ₽
Доставка: Безкоштовно
──────────────────────
Разом: 17 906 ₽
[Перейти до оформлення]
Поле промокода. Expandable (розкривається по клику) — не займає місце за замовчуванням. При активному промокоді показує назву скидки та суму. При неверному — inline-помилка без перезавантаження.
Cross-sell у корзині. Горизонтальна карусель «Додайте до замовлення» з швидким додаванням без переходу на сторінку товара. Обмежити 4–6 товарами, не засмічувати екран.
Чекаут: одностраничний vs багатошаговий
Одностраничний (one-page checkout) — всі поля видні одразу або розкриваються секція за секцією. Менше кліків, але більше когнітивної навантаження зорово.
Багатошаговий (step-by-step) — стандарт для більшості магазинів. Прогрес-бар вверху:
① Контакти → ② Доставка → ③ Оплата → ④ Підтвердження
На мобайлі багатошаговий чекаут завжди краще — кожен крок вмещается в екран.
Крок 1: Контактні дані
Email: [________________]
Надішлемо підтвердження замовлення
Телефон: [+7 (___) ___-__-__]
Для уточнення деталей доставки
☐ Я вже зареєстрований [Увійти →]
Ім'я: [________________]
Прізвище: [________________]
Гостевий чекаут обов'язковий. Вимога реєстрації перед оплатою — один з головних факторів abandonment. Пропонуємо створити аккаунт на кроці підтвердження, не до оформлення.
Автозаповнення. Всі поля повинні мати правильні атрибути autocomplete: autocomplete="email", autocomplete="tel", autocomplete="given-name", autocomplete="family-name".
Крок 2: Доставка
Спосіб доставки:
◉ Курйером до дверей
Москва: 299 ₽ (безкоштовно від 3 000 ₽)
Доставка: 14–15 березня
○ Пункт самовивозу [СДЭК / PickPoint / Boxberry]
38 точок в Москві — [Вибрати на карті]
○ Пошта России
4–7 робочих днів, від 199 ₽
──── При виборі «Курйером» ────
Улиця: [__________________________]
Дім: [____] Кв./Офис: [____]
Підъїзд: [__] Поверх: [___]
Домофон: [________]
Коментар курйеру: [__________________________]
Карта пунктів видачі — інтегрована (Яндекс.Карти або Leaflet) з фільтрами за партнером. Вибір на карті → адреса і часи роботи підставляються автоматично.
Дата та часовой слот. Календар з доступними датами (недоступні сірим), потім часові слоти (9:00–13:00, 13:00–18:00, 18:00–22:00).
Крок 3: Оплата
Спосіб оплати:
◉ Банківська карта
[____________________] [MM/YY] [CVV]
☐ Зберегти для наступних замовлень
[Visa] [Mastercard] [МИР]
○ СБП (Система швидких платежів)
Миттєво, без комісії
○ Готівкою курйеру
Здача з 5 000 ₽
○ Розстрочка 0%
Тінькофф / СберБанк / Халва
──────────────────────────────
Замовлення з зобов'язанням оплати:
Разом до оплати: 17 906 ₽
[✓ Оформити замовлення]
Оформляючи замовлення, ви погоджуєтеся з
Умовами використання та Політикою конфіденціальності
Іконки безпеки рядом з кнопкою оплати: замок SSL, PCI DSS, логотипи платіжних систем.
3D Secure / SCA. Дизайн повинен передбачати модальне вікно для підтвердження від банку — не redirect, а embedded iframe.
Крок 4: Підтвердження
✓ Замовлення #48291 оформлено!
Надіслали підтвердження на [email protected]
──────────────────────
MacBook Pro 14" M3 Pro × 1 ......... 189 990 ₽
AppleCare+ (1 рік) × 1 ......... 12 990 ₽
──────────────────────
Разом: 202 980 ₽
Доставка: Москва, вул. Примерна, 1, кв. 42
Курйер, 15 березня, 13:00–18:00
──────────────────────
[Відстежити замовлення] [Продовжити покупки]
Створіть аккаунт, щоб відстежувати замовлення:
[Email] [Створити пароль] [Зареєструватися]
Валідація форм
Валідація — inline, не при сабміті. Помилки з'являються після втрати фокуса (blur), не при вводі:
Телефон: [+7 (123) ]
↑ Введіть коректний номер телефону
Зелена галочка при коректно заповненому полі. Кнопка «Далі» активна тільки при валідній формі — але показувати що саме не заповнено при спробі нажати.
Збереження стану
Корзина зберігається в localStorage + синхронізується з сервером при авторизації. Форма чекаута зберігається в sessionStorage — користувач може перезавантажити сторінку без втрати даних.
Строки
Дизайн сторінки корзини (десктоп) — 2–3 дні. Повний дизайн чекаута: корзина + 3 кроки + підтвердження, десктоп + мобайл, усі стани та помилки форм — 7–12 днів. Дизайн з урахуванням A/B тестування (варіанти CTA, компоновки, кроків) — додатково 2–4 дні.