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

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

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

Общие советы

Создавай единый шаблон – карточка должна иметь четкую структуру, все товары нужно подгонять под нее. Во-первых, так проще для дизайна. Но в общем этот пункт гораздо важнее. Потребитель должен оправдывать свои ожидания от магазина. Если здесь он развернул pop-under и почитал описание, то и в другом товаре он захочет сделать аналогичное действие. Особенно это необходимо для простоты сравнения. 

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

Расположение – в дизайне для стран Европы и Америки нужно учитывать паттерны чтения. Слева направо. Движение глаз напоминает букву F. И ключевую информацию нужно располагать именно по этой траектории. Для Азии и арабского мира наоборот – справа налево.

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

Неси пользу – мы всегда голосуем за краткость и лаконичность, но здесь другой вопрос. Если информация действительно полезна, то на этапе покупки посетитель готов прочесть/просмотреть больше, чем обычно. Поэтому не бойся дать много контента, но в том случае, когда он важен и поможет пользователю принять решение.

Обязательные элементы

Даже самая простая карточка товара должна иметь минимальный набор основных элементов. 

Название

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

Например: Категория, бренд, модель, опциональные параметры. 

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

Вот карточка магазина Nike - лаконично, но довольно много информации

Фото/видео

Визуальный контент самый важный. Именно он продает. И требуется не только эстетика (хотя она тоже, конечно), но и понятность. Помоги покупателю выяснить, как товар выглядит в реальности. Желательно размещать несколько фото – с разных ракурсов и еще и с возможностью увеличения. Дай представление о размере продукта и его виде в реальных условиях применения – это дает решающее значение при оформлении. 

Видео товара или обзор – очень крутая вещь. По возможности стоит добавлять короткие ролики. Мы говорили подробно про важность, преимущества и функции видео в предыдущей статье, поэтому не будем сейчас долго расписывать. 

Если кратко, то старайся добавить ролик, если есть такая возможность и для продукта это целесообразно. Далеко не все требуется смотреть в действии.

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

Amazon - всемирный лидер е-коммерса. Карточка не очень-то лаконичная, зато тут есть вся нужная информация

Цена

Без этого никак. Крупно, наряду с заголовком. На цену смотрят в первую очередь. Поэтому дай сразу актуальную сумму и покажи за что именно. 

Если есть скидка/акция – сразу же показывай рядом с основной ценой. Если это спецусловие, то укажи его. 

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

Магазин 6pm показывает сразу размер скидки и какие конкретно это суммы

Характеристики и описание

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

Такие данные лучше оформлять списком – наглядно, легко сравнивать, легко читать.

Кроме того стоит добавить текстовое описание. Это не только хорошо для SEO, но и положительно влияет на конверсию. Короткий текстовый блок с понятным описанием. Стоит рассказать общедоступным языком про особенности товара. Тем более если есть не всем понятные характеристики. Например, аккумулятор 5 mAh на смартфоне – это характеристика, которую ты укажешь сразу. А в описании стоит объяснить, на сколько хватит такого заряда и много ли это или мало в сравнении с другими смартфонами той же линейки.

Кнопка СТА

Банально, но все же стоит сказать, что без кнопки “Купить” карточка не будет полноценной. Это большая кнопка, которая удобно расположена и выделяется. Надпись – тут давай без креатива. Заказать, купить, добавить в корзину. Максимально четкое понятное действие. Добавь иконку тележки из супермаркета – так посыл будет понятен за миллисекунду даже иностранцам.

Что делать, если заказать напрямую нельзя? Ставь варианты расчета стоимости, оформления заявки или другие соответствующие действия. В любом случае должна быть кнопка.

В карточке eBay есть просто ВСЕ

Второстепенно, но важно

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

Доставка и оплата

Конечно, у тебя есть отдельная страница с Доставкой и Оплатой. Но зачем зря сгонять посетителя со страницы покупки ради поиска информации? Покажи ему сразу условия: доставку в его регион, сроки, цены. Тут еще можно применить отличный ход с бесплатной доставкой от определенной суммы – пусть дозакажет еще немного, чтобы получить пересылку безвозмездно.

В том же блоке расскажи про гарантии на товар и возможность возврата. Пригодится.

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

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

Аliexpress заставил весь мир покупать товар вслепую из другой страны. Можно брать пример. 

Кнопки

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

Отзывы

Наличие отзывов в любой форме повышает конверсию. А если это еще и фото от покупателей, то вообще круто. Работает принцип социального доказательства — ведь если другие люди берут этот продукт, то и мне надо!

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

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

Наличие

По возможности стоит всегда отображать в принципе только товары в наличии. Но даже в этом случае сделай плашку “В наличии”, чтобы избежать лишних вопросов.

Или указывай отсутствие товара на складе, но с оговоркой – когда будет, сколько ждать. И с кнопкой “Уведомить о поступлении”, например. Или дай возможность сделать предзаказ.

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

На Rozetka не только все нужное вместили, но еще и баннер с акцией смогли вставить

Дополнительные плюшки

Что называется “мелочь, а приятно” – детали, которые помогут повысить доверие и облегчить закрытие сделки.

Преимущества и УТП

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

Только никаких общих фраз и воды – конкретика, реальная выгода, четкие тезисы.

Обратная связь

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

Во-первых, это позволит не потерять клиента. Во-вторых – такой элемент показывает заботу компании о покупателе и повышает доверие.

Документация

Изучай тщательно свою ЦА и продукт. Насколько часто пользователи спрашивают документы и сертификаты? Это важно? Это влияет на выбор? Если это целесообразно и есть что показать – то размести необходимые данные. Это способ показать, что товар сертифицирован, что он оригинальный, соответствует отраслевым требованиям или экологическим стандартам. Иногда этот вопрос принципиальный.

Kyivstar сразу дает основные преимущества, а потом более подробные характеристики

Сопутствующие и похожие товары

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

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

Таблица размеров/калькулятор ets 

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

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

“Цитрус” рассказывает все, что нужно знать. И смотрится это аккуратно.

Оформление

Помимо правильного подбора элементов и функций важно знать, как грамотно их расположить, сделать удобно и стильно, как разместить все компактно и аккуратно, какие использовать цвета и эффекты. В этом и заключается работа UX/UI-дизайнера. Это не самая простая задача, но мы обучаем в легкой и интересной форме. Хочешь делать крутые интернет-магазины с понятным интерфейсом и высокой конверсией? Приходи на онлайн-курс «UX/UI легенда». Запись на новый поток уже открыта!