РАБОТА С КОРЗИНОЙ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
136
ГАЙДЛАЙНОВ
Вы часто встречаете интернет-магазины, в которых нет корзины? Наверное, нет – корзина есть практически у всех, и через нее проходит практически весь трафик. Как сделать работу с корзиной максимально удобной для клиента? Разбираем в этой статье.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
Это один из 13 больших чек-листов по eCommerce. Остальные – в моем Telegram.

1. КНОПКА КОРЗИНЫ

Хорошо заметна

Кнопка покупки должна хорошо выделяться на фоне всей страницы и привлекать к себе внимание клиента.
hardclient

Видна в рамках первого экрана

Сделайте кнопку добавления в корзину доступной в рамках первого экрана, чтобы клиенту легче было совершить целевое действие.
hardclient

Фиксация на странице товара

Фиксируйте кнопку покупки на странице товара, чтобы клиенту не приходилось отдельно ее прокручивать для совершения целевого действия.

Привычно расположена

По возможности не заставляйте клиента искать кнопку корзины: расположите ее там, где она находится в большинстве страниц товара – в правой части экрана.
hardclient

Текст кнопки

Текст должен отталкиваться от целевого действия, выделяться на фоне кнопки за счет контрастного шрифта и хорошо вписываться в нее по размеру.
hardclient

Текст кнопки не дублируется

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

Содержит иконку

Для улучшения восприятия целевого действия можно разместить в кнопке релевантную, хорошо выделяющуюся на фоне иконку.
hardclient

В хорошем качестве

Иконка в кнопке добавления в корзину должна быть загружена в хорошем качестве, не должна размываться и пикселить. Или «клиент и так купит, зачем напрягаться»?
hardclient

Размер достаточен для нажатия

Сделайте кнопку достаточно большого размера, чтобы на нее легко было нажать – как на ПК, так и на мобильных устройствах.

Не вызывает вопросов

Ни кнопка, ни подписи рядом с ней не должны вызывать вопросов. Вот анти-пример: что такое «по 1 шт»? Почему именно «по 1 шт»? Зачем в принципе нужна эта подпись?
hardclient

Реакция на наведение

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

Анимация нажатия

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

Кнопка работает корректно

Видимо, никто не застрахован от того, что какая-то функция может не работать. Особенно печально, если это ключевая функция добавления товара в корзину.

Видоизменяется при добавлении

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

Без чрезмерной анимации

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

Без перехода на страницу товара

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

В корзину при повторном клике

Если чаще всего товары покупают по 1 единице, при добавлении товара в корзину ссылка в кнопке может меняться так, чтобы сразу вести клиента в корзину, упрощая его путь.
hardclient

Без удаления при повторном клике

Такая механика встречается очень редко и может стать неожиданностью для клиента («хотел перейти в корзину – в итоге товар удалил»).

Пояснение к переходу

Либо в самой кнопке, либо в контекстной подсказке поясняйте не просто что товар в корзине, но и куда будет осуществлен переход при повторном клике.
hardclient

Добавление нескольких единиц

Там, где это релевантно (например, в food ритейле), реализуйте возможность быстрого добавления нескольких единиц товара.
hardclient

Расположение добавления единиц

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

Текстовый ввод числа единиц

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

Не больше, чем на складе

Чтобы лучше управлять ожиданиями клиентов, реализуйте проверку наличия товара и не давайте добавить больше, чем сможете в итоге привезти.
hardclient

Информирование о наличии товара

Если клиент добавил весь имеющийся товар, в явной форме подсветите это. Не оставляйте его в неведении, почему кнопка вдруг перестала быть активной.

Предпочтения на уровне товара

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

Реакция на повторное добавление

Клиент должен понимать, что он добавляет несколько единиц товара в корзину. Если при повторном клике ничего визуально не происходит, это может ввести его в заблуждение.

Реакция моментальна

Добавление и изменение числа единиц товара должны происходить без каких-либо задержек со стороны системы. Иначе это может вызвать раздражение.

Без авторизации

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

Быстрое удаление из корзины

Не заставляйте клиента переходить в корзину, чтобы убрать товар. Если он захочет, он все равно его удалит. Вопрос в том, сколько палок в колеса вы ему поставите на этом пути.
hardclient

Специфика весовых продуктов

При заказе весовых продуктов точный вес и сумма могут отличаться от заданных. Поэтому клиента стоит предупредить об этом рядом с кнопкой покупки.
hardclient

Отсутствующие товары

Если товара нет в наличии, кнопка корзины не должна исчезать полностью или быть неактивной. Используйте ее для заказа оповещения о поступлении товара.
hardclient

Купить (?) в 1 клик

Кнопка покупки в 1 клик позволяет сразу же перейти к оформлению. Но с ней стоит быть осторожными, т.к. она может побудить клиента завершить покупки слишком рано.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

2. ПОДТВЕРЖДЕНИЕ ДОБАВЛЕНИЯ

Предусмотрено

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

Ненавязчиво

Не стоит закрывать подтверждением ключевой контент экрана: разместите его ближе к краю страницы, чтобы оно было заметно, но не бросалось в глаза.

Пропадает само

Не утруждайте клиента самостоятельно закрывать элемент с подтверждением. Сделайте так, чтобы он пропадал автоматически.

Не пропадает слишком быстро

При этом у клиента должна быть возможность заметить подтверждение. Спроектируйте тайминг так, чтобы клиент успел прочитать текст или совершить целевое действие.

Содержит кнопку корзины

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

3. ЭЛЕМЕНТ КОРЗИНЫ В ШАПКЕ

Присутствует

Базовый момент: элемент корзины должен быть добавлен в шапку сайта – это очень широко распространенный паттерн.
hardclient

В хорошем качестве

Иконка корзины должна быть загружена в хорошем качестве и не должна пикселить. По возможности лучше использовать векторное изображение.
hardclient

Стилизован

Если у вас хорошо запоминающиеся пакеты под товары, грех этим не воспользоваться и не реализовать корзину в виде одного из них.
hardclient

Единый вид элемента

Не добавил бы, если бы ни встретился анти-пример: кнопка корзины в шапке должна выглядеть одинаково вне зависимости от страницы, на которой находится клиент.

Не активен, если корзина пуста

Зачем давать клиенту перейти на отдельную страницу корзины, только чтобы выяснить, что она пуста?
hardclient

Реакция на наведение

Сделайте элемент корзины в шапке интерактивным, чтобы он реагировал на наведение курсора и давал визуальную обратную связь.

Бейдж присутствует

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

Без нулевого бейджа

Задача бейджа – привлечь внимание. Но привлекать внимание отсутствием товаров в корзине – сомнительная механика.
hardclient

Бейдж реагирует на добавление

Базовый момент: мы добавляем товар в корзину – бейдж должен изменяться. У всех это работает корректно? Нет, не у всех.

Бейдж реагирует на очистку корзины

Убедитесь, что бейдж своевременно реагирует на очистку корзины. Вот пример того, когда даже гиганты что-то упускают:

Бейдж анимирован

При добавлении товара в корзину изменение бейджа можно анимировать: это позволит сделать реакцию элемента в шапке более заметным.

Реакция на изменения в корзине

Элемент должен своевременно реагировать на изменения, которые клиент делает на странице корзины, и в точности соответствовать подытогу.
hardclient

Общая сумма

Корзину в шапке также можно снабдить суммой заказа. Это сделает элемент более информативным, но главное при этом – не перегрузить интерфейс.
hardclient

Контент хорошо читается

Спроектируйте кнопку корзины в шапке так, чтобы ее элементы легко воспринимались, не прилипали и не перекрывали друг друга.
hardclient

Доступен всегда

Элемент корзины всегда должен быть фиксирован и доступен на экране, чтобы клиенту легче было в нее перейти: либо в шапке (на ПК), либо в таббаре (на мобильных).

Реакция моментальна

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

Обновление на всех страницах

Если у клиента открыто несколько вкладок со страницами магазина, и он добавляет товар на одной из них, индикатор должен автоматически обновляться на всех остальных.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

4. СТРАНИЦА КОРЗИНЫ

Загружается быстро

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

Не блокируется авторизацией

Авторизацию можно ненавязчиво предлагать на разных этапах customer journey, но она не должна блокировать переход клиента в корзину.

Корзина только одна

Разбиение корзины на отдельные страницы может лишь затруднить проверку списка покупок, т.к. каждый раз клиенту придется дожидаться загрузки новой страницы:

Сохраняется при повторном заходе

Добавленные в корзину товары должны сохраняться в cookies / базе данных (если клиент авторизован) и быть доступными при повторном посещении магазина.

Визуализация процесса

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

Highlight следующих шагов

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

Без отвлекающих факторов

Не сталкивайте клиента в корзине с чем-то, что может его отвлечь от оформления заказа. Скидка за подписку на новости может в принципе остановить его от покупки в моменте.
hardclient

Предложение авторизации

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

Управление ожиданиями

Если на следующих шагах клиент может столкнуться с какими-либо ограничениями по сумме заказа, об этом его лучше предупредить заранее:
hardclient

Отработка опасений

Если клиент может сомневаться по поводу качества товаров, которые еще не пробовал, эти опасения дополнительно можно отработать в корзине, рассказав про политику возврата:
hardclient

Онбординг по корзине

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

Помощь с заказом

Если у клиента возникли какие-либо вопросы или трудности, ему можно предложить помощь. Причем формат может быть разный.
hardclient

Без навязчивых вопросов

Клиента можно спрашивать о его поведении, но делать это в навязчивой форме точно не стоит. Иначе можно получить не только раздражение, но и уход с сайта.
hardclient

Highlight преимуществ

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

Шеринг корзины

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