Дизайн карточки товара в e-commerce: как спроектировать компонент, который не теряет конверсию

Листая каталог, пользователь принимает решение о клике за доли секунды. Он не читает - он сканирует. И если в этот момент что-то выглядит неправильно: цена не находится, кнопка добавления в корзину неочевидна, фото мелкое - он просто скроллит дальше. Конверсия теряется не на странице оформления заказа, а гораздо раньше.

Карточка товара - один из самых нагруженных UI-компонентов в e-commerce. Она должна одновременно передавать ценность продукта, провоцировать клик, выдерживать десятки состояний и корректно выглядеть на экране 320px. При этом визуально она занимает немного места.

В этом руководстве разберем компонент изнутри: какие элементы критичны, как расставить приоритеты, какие состояния нельзя пропускать и где чаще всего происходит провал. Без общих слов про «пользователя в центре» - только конкретные решения.

Из чего состоит карточка: анатомия компонента

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

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

Иерархия информации: что пользователь должен увидеть первым

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

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

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

При проектировании в Figma удобно проверять иерархию через быстрый тест: закройте карточку на 1 секунду, откройте и запишите, что вы заметили первым. Если это не то, что важнее всего для покупки - меняйте веса и размеры.

Ценовой блок: главный мотиватор

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

Несколько правил, которые работают на практике:

• Зачеркнутая старая цена рядом с актуальной усиливает восприятие выгоды даже при небольшой скидке. Скидка в 5% выглядит незначительной в тексте, но наглядной при сравнении двух чисел.
• Процент скидки в бейдже работает лучше, чем просто «Скидка». «-23%» - конкретно, читается мгновенно.
• Цена не должна быть мельче названия. Визуальный вес цены должен быть сопоставим с заголовком товара или больше.
• Цена за единицу vs цена за упаковку - если у вас есть такое разделение, показывайте обе. Иначе пользователь уйдет уточнять.

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

Бейджи: как не превратить карточку в ярмарочный прилавок

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

Проблема возникает, когда маркетинг хочет показать всё сразу: «Хит продаж», «Новинка», «Скидка», «Эксклюзив», «Быстрая доставка». Пять бейджей на одной карточке превращаются в визуальный шум. Пользователь не считывает ни один из них.

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

Отдельного внимания заслуживает бейдж «Нет в наличии». Его часто делают через disabled-состояние карточки: затемняют изображение, убирают CTA. Это рабочий паттерн, но важно оставить возможность добавить в список ожидания или уведомить о поступлении - иначе вы теряете потенциального покупателя навсегда.

Рейтинг и отзывы: когда социальное доказательство помогает, а когда нет

Звёздный рейтинг - стандартный элемент e-commerce, но его реализация часто грешит небрежностью.

Главная ловушка: показывать рейтинг без количества отзывов. «4.8» выглядит убедительно, если это 200 отзывов, и подозрительно - если это 2 отзыва от родственников продавца. Всегда показывайте оба числа рядом.

Второй момент: не показывайте рейтинг для товаров без отзывов. Пустые звёзды или «0 отзывов» создают негативное впечатление. Лучше скрыть блок полностью и отобразить его только после первых 3-5 оценок.

По размеру: звёзды не должны занимать больше одной строки и конкурировать с ценой. Это вспомогательный элемент, не центральный.

Hover-состояния: где теряется мобильность карточки

Hover - один из самых недооцененных слоев при проектировании. На десктопе он дает возможность показать дополнительный контент без перехода на страницу товара: вторую фотографию, кнопку быстрой покупки, цвета.

Хороший hover для карточки товара должен решать одну из задач:

• Показать товар с другого ракурса (смена главного фото)
• Вывести CTA, которая не занимает место в дефолтном виде
• Показать quick-add без перехода на страницу
• Добавить анимацию масштаба на фото, чтобы дать ощущение интерактивности

Проблемы начинаются, когда hover перегружен: появляется несколько кнопок одновременно, текст накладывается на изображение без подложки, анимация слишком медленная или слишком резкая. Оптимальная задержка перед показом hover-контента - 100-200 мс. Если реакция мгновенная, карточки «мигают» при прокрутке. Если долгая - ощущение тормозного интерфейса.

Критически важный момент для Figma: hover-состояние нужно проектировать как отдельный вариант компонента, а не добавлять поверх основного слоя. Это позволяет передать разработчику четкие различия между состояниями без догадок.

Quick-add: когда кнопка в каталоге помогает, а когда мешает

Quick-add - кнопка добавления в корзину прямо из сетки каталога, без перехода на страницу товара. Звучит как очевидный способ снизить трение. На практике работает только в определенных условиях.

Когда quick-add уместен:

• Товар простой и не требует выбора параметров (например, книга, еда, расходники)
• Пользователь уже знает продукт и добавляет повторно
• Это сценарий быстрой закупки, а не исследования

Когда quick-add создает проблемы:

• Товар требует выбора размера, цвета или комплектации - тогда клик на кнопку либо блокируется, либо открывает popup, который перебивает сканирование каталога
• Кнопка перекрывает часть карточки и мешает основному сценарию - перейти и изучить товар
• На мобиле она слишком мала и провоцирует ошибочные тапы

Хорошее решение: показывать quick-add только в hover (десктоп) или выносить его как иконку-корзину без текста, которая не конкурирует с основным CTA.

CTA в карточке: кнопка, которую не видят

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

Несколько ориентиров по CTA:

• Минимальная высота кнопки - 44px на мобиле (рекомендация Apple HIG), 36px на десктопе.
• Текст кнопки должен отражать действие, а не состояние: «В корзину» лучше, чем «Купить» для многошагового флоу. «Заказать» лучше, чем «Добавить», если это один клик до покупки.
• Кнопка не должна сливаться с фоном карточки. Если карточка белая - кнопка не может быть белой с тонкой рамкой.
• На мобиле CTA лучше вынести на всю ширину карточки или сделать заметной иконкой-корзиной с фиксированным местом.

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

Состояния, которые нельзя пропускать

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

При работе в Figma удобно создавать карточку как компонент с вариантами по осям: «Наличие», «Скидка», «Рейтинг», «Состояние CTA». Это дает матрицу состояний, которую можно передать разработчику и использовать для тестирования.

Адаптив: как карточка выживает на мобиле

Мобильный трафик в e-commerce давно превысил десктопный по объему, но конверсия на мобиле традиционно ниже. Часть причин - за пределами карточки, но плохой адаптив компонента вносит свой вклад.

Типичные проблемы мобильной реализации:

• Сетка 2 колонки на 320px. При ширине колонки 140-150px фото становится слишком маленьким, текст сжимается до 2-3 слов в строке, CTA превращается в точку. Для дешевых товаров с простой иерархией это работает. Для сложных категорий - нет.
• Hover-контент без мобильной альтернативы. Если quick-add или вторая фотография доступны только через hover, на мобиле пользователь их не увидит никогда.
• Бейджи, которые перекрывают лицо товара. На маленьком экране бейдж 40x40px может закрыть ключевую часть изображения.
• CTA ниже «линии прокрутки» карточки. Если для просмотра кнопки нужно скролить внутри карточки - это архитектурная ошибка.

Хорошая практика: проектировать мобильную версию карточки отдельно, а не просто масштабировать десктопную. На мобиле часто имеет смысл скрыть рейтинг или бренд и оставить только ключевые элементы: фото, название (1 строка), цена, CTA.

Проектирование в Figma: как собрать компонент правильно

Несколько технических рекомендаций для тех, кто строит карточку как переиспользуемый компонент в Figma.

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

Вынесите все состояния в варианты компонента. Не создавайте отдельные фреймы для «карточка со скидкой» и «карточка без скидки». Один компонент с булевыми пропертями: Discount (true/false), InStock (true/false), HasRating (true/false), IsInCart (true/false).

Медиа-блок делайте отдельным компонентом. Это позволит легко тестировать разные соотношения сторон (1:1, 3:4, 4:3) и добавлять поведение галереи, не ломая основную структуру.

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

Типичные ошибки, которые снижают конверсию

Большинство потерь происходит не из-за плохого визуала, а из-за нескольких системных просчетов.

• Изображение слишком маленькое относительно текста. Пользователь приходит смотреть товар, а не читать о нем. Фото должно занимать минимум 60-65% высоты карточки.
• Название обрезается непредсказуемо. «Кроссовки Nike Air Max 90 мужск...» - ладно. Но если обрезка режет смысл («Биодобавка для укреп...»), пользователь не понимает товар и не кликает.
• CTA появляется только при hover и отсутствует в мобильном виде. Часть пользователей никогда не узнает, что можно добавить в корзину.
• Разные высоты карточек в одной сетке. Если название у одного товара 1 строка, у другого 3, сетка визуально разваливается. Используйте фиксированную высоту текстового блока с обрезкой.
• Цвет и размер CTA не выделяются. Кнопка «В корзину» серого цвета на белой карточке - это почти невидимый элемент.
• Нет промежуточного состояния загрузки. Когда список карточек подгружается, скелетоны должны повторять реальную структуру компонента, иначе интерфейс мигает и сдвигается.

Чеклист перед передачей компонента в разработку

• Продуманы все состояния: дефолт, hover, «нет в наличии», «в корзине», «в избранном», скидка, без рейтинга, длинное название
• Соотношение сторон изображения зафиксировано или вынесено как вариант
• Кнопка действия видна без hover на мобильном разрешении
• Бейджей не более двух одновременно, логика приоритетов описана
• Рейтинг скрыт при отсутствии отзывов
• Ценовой блок выглядит корректно для всех сценариев: цена от, диапазон, со скидкой, без скидки
• Текстовые поля обрезаются предсказуемо через ellipsis
• Компонент собран на Auto Layout, не на фиксированных координатах
• Скелетон повторяет структуру реальной карточки
• Мобильная версия спроектирована отдельно от десктопной