Разработка дизайна корзины и оформления заказа сайта
Корзина и чекаут — последние шаги перед деньгами. Здесь потери максимальны: средний показатель брошенных корзин в e-commerce — 70%. Дизайн этих экранов напрямую влияет на конверсию, и каждый лишний шаг, каждая непонятная форма, каждый неожиданный сюрприз с доставкой — это потерянный заказ.
Корзина: страница или sidebar
Два архитектурных подхода:
Полная страница корзины (/cart) — традиционный подход. Подходит для корзин с большим количеством товаров, сложным выбором (несколько адресов, подарочные опции). SEO-индексируется (если нужно).
Sidebar/Drawer корзина — выезжает справа при добавлении товара, не уводит с текущей страницы. Ускоряет impulse-покупки. Не подходит для длинных корзин с 10+ товарами — вертикальный скролл внутри drawer неудобен.
Для большинства магазинов: drawer для быстрого просмотра + полная страница /cart для детального редактирования.
Дизайн страницы корзины
Список товаров. Каждый элемент включает:
- Фото товара (кликабельное, ведёт на страницу)
- Название + выбранные варианты (цвет, размер)
- Цена за единицу
- Счётчик количества (−/+/поле ввода)
- Итог по позиции
- Кнопка удаления
- Ссылка «Сохранить на потом» (перенос в wishlist)
Итоговый блок (order summary). Фиксированный справа на десктопе, снизу на мобайле:
Товары (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 дня.