Как создать продающую карточку товара?

Чтобы помочь вам создать удобную для пользователя и продающую карточку товара:

1. Мы обратились к опыту западных коллег из Invesp и сделали перевод крайне полезной инфографики.
2. Подготовили достаточно детальное описание ключевых элементов страниц товара.
3. Подобрали большое количество примеров-иллюстраций иностранных и ведущих российских интернет-магазинов.

Далее рассмотрим, на примере российских и американских интернет-магазинов, ряд рекомендаций более подробно.

Что такое карточка товара и какой она должна быть

1. Важная последовательность элементов
2. Ответ на вопрос: Зачем покупателю необходим продаваемый товар?

Шаблон карточки товара и ее ключевые элементы

1. Хлебные крошки
2. Название товара
3. Иллюстрации
4. «Список желаний»
5. Поделиться в социальных сетях
8. Цена товара
9. Рейтинг товара
10. Отзывы потребителей
11. Преимущества товара
12. Размеры
13. Единица учета/ код продукта
14. Условия доставки
15. Область покупки
16. Наличие товара
17. Выбор цвета
18. Таблица размеров
20. Кнопка «Добавить в корзину»
21. Описание деталей продукта
22. Отзывы о продукте
23. Информация о бренде
24. Политика возврата товара
25. Данные о доставке
26. Размер
28. С этим товаром также покупают
29. Недавно просмотренные продукты

Что такое карточка или страница товара и какой она должна быть?

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

Целями карточки товара являются:

• Сфокусировать внимание потребителя на продаваемом товаре.
• Подтвердить мотивацию покупателя, дать ответ на вопрос: зачем покупателю нужен этот товар.
• Ответить на дополнительные вопросы и вызвать уверенность в покупке.
• Сделать покупку товара простой и очевидной.

1. Важная последовательность элементов

Используемая для исследования поведения интернет-пользователей, технология «eye tracking» позволяет отслеживать перемещение взгляда пользователя по сайту. Согласно исследованиям Якоба Нильсена, проведенным в 2006 году, если пользователь не ищет какую-то конкретную информацию, а просто просматривает страницы в интернете, траектория его взгляда напоминает английскую букву «F». Зная, что большинство посетителей будут просматривать ваш сайт именно так, вы можете расположить ключевую информацию (название и описание товара, иллюстрации, призыв к действию, выгодные акции и пр.) на пути этой траектории.

2. Ответ на вопрос: Зачем покупателю необходим продаваемый товар?

Ответ на этот вопрос позволяет получить контент размещенный на странице товара:

• Иллюстрации;
• Детальная информация о товаре;
• Гарантии;
• Отзывы покупателей.

Шаблон карточки товара и ее ключевые элементы

Чтобы облегчить перечисление ключевых элементов карточки продукта, на шаблоне мы разделили их на 4 секции:

• Секция 1: Верхняя левая часть страницы внутри активного окна.
• Секция 2: Верхняя правая часть внутри активного окна.
• Секция 3: Левая сторона страницы ниже секции 1.
• Секция 4: Правая сторона страницы ниже секции 2.

С первыми двумя элементами все понятно. В «шапке» приведено название вашего сайта или интернет-магазина, затем идут основные разделы каталога товаров (главное меню).

Давайте детально разберем каждую секцию.

1. Хлебные крошки

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

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

2. Название товара

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

Amazon размещает название продукта справа от картинки

JohnLewis размещает название над изображением

Совет:

• Если вы продаете разные бренды, указывайте имя бренда в названии продукта.
• Не бойтесь длинных названий. В этой секции они размещаются довольно легко. К тому же, более длинное название объясняет потребителю, какой именно продукт он просматривает сейчас. Также полное название дает возможность сыграть на имени бренда.

3. Иллюстрации товара

Люди больше не хотят просматривать сайт, они хотят получить определенное впечатление. Старая поговорка «лучше один раз увидеть, чем сто раз услышать» в онлайне приобретает новое значение. Вы преуспеете, если будете презентовать ваши продукты с помощью качественных и информативных картинок. Покупатели должны представить то, как они могут использовать ваши товары или услуги.

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

Совет:

• Используйте иллюстрации хорошего качества и большого размера. Для удобства потребителей вы можете также встроить опцию детализации (лупы), позволив пользователям приблизить любую часть картинки и рассмотреть ее в деталях.
• Дополнительные картинки позволяют показать продукт с разных сторон, чтобы подчеркнуть его преимущества или уникальные черты. Также можно использовать несколько иллюстраций товара, чтобы показать продукт в повседневном применении.

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

Карточка товара интернет-магазина Zappos

4. Список желаний

«Cписок желаний» также может быть эффективным инструментом, если его функционал заточен под последующую продажу.

Совет:

Создать ссылку «Добавить в избранное/список желаний» довольно просто. А вот для последующей монетизации этого инструмента попробуйте одно из следующих действий:

• На почту потребителя через равные промежутки времени посылайте уведомление, которое напоминает ему о продуктах, содержащихся в его списке желаний.
• Предлагайте скидки. Не рекомендуется делать это постоянно, так как у покупателя может выработаться условный рефлекс, и он будет откладывать покупку до тех пор, пока вы не предложите ему скидку. Но вы вполне можете периодически создавать дополнительный стимул для покупки предмета из списка.
• Высылайте уведомление о том, что срок действия вашего предложения по данному товару истекает, и этот товар будет временно/полностью изъят из продажи.
• Укажите клиенту на возможность переслать его список желаний члену семьи или друзьям, чтобы они могли сделать ему подарок. Этот триггер отлично работает на любые праздники: день рождения, Новый Год, день Святого Валентина и пр.

5. Поделиться в социальных сетях

Хотя почти каждый бизнес размещает кнопки «шарнга» адресов страниц в социальных сетях, вам не обязательно размещать эти кнопки в описании товара. Причина этого лежит в понимании разницы между намерением купить и лояльности к бренду, возникшей после покупки товара.

Намерение (выраженное в изучении продуктов и контента) и лояльность (эмоциональная привязанность) проявляются на различных этапах конверсионного сценария. Согласно исследованиям Forrester, 20% клиентов после покупки хотят продемонстрировать свою лояльность к бренду и готовы как-то выразить свое эмоциональное удовлетворение.

Совет:

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

6. Цена товара

Укажите рекомендуемую розничную цену (РРЦ), цену текущей продажи (если есть) и экономию потенциального покупателя.

Совет:

Покажите размер скидки. Исследования на Amazon.com доказали результативность отображения этого процента. Сейчас Amazon с успехом пользуется этим инструментом, указывая розничную цену и количество сэкономленных денег при покупке этого же товара на сайте.

7. Рейтинг товара

Обратите внимание на оценку товара звездами на Amazon.com. Каждый потребитель может выставить оценку по пятибалльной системе. Из всех оценок и складывается общий рейтинг этого товара. Зачем это нужно потребителям? Для них это самый верный показатель качества продукта.

8. Отзывы покупателей

Рядом указана ссылка на комментарии других покупателей — ссылка ведет в раздел отзывов. Люди, прочитавшие отзывы других покупателей, легче будут принимать свое решение о покупке. Мы привыкли доверять мнению других людей.

Согласно статистике:

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

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

9. Преимущества продукта

Вопросы клиентов из разряда «Какая мне от этого польза?» связаны с тем, что потребители хотят понять, что они получат при покупке вашего продукта (т.е. как продаваемый вами товар может улучшить их жизнь). В этом блоке вы отвечаете на подобные вопросы, передавая основные преимущества вашего продукта и выгоды от его использования.

10. Размеры

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

11. Единица учета/код продукта

Сейчас огромной популярностью пользуется так называемый «showrooming». Клиенты заходят в магазин, получают профессиональную консультацию по поводу того или иного товара, а затем заказывают его через интернет. Получается дешевле и сразу с доставкой на дом. Наличие кода продукта вверху карточки товара поможет вашему клиенту быстро сориентироваться в процессе поиска необходимого товара или получения информации о нем.

12. Условия доставки: стоимость и сроки

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

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

Совет:

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

13. Область покупки

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

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

Вместе с яркой кнопкой призыва к действию, эта область становится очень заметной для потребителя. Пример такой области можно увидеть на любой карточке продукта Zappos (на картинке в правой части — выделена серым).

Область покупки может содержать следующую информацию:

• Наличие товара (наличие и / или количество товара на складе).
• Выбор цвета (при наличии).
• Таблицу размеров (при наличии).
• Кнопки призыва к действию («Добавить с избранное», «Добавить в корзину», «Купить» или «Купить в 1 клик»).
• Гарантии.

14. Наличие товара

Если у вас отображается количество конкретного товара на складе. Простое сообщение «Товар в наличии и готов к отправке» повысит конверсию.

15. Выбор цвета

Вы можете информировать покупателей о цветовых вариантах с помощью коллекции образцов и/или выпадающего списка цветов. Убедитесь, что в анонсируемой коллекции образцов все цвета соответствуют фабричным!

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

Совет:

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

16. Таблица размеров

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

Совет:

• Когда вы будете размещать таблицы размеров, старайтесь сделайте так, чтобы они отображались на карточке товара, минимизируйте переходы на другие страницы. Дополнительные действия и переходы, отвлекающие от процесса покупки, снижают конверсию.
• Убедитесь, что таблица размеров соответствует странице продаваемого товара. Например, если в карточке продукта заявлены женские джинсы, в таблице не должно быть мужских размеров.

Еще один великолепный пример от ASOS. Они разработали таблицы размеров для подкатегорий. Например, мужские джемпера и кардиганы имеют свою таблицу размеров:

ASOS размещает руководство по размерам на отдельной странице, но при этом клиент остается в карточке товара. Закрыв таблицу размеров, он снова возвращается к карточке товара.

17. Кнопка «Добавить в корзину»

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

• Контрастирующий цвет с вашим сайтом — если у вас на сайте преобладает зеленый цвет, у вас не может быть зеленой кнопки «Добавить в корзину».
• Большой размер кнопки.
• Привлекает внимание посетителей и поясняет действие, которое он должен совершить.

Тестируйте, тестируйте и еще раз тестируйте! Только тесты и отслеживание реального поведения посетителей интернет-магазина помогут вам определить:

• оптимальное место для размещения кнопки;
• текст размещённый на кнопке;
• ее цвет и размер.

18. Описание деталей товара

Состав, использованные материалы, размеры, вес, инструкции по стирке или чистке, инструкции по сборке, технические детали и характеристики (критически важно для электроники) — все это нужно указать. Чем больше деталей вы опубликуете, тем лучше.

19. Информация о бренде

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

20. Политика возврата товара

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

21. С этим товаром также покупают

Здесь вы отображаете те товары, которые другие покупатели купили помимо основного товара. Не стоит недооценивать этот элемент карточки товара — стадное чувство по-прежнему живет во многих из нас.

22. Недавно просмотренные продукты

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

Карточка товара – место, где должна происходить магия

Когда страница товара выполняет свою работу, обычно происходят две поистине волшебные вещи:

1. Потребитель удовлетворяет свою потребность — находит необходимый ему товар и приобретает его.
2. Продавец достигает свою цель — закрывает сделку и получает довольного покупателя.

Воспользовавшись большинством из перечисленных выше советов, вы создадите удобную, внушающую доверие покупателю и продающую карточку товара. Однако на этом ваша работа не заканчивается — вскоре вам предстоит еще череда тестирований. Только благодаря им и постоянным улучшениям топовые интернет-магазины выросли до своих нынешних масштабов.

Читайте также материалы:

• Страницы интернет-магазина влияющие на конверсию
• Навигация для посетителей интернет-магазина
• Формирование каталога товаров в онлайн-магазине
• Контент-маркетинг в интернет-магазине
• SEO-теги для разделов и товаров интернет-магазина?
• Что влияет на конверсию в покупки интернет-магазине?
• Увеличение продаж в интернет-магазине
• Почему в интернет-магазине нет продаж?

По материалам: https://1ps.ru/blog/ и https://texterra.ru/blog/.