Карточка товара в интернет-магазине заменяет витрину. Красочно оформленная, достаточно информативная и удобная для просмотра карточка товара способна привлечь внимание посетителя сайта, превратив его из потенциального клиента в реального.
В этой статье мы рассмотрим структуру работающей карточки товара, интересные моменты в составлении описаний и фотографий, а также другие параметры, благодаря которым можно создать у человека позитивные эмоции и побудить приобрести ваш продукт.
Рассматривать мы будем каждый элемент карточки по отдельности:
Хлебные крошки
Выполняют навигационную функцию на вашем сайте. Благодаря им, пользователь всегда понимает в какой точке “пространства” вашего ресурса он находится.
Этот элемент оказывает влияние на SEO-продвижение вашего сайта, ведь он в одном месте собирает несколько ссылок на другие страницы вашего сайта, что облегчает работу поисковых роботов.
Классикой расположения хлебных крошек является отдельная строчка в левой верхней части страницы. И это устаревший подход. Дело в том, что тогда данная строчка крадет полезную площадь карточки и заставляет убирать полезный контент в виде фото товаров и его описания ниже.
Расположите хлебные крошки на одном уровне с заголовком страницы и вы сэкономите полезную площадь.
Наименование товара
Цель этого элемента — дать посетителю понять, на ту ли страницу он попал. Наименование товара в десктопной разработке выводят на первый уровень по восприятию с помощью увеличенного кегля и начертания. Оптимальное расположение слева или справа от фото. Но, ни в коем случае не выше (снова из-за экономии пространства).
Изображение товара
Одна из граней маркетингового треугольника (изображение - цена - скидка). Добавьте на сайт исключительно качественные HD-фото, обязательно демонстрирующие товар с разных ракурсов. Задний фон не должен отвлекать от товара, мешая его рассмотрению.
Хорошим вариантом будет добавить карусель из фото или более элегантную возможность изменения фото по наведению на соответствующую область главного фото.
Не пренебрегайте возможностями масштабирования снимка и фотографиями комплектующих.
Список желаемых товаров
Данная опция позволяет узнать о конкретных вкусах и желаниях человека, чтобы затем попытаться вернуть его на сайт «вкусным» предложением. Вы можете использовать одну из следующих тактик:
-
Отправка напоминающего письма на почту.
-
Уведомление о скидке на данный товар.
-
Предложение аналогичных продуктов, имеющих более бюджетную стоимость.
Кнопка “поделиться”
Рекомендует снабдить таким элементом страницы товара, статьи и корзину. Купив товар, найдя то, что он искал, покупатель может распространить ссылку на классный товар в соцсетях, демонстрируя таким образом свою удовлетворенность уровнем услуг интернет-магазина.
Цена продукции
Имея данные о цене вообще и в данный момент (со скидкой), люди более склонны покупать товары, нежели в случаях с отображением только одной цены. Данные подтверждаются исследованиями крупнейшей торговой площадки в мире — Amazon.
Рейтинг товара
Этот элемент служит подтверждением того, что этот товар уже покупали и имели положительный опыт взаимодействия с ним. Также можно отображать данные о рейтинге уже в меню поисковиков, до перехода на сам сайт.
Клиентские отзывы
Еще один элемент, который работает на поднятие доверия к вашему товару. По статистике более 65% клиентов неизменно изучают отзывы перед тем как принять решение о покупке.
Не стоит бояться и удалять негативные отзывы, просто отрабатывайте их. Напишите клиенту, пообещайте при всех, что разберетесь в ситуации. Люди будут больше доверять такому магазину, чем сайту только с позитивными отзывами.
Выгода продукта
Рассказать о выгодах часто просто забывают. Однако, вместо сомнительных преимуществ или несбыточных обещаний просто расскажите клиенту, какие выгоды он получит от покупки.
Размеры и габариты
В некоторых тематиках это является весьма важным критерием при покупке товаров. К примеру, в продаже телефонов, ноутбуков или книг это не особо важный параметр, а в сфере продаж мебели, бытовой техники или одежды размеры и габариты товара являются важными критериями при онлайн покупке. И выводить их следует на первый экран. Одним из вариантов исполнения могут быть таблицы размеров.
Артикул товара
Цифровой код (артикул) товара позволяет легко вести учет товарооборота и заказывать товар даже при некорректно работающем магазине или при покупке оффлайн.
Варианты доставки
“Неожиданности” с отсутствием доставки в город клиента или слишком дорогой доставкой может стать причиной большого числа брошенных корзин на вашем сайте.
А вывод в карточке товара информации о доставке поможет отсеять тех, кому не подходят цены или способы доставки, а также снизит количество брошенных корзин на сайте, сэкономив время и посетителям, и торговой площадке.
Видеообзор
Наряду с качественными фотографиями иногда имеет смысл добавлять видеообзоры. Обзоры могут быть разной длины – от 30 сек. до 20 мин., но обязательно информативные и по существу, с комментариями консультанта или специалиста. Так вы предоставляете возможность напрямую увидеть на что способен и как именно работает тот или иной товар.
Наличие товара
Данный блок сразу необходимо показать пользователю. Он снизит число отказов от покупки из-за отсутствия товара на складе. Важно, что при создании элемента, который будет сигнализировать об отсутствии товара необходимо использовать контрастные и заметные элементы, чтобы пользователь сразу обратил на него внимание.
Как вариант, просто блокировать кнопку заказа и добавлять пояснение.
Кнопки кастомизации
Согласитесь, что ваши пользователи будут довольны, если прямо в карточке товара могут выбрать желаемый цвет, его фасон, размер или конкретную модель.
Призыв к действию
Подтолкните посетителя к совершению покупки, использовав кнопку первого порядка с ярким цветом. Идеальная кнопка соответствует следующим характеристикам:
-
выделяется на фоне остального меню;
-
имеет заметный большой размер;
-
привлекательна и сразу видна;
-
пробуждает желание нажать её.
Одним из трендов является закрепление кнопки внизу экрана, чтобы она всегда была видна при скроле.
Кнопка “Купить в 1 клик”
Примерно 40-50% покупок в интернет-магазинах совершается через эту кнопку. Эта кнопка призвана удержать на сайте тех покупателей, которые не хотят заполнять множественные поля при заказе через стандартную страницу оформления заказа.
Гарантия возврата
Информирование о возможности вернуть товар, который не подошел, повышает ваш престиж в глазах людей.
Гарантийный сервис
Люди гораздо охотнее приобретут дорогой товар (холодильник, телевизор), удостоверившись, что на него действует бесплатная гарантия от самого производителя или магазина.
Детализированная информация о продукте
Предоставляйте все имеющиеся у вас данные о товаре. В том числе:
-
подробное описание товаров;
-
технические характеристики;
-
комплектация;
-
страна-производитель;
-
вес;
-
инструкции, руководства.
-
другие важные параметры.
Сюда же относится информация о брендах. Этот раздел пригодится той части покупателей, которые внимательно изучают ассортимент, ориентируясь на мировое имя производителя.
“Похожие товары” и “С этим товаром покупают”
Часть товаров всегда нуждается в периодической замене составляющих (станок и лезвие, принтер и тонер), поэтому весьма предусмотрительно будет указывать список сопутствующих предложений, к оформляемой покупке.
Иногда показывают список аксессуаров, которые подходят в выбранной покупке.
Список “Вы смотрели ранее”
В случае обильного выбора, множества категорий и брендов, некоторые люди могут попросту забыть, какой товар они планировали приобрести минутой ранее. Исправить это можно опцией “Недавно просмотренные товары”.
Базовые правила создания эффективных карточек
После того, как мы рассмотрели основные элементы карточек товаров, мы предлагаем познакомиться с основными паттернами их формирования.
-
Группируйте максимум элементов в одном экране. По сравнению со стандартной “строчной” схемой расположения элементов в карточке товара (когда каждый элемент располагается ниже предыдущего), эта схема имеет ряд преимуществ: экономит место и просто является более привлекательной глазу пользователя.
-
Разбивайте карточку на блоки и подблоки. Группируйте их в соответствии со сценариями знакомства с карточками и наличием или отсутствием тех или иных параметров у данного конкретного товара.
-
Используйте теорию “живых” и “мертвых” строк. Живой строкой называют элемент, который может изменять свой размер. Какие примеры можно привести? Название, описание, цены, хлебные крошки. Мертвые строки, как вы догадались, не меняют свой размер. Это могут быть: рейтинг (в звездочках), кнопка в корзину.
-
Расставляйте акценты. Самыми важными и заметными элементами являются цена, фото товара и скидка. Они должны быть самыми заметными, остальные элементы не должны конфликтовать с ними по размерам, цвету или начертанию. Имея возможность манипулировать только этими величинами вы сможете создать сбалансированный интерфейс.
Итог
Подходите к разработке дизайна карточки товара, как к оформлению витрины в магазине. Покажите клиенту больше выгод от товара и приправьте это социальными доказательствами. Тогда боль от возможной потери денег просто перестанет иметь значение.
