Станислав Хрусталёв написал о лучших практиках работы с корзиной.
— После добавления товара в корзину кнопка должна менять свой вид, показывая, что товар добавлен. Лучше обойтись микроанимацией кнопки. Анимация улетающего в корзину товара может быть неуместной;
— Если товары обычно покупают по одной штуке, кнопку добавления можно заменить на кнопку перехода в корзину;
— Дайте возможность удалить товар из корзины, не переходя в неё;
— Если у вас хорошо запоминающиеся пакеты для товаров (ЦУМ), можно стилизовать иконку корзины в шапке под такой пакет. В остальных случаях выбирайте стандартную метафору корзины;
— Не отображайте рядом с иконкой корзины бейдж с нулём. Бейдж привлекает внимание, которое не требуется, если в корзине пусто;
— В корзине можно ненавязчиво рассказать о следующих шагах, например, что дата и стоимость доставки станут известны при оформлении заказа;
— Полезная функция: очистить корзину;
— Если свободное место позволяет, в корзине можно разместить список преимуществ магазина;
— Если в покупке обычно участвуют несколько людей (Сантехника онлайн), полезной будет возможность поделиться корзиной;
— В пустой корзине можно разместить призыв к действию, ссылки на каталог и главную, на авторизацию (возможно, товары у пользователя в корзине есть, просто он не вошёл), кнопки активации поиска, добавления товаров из последнего заказа;
— Дайте возможность отложить выбранные товары или заказать часть того, что есть в корзине;
— При нажатии на товар лучше открывать его страницу в новой вкладке, чтобы не уводить пользователя из корзины.
— Интересная возможность: группировка товаров по категориям (Утконос), по наличию, чтобы быстро сориентироваться, что надо заменить;
— Не стоит акцентировать поле для ввода промокода, чтобы не побуждать пользователя прерывать заказ и отправляться на поиски кода.
#cart #ecommerce
— После добавления товара в корзину кнопка должна менять свой вид, показывая, что товар добавлен. Лучше обойтись микроанимацией кнопки. Анимация улетающего в корзину товара может быть неуместной;
— Если товары обычно покупают по одной штуке, кнопку добавления можно заменить на кнопку перехода в корзину;
— Дайте возможность удалить товар из корзины, не переходя в неё;
— Если у вас хорошо запоминающиеся пакеты для товаров (ЦУМ), можно стилизовать иконку корзины в шапке под такой пакет. В остальных случаях выбирайте стандартную метафору корзины;
— Не отображайте рядом с иконкой корзины бейдж с нулём. Бейдж привлекает внимание, которое не требуется, если в корзине пусто;
— В корзине можно ненавязчиво рассказать о следующих шагах, например, что дата и стоимость доставки станут известны при оформлении заказа;
— Полезная функция: очистить корзину;
— Если свободное место позволяет, в корзине можно разместить список преимуществ магазина;
— Если в покупке обычно участвуют несколько людей (Сантехника онлайн), полезной будет возможность поделиться корзиной;
— В пустой корзине можно разместить призыв к действию, ссылки на каталог и главную, на авторизацию (возможно, товары у пользователя в корзине есть, просто он не вошёл), кнопки активации поиска, добавления товаров из последнего заказа;
— Дайте возможность отложить выбранные товары или заказать часть того, что есть в корзине;
— При нажатии на товар лучше открывать его страницу в новой вкладке, чтобы не уводить пользователя из корзины.
— Интересная возможность: группировка товаров по категориям (Утконос), по наличию, чтобы быстро сориентироваться, что надо заменить;
— Не стоит акцентировать поле для ввода промокода, чтобы не побуждать пользователя прерывать заказ и отправляться на поиски кода.
#cart #ecommerce
Hardclient
Работа с корзиной в интернет-магазине: 203 гайдлайна
Лучшие практики UX/UI в E-Commerce
Томас Лауринавичюс написал о корзине.
— Разместите иконку корзины в правом верхнем углу, где люди привыкли её искать;
— Показывайте количество товаров в корзине. Лучше использовать контрастный значок, чтобы напомнить о забытых в корзине товарах;
— Подтверждайте, что товар добавлен в корзину. Кнопка «Перейти к оформлению заказа» подталкивает пользователей оформить заказ;
— Часто интернет-магазины открывают корзину после добавления в неё товара, что прерывает процесс выбора товаров. Можно отображать модальное окно с мини-корзиной, где будет основная информация о товарах, их цена и количество, а также общая стоимость и кнопка оформления заказа;
— Сделайте заметной информацию о бесплатной доставке. Дополнительные расходы — одна из главных причин, почему люди бросают свои корзины;
— В корзине основной акцент должен быть на кнопке оформления заказа.
In English. #ecommerce #cart
— Разместите иконку корзины в правом верхнем углу, где люди привыкли её искать;
— Показывайте количество товаров в корзине. Лучше использовать контрастный значок, чтобы напомнить о забытых в корзине товарах;
— Подтверждайте, что товар добавлен в корзину. Кнопка «Перейти к оформлению заказа» подталкивает пользователей оформить заказ;
— Часто интернет-магазины открывают корзину после добавления в неё товара, что прерывает процесс выбора товаров. Можно отображать модальное окно с мини-корзиной, где будет основная информация о товарах, их цена и количество, а также общая стоимость и кнопка оформления заказа;
— Сделайте заметной информацию о бесплатной доставке. Дополнительные расходы — одна из главных причин, почему люди бросают свои корзины;
— В корзине основной акцент должен быть на кнопке оформления заказа.
In English. #ecommerce #cart
www.uprock.ru
6 лучших практик оформления корзины в интернет-магазине
Почти 70% пользователей интернет-магазинов бросают свои корзины. Разберем лучшие практики, которые помогут нам справиться с этой проблемой.