Проектирование корзины и оформления заказа
Корзина и чекаут — последние шаги перед деньгами. По статистике Baymard Institute, средний показатель брошенных корзин в e-commerce достигает 70%. Мы разбирали десятки коммерческих проектов: типичная ошибка — перегруженный интерфейс или требование регистрации до оплаты. Наш опыт показывает: правильный дизайн этих экранов возвращает до 20% потерянных заказов. Далее — архитектурные решения, которые мы проверяли в продакшене.
Какую архитектуру корзины выбрать: страницу или sidebar?
Два подхода. Полная страница корзины (/cart) — традиционный вариант для корзин с большим количеством товаров или сложным выбором (несколько адресов, подарочные опции). Такая страница индексируется поисковиками, если это нужно. Sidebar/drawer корзина выезжает при добавлении товара, не уводя с текущей страницы. Она ускоряет импульсные покупки, но неудобна для корзин с 10+ товарами — вертикальный скролл внутри drawer раздражает.
Наше решение для большинства магазинов: drawer для быстрого просмотра + полная страница /cart для детального редактирования. Такая комбинация оптимизирует и LCP, и конверсию.
Дизайн страницы корзины
Список товаров должен включать: фото товара (кликабельное, ведёт на страницу), название + выбранные варианты (цвет, размер), цена за единицу, счётчик количества (−/+/поле ввода), итог по позиции, кнопка удаления, ссылка «Сохранить на потом» (перенос в wishlist).
Итоговый блок (order summary) фиксируется справа на десктопе, снизу на мобайле:
Товары (3): 24 870 ₽ Скидка −20%: −4 974 ₽ Промокод SAVE10: −1 990 ₽ Доставка: Бесплатно Итого: 17 906 ₽ [Перейти к оформлению]
Поле промокода expandable — раскрывается по клику, не занимает место по умолчанию. При активном промокоде показывает название скидки и сумму. При неверном — inline-ошибка без перезагрузки.
Cross-sell в корзине — горизонтальная карусель «Добавьте к заказу» с быстрым добавлением без перехода на страницу товара. Ограничить 4–6 товарами, не засорять экран.
Когда использовать одностраничный, а когда многошаговый чекаут?
Сравнение подходов:
| Параметр | Одностраничный | Многошаговый |
|---|---|---|
| Количество кликов | Меньше | Больше |
| Когнитивная нагрузка | Выше | Ниже |
| Подходит для мобайла | Хуже | Лучше |
| Конверсия (пример) | +5% для простых товаров | +10% для сложных корзин |
Многошаговый чекаут со стандартным прогресс-баром — выбор для большинства интернет-магазинов. На мобайле он однозначно лучше, так как каждый шаг умещается в экран.
Шаг 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] [Создать пароль] [Зарегистрироваться] Почему гостевой чекаут обязателен?
Гостевой чекаут — обязательное требование. Требование регистрации — один из главных факторов брошенных корзин. Мы всегда предлагаем создать аккаунт на шаге подтверждения, а не до оформления. Это повышает конверсию на 10–15%.
Валидация форм
Валидация — inline, не при сабмите. Ошибки появляются после потери фокуса (blur), не при вводе:
Телефон: [+7 (123) ] ↑ Введите корректный номер телефона Зелёная галочка при корректно заполненном поле. Кнопка «Далее» активна только при валидной форме — но показывать что именно не заполнено при попытке нажать.
Сохранение состояния
Корзина хранится в localStorage + синхронизируется с сервером при авторизации. Форма чекаута сохраняется в sessionStorage — пользователь может перезагрузить страницу без потери данных.
Что входит в работу
- UX-прототипы всех состояний (пустая корзина, с товарами, ошибки, успех)
- Дизайн десктопной и мобильной версий
- Спецификация валидации форм и поведения ошибок
- Интеграция с платёжными шлюзами и службами доставки
- Анимации переходов между шагами
- Тестирование на реальных пользователях (A/B тесты)
Этапы работы
| Этап | Длительность | Результат |
|---|---|---|
| Аналитика и ресерч | 2–3 дня | Карта пользовательского пути, список требований |
| Прототипирование | 3–5 дней | Интерактивный прототип в Figma |
| Дизайн и визуал | 5–7 дней | Pixel perfect макеты всех экранов |
| Разработка и интеграция | от 10 дней | Рабочий чекаут на production |
| Тестирование и оптимизация | 3–5 дней | Отчёт A/B тестов, финальные корректировки |
Наша команда имеет 5-летний опыт в e-commerce и реализовала более 50 проектов по оптимизации чекаута. Свяжитесь с нами для оценки вашего проекта — подберём оптимальное решение под ваш стек и бюджет.