Пошагово рассмотрим, как понятная покупателю карточка товара может повлиять на рост продаж с вашего сайта. Только практический опыт от руководителя сервиса роста конверсий AskUsers и автора специализированного канала Pro юзабилити.
Правильная карточка товара — сердце сайта! Именно тут посетитель принимает окончательное решение, жать на кнопку Купить/В корзину или уйти с сайта. Тут мы должны помочь посетителю, дав ему всю ценную информацию о товаре. И не просто вывалить на него массив данных, а аккуратно расположить всё таким образом, чтобы полезности не превратились в ненужности.
В среднем, столько посетителей уходит не совершив ни одной покупки на сайте из-за проблем в карточке товара.
Данные получены на основании 7 867 исследований, проведённых нашими тестировщиками для 1 154 заказчиков, с момента запуска нашего сервиса в 2015 году.
Основные проблемы в карточке товара связаны с:
- CTA-кнопками.
- Ценой / оплатой / наличием товара.
- Изображениями товара.
- Характеристиками.
- Дополнительными услугами
5 наиболее важных элементов карточки товара, которым нужно уделить повышенное внимание:
- Полностью кликабельная область CTA-кнопок.
- Наличие цены до скидки и после нее.
- Использование изображений высокого качества.
- Размещение блока характеристик рядом с изображениями товара.
- Наличие информации о дате доставки
Функционал влияющий на рост конверсии:
1. CTA-кнопка должны быть отчетливо видна на фоне подложки сайта
Чуть ли не единственное предназначение CTA-кнопок в том, чтобы на них нажимали, совершая нужное нам действие. Если «растворить» кнопку на фоне других цветов, то теряется смысл её функциональности. Даже, если такое решение кажется очень удачным с точки зрения дизайна. Красота не должна идти в ущерб предназначению.
Чтобы кнопка не потерялась, необходимо придать кнопке цвет, контрастирующий с бекграундом.
Дело в том, что более контрастный цвет кнопки важен для акцентирования внимания посетителей на целевом действии — покупке.
2. Вся область CTA-кнопок должна быт кликабельна
Когда верстальщик делает кликабельной только надпись на кнопке, то он невольно увеличивает количество попыток посетителя выбить десятку, в едва различимой мишени. Далеко не все такие терпеливые и дотошные, как мы с вами. Как показывает практика, чаще всего не попав в кликабельную зону кнопки со второго раза, посетитель уходит с вашего сайта с мыслью, что «тут что-то сломалось — пойду поищу у соседей».
3. Название CTA-кнопки должно соответствовать её предназначению
Сделайте название CTA-кнопки соответствующим её предназначению, или, что ещё лучше, тому, что посетителя действительно ждёт при клике на кнопку.
Называя CTA-кнопку таким образом, чтобы название соответствовало действию, мы исключаем саму вероятность того, что посетитель уйдет, не поняв предназначения кнопки или сочтя, что то, что произошло после нажатия на кнопку, ни что иное, как попытка его обмануть.
Если цель кнопки побудить купить товар, так и пишите «Купить». Если кнопка предназначена, для того, чтобы отложить товар в корзину, то так и пишите на кнопке «В корзину» и т.д. Фантазии тут чреваты потерей покупателя! Не перемудрите!
4. Наличие цены до скидки и после неё
Как посетителю увидеть выгоду от покупки товара со скидкой, если это никак визуально не выделено?
Да никак! Отсутствие информации для сравнения обнуляет ценность вашего щедрого предложения для посетителя.
Если вы ему не расскажете о том как было и как стало — то посетитель так никогда об этом и не узнает, совершая покупки уже на сайте вашего конкурента!)
5. Цена со скидкой должна быть больше по размеру шрифта, чем цена до скидки
Не скромничайте, выпячивайте свои добродетели: крупным шрифтом, ярким цветом, с зачёркиванием старой цены. Подойдут любые решения визуально выделяющие новую привлекательную цену, на фоне старой угрюмой.
Повышаем ценность нашего предложения для посетителей любым приемлемым способом!
6. Изображения товара максимально высокого разрешения
Последние годы добавили многим из нас привычку совершать покупки дистанционно. Не имея возможности пощупать товар руками, мы ориентируемся исключительно на его изображение в карточке товара.
Ответьте сами себе на вопрос, какое решение примете вы так и не увидев и микроскопичном и некачественном изображении товар, так нужный вам? То-то же, покупать кота в мешке никто не хочет.
Добавляйте на сайт только качественные, крупноразмерные изображения. Без них продажа товара под большим вопросом!
7. Компактный размер дополнительных изображений товара
От того, с каких ракурсов велась съёмка и велась ли она вообще, зависит — поймёт ли посетитель, что это то что ему нужно или, так и не увидев в единственном снимке товар его мечты, уйдёт задумчиво в сторону другого магазина.
Дайте посетителю не менее 3-5 изображений, с разных ракурсов, чтобы у него в голове сложилась целостная картина.
8. Размещение блока характеристик рядом с изображениями товара
Есть категория посетителей, при том достаточно обширная, которая выбирая сложные продукты, непременно желает знать все технические особенности и детали.
Поднимите технические характеристики, как можно выше, на первый экран — снимите оставшиеся возражения вашего потенциального покупателя!
9. Наличие информации о дате доставки
Большинство из нас работает и не имеет возможности сорваться с рабочего места и в течении часа, бросив всё, рвануть в сторону дома. Напротив, выбирая день для получения товара, вам как минимум, необходимо либо отпроситься у руководства, либо привести дела в порядок, чтобы подчинённые не дали слабину.
Сделайте дату доставки прозрачной, упростите планирование своего времени для ваших покупателей и тогда вы точно сможете продать товар, а не сидеть в недоумении не понимая, почему ничего не продаётся!
Что вам даёт грамотно спроектированная карточка?
- Увеличение первичных продаж — за счет удобства и наличия в карточке товара, необходимой для принятия решения информации.
- Увеличение повторных продаж и формирование пула постоянных покупателей — за счет повышения доверия/лояльности к вашему сайту, благодаря простоте, информативности, понятности и удобству.
Смотрите видео снятое по мотивам статьи:
Это вторая статья из цикла «Как в 1,5 раза увеличить продажи сайта, сделав его удобным». Каждая статья состоит из кейсов, сделанных с оглядкой на известные бренды и видео, снятого по мотивам статьи. Никакой воды, только примеры с описанием их ценности и критичности для конверсии. Чтобы ничего не пропустить, подписывайтесь на нас!
