Что такое карточка товара и как ее оформлять
6,5 мин.
Что же такое карточка товара? По сути — это уникальный инструмент, при правильном использовании которого можно достичь нескольких целей одновременно:
- побудить клиента совершить покупку;
- повысить поисковую выдачу сайта;
- удержать клиента на сайте для совершения новых покупок и проч.
Заметим, что вид карточки товара претерпевал изменения в процессе становления. Продавцы искали новые и новые способы привлечения клиентов посредством использования шрифтов, стилей, размера информации и т. д. Сейчас сложился некий образ работающей карточки товара, который и опишем.
При построении вида карточки товара дизайнеры опираются в первую очередь на исследования Якоба Нильсона, которые проводились в 2006 и 2019 годах. По результатам сделан вывод, что пользователи при изучении продающих страниц перемещают зрительный фокус в виде английской буквы «F». Таким образом, размещение значимого контента должно учитывать эту особенность.
Опишем блоки, которые обязательно присутствуют, а какие еще элементы добавить по желанию.
Карточку товара можно условно разделить на 4 блока:
- заголовок;
- визуальная составляющая (фото, видео);
- цена, кнопки покупки и текстовое описание;
- дополнительная информация.
Заголовок на карточке товара
Блок заголовка размещается в левом верхнем углу карточки товара. Иногда допускается размещение заметного заголовка справа от фотографии, которая в этом случае размещается в верхнем левом углу.
Заголовок отображается увеличенным шрифтом, который легко читается. При этом сама структура заголовка должна быть подробна, но при этом не перегружена информацией. Оптимально: сначала написать тип товара, далее бренд или марку, конкретную модель, а затем дополнительную информацию, например, цвет или количество. Например, «Смартфон Honor 7A белый».
Не так редко заказчики, стремясь сократить длинный заголовок, не хотят размещать бренд в названии, считая, что отображается в меню или в открытом разделе. Но это не так. Клиенты скорее обратят внимание на яркий заголовок, чем будут выискивать бренд отдельно, например, если просмотрено уже много товаров интернет-ресурса.
Иногда к этому блоку относят url страницы. Старайтесь использовать только человекопонятные url (ЧПУ). Адрес карточки товара при этом должен не быть слишком длинным и при этом легко читаться в последней части конкретной страницы. Например, вместо «https://www.site.ru/smartphone/tovar-265» пишите «https://www.site.ru/smartphone/honor7a-white». Избегайте слишком длинных названий в url, чтобы не перегружать строку. Заметим, что ЧПУ увеличивает лояльность клиента к сайту на 35%.
Еще одним инструментом являются «хлебные крошки». Под этим термином понимают указание полного пути разделов и подразделов до товара. «Хлебные крошки» размещаются над заголовком (или фотографией, если странница начинается с нее) и делаются неярким мелким шрифтом. Удобство использования заключается в том, что клиент может легко перейти в подраздел уровнем выше, для того, чтобы посмотреть похожие товары той же категории. Не приходится проделывать полный путь с начала, что повышает вероятность покупки и удерживает от быстрого перехода на сайты-конкуренты.
Визуальная составляющая
Согласно F-исследованию фотография товара размещается в левой части карточки товара. Размер подбирают достаточным, чтобы привлечь внимание покупателя, но при этом не перегрузить страницу, не оставив место для информации.
Покупатели интернет-магазинов рассматривают товары внимательно, ведь не могут физически пощупать и оценить. Поэтому рекомендуем размещать изображения большого разрешения. При этом для просмотра нужно не открывать всплывающее окно фотогалереи, а добавить функционал «Лупа». Благодаря чему, клиенты просматривают товар, приблизив ту или иную заинтересовавшую часть.
Размещайте максимально возможное количество фотографий для просмотра товара с разных ракурсов. При выборе цвета или иных параметров разместите соответствующие изображения. Для одежды не лишней будет отдельная фотография, показывающая ткань вблизи.
В блоке фотографий для товаров можно добавить видео, длительностью 3–5 минут. Это подойдет при продаже техники и электроники. Возможно размещение 3D-обзора. При необходимости размещения большего количества видеоинформации, помещайте в специальный блок ниже.
Блок покупки
Размещается в правой верхней части карточки товара. Ключевые элементы блока, выделяемые цветом и шрифтом, — цена и кнопка заказа. Это информативный и продающий блок информации.
Обратите внимание, что помимо цены можно указать наличие скидок, размера выгоды от покупки, а также разместить специальные значки «Хит продаж», «Бестселлер» и аналогичные. Иногда визуально выделяют рейтинг товара звездочками, на основании отзывов покупателей. Таким образом, повышаем привлекательность товара.
Избегайте ситуаций, когда цена товара неожиданно изменяется в большую сторону. Лучше разместить дополнительно информацию по стоимости доставки и произвести расчет на странице, описать специальные предложения для бесплатной доставки. 15% покупателей уходят, если цена в корзине неожиданно возрастет.
Кнопка заказа должна контрастировать с общим цветом страницы, притягивать к себе внимание. Психологические исследования рекомендуют не делать такую кнопку ярко-красной, т. к. это слишком агрессивно может восприниматься покупателями. Цвет кнопки должен гармонировать и контрастировать со стилем сайта. Тут не столько важен цвет, сколько восприятие карточки товара глазами и мозгом.
Кроме стандартных кнопок «В корзину», «Купить» и аналогичных, можно добавить специальную кнопку «Оформить в один клик». 30% покупателей не хотят связываться с длительной регистрацией и оформлением. Однако не для каждого товара это подойдет. Купить книгу или небольшой бытовой прибор, конечно, можно, а вот покупка крупной техники или дорогого товара без регистрации — это странно.
Что касается описания товара, то оно должно быть полным, но лаконичным. Для тех покупателей, кто «любит почитать» будет специальный блок ниже. А здесь ознакомительная и полная информация о товаре, бренде, цвете, характеристиках. Часто это блок используют в SEO-целях, поэтому не рекомендуем размещать описания более 500–1000 символов.
Если добавляете блоки с дополнительными параметрами, например, таблицу размеров для одежды, то лучше это сделать в виде pop-up-окошка, чем уводить клиента со страницы товара и тем уменьшать вероятность покупки.
Помимо описанного выше, блок покупки включает в себя варианты выбора для товара, если такие имеются. Например, для выбора цвета, размера, комплектации, габаритов и проч. Все сложно перечислить, т. к. определяется конкретным товаром. Информацию размещают в виде выпадающего списка или чек-бокса. И тот, и другой метод имеют достоинства и недостатки. Так, чек-бокс пользователи считают удобнее для выбора характеристик, но для товаров может сильно разниться количество вариантов, поэтому не всегда удается подобрать точный размер области. Этой проблемы нет с выпадающими списками, однако информация в них не всегда легко воспринимаема.
Еще добавьте функционал «Отложить товар» или «Уведомить о наличии». Это способ запомнить интересующие клиента товары и, если покупка не состоялась, можно время от времени напоминать об интернет-ресурсе и тем самым привести к покупке. Такие кнопки выполняют в стилистике сайта и не делают настолько контрастными, как кнопки непосредственной покупки.
Дополнительная информация
В этом блоке рекомендуют размешать информацию, которая поможет пользователю дополнительно определиться с покупкой:
- подробное описание;
- файлы технической документации;
- инструкции;
- видео-дополнения;
- отзывы клиентов;
- рекомендуемые товары;
- недавно просмотренные товары и проч.
Отзывы на карточке товара — это важная продающая составляющая. Чем больше отзывов и оценок, тем выше рейтинг товара для покупателей. При этом заказные отзывы пользователи отличают легко, и сразу портится общая картина. Просите оставить отзыв после покупки, возможно, предоставляйте скидки или баллы, но даже оценка с фразой «Хороший товар» лучше, чем ничего или указание, что «Товар купило 3264 человека». Пустым цифрам не верят. Негативные отзывы тоже нужны, но на них требуется грамотно отвечать. Так покажете новым покупателям, что работаете над улучшением качества.
Способом удержания клиентов на сайте и повышения мотивации на дальнейшие покупки является размещение в дополнительном блоке функционала «С этим товаром покупают» или «Ранее просмотренные товары». Такая ненавязчивая демонстрация дает увеличение процента покупок на 30–42%.
SEO-оптимизация
Для того чтобы карточка товара работала не только для текущих посетителей интернет-ресурса, но и повышала выдачу в поисковых системах, проводите SEO-оптимизацию.
Для каждой конкретной страницы требуется:
- Проставление Title страницы.
Это заголовок страницы, который отображается в верхней строке браузера и в поисковой системе. Как правило, это дублирование заголовка страницы с добавлением слов «купить», названия города и, возможно, цены. - Описание Description.
Краткое текстовое описание страницы до 160 символов. Здесь используют специальные ключевые слова, однако не делайте навязчиво, чтобы текст не потерял смысл.
Мобильная версия
В эру мобильных устройств интернет-магазины выполняют адаптацию карточек товаров под мобильные устройства. Экран смартфона, даже имея высокое разрешение, не удобен для просматривания стандартной четырехблоковой структуры. Поэтому модернизируют следующим образом сверху вниз:
- название товара (возможно с «хлебными крошками»);
- крупное фото с перелистыванием;
- цена и кнопки покупки;
- блоки информации и дополнительной информации.
Часто цену в мобильной карточке товара дублируют, а кнопку заказа жестко закрепляют в нижней части экрана, чтобы не пропадала при пролистывании.
Блок с рекомендуемыми товарами стараются сохранить, правда, размещают мелко в самом низу страницы.
Вывод
Карточка товара — это лицо интернет-магазина. Насколько удобно и удачно будет наполнена, как красиво и понятно оформлена, настолько будет высока продающая способность.
Мы рады помочь создать оптимальную карточку товара с точки зрения как пользователя, так и SEO-продвижения сайта!
