или заполните форму
UX / АНАлитика
Идеальная карточка товара для интернет-магазина: 48 фишек для юзабилити и высокой конверсии, 10 правил SEO-оптимизации
Максим Жуков
Co-Founder
Хотите запустить удобный и правильный с точки зрения интерфейса интернет-магазин? Или увеличить прибыльность работающего ресурса, выжав максимум из карточек товаров?
Мы подготовили исчерпывающее руководство о заполнении карточек товаров для интернет-магазина. Расскажем, какой должна быть карточка товара — о ее структуре, обязательных и дополнительных блоках, SEO-оптимизации. Поделимся работающими фишками оформления карточек товара интернет-магазина для повышения конверсии.
Содержание
- Значение карточки товара
- Блок мастер-данных продающей карточки товара
- Визуальный блок продающей карточки товара
- Кнопки целевых действий в продающей карточке товара
- Сервисный блок продающей карточки товара
- Текстовый блок продающей карточки товара
- Пользовательский контент продающей карточки товара
- Маркетинговый блок продающей карточки товара
- Дополнительные блоки продающей карточки товара
- 10 правил SEO-оптимизации продающей карточки товара
- Заключение
Значение карточки товара
Карточка товара для интернет-магазина — сочетание визуального и текстового контента, совокупность описания характеристик товара и функциональных элементов (кнопок, разделов с возможностью выбора цвета или размера и так далее).
Идеальная карточка товара в интернет-магазине должна:
Карточку товара стоит рассматривать не саму по себе, а как важный элемент воронки продаж. Оформление карточки товара в интернет-магазине определяет, перейдет ли потенциальный клиент на этап заказа или уйдет с сайта. Поэтому не забывайте постоянно анализировать и улучшать карточку товара. Не бойтесь дать слишком много контента — на этапе решения о покупке конкретного товара пользователь готов пролистывать даже 3-5 экранов, если на них размещена важная информация.
Правильная карточка товара — это пропуск в ТОП поисковой выдачи и залог высокой конверсии. Сопровождайте каждое нововведение A/Б-тестами, чтобы понимать, как изменения повлияли на продажи. С этой же целью можно проводить ABC-анализ продаж, при необходимости сочетая его с XYZ-анализом продаж.
Идеальная карточка товара в интернет-магазине должна:
- привлечь внимание потенциального покупателя,
- вызвать желание обладать продуктом,
- ответить на возможные вопросы,
- снять возражения,
- побудить приобрести товар.
Карточку товара стоит рассматривать не саму по себе, а как важный элемент воронки продаж. Оформление карточки товара в интернет-магазине определяет, перейдет ли потенциальный клиент на этап заказа или уйдет с сайта. Поэтому не забывайте постоянно анализировать и улучшать карточку товара. Не бойтесь дать слишком много контента — на этапе решения о покупке конкретного товара пользователь готов пролистывать даже 3-5 экранов, если на них размещена важная информация.
Правильная карточка товара — это пропуск в ТОП поисковой выдачи и залог высокой конверсии. Сопровождайте каждое нововведение A/Б-тестами, чтобы понимать, как изменения повлияли на продажи. С этой же целью можно проводить ABC-анализ продаж, при необходимости сочетая его с XYZ-анализом продаж.
Блок мастер-данных продающей карточки товара
Мастер-данные — ключевые характеристики товара, которые попадают в CMS интернет-магазина из других информационных систем. Например, из складской программы, в которую товар вносят по накладным.
1. Преобразовывайте мастер-данные под запросы пользователей
Когда мастер-данные загружаются в CMS из складской программы, их нужно преобразовывать так, чтобы они соответствовали запросам пользователей. Например, в складской программе товар может называться «рубашка для офиса», а пользователь ищет на сайте «офисную рубашку». А также научите функционал поиска выводить максимально релевантные результаты под любой запрос пользователя.
2. Размещайте название товара в правильном месте
Название товара можно разместить над картинкой или справа от нее. Пользователи обычно изучают карточку слева направо, поэтому верхний левый угол — оптимальное место для названия. Посетитель быстро понимает, что нашел то, что хотел.
Название товара в верхнем левом углу карточки товара на citilink.ru.
3. Не бойтесь длинных названий
Позаботьтесь об удобстве пользователя — указывайте в названии всю важную информацию и все, что может быть понято неправильно. Не волнуйтесь, что название получится слишком длинным. Предусмотрите в дизайне достаточно места, чтобы даже длинный заголовок поместился в нужном блоке и отображался корректно.
Длинное название в карточке товара на ozon.ru.
4. Указывайте бренд в названии
Указание бренда в заголовке даст возможность сыграть на его известности, особенно когда бренд проводит рекламную кампанию в СМИ. Пример — на скриншоте выше.
5. Создайте шаблон названия
Переписывать названия из прайс-листа поставщика — не лучшее решение. Вы можете потерять часть важной для клиента информации. Чтобы ничего не забыть при создании карточек товара и оформить их в едином стиле, разработайте собственный шаблон названия.
Предлагаем для карточки товара для интернет-магазина шаблон названия такого вида:
[Категория товара] — [бренд (линейка)] — [модель (нюансы)] — [опциональные параметры].
Например: Увлажняющий крем от Christina для сухой кожи лица с морковным маслом, коллагеном и эластином (50 мл).
Предлагаем для карточки товара для интернет-магазина шаблон названия такого вида:
[Категория товара] — [бренд (линейка)] — [модель (нюансы)] — [опциональные параметры].
Например: Увлажняющий крем от Christina для сухой кожи лица с морковным маслом, коллагеном и эластином (50 мл).
6. Покажите стоимость товара
Стоимость — один из немногих универсальных элементов карточки товара, который должен присутствовать всегда, в том числе и в превью товара. Если на товар действует скидка, указываете не только текущую, но и регулярную цену и количество сэкономленных денег.
Вариант отображения стоимости товара, скидки и экономии.
7. Выводите цену за единицу товара, который продается в разных количествах
Например, если крем продается во флаконах разных объемов, нужно вывести цену крема за мл в каждом товарном предложении. Так пользователям будет удобнее сравнить предложения и принять решение о том, какую позицию добавить в корзину.
Возможность выбрать объем флакона в карточке товара на naos.ru.
8. Отобразите артикул товара
Зачем потенциальному покупателю знать артикул товара? Многие любят посещать реальные магазины, осматривать и примерять вещи, консультироваться с продавцами и заказывать в интернет-магазине, потому что там дешевле. Артикул поможет посетителю быстро найти приглянувшийся товар.
Артикул в карточке товара на wildberries.ru.
9. Покажите важные технические характеристики на первом экране
Понятно, что все технические характеристики не стоит выводить на первый экран — отобразите только самые важные для пользователя и обязательно прикрепите ссылку на полный перечень характеристик.
Отображение важных характеристик на первом экране на ozon.ru.
10. Соблюдайте единообразие технических характеристик
Когда у интернет-магазина несколько поставщиков, важно следить за единообразием представления технических характеристик. У каждого поставщика они могут быть представлены по-разному. Если не соблюдать единую структуру для всех товаров, это усложнит покупателям сравнение товаров по характеристикам между собой.
11. Группируйте технические характеристики для удобства пользователя
Для удобства изучения технические характеристики лучше группировать по разделам с подзаголовками. Или использовать элементы дизайна, которые улучшают читаемость — например, чередование цветов.
Группировка технических характеристик в карточке на ozon.ru.
12. Выводите подсказки для терминологии
По данным Baymard Institute, половина сайтов использует терминологию, непонятную для рядовых пользователей. Если посетители не могут понять, что означает та или иная техническая характеристика, они вынуждены уходить из интернет-магазина, чтобы найти определение термина. И не факт, что они вернутся.
Чтобы не терять пользователей, используйте всплывающие подсказки всегда, когда значение характеристики не очевидно. Для этого можно добавить значок с вопросом или символом информации, как на ozon.ru:
Чтобы не терять пользователей, используйте всплывающие подсказки всегда, когда значение характеристики не очевидно. Для этого можно добавить значок с вопросом или символом информации, как на ozon.ru:
Подсказка в карточке товара на ozon.ru.
13. Группируйте товары, но с осторожностью
Если один товар представлен в разных цветах, размерах, объемах, можно не создавать отдельные карточки для каждой вариации товара, а сгруппировать их и использовать выпадающие списки.
Выпадающий список ассортимента цветов в карточке товара на bonprix.ru.
Ассортимент цветов желательно отобразить на фотографиях — при изменении цвета в списке, пользователь должен увидеть соответствующую картинку. Одна и та же вещь может совершенно по-разному выглядеть в разном цвете — это очень важно для визуалов. С размерами и объемами проще — на картинках трудно понять отличия баночки в 50 или 100 мл, поэтому можно не фотографировать весь ассортимент.
Выбор цвета и размера может осуществляться и с помощью боксов — но они занимают больше места и сдвигают кнопку «Купить» вниз. Кроме того, список всегда будет занимать одно и то же место на карточке товара, независимо от количества размеров. Вы оцените это преимущество при разработке шаблона карточки.
Еще один недостаток боксов — негибкость шаблонов. У разных товаров разное количество торговых предложений. Если разработать шаблон на 8 размеров, а у продукта их будет 4, то на странице останется пространство. Это не эстетично, а наша цель — визуально привлекательная карточка товара.
Если же торговых предложений в боксах будет очень много, то этот блок сдвинет важные для конверсии элементы на второй экран, что может плохо сказаться на количестве добавлений товаров в корзину.
Выбор цвета и размера может осуществляться и с помощью боксов — но они занимают больше места и сдвигают кнопку «Купить» вниз. Кроме того, список всегда будет занимать одно и то же место на карточке товара, независимо от количества размеров. Вы оцените это преимущество при разработке шаблона карточки.
Еще один недостаток боксов — негибкость шаблонов. У разных товаров разное количество торговых предложений. Если разработать шаблон на 8 размеров, а у продукта их будет 4, то на странице останется пространство. Это не эстетично, а наша цель — визуально привлекательная карточка товара.
Если же торговых предложений в боксах будет очень много, то этот блок сдвинет важные для конверсии элементы на второй экран, что может плохо сказаться на количестве добавлений товаров в корзину.
Боксы с размерами на koftyonyshi.ru.
Группировать или не группировать? Решение должно быть принято с учетом особенностей целевой аудитории. Смело можно группировать мало отличающиеся визуально мерные товары — с разной длиной и объемом. Осторожнее нужно группировать товары по цвету — из-за особенностей восприятия визуалов.
Еще один неочевидный факт: если в каталоге мало товаров — покупают хуже. У людей есть потребность в наличии большого выбора — даже если нужна всего одна вещь. Если после группировки остается мало товаров — лучше не группировать.
Еще один неочевидный факт: если в каталоге мало товаров — покупают хуже. У людей есть потребность в наличии большого выбора — даже если нужна всего одна вещь. Если после группировки остается мало товаров — лучше не группировать.
Визуальный блок продающей карточки товара
В интернет-магазине покупают не товары, а контент — помогите потенциальному покупателю представить, как выглядит и используется товар в реальности. К визуальному блоку относятся продающие фото товара (в том числе 3D), видео, рич-контент. По законам юзабилити, визуальный блок располагают слева.
14. Добавляйте только значимый контент
Не пытайтесь наполнить карточку всем подряд. Изображение — универсальный элемент визуального блока. Остальные элементы добавляют исходя из того, насколько они важны для конкретного товара и целевой аудитории. Например, делать видео — дорого, а его наличие не всегда влияет на конверсию. Проверяйте целесообразность того или иного элемента тестированием в Google Optimize.
15. Используйте качественные изображения
В интернет-магазине нельзя пощупать или понюхать товар, на него можно только посмотреть. Поэтому нужно максимально воздействовать на зрение.
Идеальная карточка товара требует идеального изображения. Хорошие картинки значительно повышают конверсию — старайтесь заполнить карточку товара изображениями высокого качества и разрешения.
Картинка должна быть привлекательной и вдохновляющей. Чтобы потенциальный клиент представил, как использует товар, какую выгоду получает с его помощью.
Идеальная карточка товара требует идеального изображения. Хорошие картинки значительно повышают конверсию — старайтесь заполнить карточку товара изображениями высокого качества и разрешения.
Картинка должна быть привлекательной и вдохновляющей. Чтобы потенциальный клиент представил, как использует товар, какую выгоду получает с его помощью.
16. Увеличивайте изображения по наведению
Не пренебрегайте функцией детализации — чтобы посетитель смог приблизить интересующие детали и как следует рассмотреть их. Используйте возможность масштабирования изображения по наведению, а не с помощью кликов. Хорошие примеры реализации можно посмотреть на ozon.ru и wildberries.ru.
17. Дайте представление о размере продукта
Согласно исследованиям Baymard Institute, 42% пользователей пытаются определить размер товара по изображениям в карточке. В онлайне намного сложнее получить представление о размере продукта, чем в обычном магазине. Если показывать только товары сами по себе, пользователи не могут получить представление об их размере. Предлагайте хотя бы одно изображение, которое покажет товар на фоне других объектов. Например, одежду на моделях, предметы быта в интерьере, товар рядом с объектами известного размера. Понимание размера имеет решающее значение для покупок в интернет-магазинах.
Изображение робота-пылесоса на ozon.ru.
18. Привлеките внимание к дополнительным изображениям
Дополнительные изображения призваны показать продукт со всех сторон, его использование в повседневной жизни.Больше половины пользователей не замечают обозначения карусели. А значит думают, что перед ними все доступные изображения, и могут упустить решающую информацию. Поэтому важно сделать значки карусели заметными.
Значки прокрутки карусели на citilink.ru.
19. Покажите аксессуары, которые входят в комплект
Если в комплекте с основным товаром предлагаются аксессуары, покажите товар с аксессуарами на одном изображении. Важно исключить любую двусмысленность по поводу того, что входит и не входит в стоимость товара — это напрямую влияет на решение о покупке.
Кухонный комбайн с аксессуарами на ozon.ru.
20. Дополните изображения текстом
Изображения могут передавать только визуальную информацию. Текст может рассказать о товаре больше (например, о его запахе или устойчивости к погодным условиям), но многих пользователей пугает чтение больших текстов. Изображения рассматривают охотнее — переходя к карточке товара, 56% пользователей в первую очередь изучали изображения.
Чтобы пользователи не пропустили важную информацию, при оформлении карточек товара интернет-магазина можно дополнить изображения описанием или графикой.
Чтобы пользователи не пропустили важную информацию, при оформлении карточек товара интернет-магазина можно дополнить изображения описанием или графикой.
Изображение, дополненное графикой на ozon.ru.
Пользователи хорошо реагируют на изображения с описанием, они побуждают детальнее изучать товар. Кроме того, объединение изображений с описанием зачастую снижает расходы на произведение фотоконтента, так как снимает необходимость использования части изображений.
Отображение текста на картинке на ozon.ru.
21. Размещайте видео и обзоры 360° в правильном месте
Если нужно показать товар с разных сторон, можно использовать видео и обзоры.
Эффективность видеоконтента проверяйте тестированием. Не все пользователи готовы смотреть видео, но по результатам исследования Baymard Institute, такой контент существенно влияет на восприятие товара и помогает представить, как он впишется в жизнь.
Важно, чтобы пользователи могли найти видеоконтент в карточке товара. Если видео размещалось далеко от галереи изображений, у пользователей возникали проблемы с его поиском. Пользователи ожидали, что весь визуальный контент — изображения, видео, обзоры 360° — будет находиться рядом.
Видео и обзоры на 360° следует размещать вверху карточки, рядом с изображением товара. Дополнительно можно разместить видео и в блоке с характеристиками или описанием товара.
Важно, чтобы пользователи могли найти видеоконтент в карточке товара. Если видео размещалось далеко от галереи изображений, у пользователей возникали проблемы с его поиском. Пользователи ожидали, что весь визуальный контент — изображения, видео, обзоры 360° — будет находиться рядом.
Видео и обзоры на 360° следует размещать вверху карточки, рядом с изображением товара. Дополнительно можно разместить видео и в блоке с характеристиками или описанием товара.
Размещение видео в карточке товара на eldorado.ru.
22. Используйте рич-контент
Рич-контент — подробный, наглядный и интересный для аудитории контент, касающийся товара и обогащающий оформление карточки интернет-магазина. По данным iWENGO, снижает показатель отказов. Рич-контент может содержать привлекательные изображения, баннеры, ролики от производителя. Главное, чтобы он не уводил с карточки товара.
Красиво «упакованный» товар продается лучше аналога, о котором мало что известно. Чем цепляет рич-контент:
Недостаток рич-контента — сложность производства — компенсируется повышением конверсии и ростом продаж. Мы уверены, что рич-контент будет развиваться, и бренды, которые используют этот инструмент уже сейчас, оставят позади конкурентов.
- воздействует на эмоции, создает нужные ассоциации, вызывает желание обладать продуктом;
- ярко демонстрирует преимущества одного товара перед другим;
- показывает вероятные сценарии использования;
- дает возможность рассмотреть продукт со всех сторон
Недостаток рич-контента — сложность производства — компенсируется повышением конверсии и ростом продаж. Мы уверены, что рич-контент будет развиваться, и бренды, которые используют этот инструмент уже сейчас, оставят позади конкурентов.
Кнопки целевых действий в продающей карточке товара
Целевым действием может быть не только «Добавить в корзину», но и «Добавить в избранное», «Сравнить», «Заказать» (по предзаказу). Эти элементы обязательно должны присутствовать на первом экране.
23. Используйте заметную кнопку призыва к действию
Покупка — основное целевое действие карточки товара. Дизайн кнопки «Купить» в связи с этим приобретает особое значение. Кнопка должна привлекать внимание, быть заметной — достаточно большой, объемной, контрастирующего с фоном сайта цветом. Действие, к которому призывает кнопка, должно быть очевидным. Кнопка неосновного целевого действия обычно располагается ниже или рядом, а ее оформление подчеркивает, что это действие — не главное.
Оформление кнопок на bonprix.ru.
Не доверяйте жестким рекомендациям о цвете или расположении кнопок — тестируйте оформление карточки интернет-магазина, и вы найдете оптимальный вариант.
Возле кнопки иногда добавляют пояснения — например, что товар можно удалить из корзины в любое время или что безопасность покупки гарантирована.
Возле кнопки иногда добавляют пояснения — например, что товар можно удалить из корзины в любое время или что безопасность покупки гарантирована.
24. Выбирайте правильный призыв
Как определить, какой призыв добавить на кнопку — «Купить» или «Добавить в корзину»? Зависит от поведенческих факторов аудитории. Если обычно покупают только один товар, логичнее использовать кнопку «Купить». Если обычно покупают более 2 товаров, уместнее использовать кнопку «Добавить в корзину».
Возможны ли другие варианты призывов? Быть оригинальным — похвально, только убедитесь, что целевая аудитория вас понимает. У нее не должно быть сомнений, что кнопка с вашим нестандартным призывом — это обычная кнопка покупки.
Возможны ли другие варианты призывов? Быть оригинальным — похвально, только убедитесь, что целевая аудитория вас понимает. У нее не должно быть сомнений, что кнопка с вашим нестандартным призывом — это обычная кнопка покупки.
25. Реализуйте функционал покупки в один клик
По нашему опыту, грамотно реализованный функционал покупки в один клик повышает конверсию. И это закономерно — оформление покупки происходит быстрее, заказ удобно сделать в любых условиях и с любого устройства, не требуется регистрация. Также во время заказа можно получить консультацию, что снижает показатель отказов.
Возможность купить в один клик на lloom.ru.
26. Дайте возможность покупать товары, которых нет в наличии
Если интересующего посетителя товара нет в наличии, то пользователь с высокой вероятностью уйдет его искать у конкурентов. Вы уже потратили время на создание карточек товара для интернет-магазина. Не удаляйте карточку и не превращайте ее в страницу 404, если товара нет в наличии. Вы гарантированно потеряете покупателя, который может прийти на карточку откуда угодно.
Внесите корректировки в карточку и зарабатывайте при отсутствии товара:
Внесите корректировки в карточку и зарабатывайте при отсутствии товара:
- если товар недоступен временно — внедрите возможность предварительного заказа. Измените текст на кнопке: вместо «Купить» используйте «Предварительный заказ» или «Сообщить о появлении товара». Когда товар появится, покупатель и менеджер получат уведомления. Если покупка еще будет интересна, покупатель ее совершит.
Возможность узнать о поступлении товара на ozon.ru.
- если модель устарела и появилась новая версия — добавьте ссылку на нее в карточке товара. Высока вероятность, что посетитель проявит интерес.
- если модель устарела и больше не выпускается — добавьте ссылку на аналоги.
27. Разрешите добавлять в избранное без регистрации
Исследования показали, что пользователи часто отказываются от добавления товара в корзину при необходимости регистрации. Важно, чтобы не авторизированные пользователи имели доступ избранному или списку желаний.
Сервисный блок продающей карточки товара
К сервисному блоку относится информация о том, как заказать, оплатить и получить товар. Обязательно располагать его под кнопкой целевого действия — по данным iWENGO, это прямо влияет на конверсию. Вероятность покупки при наличии такого блока в три раза выше, чем при его отсутствии.
28. Покажите наличие товара
Отображайте наличие позиции на складе в карточке товара. Уверенность, что конкретный продукт готов к отправке, побуждает к покупке.
Наличие товара в разных точках продажи на leroymerlin.ru.
Можно показывать, что запасы продукта истекают, чтобы стимулировать пользователей не откладывать покупку.
29. Покажите варианты доставки для региона пользователя
Информацию о доставке лучше указать прямо в карточке товара. Упрощайте клиенту жизнь и путь к покупке.
Информация о доставке в карточке товара на onlinetrade.ru.
Особенно странно прятать информацию о бесплатной доставке — но 27% испытуемых не смогли ее найти, несмотря на то, что тщательно изучали сайты. Причина — информация была указана в баннере, не учитывалась проблема баннерной слепоты.
30. Внедрите модуль расчета стоимости доставки
Клиент хочет знать не только о способах доставки, но и о ее стоимости. Не рискуйте, заставляя покупателя переходить на сайты почтовых и курьерских служб. По данным Baymard Institute, 64% пользователей ищут информацию о стоимости доставки в карточке товара. Если этой информации нет, 23% пользователей прерывают процесс заказа, когда узнают о стоимости доставки.
Модуль расчета стоимости доставки разными службами стоит денег, но посетитель оценит заботу об экономии времени. Это значительно увеличит вероятность заказа, особенно когда стоимость доставки важна.
Модуль расчета стоимости доставки разными службами стоит денег, но посетитель оценит заботу об экономии времени. Это значительно увеличит вероятность заказа, особенно когда стоимость доставки важна.
31. Укажите информацию о гарантии и возможности возврата
Возможность вернуть товар всегда снимает часть возражений клиента и повышает уверенность в необходимости покупки. Укажите краткую информацию о гарантии, возможности вернуть товар не только на странице возврата товара, но и в карточке товара, и добавьте ссылку на подробное описание политики возврата.
Информация о возврате на wildberries.ru.
Позаботьтесь о том, чтобы условия возврата товара в интернет-магазин были написаны доступным языком и была удобной для пользователя. Десять процентов пользователей отказываются от заказа из-за непонятной или неудобной политики возврата. Если возврат невозможен, сообщите об этом сразу.
Текстовый блок продающей карточки товара
Тексты все еще читают, особенно если для выбора товара нужно вникать в технические характеристики.
32. Опишите детали продукта в карточке
Потребитель хочет получить максимум информации о продукте. Состав и характеристики товара (вес, размер, инструкции) должны быть отражены на карточке товара, а не в отдельном документе. Но не превращайте описание в гайд-бук — рассказывайте только о самом важном, о чем не рассказывают изображения или видео.
На сайте askona.ru объемное описание товара — в нашем исследовании опыта покупки матрасов в онлайне пользователи отмечали, что в описании мало полезной информации. Действительно важная информация спрятана во вкладке «Характеристики», но не все догадываются туда заглянуть.
На сайте askona.ru объемное описание товара — в нашем исследовании опыта покупки матрасов в онлайне пользователи отмечали, что в описании мало полезной информации. Действительно важная информация спрятана во вкладке «Характеристики», но не все догадываются туда заглянуть.
Описание товара на askona.ru.
Пользовательский контент продающей карточки товара
User-generated content (UGC) — контент, созданный пользователями. Обычные отзывы теперь дополняются рейтингами, фотографиями и видео от пользователей, может интегрироваться контент из соцсетей. Тренд на UGC объясняется просто: ретейлерам не нужно тратить время и деньги на создание такого контента — необходима только его модерация.
33. Добавьте отзывы в карточку товара
Покупатели любят читать об опыте людей, которые уже обладают товаром — позаботьтесь о том, чтобы они могли делать это в карточке товаров, не уходили на сторонние сайты. Отзывы привлекают внимание и помогают адекватно ценить товар. По результатам исследования, 95% пользователей опираются на отзывы, принимая решения о покупке.
По данным iWENGO, наличие от пяти позитивных отзывов повышает вероятность конверсии на 30%. Количество отзывов и ссылку на них нужно разместить на первом экране карточки, отзывы можно представить на втором-третьем экране.
По данным iWENGO, наличие от пяти позитивных отзывов повышает вероятность конверсии на 30%. Количество отзывов и ссылку на них нужно разместить на первом экране карточки, отзывы можно представить на втором-третьем экране.
Ссылка на отзывы в карточке товара на ozon.ru.
34. Позаботьтесь о том, чтобы отзывы могли добавлять только покупатели
Чтобы посетители получали достоверный контент, реализуйте функционал, который позволит добавлять отзывы на товар только тем, кто его действительно купил.
35. Не усложняйте отправку отзыва
Отзывы — бесплатный полезный контент, поэтому нужно сделать процесс их добавления максимально простым для пользователей. Не требуйте лишней информации для отправки отзывов.
36. Не пишите отзывы сами — стимулируйте покупателей
Размещая фальшивые отзывы, вы рискуете потерять доверие клиентов. Можно предложить скидку или бонусы за отзыв на купленный товар в рассылке. Ранее рассказывали, как заставить клиента оставить отзыв в карточке товара. Хотя просьба может сработать без дополнительных поощрений — люди любят делиться впечатлениями. По данным iWENGO, около 25% покупателей сами оставляют отзывы.
37. Работайте с негативными отзывами
Наличие негативных отзывов повышают доверие ко всем отзывам. Не удаляйте их, но и не выводите на первые позиции. Работайте с отзывами — не делайте стандартные отписки, отвечайте конкретно и нешаблонно, показывайте заботу о клиенте. По возможности компенсируйте недоработки.
Пример работы с негативным отзывом на ozon.ru.
38. Разрешите задавать вопросы о товаре
Дайте незарегистрированным пользователям возможность задавать интересующие их вопросы о товаре в карточке. Будьте готовы и сами отвечать на вопросы посетителей. Это дополнительная возможность получить обратную связь и лучше понять потребности и проблемы, с которой сталкивается целевая аудитория, а также стимулировать продажи.
Блок с ответами на вопросы пользователей на tomdom.ru.
Так, например, собрав все вопросы пользователей при покупке штор в онлайн-гипермаркете, мы значительно улучшили интерфейс при разработке нового интернет-магазина по продаже штор.
39. Добавьте блок со сводкой рейтингов
Исследования показывают, что посетители опираются на сводку с распределением оценок товара даже больше, чем на сами рейтинги. Если сводки нет, пользователи склонны не доверять отзывам, особенно если видят только положительные.
Пример сводки рейтингов на bonprix.ru.
Пять нюансов реализации сводки рейтингов:
- показывайте сводку по умолчанию для товаров с 5 отзывами и более;
- отображайте распределение оценок графически;
- выводите и хорошие, и плохие оценки;
- дайте возможность оценивать пользу отзыва;
- позвольте фильтровать отзывы по рейтингам — например, читать только отзывы с одной звездочкой.
Фильтрация отзывов по рейтингам на bonprix.ru.
40. Дайте возможность загружать изображения
Пользователи считают загруженные другими пользователями фотографии более достоверными. Не позволяя покупателям загружать фотоконтент, вы упускаете возможность вызвать доверие к товару. Можно выводить все фотографии покупателей в отдельном блоке:
Блок с фотографиями покупателей на ozon.ru.
Маркетинговый блок продающей карточки товара
К маркетинговому блоку относится все, что связано с увеличением среднего чека — дополнительные предложения (cross-sell, up-sell и down-sell), социальные доказательства, усилители конверсии.
41. Покажите альтернативные товары
Часто пользователи не знают точно, какой товар им нужен, имеют только представление о том, чего хотят. Если товар в карточке не соответствует критериям, у пользователя есть два варианта: уйти с сайта или искать альтернативы.
Сначала пользователи прибегают ко второму варианту. Если альтернативных товаров нет в карточке, им приходится начинать поиск с самого начала. И чем дольше пользователи ищут, тем больше устают — и тем выше вероятность ухода. Предложите альтернативные продукты прямо в карточке — реализовав, к примеру, блок «Похожие товары». Так вы упростите пользователям поиск и поможете быстрее найти нужное. Главное, чтобы выведенные предложения соответствовали ожиданиям покупателей.
Сначала пользователи прибегают ко второму варианту. Если альтернативных товаров нет в карточке, им приходится начинать поиск с самого начала. И чем дольше пользователи ищут, тем больше устают — и тем выше вероятность ухода. Предложите альтернативные продукты прямо в карточке — реализовав, к примеру, блок «Похожие товары». Так вы упростите пользователям поиск и поможете быстрее найти нужное. Главное, чтобы выведенные предложения соответствовали ожиданиям покупателей.
Блок «Похожие товары» на wildberries.ru.
42. Предложите дополнительные товары
Так вы улучшите навигацию по каталогу товаров и повысите осведомленность о них. Для совместимых товаров можно предлагать аксессуары — только убедитесь, что они действительно совместимы.
Также можно предлагать сопутствующие товары, которые используются вместе с основным. Например, на сайте matras.ru вместе с матрасом предлагают приобрести наматрасник.
Также можно предлагать сопутствующие товары, которые используются вместе с основным. Например, на сайте matras.ru вместе с матрасом предлагают приобрести наматрасник.
Возможность добавить сопутствующий товар на matras.ru.
А на сайте 220-volt.ru выводят целый блок сопутствующих товаров:
Блок с сопутствующими товарами на сайте 220-volt.ru.
Попробуйте увеличить средний чек, отобразив товары, которые купили другие посетители, вместе с интересующим покупателя продуктом. Вероятность, что покупателя что-то заинтересует высока, поэтому не игнорируйте эту возможность при оформлении карточки товара.
Блок с товарами, которые купили другие пользователи на bonprix.ru.
Для обычных товаров можно реализовать блок персональных рекомендаций позиций из других категорий вроде «Вам также может понравиться». Для реализации этого блока лучше внедрить специальный функционал, который подбирает товары на основе анализа данных о пользователе.
Это alias block. Задайте ID блока-оригинала.
43. Предлагайте альтернативные и совместимые товары отдельно
Чтобы случайно не приобрести неподходящий товар, пользователь должен отличать альтернативные товары от совместимых. Предлагайте их в блоках с разными названиями — эти блоки даже необязательно размещать рядом друг с другом. Особенно тщательно нужно выделять совместимые товары, так как некоторые пользователи полагают, что все предлагаемые товары совместимы по определению.
44. Сформируйте комплекты, чтобы дополнить образ (для fashion)
Когда человек уже настроен покупать, несложно подтолкнуть его к дополнительной покупке. Вещь сама по себе не может быть модной или немодной, модным или немодным может быть образ. Сформируйте комплекты гармонирующих вещей и предложите клиенту, который решил приобрести одну из вещей образа, дополнить его.
Важный нюанс: составляющие образа нужно размещать на карточке. Не уводите клиента с карточки товара, реализуйте возможность видеть составляющие комплекта сразу. Где они будут отображаться — зависит от дизайна. Разрабатывая концепт для Gloria Jeans, мы добавили товары, в которые одета модель, в правый сайдбар и реализовали возможность добавить весь образ в корзину одним кликом. Это экономит время клиента и увеличивает средний чек.
Скидки на другие составляющие комплекта давать не обязательно, готовый образ сам по себе ценен. Но если все-таки решите давать скидку, показывайте ее размер.
45. Отображайте недавно просмотренные товары
Блок помогает пользователю быстро найти нужный товар среди уже просмотренных.
Блок недавно просмотренных товаров на lamoda.ru.
46. Используйте ментальные триггеры
Ментальный триггер — импульс, который побуждает человека принять нужное решение, выполнить действие. Один из важнейших для онлайн-продаж триггеров — доверие. Чтобы его заслужить, можно использовать следующие принципы:
Вот как выглядит идеальная карточка товара с использованием ментальных триггеров:
- принцип авторитета — доверяют экспертам, значит в рекламе стоит опираться на авторитет блогеров, дизайнеров, известных людей.
- принцип взаимности — если вы помогли человеку, дали ему что-то полезное, то он вряд ли откажет вам.
- принцип симпатии — если дизайн магазина и фотографии товара приятны пользователю, то шансы на покупку выше.
- принцип социального доказательства — если товар покупают другие, создан ажиотаж, то само собой всплывает решение «надо брать».
- принцип дефицита — страх упустить возможность обладать товаром стимулирует поторопиться с покупкой.
Вот как выглядит идеальная карточка товара с использованием ментальных триггеров:
Карточка товара с ментальными триггерами для концепта Gloria Jeans.
47. Тестируйте функционал «поделиться в соцсетях»
Функционал поделится в соцсетях нужно тестировать — пользователи могут уходить с продуктовой страницы. О внедрении стоит задумываться, если интернет-магазин предлагает товары, за которые платят не те, кто их выбирает (меха, ювелирные изделия, белье). И даже в этом случае важно проверять, как отражается внедрение функционала на конверсии и показателях отказа.
Дополнительные блоки продающей карточки товара
Дополнительные блоки — блоки, которые полезны для определенного типа товаров. Например, таблица соответствия размеров для fashion.
48. Добавьте таблицу соответствия размеров (для fashion)
Таблицу размеров лучше размещать над блоком выбора размера. Логично сначала правильно определить размер, а потом выбирать. Посмотрим, как можно это реализовать на карточке товара для интернет-магазина на примере ASOS:
Ссылка на таблицу размеров на asos.com.
При открытии таблицы размеров посетитель должен оставаться на карточке товара, а не попадать на другие страницы — это снижает конверсию.
Не вынуждайте покупателя и скачивать документ — это препятствие к покупке, которое тоже негативно скажется на конверсии.
Пример грамотной реализации таблицы размеров — wildberries.ru. Таблица не уводит на другую продуктовую страницу, после закрытия окна покупатель снова видит правильную карточку товара в интернет-магазине:
Не вынуждайте покупателя и скачивать документ — это препятствие к покупке, которое тоже негативно скажется на конверсии.
Пример грамотной реализации таблицы размеров — wildberries.ru. Таблица не уводит на другую продуктовую страницу, после закрытия окна покупатель снова видит правильную карточку товара в интернет-магазине:
Таблица размеров на wildberries.ru.
Важный нюанс: таблица размеров должна соответствовать продукту — идеально, когда свои таблицы имеют не только товары для женщин, мужчин и детей, но и товары разных подкатегорий. Например, если на карточке товара брюки, то показываются только возможные размеры брюк.
10 правил SEO-оптимизации продающей карточки товара
Готовые карточки товаров должны быть не только привлекательными и удобными для посетителей магазина, но и грамотно оптимизированными. Разберемся, как правильно заполнить карточку товара с точки зрения SEO.
1. Используйте микроразметку schema.org
Для товарных карточек используется микроразметка schema.org. Этот инструмент сообщает поисковой системе дополнительную информацию о товаре. Это может быть его описание, сведения о производителе, характеристики, стоимость.
Вот как выглядит сниппет с микроразметкой в поисковой выдаче:
Вот как выглядит сниппет с микроразметкой в поисковой выдаче:
Сниппет с микроразметкой в поисковой выдаче.
Микроразметка schema.org подходит и для Google, и для Яндекс.
Привлекательный сниппет увеличивает кликабельность, поэтому о микроразметке лучше позаботиться на самых ранних этапах SEO-оптимизации.
Стоит указать следующие данные:
Привлекательный сниппет увеличивает кликабельность, поэтому о микроразметке лучше позаботиться на самых ранних этапах SEO-оптимизации.
Стоит указать следующие данные:
- название товара,
- описание свойств,
- бренд,
- адрес картинки,
- стоимость товара,
- валюту,
- рейтинги и отзывы,
- наличие.
2. Настройте генерацию мета-тегов
Title (название страницы). Отображается в поисковой выдаче и на вкладке браузера. В Title должен входить ключ — обычно это название товара. Также в него может входить бренд производителя, номер модели, локация, важные характеристики и коммерческие вхождения — цена, купить.
Title должен быть уникальным — дубли плохо влияют на продвижение. Сделать Title уникальным легко, если каждый раз добавлять в заголовок номер модели.
Универсальный шаблон для Title можно представить так:
[Название товара] — [производитель] — [номер модели] — [характеристики] — [артикул].
Description (описание страницы). Описание не должно повторять заголовок, призвано расширять его. Максимальная длина — 250 символов. Иногда Description участвует в формировании сниппета.
В Description стоит включить название товара, бренд, номер модели, характеристики, информацию о доставке и гарантиях, CTA, спецсимволы.
Для создания Description тоже можно составить шаблон. Например:
Предлагаем [название товара] [бренд] по цене от __ до __ руб. Бесплатная доставка в [город]. Полный ассортимент товаров на сайте. Закажите [название товара] прямо сейчас по телефону [телефон].
Заголовки Н1-Н6. Заголовок Н1 — главный заголовок текста, Н2-Н6 — подзаголовки. В них стоит вписывать название товара.
Для небольших магазинов мета-теги можно прописывать вручную. Если ассортимент товаров широкий, используйте специальные плагины, которые могут составлять мета-теги автоматически, по заданному шаблону.
Title должен быть уникальным — дубли плохо влияют на продвижение. Сделать Title уникальным легко, если каждый раз добавлять в заголовок номер модели.
Универсальный шаблон для Title можно представить так:
[Название товара] — [производитель] — [номер модели] — [характеристики] — [артикул].
Description (описание страницы). Описание не должно повторять заголовок, призвано расширять его. Максимальная длина — 250 символов. Иногда Description участвует в формировании сниппета.
В Description стоит включить название товара, бренд, номер модели, характеристики, информацию о доставке и гарантиях, CTA, спецсимволы.
Для создания Description тоже можно составить шаблон. Например:
Предлагаем [название товара] [бренд] по цене от __ до __ руб. Бесплатная доставка в [город]. Полный ассортимент товаров на сайте. Закажите [название товара] прямо сейчас по телефону [телефон].
Заголовки Н1-Н6. Заголовок Н1 — главный заголовок текста, Н2-Н6 — подзаголовки. В них стоит вписывать название товара.
Для небольших магазинов мета-теги можно прописывать вручную. Если ассортимент товаров широкий, используйте специальные плагины, которые могут составлять мета-теги автоматически, по заданному шаблону.
3. Сформируйте ЧПУ-ссылки для страниц
Лучше использовать человекопонятные URL — они упрощают пользователям навигацию и повышают юзабилити. Например, /catalog/litso/snyatie_makiyazha/sensibio_n2o_mitsellyarnaya_voda/
Если внедрить в ЧПУ ключевые слова, то поисковикам будет проще понять содержимое продуктовой страницы. Для создания ЧПУ чаще используют транслитерацию.
Если внедрить в ЧПУ ключевые слова, то поисковикам будет проще понять содержимое продуктовой страницы. Для создания ЧПУ чаще используют транслитерацию.
4. Составьте атрибуты Alt и Title для картинок
При грамотной настройке атрибутов Alt и Title для картинок вы получите дополнительный трафик по изображениям из поисковых систем.
Атрибут Alt для картинок отображается, когда невозможно загрузить изображения. Вместо картинки при заполненном атрибуте будет выведен текст.
Атрибут Alt для картинок отображается, когда невозможно загрузить изображения. Вместо картинки при заполненном атрибуте будет выведен текст.
Пример отображения атрибута Alt.
Это помогает пользователю узнать содержимое картинки, когда ее невозможно увидеть. Текст в атрибуте Alt учитывается при индексации сайта.
Для составления атрибута Alt используйте 3-5 слов (до 80 символов), включайте ключевые запросы в именительном падеже. Не спамьте, перечисляя ключи через запятую — приводите содержательную информацию, действительно описывающую содержимое картинки.
Атрибут Title выводит вспомогательную информацию о картинке при наведении на нее курсора.
Для составления атрибута Alt используйте 3-5 слов (до 80 символов), включайте ключевые запросы в именительном падеже. Не спамьте, перечисляя ключи через запятую — приводите содержательную информацию, действительно описывающую содержимое картинки.
Атрибут Title выводит вспомогательную информацию о картинке при наведении на нее курсора.
Пример отображения атрибута Title.
При составлении Title для картинок также будьте лаконичны и конкретны, употребляйте ключевые слова. Текст должен быть релевантен картинке.
5. Позаботьтесь об отсутствии дублей карточек товаров
Если один товар присутствует в разных категориях и имеет разные URL, то для него нужно прописать атрибут rel="canonical", чтобы указать системе основной адрес карточки.
6. Используйте хлебные крошки
Хлебные крошки — цепочка страниц, которые прошел пользователь от главной до текущей страницы. Относятся к элементам навигации на сайте.
Хлебные крошки на citilink.ru.
Почему нужно использовать этот элемент:
Важно правильно внедрять хлебные крошки в дизайн карточек товара интернет-магазина. Цепочка должна располагаться вверху страницы и гармонировать с оформлением карточки. Все страницы цепочки, кроме текущей, должны быть кликабельны. На главной странице хлебные крошки не отображают — циклические ссылки негативно влияют на позицию в поисковых системах.
- удобство посетителя — он может легко вернуться назад на нужное количество шагов;
- положительное влияние на SEO — хлебные крошки выступают элементом перелинковки и улучшают позицию в поиске.
Важно правильно внедрять хлебные крошки в дизайн карточек товара интернет-магазина. Цепочка должна располагаться вверху страницы и гармонировать с оформлением карточки. Все страницы цепочки, кроме текущей, должны быть кликабельны. На главной странице хлебные крошки не отображают — циклические ссылки негативно влияют на позицию в поисковых системах.
7. Проверяйте карточки на индексацию и добавляйте в sitemap.xml
Если карточка не индексируется, то она не принесет трафика. Проверить карточки на индексацию можно в Яндекс.Вебмастере или с помощью плагина RDS-bar.
Затем карточки товара нужно добавить в карту сайта — для быстрой индексации поисковыми системами.
Затем карточки товара нужно добавить в карту сайта — для быстрой индексации поисковыми системами.
8. Измеряйте скорость открытия карточек товаров
Чем быстрее открывается карточка, тем больше трафика может прийти. Проверяйте скорость работы сайта по Google Page Speed.
9. Подготовьте качественные описания
Описание товара должно быть емким (до 250 символов), уникальным и seo-оптимизированным. Важно соблюсти баланс заботы о seo и о пользователе — предоставить структурированные характеристики для быстрого нахождения нужных свойств или сравнения товаров. Не копируйте тексты с сайтов производителей, и не пишите текст для заполнения пустого места. Изучите вопросы, комментарии пользователей о товаре и дайте ответы на них.
10. Используйте разметку Open Graph для карточек товаров
Разметка Open Graph по функциям аналогична разметке schema.org — только используется не для поисковых систем, а для социальных сетей. Корректность разметки можно проверить отладчиком Facebook.
Заключение
Теперь вы знаете, как заполнять карточки товаров в интернет-магазине, а значит создадите удобные для пользователей и высококонверсионные продуктовые страницы.
Еще раз напоминаем о необходимости А/Б тестирования при внедрении новых элементов. Заполнять карточки товаров интернет магазинов бессистемно — неверная стратегия. Тестирование — основа системной и успешной работы над повышением конверсии интернет-магазина.
Еще раз напоминаем о необходимости А/Б тестирования при внедрении новых элементов. Заполнять карточки товаров интернет магазинов бессистемно — неверная стратегия. Тестирование — основа системной и успешной работы над повышением конверсии интернет-магазина.
А еще вы можете проверить сайт по внутреннему чек-листу KISLOROD и убедиться, что сделали максимум для удобства пользователя и высокой конверсии.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)
Рекомендованные статьи
Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас:
