Карточка товара

Клик не может быть сделан на «автопилоте», и каждый раз привлекает внимание к навигации, прерывая процесс просмотра товара.

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

https://ux.pub/uluchshaem-stranicu-produkta-na-sajte-elektronnoj-komercii/



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

[Категория товара] — [бренд (линейка)] — [модель (нюансы)] — [опциональные параметры].

По данным Baymard Institute, половина сайтов использует терминологию, непонятную для рядовых пользователей. Если посетители не могут понять, что означает та или иная техническая характеристика, они вынуждены уходить из интернет-магазина, чтобы найти определение термина. И не факт, что они вернутся.

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

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

Смело можно группировать мало отличающиеся визуально мерные товары — с разной длиной и объемом. Осторожнее нужно группировать товары по цвету — из-за особенностей восприятия визуалов.

Еще один неочевидный факт: если в каталоге мало товаров — покупают хуже. У людей есть потребность в наличии большого выбора — даже если нужна всего одна вещь. Если после группировки остается мало товаров — лучше не группировать.

В интернет-магазине покупают не товары, а контент — помогите потенциальному покупателю представить, как выглядит и используется товар в реальности. К визуальному блоку относятся изображения (в том числе 3D), видео, рич-контент. По законам юзабилити, визуальный блок располагают слева.

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

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

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

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

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

Эффективность видеоконтента проверяйте тестированием. Не все пользователи готовы смотреть видео, но по результатам исследования Baymard Institute


Красиво «упакованный» товар продается лучше аналога, о котором мало что известно. Чем цепляет рич-контент:

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

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


Целевым действием может быть не только «Добавить в корзину», но и «Добавить в избранное», «Сравнить», «Заказать» (по предзаказу). Эти элементы обязательно должны присутствовать на первом экране.

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

Если обычно покупают только один товар, логичнее использовать кнопку «Купить». Если обычно покупают более 2 товаров, уместнее использовать кнопку «Добавить в корзину».

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

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

Внесите корректировки в карточку и зарабатывайте при отсутствии товара:

  • если товар недоступен временно — внедрите возможность предварительного заказа. Измените текст на кнопке: вместо «Купить» используйте «Предварительный заказ» или «Сообщить о появлении товара». Когда товар появится, покупатель и менеджер получат уведомления. Если покупка еще будет интересна, покупатель ее совершит.
  • если модель устарела и появилась новая версия — добавьте ссылку на нее в карточке товара. Высока вероятность, что посетитель проявит интерес.
  • если модель устарела и больше не выпускается — добавьте ссылку на аналоги.

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

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

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

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

Информацию о доставке лучше указать прямо в карточке товара. Упрощайте клиенту жизнь и путь к покупке.

Особенно странно прятать информацию о бесплатной доставкено 27% испытуемых не смогли ее найти, несмотря на то, что тщательно изучали сайты. Причина — информация была указана в баннере, не учитывалась проблема баннерной слепоты.

Клиент хочет знать не только о способах доставки, но и о ее стоимости. Не рискуйте, заставляя покупателя переходить на сайты почтовых и курьерских служб. По данным Baymard Institute, 64% пользователей ищут информацию о стоимости доставки в карточке товара. Если этой информации нет, 23% пользователей прерывают процесс заказа, когда узнают о стоимости доставки.

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

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

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

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

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

Пять нюансов реализации сводки рейтингов:

  1. показывайте сводку по умолчанию для товаров с 5 отзывами и более;
  2. отображайте распределение оценок графически;
  3. выводите и хорошие, и плохие оценки;
  4. дайте возможность оценивать пользу отзыва;
  5. позвольте фильтровать отзывы по рейтингам — например, читать только отзывы с одной звездочкой.

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

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

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

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

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

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

Функционал поделится в соцсетях нужно тестировать

Дополнительные блоки — блоки, которые полезны для определенного типа товаров. Например, таблица соответствия размеров для fashion.

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

...

https://o2k.ru/blog/pravilnaya-kartochka-tovara-internet-magazina