Анатомія картки товару: що має бути на першому екрані і що знімає сумнів

Картка товару — місце, де насправді ухвалюється рішення про покупку, і саме її найчастіше оцінюють за тим, як вона виглядає, а не за тим, чи відповідає вона на питання, що стоять між відвідувачем і оплатою карткою. Ці питання нудно однакові в усіх категоріях: чи підійде, коли приїде, що буде, якщо не те, і чи це саме та версія речі.

Бенчмарк карток товару Baymard за 2026 рік, зібраний із понад тридцяти тисяч вручну оцінених спостережень, дає 52% десктопних і 62% мобільних карток з оцінкою «посередньо або гірше». Для сторінки, настільки центральної для доходу, це чимало втрат, що лежать на видноті.

Що має бути видно до прокручування

Перший екран потрібен не для переконування. Він потрібен для підтвердження: людина прийшла з видачі чи реклами й має за приблизно три секунди встановити, що потрапила куди треба і що купити тут можна.

Зображення: те, у що всі вкладаються і половина робить не так

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

По-перше, кількість важить менше за покриття. Покупцям потрібен товар із тих ракурсів, які знімають їхні сумніви: розʼєм ззаду, низ, фактура зблизька і щось у кадрі, що задає масштаб. Сторінка з дванадцятьма майже однаковими студійними кадрами й без відчуття розміру гірша за сторінку з пʼятьма продуманими.

По-друге, головне зображення майже завжди є елементом Largest Contentful Paint. Це робить його водночас найважливішим контентом сторінки й найчастішою причиною її повільності. Віддати його в сучасному форматі, у правильних розмірах, із явними width і height та пріоритетним завантаженням — це півдня роботи, яка проявляється в польових даних, а не лише в лабораторній оцінці, з причин, викладених у розборі того, що насправді показують польові метрики.

Статистика, яку вам покажуть, і що з нею робити

Поради щодо карток товару приходять загорнутими у впевнені відсотки. Кілька прикладів, що зараз в обігу: 93% споживачів кажуть, що зовнішній вигляд є вирішальним фактором; ті, хто дивиться відео, на 144% частіше додають у кошик; товари з пʼятьма й більше відгуками конвертують на 270% краще за товари без відгуків.

Цілком можливо, що за напрямом це правда. Але майже в кожній появі ці цифри подані без вибірки, періоду й методики, а простежуються вони до блогів вендорів, а не до опублікованих досліджень. Патерн варто впізнавати, бо він повторюється: число з двома значущими цифрами й без джерела — це маркетинговий артефакт, а не доказ.

Захищена версія всіх трьох тверджень однакова й менш ефектна. Зображення, відео й відгуки знижують невизначеність, а саме невизначеність зупиняє покупки. Що з них важить більше, залежить від категорії: відео майже обовʼязкове там, де є збірка чи рух, і майже безкорисне для запчастини з відомою специфікацією.

Інформація, яка справді знімає сумнів

Нижче першого екрана в сторінки одна робота: відповісти на кожне питання, яке інакше поставлять до покупки — або після неї, у вигляді повернення.

• Габарити й вага — таблицею. Описи розміру прозою нечитабельні й не скануються поглядом. Таблиця тут правильний формат, і саме її чисто витягують ІІ-асистенти.
• Сумісність, сказана прямо. «Підходить до моделей X, Y і Z» запобігає і втраченому продажу, і поверненню. Якщо у вашому лозі пошуку є запити на сумісність, їхнє місце саме тут — це один із патернів, видимих у тому, що клієнти набирають у пошуку по сайту.
• Що в коробці. Дешево написати й часта причина скарг.
• Повернення — одним реченням із кількістю днів. Посилання на сторінку політики слабше за саме речення.
• Догляд, гарантія й очікуваний строк служби. Важать тим більше, чим вища ціна, і зазвичай відсутні саме на дорогих позиціях, де допомогли б.

Варіанти й рішення про відсутність на складі

Вибір варіанта — місце, де хороші сторінки тихо втрачають людей. Два правила закривають більшість. Показуйте недоступні комбінації як недоступні, а не ховайте їх: відсутність читається як помилка, а приховування не дає клієнту дізнатися, що такий розмір узагалі існує. І тримайте ціну й зображення синхронними з вибором, бо розбіжність тут руйнує довіру швидше майже за все інше на сторінці.

Відсутність на складі заслуговує на рішення, а не на стан за замовчуванням. У сторінки лишається робота: зафіксувати намір. Поле підписки на появу, заявлена очікувана дата, якщо вона є, і найближча доступна альтернатива варті більше за сіру кнопку. Видаляти сторінку — найгірший варіант, бо це викидає накопичені позиції й усі посилання, що на неї ведуть.

Юридичний мінімум — не продажний мінімум

Для тих, хто продає в ЄС, частина вмісту картки обовʼязкова, а не бажана: дані відповідального економічного оператора, ідентифікатори товару, попередження про безпеку й інформація про простежуваність — так, як це описано в матеріалі про чотири блоки, яких вимагає GPSR. Ці елементи є підлогою відповідності, і їх виконання не робить сторінку переконливою.

Корисний спосіб тримати обидва шари — розділити їх із різними власниками: юридичний вміст, який має бути присутнім і правильним, і комерційний, який має знімати сумнів. Їх регулярно зливають в один щільний блок, що не задовольняє жодного, зазвичай тому, що одне поле шаблону змусили нести дві роботи.

У сторінки зʼявився другий читач

Донедавна в картки товару була одна аудиторія. Тепер їх дві, і друга не вміє дивитися на фотографії. Асистенти, що відповідають на «яке з них підійде до моєї моделі» чи «яке найдешевше приїде до пʼятниці», читають розмітку, фід і текст — і нічого не витягнуть зі специфікації, впаяної в картинку.

Практичні наслідки невеликі й дешеві, тому їх варто зробити раніше за все амбітніше.

• Специфікації мають бути текстом і таблицею, а не лише зображенням. Аркуш характеристик, наданий виробником у JPEG, невидимий для будь-якого нелюдського читача й для скрінрідерів, а отже це ще й проблема доступності.
• Ціна, наявність і доставка мають бути в структурованих даних і збігатися з тим, що показує сторінка. Розбіжності між розміткою й сторінкою часті після зміни складської системи й гірші за відсутність розмітки.
• Пишіть відповідь, а не натяк на неї. «Сумісний із моделями X, Y і Z» витягується. «Працює з більшістю сучасних пристроїв» — ні, ані машиною, ані клієнтом.

Які типи розмітки справді окупаються, а які є декорацією, розібрано окремо в матеріалі про те, що розмічати і що це дає.

Мобільна версія — та, що має значення

Baymard оцінює мобільні картки гірше за десктопні, а це протилежність тому, де більшість команд витрачає час на перевірку. Три конкретні речі дають більшу частину розриву: галереї, які неможливо корисно збільшити, таблиці характеристик, що вилазять по горизонталі, і кнопка купівлі, яка прокручується геть замість того, щоб лишатися досяжною.

Липка панель купівлі з ціною, обраним варіантом і дією розвʼязує третю проблему й належить до змін із найвищою віддачею на мобільній картці. Прокручування таблиці характеристик усередині власного контейнера, а не разом зі сторінкою, розвʼязує другу й займає хвилини.

Що вимірювати

1. Частку додавань у кошик на сторінці товару, сегментовану за джерелом трафіку, а не змішану, бо намір на вході коливається сильніше за якість сторінки.
2. Глибину прокручування до блоку характеристик. Якщо до нього майже ніхто не доходить, або сторінка надто довга вище, або інформація стоїть не там.
3. Питання до підтримки перед покупкою, з тегом товару. Кожне повторюване питання — це відсутній рядок на сторінці, і це найдешевше доступне дослідження.
4. Причини повернень із тими самими тегами. Повернення через невідповідність очікуванням — це дефекти картки товару, а не логістичні витрати, хоча записують їх зазвичай як другі.

Три перевірки картки, які займають десять хвилин

Перш ніж замовляти переробку шаблону, варто прогнати три перевірки на власних сторінках. Кожна з них показує проблему, яку неможливо побачити, дивлячись на макет у Figma.

1. Відкрийте картку так, як це робить клієнт: із пошуку, на телефоні, у мобільній мережі. Не з адмінки й не по Wi-Fi у офісі. Порахуйте секунди до появи головного зображення й кількість прокручувань до кнопки купівлі.
2. Дайте сторінку людині, яка не знає товару, і поставте одне питання: «Ти б купив і чому ні?» Перше, що вона назве, майже завжди відсутня інформація, а не дизайн.
3. Візьміть пʼять останніх звернень у підтримку по цьому товару. Якщо відповідь на будь-яке з них є на сторінці, її або не видно, або сформульовано так, що її не читають.

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

Коротко

Бенчмарк Baymard за 2026 рік оцінює 52% десктопних і 62% мобільних карток як посередні або гірші. На першому екрані місце заслуговують пʼять речей: назва й упізнаване зображення, ціна зі статусом податку, наявність із датою доставки замість тривалості, вибір варіанта й видима кнопка купівлі. Зображення мають покривати ракурси, що знімають сумнів, а не максимізувати кількість, і головне зображення зазвичай є вашим елементом LCP, тож це рішення і про швидкість теж. Ставтеся скептично до відсотків про відео й відгуки: механізм полягає в зниженні невизначеності, а який важіль важить більше, залежить від категорії. Габарити, сумісність і повернення подавайте у скануємій формі, відсутність на складі використовуйте для фіксації наміру, тримайте вміст за GPSR окремо від переконливого і лагодьте спершу мобільну версію — саме там, за бенчмарком, лежать втрати.