Дизайн корзины интернет-магазина: как перестать терять покупателей

Итак, человек нашёл твой магазин, выбрал товар, положил в корзину и ушёл. Не купил. Просто закрыл вкладку. Это не редкость. Это норма. По данным Baymard Institute, 70% всех корзин в интернет-магазинах остаются брошенными. Семь из десяти человек, которые уже решили что-то купить, так и не доходят до оплаты.

А теперь самое интересное: исследования Baymard показывают, что $260 миллиардов потерянных заказов в США и Европе можно вернуть только за счёт улучшения дизайна корзины и checkout. Не за счёт скидок, не за счёт рекламы, а за счёт дизайна.

Почему покупатели бросают корзины

Прежде чем чинить, нужно понять, что сломано. Baymard Institute провёл масштабное исследование причин отказа от покупки. В нем сказано, что 43% пользователей говорят «я просто смотрел» — итс ок, это естественное поведение, с ним мало что можно сделать. Но остальные причины — это проблемы, которые решаются дизайном.

Корзина в интерфейсе Hoodinkee

Вот топ причин, почему люди бросают корзины (исключая «просто смотрел»):

• 48% — неожиданные дополнительные расходы. Человек видит цену товара, кладёт в корзину, идёт оформлять — и тут появляется доставка, налоги, сборы. Сюрприз! Неприятный. И он уходит.
• 26% — требуют создать аккаунт. Человек хочет просто купить футболку. А ему говорят: сначала зарегистрируйся, подтверди email, придумай пароль. Он не хочет. Он уходит. Если регистрация всё-таки нужна, есть 10 советов, которые улучшат форму регистрации и снизят потери на этом шаге.
• 25% — не доверяют сайту свои платёжные данные. Нет знакомых значков безопасности, странный дизайн, ощущение «а вдруг обманут».
• 23% — слишком долгая доставка. Особенно актуально, когда Amazon приучил всех к доставке за день-два.
• 22% — слишком сложный или долгий checkout. Много шагов, много полей, непонятно, когда это закончится.

Заметь: почти все эти проблемы про дизайн и UX. Не про цену товара, не про ассортимент. А про то, как устроена корзина и процесс оформления.

Типы корзин: какую выбрать

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

Полная страница корзины (Full Cart Page)

Классический подход: отдельная страница со всеми товарами, итогами и кнопкой оформления. Amazon использует именно такой формат.

Корзина в интерфейсе Farfetch

• Плюсы: много места для информации, удобно для сложных заказов с множеством товаров, легко добавить upsell и cross-sell.
• Минусы: прерывает процесс шоппинга и пользователь уходит со страницы товара.
• Когда использовать: для магазинов с большим средним чеком, сложными товарами или когда покупатели обычно берут много позиций за раз.

Мини-корзина (Mini Cart / Dropdown)

Маленькое выпадающее окно при наведении или клике на иконку корзины. Показывает краткую сводку: что в корзине, сколько стоит.

Корзина в интерфейсе Uniswap

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

Slide-out Cart (Cart Drawer)

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

Корзина в интерфейсе The New Yorker

• Плюсы: не прерывает шоппинг, удобно для мобильных, отличное место для upsell, современный UX.
• Минусы: ограниченное пространство по сравнению с полной страницей.
• Когда использовать: для большинства современных магазинов, особенно fashion, beauty, DTC-брендов.

Pop-up Cart

Модальное окно поверх страницы, появляется после добавления товара.

Корзина в интерфейсе Сare

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

По данным Vervaunt, slide-out cart все чаще используется в e-commerce. Причина простая: он позволяет пользователю оставаться в потоке покупок, не прерывая сессию. А чем меньше прерываний, тем выше конверсия.

Анатомия идеальной корзины

Независимо от типа, хорошая корзина содержит определённый набор элементов. Пропусти что-то важное, потеряешь покупателей. Все эти элементы, студенты Академии проектируют на курсе по UI/UX дизайну. Созданию e-commerce интерфейса, на курсе посвящен отдельный модуль.

Список товаров

Каждый товар в корзине показывается по тем же принципам, что и карточка товара в каталоге — только компактнее:

• Миниатюру изображения. Человек должен видеть, что он покупает. По данным Baymard, визуальное подтверждение снижает тревогу перед покупкой.
• Название товара. Понятное, без артикулов и технических кодов.
• Вариант. Размер, цвет, комплектация. Особенно критично для fashion.
• Цена за единицу. И за всё количество, если больше одного.
• Количество. С возможностью изменить.

Корзина в интерфейсе ASOS

ASOS делает это отлично: их корзина показывает все детали, цвет, размер, количество, так, что пользователю не нужно возвращаться на страницу товара, чтобы проверить, то ли он выбрал.

Возможность редактирования

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

Редактирование товаров в корзине в интерфейсе ASOS

Если человеку нужно вернуться на страницу товара, чтобы изменить размер, то это плохой UX. Он может просто уйти.

Итоговая сумма

Вот тут начинается самое важное. Помнишь, что 48% уходят из-за неожиданных расходов? Вот как это исправить:

• Подытог (Subtotal) — сумма за товары.
• Доставка — показывай сразу. Если бесплатная, то отлично, напиши об этом. Если платная, то покажи стоимость до checkout, а не после.
• Налоги и сборы — если применимо, покажи хотя бы примерную сумму.
• Итого (Total) — финальная цифра, которую человек заплатит.

Корзина в интерфейсе Nike

Никаких сюрпризов. Всё прозрачно. Это не просто хороший UX — это уважение к покупателю. Спрятать доставку до последнего шага технически можно, но это уже тёмный паттерн UX, и платят за него оттоком.

Кнопка Checkout

Одна главная кнопка, которая ведёт к оформлению. Контрастная, заметная, с понятным текстом («Оформить заказ», «Перейти к оплате», «Checkout»). Остальные требования к главному действию — в разборе про кнопки в UX/UI дизайне.

Корзина в интерфейсе Shop

Кнопка должна быть визуально доминирующей на странице — это первое, что советуют лучшие практики оформления корзины. Используй цвет, который выделяется на фоне остального интерфейса — и сразу прогоняй пару «кнопка / фон» через проверку контраста цветов, чтобы кнопка читалась и на светлой, и на тёмной теме.

Формулировка на кнопке важна не меньше цвета: «Оформить заказ» и «Продолжить» работают по-разному — это уже задача UX-копирайтинга. Для мобильных, делай кнопку sticky, чтобы она всегда была видна при скролле.

Сохранить на потом

Не все готовы купить прямо сейчас. Кнопка «Сохранить» или «Добавить в избранное» позволяет человеку убрать товар из корзины, но не потерять его. Это лучше, чем если он просто уйдёт.

Upsell и Cross-sell: как увеличить средний чек

Корзина — это идеальное место для доп. продаж. Человек уже в режиме покупки, уже достал кошелёк. Предложи ему что-то ещё, но делай это правильно.

Дополнительные предложения в интерфейсе TripAdvisor

Релевантность

Не показывай случайные товары. Показывай то, что логично дополняет покупку:

• Купил телефон → предложи чехол и защитное стекло.
• Купил кофе → предложи кружку или фильтры.
• Купил платье → предложи подходящие аксессуары.

Amazon построил на этом империю. «Customers also bought», «Frequently bought together», это не просто фичи, это значительная доля их выручки.

One-click добавление

По данным Vervaunt, хорошо оптимизированные upsell в корзине могут достигать 20% add-to-cart rate. Но только если добавление максимально простое — один клик, без выбора вариантов, без перехода на страницу товара.

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

Не переусердствуй

Одна-две рекомендации — хорошо. Десять — плохо. Слишком много вариантов создаёт паралич выбора по закону Хика и отвлекает от главного действия — оформления заказа. Помни про UX-законы, чем больше вариантов выбора, тем сложнее этот выбор совершить.

Элементы доверия: почему они критичны

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

Trust badges

Значки безопасности работают. Исследования Baymard показывают, что пользователи обращают внимание на:

• SSL-сертификат. Замочек в адресной строке, но также можно показать значок.
• Логотипы платёжных систем. Visa, Mastercard, PayPal, Apple Pay. Знакомые логотипы = доверие.
• Гарантии. «30 дней на возврат», «Гарантия качества», «Безопасная оплата».

Знакомые значки платежных систем в интерфейсе Adidas

Размещай их рядом с кнопкой Checkout. Там, где человек принимает решение.

Политика возврата

Не прячь её в футере мелким шрифтом. Если у тебя хорошие условия возврата, то покажи их в корзине: «Бесплатный возврат в течение 30 дней». Это снимает тревогу и повышает конверсию.

Контактная информация

Покажи, что за сайтом стоят реальные люди. Телефон, email, live chat. 81% пользователей предпочитают live chat за его удобство. Если человек сомневается, то он может задать вопрос и получить ответ мгновенно. Без этого он просто уйдёт.

Мобильная корзина: особые правила

На мобильные устройства приходится 68% трафика e-commerce. Поэтому мобильной версии нужно уделять особое внимание — про то, как адаптивный дизайн привлекает клиентов, у нас есть отдельный разбор.

Sticky кнопка Checkout

На мобильном экране мало места. Если человек проскроллил вниз, то кнопка оформления исчезает. Он должен скроллить обратно. Это трение. Это потеря конверсии.

Sticky кнопки в интерфейсах Postmate (слева) и Walmart (справа)

Решение: sticky кнопка, которая всегда видна внизу экрана. Большинство современных магазинов так делают.

Touch-friendly элементы

Apple рекомендует минимальный размер touch target — 44×44 пикселя. Кнопки «+/-» для изменения количества, кнопка удаления, сама кнопка Checkout. Всё должно быть достаточно большим, чтобы попасть пальцем с первого раза — это описывает закон Фиттса в UI/UX: чем крупнее и ближе цель, тем быстрее по ней попадают.

Скорость

На мобильном особенно критична скорость загрузки. Совместное исследование Deloitte и Google показало: улучшение скорости загрузки на 0.1 секунды увеличивает конверсию на 8.4%. Скорость — часть общей истории про адаптивный дизайн и конверсию.

Express checkout

Apple Pay, Google Pay, Shop Pay — всё это существует не просто так. По данным Shopify, Shop Pay показывает конверсию в 1.72 раза выше, чем стандартный checkout.

Почему? Потому что один тап — и готово. Не нужно вводить адрес, карту, ничего. Это особенно важно на мобильном, где лишний ввод текста вызывает боль. Покажи кнопки express checkout прямо в корзине, до основной кнопки Checkout.

Корзина — это не просто техническая страница. Это момент истины, где решается, получишь ты деньги или нет. 70% потенциальных покупателей уходят именно здесь. Но большинство причин их ухода — решаемы. Покажи честную цену. Не заставляй регистрироваться. Сделай процесс быстрым и понятным. Добавь элементы доверия. Оптимизируй для мобильных. Если хочешь научиться создавать эффективные и эффектные интерфейсы, ждем тебя на обучении!