Агентство интернет-маркетинга полного цикла в Москве сайты
реклама
seo
[email protected]
Главная›Блог›Дизайн и юзабилити›Карточка товара, которая продаёт

Карточка товара, которая продаёт

Карточка товара — место, где посетитель интернет-магазина принимает решение о покупке. Любое сомнение, на которое страница не ответила, может стоить продажи. Разбираем, из каких элементов состоит сильная карточка и как её проверить.

Дизайн и юзабилитиВремя чтения ≈ 7 минАвтор: редакция КомРА
ДИЗАЙН И ЮЗАБИЛИТИ

Задача карточки товара

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

Сильная карточка решает несколько задач:

  • даёт исчерпывающее представление о товаре;
  • убеждает, что этот товар подходит под задачу покупателя;
  • снимает риски: доставка, оплата, возврат, гарантия;
  • делает добавление в корзину очевидным и быстрым;
  • предлагает альтернативы и дополнения, если этот вариант не подошёл.

Кроме того, карточка — одна из главных посадочных страниц для поискового трафика и рекламы. Многие посетители попадают в магазин сразу на неё, минуя главную и каталог.

Первый экран карточки

То, что покупатель видит без прокрутки, должно содержать всё необходимое для решения о покупке:

  1. Название товара.
  2. Главное фото и галерея.
  3. Цена, а также старая цена при скидке.
  4. Наличие и срок доставки.
  5. Выбор вариантов — цвет, размер, объём.
  6. Кнопка «В корзину» или «Купить».
  7. Ключевые преимущества или краткие характеристики.
  8. Рейтинг и число отзывов.

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

Фотографии и видео

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

Количество. Не одно фото, а пять-десять: общий вид, вид с разных сторон, детали, фактура материала, упаковка, комплектация.

Товар в контексте. Одежда на модели, мебель в интерьере, инструмент в работе. Так покупатель понимает размер и представляет товар в своей жизни.

Масштаб. Для товаров, где важен размер, добавьте фото рядом с предметом для сравнения или схему с габаритами.

Детали. Крупные планы швов, фурнитуры, текстуры помогают оценить качество.

Единый стиль. Одинаковый фон, освещение и ракурсы на всех карточках делают каталог аккуратным и вызывают доверие.

Зум. Возможность увеличить фото и рассмотреть детали. На мобильных — жестом.

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

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

Название, цена и кнопка

Название должно быть информативным: тип товара, бренд, модель, ключевой параметр. «Смартфон Модель X 128 ГБ, чёрный» лучше, чем просто «Модель X». Это помогает и покупателю, и поиску.

Цена — крупно и заметно. Если есть скидка, показывайте старую цену зачёркнутой и размер экономии. Если цена зависит от варианта, она должна обновляться при выборе. Скрытая цена «по запросу» в рознице почти всегда снижает продажи.

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

Варианты товара. Цвета — образцами или миниатюрами, а не выпадающим списком. Размеры — кнопками, недоступные варианты помечены, но видны. Таблица размеров — рядом с выбором, а не в отдельном разделе сайта.

Быстрый заказ. Кнопка «Купить в один клик» с минимальной формой подходит для тех, кто не хочет проходить полное оформление.

Описание товара

Описание — это продавец-консультант в текстовом виде. Его задача не пересказать характеристики, а объяснить, чем товар полезен покупателю.

Пишите о выгодах, а не только о свойствах. Не «мембранная ткань», а «мембранная ткань не пропускает воду и выводит влагу — вы останетесь сухими и под дождём, и при активном движении».

Отвечайте на вопросы. Для кого этот товар? Как им пользоваться? Чем отличается от похожих моделей? Как ухаживать?

Структурируйте. Короткие абзацы, подзаголовки, списки. Длинный сплошной текст никто не читает.

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

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

Характеристики

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

  • Группируйте характеристики: основные, габариты, материалы, комплектация.
  • Ключевые параметры выносите в начало или в краткий блок на первом экране.
  • Указывайте единицы измерения.
  • Заполняйте одинаково для всех товаров категории — это нужно и для фильтров, и для сравнения.

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

Доставка, оплата, гарантии

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

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

Достаточно короткого блока с иконками и ссылкой на подробности. Фраза «доставим завтра» рядом с кнопкой покупки часто работает сильнее любой скидки.

Отзывы и социальное доказательство

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

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

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

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

Блоки рекомендаций

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

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

Рекомендации должны быть релевантными. Случайные товары из другой категории только отвлекают.

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

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

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

Мобильная версия карточки

На смартфонах совершается большая часть покупок во многих нишах. Особенности мобильной карточки:

  1. Галерея листается свайпом, с индикатором количества фото.
  2. Название, цена и кнопка покупки видны без длинной прокрутки.
  3. Кнопка «В корзину» закреплена внизу экрана при прокрутке.
  4. Описание и характеристики свёрнуты в раскрывающиеся блоки, чтобы не растягивать страницу.
  5. Выбор размера и цвета — крупными кнопками, удобными для пальца.
  6. Страница загружается быстро даже при медленном мобильном интернете.

Типичные ошибки

  1. Одно маленькое фото на белом фоне.
  2. Скопированное описание производителя или его отсутствие.
  3. Незаполненные характеристики.
  4. Информация о доставке спрятана в отдельном разделе.
  5. Кнопка покупки незаметна или теряется среди других элементов.
  6. Нет отзывов или раздел отзывов пуст и не мотивирует их оставлять.
  7. Цена меняется на этапе оформления заказа из-за скрытых платежей.
  8. Таблица размеров отсутствует или находится далеко от выбора размера.
  9. На мобильных приходится долго листать до кнопки покупки.

Итог

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

Проектируйте карточку с учётом мобильных устройств и поисковой оптимизации, анализируйте поведение покупателей в Яндекс Метрике и тестируйте изменения. Мы в КомРА при разработке интернет-магазинов уделяем карточке особое внимание: в интернет-торговле именно на этой странице посетитель превращается в покупателя.

‹ Навигация и меню: как не заставлять пользователя думатьПрототипирование сайта: зачем рисовать схемы до дизайна ›

Ещё по теме «Дизайн и юзабилити»

Другие материалы этой рубрики

ДИЗАЙН И ЮЗАБИЛИТИ
Дизайн и юзабилити

Прототипирование сайта: зачем рисовать схемы до дизайна

Прототип — это чертёж сайта до того, как появятся цвета, шрифты и фотографии. На этом этапе исправление занимает минуты, а после вёрстки — дни. Разбираемся, зачем…

Чтение ≈ 10 мин · Читать статью
Обсудим ваш проект

Напишите нам — подготовим план и оценку

Расскажите о задаче в двух словах: что продаёте, есть ли сайт, какой нужен результат. Мы изучим нишу и конкурентов, предложим решение и назовём стоимость по этапам. Консультация и предварительная оценка — бесплатно.

  • Ответ в течение рабочего дня
  • Договор и оплата по этапам
  • Отчёты понятным языком

Или пишите напрямую: [email protected]

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

Спасибо! Заявка отправлена — мы свяжемся с вами по e-mail.