Работа с тележкой внутри

Как всё работает

Функционал e-commerce не доступен по умолчанию – его необходимо настроить.

Во-первых, подключите модуль электронной торговли к счетчику Яндекс. Метрики. Далее, чтобы туда поступали данные, нужны специальные JavaScript-коды на сайте, которые будут собирать и передавать эти данные.

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

В итоге вы найдете информацию в виде отчетов о взаимодействии посетителей интернет-магазина с карточками товаров, корзиной и заказами:

Рассмотрим всё по порядку.

Как подключить e-commerce в Яндекс. Метрике

Зайдите в настройки счетчика, пролистайте вниз вкладку «Счетчик» и включите эту опцию:

Имя контейнера оставьте по умолчанию dataLayer.

Следующий шаг – настройка передачи данных в Яндекс. Метрику. Для этого дополните код счетчика на всех страницах, где пользователи могут взаимодействовать с товарами и заказами.

Как настроить передачу данных

Рассмотрим, какие объекты данных участвуют в процессе и как их прописывать в коде.

У вас есть товар.

Это объект данных, с которым совершают действия: просматривают, добавляют / удаляют из корзины и покупают.

Товар представлен в виде e-commerce-объекта.

Это JavaScript-объект, который включает поля (* – обязательные, ** – обязательные для передачи информации о покупке):

e-commerce-объект выглядит так:

Ecommerce-объект передает данные о товаре и о действии с ним.

Товар – это объект со структурой. Он включает поля:

Действие – это объект со структурой. Он включает поля:

При передаче данных о действии Метрика создает цель «eCommerce: Покупка (счетчик № )». Она собирает данные о доходе кампании Яндекс. Директа.

Но также отслеживать достижение цели позволяет поле goal_id (номер действия, которое было целью).

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

E-commerce-объект передает данные о товаре и о действии с ним в контейнер данных.

Это JavaScript-массив. Нельзя менять его имя после настройки или инициализации счетчика.

Если вы оставили по умолчанию «dataLayer», или если при инициации счетчика Метрики настроили параметр ecommerce = true, контейнер данных будет отображаться как массив window. dataLayer.

Имя контейнера и структура составляющих его e-commerce-объектов такие же, как в Google Analytics Enhanced Ecommerce. То есть если вы там уже настроили отправку данных (в том числе через глобальный тег сайта), и при этом активировали e-commerce в Метрике, она тоже будет собирать данные.

Важно: объем контейнера данных не должен превышать 2 048 символов.

Ecommerce-объект передает данные о товаре и о действии с ним в контейнер данных методом push.

Этот JavaScript-метод добавляет один или более элементов в конец массива:

После добавления он возвращает значение, соответствующее длине массива.

Отчеты по электронной коммерции

Заказы

Отчет показывает за определенный период времени:

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

Можно настроить группировку «Источник трафика (детально)» и получить детальную информацию об источниках:

Содержимое заказов

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

Товары в корзине

В отчете – информация по каждой единице товара в корзине, а именно:

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

Заказанные товары

Отчет показывает информацию о купленных товарах:

Количество проданных товаров
Стоимость этих товаров
Количество посетителей сайта, которые купили эти товары.

Промокоды

Отчет показывает данные о покупках, которые совершили по промокодам. Это возможность:

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

Все отчеты (кроме «Содержимое заказа») можно настроить. Например, с помощью создания целей можно узнать количество заказов и доход от покупок после просмотра акций на сайте.

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

Если информация не отображается в отчетах

Некорректные данные в передаваемых полях. Проверьте это с помощью команды JSON.stringify(dataLayer) в консоли браузера
Посетитель ушел со страницы до того, как загрузился счетчик
На странице установлен циклический редирект.

Вместо заключения

Электронная коммерция в Яндекс. Метрике дает владельцу интернет-магазина ответы на важные вопросы:

Какие рекламные каналы самые эффективные
Какие бренды просматривают, но не покупают
Какие категории и бренды пользуются спросом
На какие товары влияет сезонность;

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто

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

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE

Кнопка корзины
Подтверждение добавления
Элемент корзины в шапке
Страница корзины
Placeholder корзины
Список товаров в корзине
Подытог
Допродажа в корзине

Вы часто встречаете интернет-магазины, в которых нет корзины? Наверное, нет – корзина есть практически у всех, и через нее проходит практически весь трафик. Как сделать работу с корзиной максимально удобной для клиента? Разбираем в этой статье.

Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.

Это один из 15 больших чек-листов по eCommerce. Остальные – в моем Telegram.

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

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

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

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

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

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

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

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

Текст кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ненавязчиво

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

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

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

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

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

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

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

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

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

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

Стилизован

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Общая сумма

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

Читать также: Текущая ситуация и будущее электронной коммерции в Российской Федерации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отложенное – часть корзины

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

PLACEHOLDER КОРЗИНЫ

Если клиент еще не добавил ни одного товара в корзину, предусмотрите на странице placeholder, который бы об этом сообщал.

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

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

Содержит призыв к действию

Вместо простой констатации факта отсутствия товаров в корзине, placeholder может призывать клиента приступить к покупкам.

Визуальный аспект

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

Ссылки на каталог и главную

Ссылка на активацию поиска

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

Ссылка на авторизацию

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

Товары из предыдущего заказа

Если клиент покупает товары регулярно, placeholder также может содержать ссылку для быстрого добавления товаров из предыдущего заказа. Это сэкономит клиенту время.

Кнопка действия

Ключевое действие можно оформить в виде кнопки. Это повысит его заметность и позволит повысить вероятность перехода.

ПОДЫТОГ

Содержит кнопку оформления

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

Кнопка рядом с подытогом

Последнее, с чем клиент сверяется перед тем, как нажать на кнопку оформления – это подытог. Не заставляйте его ее искать – разместите 2 этих элемента рядом.

Итоговая сумма хорошо заметна

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

А сумма точно финальная?

Иногда в корзине могут встречаться приписки о том, что сумма – не финальная. Таким образом, клиент остается в неведении, а его ожиданиями не управляют.

Начисляемые бонусы

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

Кстати, про программы лояльности есть отдельный большой материал.

Детализация скидок

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

Корректное применение скидок

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

Автоматический расчет скидок

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

Пояснения

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

Пересчет автоматический

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

Ввод промокода

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

Промокод визуально вторичен

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

Поле ввода промокода спрятано

Поле ввода промокода можно спрятать за ссылкой или чекбоксом. Тот, кто захочет ввести промокод, найдет это поле, а клиента без промокода оно в таком формате не отвлечет.

Активация поля промокода

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

Поле промокода не маркировано

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

Эко-инициативы

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

ДОПРОДАЖА В КОРЗИНЕ

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

Допродажа по составу заказа

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

Аксессуары на уровне позиции

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

Кстати, по допродаже на странице товара есть более детальная статья.

Списки допродажи скрыты

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

Товар сразу попадает в список

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

Без дублирования

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

Дополнительные мотиваторы

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

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

Значение грамотной реализации чекаута и корзины для интернет-магазина

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

Конечно, большая часть отказов — следствие того, что посетитель не собирался делать заказ прямо сейчас. Многие используют функционал корзины для сравнения товаров и цен или как альтернативу функционалу «Избранное». Но в исследовании Baymard Institute 21% пользователей не просто присматривались, а хотели купить прямо сейчас. Но не завершили заказ из-за «долгого или сложного процесса оформления».

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

45 решений для хорошего юзабилити чекаута и страницы корзины

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

Листинг на ozon. ru с возможностью сразу добавить товар в корзину

Добавьте информацию о наличии в карточку товара

Нет ничего хуже, чем когда после оплаты заказа покупателю перезванивает менеджер и говорит, что половины товаров нет на складе. И предлагает:

подобрать похожие по характеристикам товары;
зачислить деньги на счёт в виде бонусов;
подождать неопределенное количество времени, пока товар придёт от поставщика.

Да, есть вероятность, что пользователь никуда не денется и согласится на один из вариантов. Возможно, в этот раз интернет-магазин не потеряет покупателя, но насколько это выгодно в долгосрочной перспективе? Доверие подорвано.

Обязательно выведите информацию о количестве товара на складе как в карточке товара, так и в корзине. Либо не показывайте товары, которых нет на складе.

Наличие товара в карточке на citilink

Не ставьте покупателя в жёсткие рамки минимального заказа

Если у вас есть ограничение по минимальной сумме заказа, не пишите «Минимальная сумма заказа 2 000 рублей». Вместо этого дайте пользователю возможность выбора: «Сделайте заказ на сумму 2 000 рублей, и мы привезём ваш заказ бесплатно. Если ваш заказ будет меньше 2 000 рублей — доставка 500 рублей».

Предлагайте разные варианты оплаты

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

Данные исследования Яндекс. Маркета по вариантам оплаты заказа

Предоставьте информацию о стоимости доставки в карточке товара

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

Покажите стоимость доставки сразу, в карточке товара:

Стоимость доставки в карточке товара на audiomania

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

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

Внедрите сервис расчета стоимости доставки разными транспортными компаниями

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

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

Для решения этой задачи можно интегрироваться с сервисом eDOST:

Сервис для расчета стоимости доставки eDOST

Или использовать один из агрегаторов служб доставки, например, Яндекс. Доставка.

Показывайте дату, а не срок доставки

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

В магазине lamoda. ru сообщают, когда доставят заказ в формате «сегодня или позже». Чтобы узнать точную дату, нужно перейти по ссылке и выбрать удобный вариант — с примеркой или без, с привязкой ко времени или без нее.

Читать также: Приложения для создания веб-сайтов электронной коммерции

Информация о дате доставки на lamoda

Отображайте возможность самовывоза в карточке товара

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

Информация о самовывозе в карточке товара на oodji. com

Предлагайте популярные и выгодные виды доставки в первую очередь

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

Предпочитаемые способы доставки согласно исследованиям Яндекс. Маркет:

Данные исследования Яндекс. Маркета по способам доставки

Используйте понятные СТА

Используйте кнопки с понятным призывом к действию — «Добавить в корзину», «Купить», «Заказать» — вместо изображения корзины или других неочевидных иконок и кнопок. Пользователю должно быть понятно, как заказать товар.

Сделайте акцент на кнопке важного целевого действия

Если вы хотите от покупателя выполнения целевого действия, сделайте визуальный акцент на соответствующей кнопке в карточке товара. Выстройте иерархию стилей с помощью цветов или форм кнопок. В противном случае основные и неосновные призывы к действию (CTA) на странице превратятся в одно красное пятно. И пользователю будет непонятно, что от него хотят в первую очередь.

Разный стиль кнопок на vseinstrumenti

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

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

В примере ниже первый товар уже в корзине — это понятно из надписи на кнопке. А вот что делать, если нужно заказать две таких карты памяти — не ясно.

Ограничение возможности добавить товар на eldorado

Дайте возможность купить без регистрации

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

Так выглядит уже ставшая неким стандартом двухколоночная форма на первом этапе регистрации:

Пример перегруженной полями формы регистрации

В конкурентной борьбе за покупателя победит тот, кто максимально упростит и ускорит рутинную операцию оформления заказа. Самая дорогая валюта — это время.

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

По большому счёту, для регистрации достаточно электронной почты или телефона. Главное, чтобы оператор во время беседы рассказал о том, как покупатель сможет попасть в личный кабинет и отследить статус заказа. Можно даже не сообщать покупателю, что для заказа необходима регистрация. А после оформления заказа пользователь автоматически будет зарегистрирован на сайте.

Пример страницы оформления заказа без необходимости регистрации

Аналогичная реализация, но в двухколоночной форме:

Реализуйте функционал «Купить в один клик»

Среди посетителей вашего интернет-магазина существует особая категория людей. Те, кто привык экономить своё время и не разменивать его на заполнение форм. Им проще «купить в один клик», а нюансы заказа обсудить по телефону. Функционал используют не все, а зря: в одном проекте только за счет добавления кнопки «Купить в один клик» мы увеличили конверсию на 15%.

Возможность купить в один клик на incanto

Покажите, что товар добавлен в корзину

Если после нажатия на кнопку в «Корзину» пользователь не видит изменений, то он начинает сомневаться, что товар был добавлен в корзину.

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

Всплывающее окно с сообщением о добавлении товара в корзину на rozetka

Реализуйте блок с корзиной в привычном месте

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

Возможно, для постоянных покупателей xl-moda. ru такое расположение корзины привычно, но скорее всего пользователь не сразу найдет этот блок.

Непривычное расположение корзины на xl-moda

Сделайте блок корзины информативным

В оформлении корзины интернет-магазина часто допускают такие ошибки:

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

Реализуйте полноценную страницу корзины

Не ограничивайтесь мини-корзиной — небольшим выпадающим списком с товарами, который отображается при наведении курсора на иконку корзины. Она обеспечивает быстрый доступ заказу, но ограничена по размеру и возможностям.

Мини-корзина на wildberries

У покупателей должен быть доступ к полной корзине покупок. Идеальная корзина интернет-магазина — отдельная страница. Ее отсутствие становится настоящей проблемой, если в одном заказе более 3 товаров.

К тому же многие, если нет функции «Добавить в избранные» или «Отложить», используют функционал корзины как wishlist, беспорядочно набрасывая в корзину товары из разных категорий. Важно дать им возможность проверить детали, сравнить товары, узнать окончательную сумму заказа. И при желании отредактировать заказ.

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

Оформите список товаров в виде таблицы

Такой формат облегчает восприятие и сравнение товаров. В таблице обязательно нужно показать:

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

Пример таблицы на странице корзины на ozon

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

Сделайте интерфейс корзины максимально функциональным

Что важно предусмотреть:

возможность ввести промокод под таблицей с товарами;
после введения промокода должна изменяться сумма заказа;
при изменении количества товаров должна автоматически пересчитываться сумма заказа;
при пересчете суммы заказа не должна обновляться страница корзины;
при обновлении корзины не должен слетать весь список товаров (когда посетитель, закрыв окно браузера, возвращается в корзину);
возможность добавить товар в избранное — на случай, если покупатель пока думает;
возможность удалить все товары сразу.

Не располагайте кнопку «Очистить корзину» рядом с другими кнопками

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

Расположение кнопки «Удалить товары» на ozon

Подталкивайте к действию после очистки корзины

Пользователь всегда должен понимать, что делать дальше — предоставьте ему инструкцию. Возможно, он очистил корзину случайно, а это значит, что ему надо помочь снова найти товары. Хороший пример — корзина онлайн-магазина ozon.

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

Предлагайте сопутствующие товары в корзине

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

Предложение дополнительных товаров в корзине

В одном из наших проектов мы внедрили блок с рекомендуемыми товарами и функционал расчета бесплатной доставки при определенной сумме в корзине.

Сопутствующие товары и функционал бесплатной доставки в корзине

Увеличение среднего чека благодаря предложению дополнительных товаров в корзине

Тестируйте объединение и разделение страницы корзины и оформления заказа

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

Прокачка процесса оформления заказа — это главный буст для роста конверсии, поэтому мы тестируем разные гипотезы в рамках этого этапа воронки сайта. В одном из проектов мы объединили корзину с оформлением заказа и увеличил конверсию более чем в 2 раза.

Рост показателя конверсии после объединения страницы корзины и оформления заказа

В другом проекте мы разделили страницу корзины и оформления заказа. Через месяц получили рост конверсии на 17%.

Рост показателя конверсии после разделения страницы корзины и оформления заказа

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

Дайте возможность скорректировать заказ в процессе оформления

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

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

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

Возможность корректировать данные на ozon. ru без сброса других полей

Минимизируйте количество полей для ввода

Постарайтесь ограничиться только самой необходимой информацией.

Какие данные должен обязательно оставить посетитель:

ФИО, телефон, адрес электронной почты;
способ оплаты;
способ доставки;
адрес (если доставка курьером);
разрешение на обработку персональных данных.

Подставляйте данные зарегистрированного пользователя автоматически

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

Внедрите региональную привязку

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

Возможность выбрать другой город на audiomania

Отмечайте обязательные и необязательные поля

Baymard Institute рекомендует отмечать и обязательные, и необязательные поля, чтобы избежать путаницы и ошибок.

Если пользователь пропустил обязательные поля, сделайте акцент на их заполнении:

Привлечение внимания к обязательным полям на lamoda

Объясняйте необходимость заполнения полей

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

Пример формы оплаты с пояснениями

Проверяйте корректность заполнения формы

Если пользователь некорректно заполнит поле, сразу выведите сообщение об ошибке. И разрешите редактировать данные каждого этапа отдельно.

Сообщение об ошибке на этапе оформления заказа на audiomania

Если вы хотите повысить вероятность корректного заполнения формы, снабдите поля ввода подсказками.

Подсказки для корректного заполнения формы

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

Маска для номера телефона на wildberries

Сделайте удобным выбор способа оплаты

Разработайте дизайн способов оплаты, при котором:

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

Выбор вариантов оплаты на rozetka

Мотивируйте выбрать тот или иной вид оплаты

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

Пример скидки за выбор определенного способа оплаты

По такому же принципу можно мотивировать покупателей к оплате по QR-коду.

Помогите пользователям правильно ввести данные карты

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

информируйте пользователя о неправильной последовательности цифр в номере карты;
разрешите вводить пробелы и автоматически форматируйте пробелы в поле с номером карты — так проще проверить правильность его введения;
внедрите ту же последовательность ввода платежных данных, какая реализована на карте — сначала номер, затем срок действия, имя собственника, код безопасности;
используйте правильное форматирование срока действия — «ММ / ГГ» или «ММ-ГГ» — как на карте.

Пример хорошей реализации введения платежных данных при оплате

Дайте возможность оплатить покупки с помощью Google Pay и Apple Pay

Мы внедрили Google Pay и Apple Pay в одном из клиентских проектов. С их помощью оплачивают покупки 19% покупателей (Apple Pay — 12,4%, Google Pay — 6,6%).

Преимущества Google Pay и Apple Pay:

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

Позитивный покупательский опыт повысит лояльность клиента к интернет-магазину и вероятность повторных покупок.

Доносите до пользователей, что заботитесь о безопасности платежей

Многие боятся оплачивать покупки в интернете. Расскажите пользователям, что сделать покупку в вашем интернет-магазине безопасно. Только сделайте это убедительно. Размещайте информацию о безопасности оплаты не только в футере, но и на странице оформления заказа.

Читать также: Гаврилов Л. П. Электронная коммерция и для студентов колледжей, обучающихся по специальности 080301 "Коммерция" (торговля\

На сайте laredoute. ru сообщают о том, что данные клиента защищены. Но этот текст находится в футере — не факт, что его вовремя заметят. А еще он мелкий и плохо читается.

В интернет-магазине bonprix. ru есть привлекающая внимание иконка, текст крупный и хорошо читается.

Но решение далеко от идеала — текст также расположен в футере, неинформативен, логотип неузнаваем и не кликабелен. Смысл гарантии не ясен — кажется, будто магазин написал о гарантии просто так.

Как грамотно оформить иконки безопасности:

отображайте иконки известных брендов в сфере безопасности (Norton, McAfee, Kaspersky и др.);
размещайте иконки на каждой странице сайта и позаботьтесь о том, чтобы они были заметными;
реализуйте всплывающую подсказку с внятным текстом при наведении курсора мыши на иконку.

Правильно используйте выпадающие списки при оформлении заказа

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

Что использовать вместо выпадающего списка:

обычное поле ввода;
поле ввода с функцией автозаполнения (например, для выбора страны, города или адреса);
переключатели (для выбора способа оплаты);
другие альтернативы (например, календарь для выбора даты и времени доставки).

Поле ввода с функцией автозаполнения

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

Уберите лишние элементы со страницы оформления заказа

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

Ничего лишнего при оформлении заказа на canon

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

Предлагайте помощь при оформлении заказа

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

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

Не отпускайте покупателя в свободное плавание после заказа

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

Используете весь потенциал страницы благодарности. Будьте максимально конкретны с клиентом — сообщите ему чёткий план дальнейших действий.

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

Выясняйте причины прерывания оформления заказа и старайтесь вернуть пользователя

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

К примеру, если агрегатор платежей не принял платёж, возможно:

клиент не получил sms с кодом;
клиент неверно указал CVV-код или другие личные данные;
транзакция вызвала подозрения и её автоматически прервал бот на стороне сервиса;
у клиента пропал интернет.

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

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

отлавливайте заказы, которые были не оформлены после этапа заполнения контактных данных. Настройте чекаут таким образом, чтобы менеджер автоматически получал контакты покупателя в случае, если он не оформил заказ.
отправляйте покупателю sms/email с просьбой повторить платёж, если оплата не прошла.
подготовьте для менеджера инструкцию, как действовать в таких ситуациях.

Работайте с брошенными корзинами

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

Согласно аналитике сервиса Retail Rocket, внедрив стратегию работы с «брошенными корзинами», можно вернуть десятую часть ушедших покупателей. И как следствие получить увеличение конверсии от 6% до 11% в зависимости от сегмента.

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

Если вы ещё не узнали email посетителя, а он уже планируют закрыть окно браузера, так и не оформив заказ, используйте форму захвата.

Форма захвата email на citilink

Отслеживайте конверсию на каждом этапе воронки

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

Настройте отчёт по покупательскому поведению в расширенной электронной торговле Google Analytics. Так вы отследите микро-действия, которые совершил или не совершил посетитель на каждом этапе воронки продаж интернет-магазина.

Пример отчета в расширенной электронной торговле Google Analytics

Проводите тестирование функционала интернет-магазина

Первое впечатление всегда откладывает отпечаток на любой покупательский опыт. Насколько вы уверены, что все конверсионные страницы вашего интернет-магазина (неважно на какой она CMS: интернет магазин на 1C Bitrix, MODX или любом другом) одинаково хорошо функционируют в разных браузерах?

Если вы не анализируете цифры в системах статистики, то никогда не узнаете о проблеме.

При внедрении нового функционального элемента обязательно тестируйте его. Отслеживайте, насколько удобно пользователям взаимодействовать с ним на разных устройствах. В этом вам поможет сервис Browserstack, Яндекс Вебвизор, Карта кликов, скроллинга и ссылок в Яндекс Метрике, расширенная электронная торговля в Google Analytics.

Анализ поведения пользователей на Desktop до и после разделения страницы корзины и оформления заказа

Скриншот выше показывает, что после разделения страниц корзины и оформления заказа мы получили прирост заказов на 30%.

Минимизируйте негативное влияние технических проблем

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

Серверная ошибка может увеличивать число брошенных корзин. Чтобы пользователь все-таки сделал покупку позже, можно во всплывающем окне предложить сохранить корзину, отправив ее на email. Или, если пользователь был авторизован на сайте, догнать его триггерной рассылкой. Функционал легко реализовать с помощью специальных сервисов, о которых упоминали ранее. Останется только стимулировать пользователя сделать заказ — например, предложив бонусы.

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

Страница с ошибкой на ozon

СПИСОК ТОВАРОВ В КОРЗИНЕ

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

Разбиение по категориям

Если клиент может взять много позиций (например, в food-ритейле), разбейте их по категориям – это позволит облегчить проверку списка покупок.

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

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

Кстати, по сортировке листинга товаров есть детальная статья с примерами.

Быстрая очистка корзины

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

Не удаляем пустоту

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

Ключевые параметры по товарам

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

Про тонкости оформления карточек в листинге есть отдельная статья.

Текст хорошо читается

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

Нет скидок? Не пишем об этом

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

Миниатюры товаров доступны

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

Доступное количество товара

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

Изменение числа единиц

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

Цена за штуку

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

Быстрый пересчет

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

Анимация пересчета

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

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

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

Отложить / убрать в избранное

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

Отложить первичнее, чем удалить

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

Частичный выбор

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

Выбор работает корректно

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

Иконки действий

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

Действия видны при наведении

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

Без кнопок покупки

Товары и так в корзине. Целевое действие – оформление заказа. Зачем дублировать кнопки покупки по каждому товару, не понятно. Не студия ли Лебедева дизайн делала?

Страницы товара в новой вкладке

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

Группировка товаров по наличию

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

Без переходов в каталог

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

Товары-заменители релевантны

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

Стоит ли спрашивать о замене?

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

Возврат удаленных товаров

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

Без перемещения товаров по списку

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

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

Без авто-объединения корзин

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

Без авто-замены корзины

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

Спрашиваем при авторизации

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

Заключение

Получайте полезный контент от KISLOROD в любой из мессенджеров

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

Спасибо, что дочитали до конца.

Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно 😉