Карточка товара в интернет-магазине: что реально влияет на конверсию
8 мин чтенияКарточка редко проигрывает из-за дизайна — она проигрывает из-за вопросов, на которые покупатель не нашёл ответа. Разбираем, какие блоки решают, а какие только мешают.
- Карточка — это последовательность ответов на вопросы покупателя, а не набор блоков движка
- Пять осмысленных кадров с масштабом и деталями работают лучше двадцати похожих ракурсов
- Срок и стоимость доставки должны быть видны на карточке, а не только в корзине
- Остатки тянутся из учётной системы автоматически, иначе карточка обещает то, чего нет
- «Купить в один клик» оценивают по оплаченным заказам, а не по числу обращений
- Покупатель не читает карточку — он ищет в ней ответы
- Фотографии дают больше, чем любое описание
- Наличие и доставка: цифры нужны до корзины
- Отзывы и характеристики: что ищут, а что просто занимает место
- Что убрать с карточки и почему «купить в один клик» помогает не всем
- Путь клиента
- Стратегия по шагам
- Чек-лист
- Что в итоге
- Вопросы и ответы
Покупатель не читает карточку — он ищет в ней ответы
Карточка товара — последняя точка, где принимается решение. Человек уже пришёл из поиска или рекламы, ассортимент его в целом устраивает, и дальше он проверяет всего несколько вещей: то ли это, что я искал, как оно выглядит вживую, есть ли в наличии, когда привезут, сколько стоит доставка и что будет, если не подойдёт. Пока хотя бы один из этих вопросов остаётся без ответа, покупка откладывается — вкладка не закрывается, но и заказ не оформляется.
Если посмотреть записи визитов в Метрике, поведение почти всегда одинаковое: быстрый скролл вниз, возврат к фотографиям, снова вниз — человек ищет блок про доставку. Описание при этом читают единицы, его просматривают по диагонали и по выделенным словам. Поэтому карточка проваливается не потому, что текст слабый, а потому что нужный ответ спрятан ниже трёх экранов или его нет вовсе. Это задача компоновки, а не копирайтинга.
Отсюда рабочий принцип: карточку проектируют как последовательность ответов, а не как набор блоков, которые движок расставил по умолчанию. Порядок, который в наших проектах чаще всего оказывается сильнее остальных: фотографии, название и цена, наличие с конкретной датой, срок и стоимость доставки, кнопка, затем ключевые характеристики и отзывы. Перестановка блоков без единой строчки нового дизайна нередко даёт заметный прирост добавлений в корзину.
Ещё одна вещь мешает владельцу увидеть проблему: он смотрит на свою карточку с большого монитора, где всё помещается, а покупатель — с телефона, и это, как правило, больше половины трафика. На узком экране блоки выстраиваются в длинную ленту, кнопка уезжает вниз, виджет чата закрывает угол. Проверять карточку нужно на телефоне, вслух проговаривая те самые шесть вопросов и засекая, на каком экране находится ответ.
Фотографии дают больше, чем любое описание
Фотографии — единственный способ потрогать товар до покупки. Работают четыре типа кадров: общий вид на светлом фоне, товар в масштабе — рядом с привычным предметом или с нанесённой размерной сеткой, крупные планы деталей вроде фактуры, шва, крепления или разъёма, и хотя бы один кадр «в жизни»: в интерьере, на человеке, в работе. Студийная картинка без масштаба и деталей оставляет ровно те сомнения, из-за которых покупку и откладывают на потом.
Количество важно меньше, чем принято думать. Пять-восемь осмысленных кадров обычно работают лучше, чем двадцать похожих: каждый следующий дубль ракурса просто удлиняет галерею, а на телефоне заставляет листать вслепую. Полезное упражнение — под каждым фото мысленно написать, на какой вопрос покупателя оно отвечает. Если ответа нет, кадр можно убирать: он не помогает решению и при этом замедляет загрузку страницы.
Техническая сторона тут не менее важна. Тяжёлая галерея убивает скорость на мобильном интернете, а вместе с ней и часть заказов. Что стоит сделать всегда: отдавать современные форматы вроде webp или avif, резать изображения под реальный размер контейнера, включать отложенную загрузку для всех кадров кроме первого, первому явно задавать приоритет и фиксировать пропорции контейнера, чтобы вёрстка не прыгала, пока картинки подгружаются.
Зум и видео добавляют пользу выборочно. Увеличение оправдано там, где решают фактура и мелкие детали. Видео помогает показать сборку, габариты или работу устройства, но его место — после галереи, без автозапуска со звуком и без замены статичных фото. И отдельная просьба к контент-менеджерам: осмысленные подписи и alt у изображений — это и доступность, и трафик из поиска по картинкам, который в товарных нишах бывает заметным.
Наличие и доставка: цифры нужны до корзины
Самая дорогая неопределённость в карточке — сроки. Надпись «в наличии» без даты ответом не является: покупатель не знает, приедет товар завтра или через шесть недель. Рядом с ценой нужны две вещи: статус — есть на складе, под заказ, срок производства — и конкретная дата или узкий диапазон дат. Если срок зависит от адреса, показывайте расчёт по автоматически определённому городу и оставляйте возможность сменить его одним кликом, а не через форму.
Стоимость доставки должна быть видна до того, как человек начал оформлять заказ. Схема «узнаете в корзине после ввода адреса» стабильно теряет часть покупателей: люди достаточно на этом обжигались, чтобы не рисковать. Даже когда логистика сложная и точная сумма считается по адресу, в карточке можно показать вилку и условия — от какой суммы бесплатно, сколько стоит подъём на этаж, есть ли самовывоз. Диапазон честнее и работает лучше, чем молчание.
Самовывоз и пункты выдачи стоит выносить отдельной строкой — с адресом ближайшей точки и остатком именно по ней. Для части покупателей это решающий аргумент: забрать сегодня важнее, чем сэкономить пару сотен. Если у вас несколько складов или салонов, показывать общий остаток по компании — верный способ получить отменённый заказ и испорченное впечатление, потому что человек приедет туда, где нужной позиции физически нет.
И главное: данные о наличии должны подтягиваться из учётной системы автоматически, а не обновляться руками раз в неделю. Выглядит как техническая задача, но она напрямую конверсионная. Расхождение остатков даёт отмены, звонки «извините, закончилось» и потерю доверия, которая дороже одной сделки. Если товара нет, честнее написать срок поставки и дать кнопку «сообщить о поступлении», чем прятать позицию или оставлять её кликабельной без единого пояснения.
Отзывы и характеристики: что ищут, а что просто занимает место
Отзывы работают, когда выглядят живыми: дата, имя, фотографии от покупателей, разные оценки — включая четвёрки и тройки с внятной причиной. Идеальный рейтинг из одних пятёрок читается как накрутка и скорее снижает доверие, чем повышает. Ответ магазина на критику часто ценнее самого отзыва: по нему видно, что будет, если что-то пойдёт не так. Придумывать отзывы не стоит — их узнают по одинаковому языку и отсутствию бытовых подробностей.
Если отзывов пока нет, блок лучше не показывать пустым: надпись «0 отзывов» работает как знак, что тут никто ничего не покупал. Вместо этого запускайте сбор — письмо или сообщение через неделю после доставки, с прямой ссылкой на форму и без регистрации, с одним конкретным вопросом вместо просьбы «оставьте отзыв». Параллельно помогают вопросы и ответы под товаром, фотографии от клиентов и отзывы о магазине в целом на внешних площадках.
С характеристиками ошибка обратная: их выгружают из учётной системы целиком, и покупатель получает сорок строк, из которых решают пять. Разделите список надвое: сверху пять-семь параметров, по которым реально выбирают — габариты, материал, комплектация, совместимость, срок службы, — а всё остальное сворачивайте под «показать все». Что именно выносить наверх, подскажут внутренний поиск по сайту, вопросы менеджерам и запросы, по которым люди приходят на карточку.
Формулировки тоже стоит перевести на человеческий язык. Не «класс энергоэффективности», а строка с расшифровкой, что это значит по счетам за месяц. Не «глубина 600», а «глубина 60 см — встаёт в стандартную нишу». Единицы измерения, поясняющие подписи, короткое сравнение с соседними моделями — это те мелочи, которые снимают сомнение прямо на месте, вместо того чтобы отправлять человека искать ответ на стороне, откуда он вернётся не всегда.
Что убрать с карточки и почему «купить в один клик» помогает не всем
Отдельная работа — убрать лишнее. Из карточек чаще всего просятся на выход: всплывающее окно со скидкой в первые секунды, обратный отсчёт «акция заканчивается», который каждый день начинается заново, карусель «с этим покупают» выше кнопки, длинный оптимизаторский текст в начале страницы и виджет чата, который на телефоне закрывает половину экрана. Ни один из этих элементов не добавляет ответов, зато каждый добавляет повод уйти.
К этому же списку относится избыток скриптов. В обычном магазине на карточке живут чат, обратный звонок, отзывы, рекомендации, пара счётчиков и несколько маркетинговых пикселей — и каждый тянет свои файлы. На быстром интернете это незаметно, на мобильном страница ощутимо тормозит, а тормоза съедают часть заказов ещё до того, как человек увидел первое фото. Ревизия виджетов раз в полгода — скучная процедура, но одна из самых окупаемых.
Теперь про «купить в один клик». Кнопка полезна там, где товар простой, цена окончательная, а покупатель уже всё решил: сокращать форму до одного телефона в такой ситуации разумно. Но в сложном товаре, где нужно уточнить комплектацию, доставку или замер, она превращается в заявку без данных. Менеджер перезванивает через час-другой, человек за это время оформил заказ в другом месте — обращений стало больше, продаж не прибавилось.
Второй эффект менее очевиден: кнопка забирает часть тех, кто дошёл бы до нормального оформления с адресом и оплатой. Обращений в отчёте больше, а доля предоплаченных заказов и выкуп падают, нагрузка на колл-центр растёт. Проверяется это просто: отдельными целями в Метрике — «в корзину» и «в один клик» — и дальше смотрят не количество обращений, а сколько из них дошло до оплаченного заказа. Если один клик проигрывает по деньгам, его убирают или опускают ниже основной кнопки.
Путь клиента: где эта тема срабатывает
Путь покупателя внутри одной карточки короткий, но на каждом шаге есть свой вопрос и своя причина уйти. Ниже — этапы, задача магазина на каждом и сигнал, по которому видно, что этап проседает.
Что у клиента«Похоже, это то, что я искал»
Что делаемНа первом экране — крупное фото, точное название, цена и статус наличия без прокрутки
Сигнал, что работаетДоля отказов на карточке, глубина скролла в записях визитов
Что у клиента«Как это выглядит вживую и подойдёт ли по размеру»
Что делаемКадры с масштабом и деталями, короткий блок решающих характеристик
Сигнал, что работаетКлики по галерее, раскрытие полного списка характеристик
Что у клиента«Когда привезут и сколько будет стоить доставка»
Что делаемДата отгрузки, вилка стоимости доставки, самовывоз с адресом и остатком по точке
Сигнал, что работаетПросмотры блока доставки, вопросы «а когда» в чате и по телефону
Что у клиента«Беру здесь или посмотрю ещё пару магазинов»
Что делаемПонятная кнопка, отзывы с ответами магазина, условия возврата рядом с ценой
Сигнал, что работаетДобавления в корзину, возвраты на карточку из закладок и истории
Что у клиента«Хочу понимать, что заказ принят и когда его ждать»
Что делаемКороткая форма, онлайн-оплата, письмо со сроком и контактом менеджера
Сигнал, что работаетДоля оплаченных заказов от оформленных, отмены до отгрузки
Стратегия: что делать по шагам
Цель: Довести карточку до состояния, когда покупатель получает ответы на все свои вопросы до нажатия кнопки, и увеличить долю добавлений в корзину и оплаченных заказов без роста расходов на трафик.
- Неделя 1 Замер: цели на добавление в корзину и на покупку в один клик, карта скроллов и десяток записей визитов по двадцати самым посещаемым карточкам Список конкретных мест, где люди буксуют, вместо догадок и вкусовщины
- Недели 2-3 Прототип карточки: порядок блоков, состав первого экрана, короткий и полный список характеристик, место кнопки на мобильном Согласованная схема, по которой можно верстать без бесконечных правок
- Недели 3-5 Данные: автоматическая выгрузка остатков и сроков из учётной системы, расчёт доставки по городу, правила бесплатной доставки и самовывоза Карточка перестаёт обещать то, чего нет на складе
- Недели 5-6 Контент и скорость: пересъёмка топ-позиций с масштабом и деталями, ревизия виджетов и скриптов, форматы и размеры изображений Страница грузится быстрее и отвечает на вопросы картинками, а не текстом
- Недели 6-10 Выкатка на часть каталога, замер две-четыре недели, затем распространение шаблона на остальные товары Решение о тиражировании принимается по цифрам, а не по ощущениям
Сроки — ориентир для планирования, а не обязательство: скорость зависит от ниши, конкуренции и состояния сайта.
Проверка карточки товара за один вечер
Откройте самую посещаемую карточку своего магазина с телефона и пройдите по списку. Каждый пункт — либо «да», либо задача в работу.
- Откройте карточку с телефона на мобильном интернете и засеките, за сколько секунд появилось первое фото
- Убедитесь, что на первом экране без прокрутки видно название, цену и статус наличия
- Найдите срок доставки — это должна быть дата или узкий диапазон, а не слово «быстро»
- Проверьте, что стоимость доставки или её вилка показана на карточке, а не только в корзине
- Пересчитайте фотографии: уберите дубли ракурсов и добавьте кадр, показывающий масштаб
- Сверьте остаток на карточке с остатком в учётной системе по пяти случайным товарам
- Сократите верхний блок характеристик до пяти-семи параметров, остальное спрячьте под кнопку
- Прочитайте отзывы глазами покупателя: есть ли даты, разные оценки и ответы магазина на негатив
- Отключите по очереди виджеты и посмотрите, как меняется скорость загрузки страницы
- Сравните за месяц оплаченные заказы из корзины и из кнопки «купить в один клик»
Чаще всего нас зовут переделать карточку, а заканчиваем мы тем, что чиним данные: остатки, сроки и стоимость доставки. Дизайн трогаем в последнюю очередь, и обычно цифры начинают меняться именно после наведения порядка в данных. Самый недооценённый элемент карточки — это дата, а не кнопка.
Что в итоге
Карточка товара редко проигрывает из-за дизайна. Она проигрывает из-за отсутствующих ответов: непонятного срока, спрятанной доставки, фотографии без масштаба, сорока характеристик, среди которых не найти нужную. Всё это лечится не редизайном, а спокойной ревизией: что человек спрашивает, где он это видит и через сколько секунд.
Проверять изменения стоит по деньгам. Добавления в корзину, доля оплаченных заказов, выкуп, доля отмен — на этих цифрах видно, что помогло, а что просто хорошо смотрелось на макете. В наших проектах самые заметные сдвиги давали не яркие кнопки, а честные сроки и остатки, которые совпадают со складом.
С чего начать: Завтра откройте свою самую посещаемую карточку с телефона и засеките, на каком экране покупатель узнаёт срок и стоимость доставки.
Вопросы и ответы
У нас несколько тысяч товаров, переснять фото и переписать характеристики нереально. С чего начать?
Весь каталог трогать и не нужно. Большая часть изменений — шаблонные: порядок блоков, вывод наличия и доставки, размер и формат изображений, чистка виджетов правятся один раз и применяются ко всем карточкам сразу. А фото, тексты и характеристики доводят партиями, начиная с двадцати-тридцати позиций, которые дают основную долю трафика и выручки.
Сколько это стоит и когда окупится?
Зависит от движка и от того, сколько данных придётся вытаскивать из учётной системы: правки шаблона — это обычно недели работы, автоматическая выгрузка остатков и сроков считается отдельно. Окупаемость проверяется через две цифры: сколько людей доходит до карточек за месяц и какая доля из них покупает. Если трафика мало, эффект утонет в естественных колебаниях, и тогда честнее сначала заняться трафиком.
Отзывы никто не пишет. Можно ли добавить их самим?
Не советую. Придуманные отзывы узнаются по одинаковому языку и отсутствию бытовых деталей, и когда покупатель это чувствует, доверие падает сильнее, чем от пустого блока. Рабочий путь — автоматический запрос через неделю после получения заказа, ссылка без регистрации, один конкретный вопрос. Пока отзывов мало, показывайте вопросы и ответы под товаром и фотографии от клиентов.
Логистика сложная, точную стоимость доставки заранее не посчитать. Значит, показывать нечего?
Есть что: вилку и правила. Формулировка вида «по городу — от такой-то суммы, дальше по тарифу перевозчика, от такой-то суммы заказа бесплатно» уже снимает главный страх — что доставка окажется в разы дороже ожиданий. Молчание покупатель почти всегда трактует не в вашу пользу: он предполагает худший вариант и уходит сравнивать.
Мы убрали кнопку «в один клик», и заявок стало меньше. Разве это не хуже?
Смотря что считать. Если обращений меньше, а оплаченных заказов столько же или больше и колл-центр разгрузился — это лучше, просто отчёт выглядит скромнее. Сравнивать нужно за сопоставимый период и по деньгам: оплаченные заказы, выкуп, доля отмен. Если просели и деньги, кнопку возвращают, но ставят ниже основной, а не рядом с ней.
Мы всё переделали, а конверсия почти не изменилась. Что не так?
Чаще всего дело не в карточке. Если приходит нецелевой трафик, цена ощутимо выше рынка или нужной позиции нет в наличии, никакое оформление это не компенсирует: карточка снимает сомнения, но не меняет само предложение. Начните с проверки, по каким запросам приходят люди, на какие карточки они попадают и что видят в первые секунды.
Игорь 12 лет занимается разработкой коммерческих сайтов: интернет-магазины, каталоги с обменом данными, корпоративные сайты и посадочные страницы под рекламу. Работал и на стороне подрядчика, и внутри компании-заказчика, поэтому хорошо понимает обе стороны конфликта «разработчики против маркетинга». В Media Monster руководит отделом разработки и отвечает за то, чтобы сайт создавался под продвижение, а не вопреки ему.
С какими задачами к нему приходят
Самая частая — «сделали редизайн, и просел трафик». Причины почти всегда одни и те же: сменились адреса страниц без переадресации, пропали тексты и заголовки, часть страниц закрылась от индексации при переносе с тестовой площадки. Вторая по частоте — «сайт не даёт добавить нужные страницы»: система управления не позволяет создавать разделы под спрос, и продвижение упирается в потолок платформы.
Отдельная категория — интеграции: наличие и цены должны приезжать из учётной системы, заявки — уходить в CRM, звонки — привязываться к источникам. Здесь основная работа не в коде, а в согласовании: какие данные передаются, как часто и что считать ошибкой обмена.
И, наконец, приходят с брошенными проектами: разработчик пропал, доступов нет, сайт работает, но менять его некому.
Как работает
Начинает не с макета, а со структуры. Пока не понятно, какие страницы нужны и под какой спрос, рисовать дизайн преждевременно: структура определяет и шаблоны, и объём работ, и способ вывода товаров. На проектах, где продвижением занимается другая команда, требует, чтобы карта страниц была согласована до старта вёрстки — иначе через полгода приходится переделывать.
Второй принцип — сдавать по чек-листу. После каждой выкладки проходится список технических проверок на боевом сайте: доступность страниц, файл robots.txt, метатеги, адреса, карта сайта, счётчики. Проверку делает не тот, кто выкладывал.
Третье — доступы принадлежат клиенту. Домен, хостинг, панель управления, репозиторий оформляются на владельца бизнеса с самого начала, а не «когда закончим».
Чего не делает
Не запускает сайт без плана переноса, если у проекта уже есть трафик: сопоставление старых и новых адресов делается до выкладки, а не после падения. Не строит каталог на решениях, которые не позволяют управлять адресами и метатегами страниц. Не берёт проект, где заказчик не готов выделить человека для сбора данных о товарах, — без характеристик и фотографий каталог всё равно не заработает, и срок сорвётся не по вине разработки.
В блоге
Пишет в рубрику «Разработка»: разборы переездов и редизайнов, чек-листы приёмки, интеграции с учётными системами, кейсы проектов. Все клиентские истории публикуются обезличенно — без названий, доменов и регионов.
Портрет автора — иллюстрация, а не фотография.
Материал подготовлен по редакционной политике блога: практика проектов, официальные источники, проверка перед публикацией.
- Структура каталога, собранная из спроса, а не из выгрузки
- Ускорение загрузки первого экрана
- Интеграция форм с CRM без потери источника
- Редизайн без переноса структуры и адресов
- Тяжёлые изображения и скрипты «на всякий случай»
- Формы без передачи источника заявки
Обсуждение
Спросите, что осталось непонятным — автор материала отвечает в комментариях.
Читайте по теме
Скорость сайта: что реально влияет на конверсию — иллюстрация к разделу «Почему гонка за баллами PageSpeed — дорогая и бесполезная»
Скорость сайта: что реально влияет на конверсию — иллюстрация к разделу «Приоритет работ: что делать в первую очередь»
Коммерческие факторы ранжирования: полный чек-лист из 18 пунктов — иллюстрация к разделу «Что такое коммерческие факторы и почему они решают»
Коммерческие факторы ранжирования: полный чек-лист из 18 пунктов — иллюстрация к разделу «Блок «Ассортимент»: пункты 17–18»
Интеграция сайта с учётной системой: где обмен ломается и как это ловить — иллюстрация к разделу «Что вообще передавать: минимальный и расширенный набор»
Интеграция сайта с учётной системой: где обмен ломается и как это ловить — иллюстрация к разделу «Порядок внедрения: как не сорвать сроки»