Дизайн корзины интернет-магазина: пошаговая инструкция по оформлению
Шаг 1. Выбираем подход к дизайну корзины интернет-магазина: pop-up или полноценная страница
Существует 2 основных подхода к оформлению корзины: отдельная страница и pop-up.
Когда стоит создавать отдельную страницу:
- Когда это крупный гипермаркет с большим ассортиментом. В этом случае пользователь может приобретать сразу несколько товаров, поэтому у него должна быть возможность перепроверить заказ перед оформлением.
- Когда товар дорогостоящий. Обычно такие покупки не происходят в один клик, поэтому страница корзины должна содержать максимум информации о товаре, чтобы пользователь не возвращался в предыдущий шаг перед оформлением.
- Чтобы реализовать полнофункциональные блоки cross-sale и upsell с разбивкой по категориям, если есть сопутствующие товары.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a19715b5cdafb00b573a8b_65a0fcc7e30e264d7dc1369a_Pampik.webp)
Вариант корзины в попапе уже стал трендом, т.к. в этом случае сокращается количество шагов к оформлению заказа. Такая корзина в основном выполняет функцию подтверждения действия для клиента. Этот вариант подходит для интернет-магазинов в нише fashion, а также магазинов с небольшим количеством товаров.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a197590ec6d813c83e7485_65a0fcc6231f947a6c57af86_Intertop.webp)
Недостаток такого дизайна корзины интернет-магазина в том, что не всегда можно полноценно проработать cross-sale и upsell, чтобы они были достаточно действенны. Но, зачастую, эти инструменты в таких магазинах хорошо реализованы в самой карточке товара.
Шаг 2. Определяем необходимые элементы корзины
Обратите внимание на эти 6 элементов, которые важно правильно использовать в дизайне корзины интернет-магазина.
1. Информация о товаре
Какая информация обязательно должна быть в корзине:
- Размещайте фотографию товара. При этом картинка должна быть точно такая же как и в каталоге.
- Дайте возможность перехода на карточку товара непосредственно из корзины.
- Укажите размер, цвет и артикул товара. В идеале, предоставьте возможность вносить изменения в самой корзине.
- Расскажите об ограничениях и укажите доступное количество товаров на складе. Всегда выводите актуальную информацию об остатках на складе, чтобы не вышло так, что покупателю надо 3 упаковки лезвий для бритвы, а в наличии есть только 2. Неприятно, если клиент узнает об этом от менеджера. И крайне неприятно, если это станет известно еще и после оплаты заказа.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1979b0ec6d813c83eb116_65a0fcc526b048561860361c_Bestcoins.webp)
2. Удаление, восстановление товара и список желаний
Стоит предоставить возможность восстановления товара - вдруг пользователь по ошибке удалил товар из корзины. Дайте возможность быстро вернуть его обратно, без необходимости повторного поиска по каталогу.
![Например, товар удаляется не сразу и есть кнопка для возврата товара в корзину](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a0fe5f424dada046525ad6_Fish.gif)
При удалении товара из корзины, предложите добавить его в избранное или список желаний. Возможно сейчас у покупателя нет острой необходимости в данном товаре, но в будущем он захочет к нему вернуться.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1983e053486e8f79595fa_65a0fcc83bf42892bfaa9ff7_Pampik2.webp)
3. Бонусы, акции и промокоды
Если товар приобретается по скидке, используются бонусы или промокод, предоставьте всю информацию о формировании итоговой суммы заказа. Укажите, на что именно распространяется скидка и что входит в комплект.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a198960618a7501b8244dd_65a0fcc6e15c64add91ad95b_Julietta.webp)
Стоит также предоставить возможность отменить использование бонусов или промокода. Так, клиент сам сможет выбрать наиболее выгодный для него вариант в случае, если на товар действует несколько акций или у пользователя есть промокод с большей скидкой.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a198d9053486e8f796189d_65a0fcc9a8b728c7257f9b2b_philips.webp)
На этапе корзины указывайте, сколько бонусов будет начислено за покупку.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a19829186cd7c806ada23d_65a0fcc8f8c69897a08c1854_Pampik3.webp)
4. Информация о дополнительных расходах
Не скрывайте дополнительные расходы, например, на доставку товара. Если доставка бесплатная при заказе на определенную сумму - сообщите об этом.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1999602c17b37b0fbbd9d_65a0fcc48d2a49e82dcf0f92_966.webp)
5. Cross-sale и upsell
В корзине можно и нужно использовать инструменты cross-sale и upsell. Дайте возможность клиенту добавлять сопутствующие товары, дополнительные услуги или товары-расходники, не покидая корзину.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a199d3effbc2f07ff973a4_65a0fcc7c76e566b084e2f98_MonAmie.webp)
Можно использовать элемент геймификации для увеличения среднего чека. Например, чем больше заполнена шкала, тем более привлекательный подарок получает пользователь.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1997b11de6ab95df945d1_65a0fcc4f62930572476be87_9662.webp)
6. Понятные кнопки
Предусмотрите в корзине кнопку “Продолжить покупки”. Возможно это не единственная вещь, которую покупатель хочет приобрести.
Также лучше использовать принцип ожидаемого результата, это значит вместо обычной кнопки “Далее” лучше писать “Оформить заказ” и т.п. Так покупатель точно будет знать, что его ждет на следующем этапе.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a19a7d5191ea38e4754483_65a0fcc901856c84c6139466_Pratik.webp)
Вид корзины интернет-магазина Pratik, где есть возможность вернуться к покупкам и понятная кнопка перехода к оформлению
Шаг 3. Адаптируем корзину под мобильные устройства
Согласно статистике за последние 6 месяцев 79% покупок было совершено с мобильного телефона или планшета. Такая тенденция показывает, что основной фокус должен быть направлен на дизайн корзины интернет-магазина для пользователей mobile. Принципы оформления и основные элементы корзины остаются те же, но как все это вместить в небольшое разрешение экрана?
Товары занимают весь первый экран и если в корзине их больше двух-трех, то для информации о сумме надо будет скролить до конца экрана. Кроме того, в данном формате есть сложности с внедрением cross-sale и upsell инструментов. Один из вариантов решить эту проблему - сделать прилипающее меню внизу экрана.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a19953fc4709c633adbbf2_65a0fcc41fcff770bc6f9e21_9663.webp)
В зависимости от бизнес-цели в мобильной версии используйте:
- прилипающую кнопку оформления заказа для сокращения пути пользователя;
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a19faa3ff1e4a052a30c0d_te.gif)
- не прилипающую кнопку - для реализации кросс-сейл и апсейл блоков.
![Пример не прилипающей кнопки Оформления заказа и реализация кросс-сейл инструментов](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a0fe5efa8f3a2fccbc8875_Knopka.gif)
Шаг 4. Исключаем распространенные ошибки
Чтобы уменьшить количество брошенных корзин, предотвратите распространенные ошибки еще в процессе создания дизайна:
1. Товар на всю страницу и не видно цену и/или итоговую сумму заказа. Не понятно что делать дальше.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1a0ad510d9165fa3e92c0_966.gif)
2. Чтобы получить информацию об общей сумме заказа надо скролить до низа страницы.
3. Кнопка оформления заказа не попадает на первый экран.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1a0f3029712b7c4149cd4_65a0fcca828881b011e130c9_Yaposhka.webp)
4. Не выводится количество товаров и/или нет возможности регулирования количества.
5. Нет цены за единицу товара, а только общая сумма.
6. Не отображается скидка.
7. Корзина автоматически не обновляется.
Если показатель брошенных корзин высокий, с ним нужно работать. Один из способов вернуть покупателя, - напомнить, что у него остались товары в корзине с помощью ремаркетинга или email-рассылки. Второй способ - предотвратить выходы с этой страницы, устраняя ошибки юзабилити.
Шаг 5. Экспериментируем!
Существует множество видов попапов и дизайнов корзин интернет-магазина, которые помогут вовлечь покупателя.
Креативная анимация
Необычное расположение или нестандартное появление могут привлечь внимание и ускорить процесс оформления заказа.
![Пример решения выезжающей справа корзины реализованного для магазина Baku Electronics](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a0fe5f16919cf05abd0040_Baku.gif)
Видимые действия добавления в корзину
При нажатии на кнопку “Купить”, реализуйте анимацию переноса товара в корзину, чтобы визуально подтвердить действие и направить покупателя к следующему шагу.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65a1a270cb136221d0bac9e0_pampik.gif)
Но экспериментируя, главное помнить о юзабилити. Дизайн корзины интернет-магазина, каким бы он креативным не был, должен оставаться в стиле основного сайта, быть понятным и простым для пользователя.
Так что же лучше pop-up или отдельная страница?
Однозначного ответа нет. Отказываясь от отдельной страницы корзины, путь пользователя до оформления заказа существенно сокращается. На примере кейса Intertop такой подход помог увеличить конверсию на 55%. С другой же стороны, создавая полноценную страницу корзины, можно увеличить средний чек. В случае с Mon Amie проработка cross-sale и upsell инструментов позволила увеличить средний чек в 1,7 раз.
Оба варианта рабочие. Какой лучше выбрать для конкретного случая подскажут UX/UI дизайнеры, изучив аналитику проекта и бизнес-цели. Но независимо от выбранного подхода (отдельная страница или попап), все сводится к одному. Корзина должна быть настолько проста и понятна, чтобы покупатель мог получить желаемое как можно быстрее.Как новый дизайн корзины интернет-магазина может увеличить конверсию и средний чек? Какие элементы влияют на эффективность этой страницы? Какие подходы к ее оформлению существуют? 5 шагов по оптимизации корзины с наглядными примерами, а также грубые ошибки, которые можно совершить.
Поделиться постом в:
Больше кейсов от турум-бурум?
Ознакомьтесь с нашим портфолио из различных сфер бизнеса.
Смотреть портфолио