Как сделать карточку товара понятной покупателям и в 1,5 раза увеличить продажи с сайта?

Пошагово рассмотрим, как понятная покупателю карточка товара может повлиять на рост продаж с вашего сайта. Только практический опыт от руководителя сервиса роста конверсий <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Faskusers.ru%2F&postId=739737" rel="nofollow noreferrer noopener" target="_blank"><b>AskUsers</b></a> и автора специализированного канала <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ft.me%2Faskusers_ux&postId=739737" rel="nofollow noreferrer noopener" target="_blank"><b>Pro юзабилити</b></a>.
Пошагово рассмотрим, как понятная покупателю карточка товара может повлиять на рост продаж с вашего сайта. Только практический опыт от руководителя сервиса роста конверсий AskUsers и автора специализированного канала Pro юзабилити.

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

Как сделать карточку товара понятной покупателям и в 1,5 раза увеличить продажи с сайта?

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

Данные получены на основании 7 867 исследований, проведённых нашими тестировщиками для 1 154 заказчиков, с момента запуска нашего сервиса в 2015 году.

Основные проблемы в карточке товара связаны с:

  1. CTA-кнопками.
  2. Ценой / оплатой / наличием товара.
  3. Изображениями товара.
  4. Характеристиками.
  5. Дополнительными услугами

5 наиболее важных элементов карточки товара, которым нужно уделить повышенное внимание:

  1. Полностью кликабельная область CTA-кнопок.
  2. Наличие цены до скидки и после нее.
  3. Использование изображений высокого качества.
  4. Размещение блока характеристик рядом с изображениями товара.
  5. Наличие информации о дате доставки
Весь чек-лист в хорошем качестве здесь: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ft.me%2Faskusers_ux%2F83&postId=739737" rel="nofollow noreferrer noopener" target="_blank"><b>https://t.me/askusers_ux/83</b></a>
Весь чек-лист в хорошем качестве здесь: https://t.me/askusers_ux/83

Функционал влияющий на рост конверсии:

1. CTA-кнопка должны быть отчетливо видна на фоне подложки сайта

<p><b>Критичность:</b> высокая </p><p><b>В чём ценность:</b> более контрастный цвет кнопки важен для акцентирования внимания посетителей на целевом действии.</p><p><b>Пример реализации</b> на сайте: <span>vprok.ru</span></p>

Критичность: высокая

В чём ценность: более контрастный цвет кнопки важен для акцентирования внимания посетителей на целевом действии.

Пример реализации на сайте: vprok.ru

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

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

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

2. Вся область CTA-кнопок должна быт кликабельна

<p><b>Критичность:</b> высокая </p><p><b>В чём ценность:</b> кликабельность всей поверхности кнопок «Заказа/Покупки/В корзину», а не только ее название, исключает вариант, при котором посетитель думает, что кнопка не работает.</p><p><b>Пример реализации</b> на сайте: <span>ozon.ru</span></p>

Критичность: высокая

В чём ценность: кликабельность всей поверхности кнопок «Заказа/Покупки/В корзину», а не только ее название, исключает вариант, при котором посетитель думает, что кнопка не работает.

Пример реализации на сайте: ozon.ru

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

3. Название CTA-кнопки должно соответствовать её предназначению

<p><b>Критичность: </b>высокая </p><p><b>В чём ценность:</b> называя CTA-кнопку таким образом, чтобы название соответствовало действию, мы исключаем саму вероятность того, что посетитель уйдет, не поняв предназначения кнопки. </p><p><b>Пример реализации</b> на сайте: <span>vkusvill.ru</span></p>

Критичность: высокая

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

Пример реализации на сайте: vkusvill.ru

Сделайте название CTA-кнопки соответствующим её предназначению, или, что ещё лучше, тому, что посетителя действительно ждёт при клике на кнопку.

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

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

4. Наличие цены до скидки и после неё

<p><b>Критичность:</b> высокая </p><p><b>В чём ценность: </b>размещение цены до скидки и после нее, необходимо для лучшего понимания посетителем своей выгоды.</p><p><b>Пример реализации</b> на сайте: <span>vprok.ru</span></p>

Критичность: высокая

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

Пример реализации на сайте: vprok.ru

Как посетителю увидеть выгоду от покупки товара со скидкой, если это никак визуально не выделено?

Да никак! Отсутствие информации для сравнения обнуляет ценность вашего щедрого предложения для посетителя.

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

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

<p><b>Критичность: </b>высокая </p><p><b>В чём ценность: </b>Повышенный акцент на цену со скидкой привлекает внимание. Увеличивая размер шрифта итоговой цены, мы показываем посетителю его очевидную выгоду от покупки.</p><p><b>Пример реализации</b> на сайте: <span>wildberries.ru</span></p>

Критичность: высокая

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

Пример реализации на сайте: wildberries.ru

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

Повышаем ценность нашего предложения для посетителей любым приемлемым способом!

6. Изображения товара максимально высокого разрешения

<p><b>Критичность:</b> высокая </p><p><b>В чём ценность:</b> размещение изображений высокого качества позволяет посетителю рассмотреть ваш товар во всех деталях, не уходя для этого на сайты конкурентов.</p><p><b>Пример реализации</b> на сайте: <span>lamoda.ru</span></p>

Критичность: высокая

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

Пример реализации на сайте: lamoda.ru

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

Ответьте сами себе на вопрос, какое решение примете вы так и не увидев и микроскопичном и некачественном изображении товар, так нужный вам? То-то же, покупать кота в мешке никто не хочет.

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

7. Компактный размер дополнительных изображений товара

<p><b>Критичность:</b> высокая </p><p><b>В чём ценность:</b> компактное основное изображение, с выводом слайдера с превью дополнительных изображений, позволяет с максимальной пользой использовать карточку товара.</p><p><b>Пример реализации</b> на сайте: <span>vkusvill.ru</span></p>

Критичность: высокая

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

Пример реализации на сайте: vkusvill.ru

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

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

8. Размещение блока характеристик рядом с изображениями товара

<p><b>Критичность: </b>высокая </p><p><b>В чём ценность:</b> размещение блока характеристик рядом с изображениями товара, позволяет посетителям быстро найти информацию влияющую на принятие решения о покупке.</p><p><b>Пример реализации</b> на сайте: <span>market.yandex.ru</span></p>

Критичность: высокая

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

Пример реализации на сайте: market.yandex.ru

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

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

9. Наличие информации о дате доставки

<p><b>Критичность:</b> высокая </p><p><b>В чём ценность: </b>размещение информации о ближайшей дате доставки под блоком стоимости товара — один из самых важных факторов при принятии решения о покупке.</p><p><b>Пример реализации</b> на сайте: <span>vprok.ru</span></p>

Критичность: высокая

В чём ценность: размещение информации о ближайшей дате доставки под блоком стоимости товара — один из самых важных факторов при принятии решения о покупке.

Пример реализации на сайте: vprok.ru

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

Сделайте дату доставки прозрачной, упростите планирование своего времени для ваших покупателей и тогда вы точно сможете продать товар, а не сидеть в недоумении не понимая, почему ничего не продаётся!

Что вам даёт грамотно спроектированная карточка?

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

Смотрите видео снятое по мотивам статьи:

Источник видео: https://www.youtube.com/@AskUsers

Это вторая статья из цикла «Как в 1,5 раза увеличить продажи сайта, сделав его удобным». Каждая статья состоит из кейсов, сделанных с оглядкой на известные бренды и видео, снятого по мотивам статьи. Никакой воды, только примеры с описанием их ценности и критичности для конверсии. Читайте предыдущую статью: «Как в 1,5 раза увеличить продажи, сделав удобным поиск товаров по интернет-магазину?». Чтобы ничего не пропустить, подписывайтесь на нас на VC.ru.

Повысьте продажи, сделав понятной карточку товара для покупателей! Вместе с AskUsers)

Марьенко Юрий
Руководитель сервиса роста конверсий AskUsers
1717
4 комментария

🙏 буду применять
предложенные стратегии)

2

Ирина, спасибо! Будут вопросы обращайтесь! Хорошего дня!

2

Спасибо за полезную статью! А как быть, если фотографий товара вообще нет - ни у производителя, ни в интернете?

1

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

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

Логика проста, если хочешь продать товар – то покажи его лицом, а не...)

1