Из опыта создания интернет-магазинов

Корзина в шапке

Корзина интернет-магазина

Как наиболее проще отобразить состояние корзины на сайте? С помощью каких стилистических приемов можно и нужно решить подобный вопрос. Как раз об этом и пойдет речь в этой статье.

Вы зашли за покупкой на интересующий сайт. Выбрали себе товар. Положили в корзину. И тут вдруг вам захотелось еще чего-нибудь к своей покупке. Товар себе лежит в корзине, а вы ходите по страницам в поисках чего-то интересного. Находите, кладете в корзину. И дальше себе пошли! Ну чем не супер-маркет Только в привычной и уютной обстановке. Но все же ходить в магазины в реальности настоятельно рекомендую. Нет ничего лучше прогулки на свежем воздухе и избавление от лишних денег.

Продолжаю повествование. В корзине лежат у вас покупки, дожидаются оформления заказа. Есть несколько способов отобразить состояние корзины и посмотреть, что вы туда положили.

Корзина интернет-магазина 2
Корзина интернет-магазина 3

Самый классический способ – отображение поп-апа при покупке /рисунок1/ После закрытия модального окна в шапке сайта меняется состояние корзины. Появляется циферка с количеством единиц товара. При нажатии на корзину пользователь попадает на отдельную страницу с заказом. На этой странице нужно завершить действие, оформить заказ и оплатить покупку.

Если пользователь не решил все окончательно оформить, а только смотрит, что у него по сумме и сколько товаров было положено в корзину. Значит нужна всплывающая корзина. Она должна отображать требуемые параметры: сумма, количество.

Второй способ – всплывающая корзина в правом верхнем углу под значком корзины . Небольшое модальное окно, на котором маленькое фото товара, название, количество, итого и обязательно кнопки «Оформить заказ» и «Продолжить покупки».

Третий способ – всплывающая корзина сбоку справа на всю высоту монитора. Там отображаются те же атрибуты: цена, название, количество, кнопки «Оформить заказ», «Купить в 1 клик», «Продолжить покупки» и обязательно закрывающий элемент. /рисунок 3/

Корзина интернет-магазина 4
Корзина интернет-магазина 5

Самое главное – это определиться, какая корзина в твоем интернет-магазине у тебя будет: сверху справа или сбоку справа. И в том и в другом случае считаю, что оба варианта очень удачны и удобны. Вот только чаще всего пользуются корзиной сверху справа, под значком корзины. Это более привычно.

Наиболее удобная считается вертикальная корзина сбоку справа. У нее больше площадь, есть воздух между графическими и смысловыми объектами, а значит и читаемость, удобство и конверсия будет гораздо выше.

Корзина интернет-магазина 6

Еще хочется обратить ваше внимание на состояние корзины при скролле страницы вниз. Пользователь добавил товар в корзину. Решил посмотреть на этой же странице похожие товары, перечитать характеристики. Состояние корзины отображается в верхней панели под меню. Название, маленькое фото, цена.

Есть еще вариант, когда такая же панель отображается на всю ширину монитора, но внизу. Не очень такая корзина заметна. Всегда ее ищешь глазами, причем каждый раз. Подведем итог – наилучший способ отображения всплывающей корзины верх справа, справа на всю высоту то есть та корзина, которая будет перед глазами у пользователя.