Дизайн карточки товара, которая продаёт

Карточка товара — страница, на которой интернет-магазин зарабатывает деньги. Главная и каталог приводят человека к товару, а решение о покупке он принимает именно здесь. Если карточка не отвечает на вопросы покупателя, не вызывает доверия или прячет кнопку, никакой трафик не спасёт. Мы в студии «Абрис» спроектировали карточки для магазинов самых разных категорий — от строительных материалов до детской одежды — и в этой статье делимся тем, что действительно влияет на продажи: из каких блоков состоит карточка, как расставить приоритеты на первом экране и какие детали чаще всего упускают.

Что покупатель хочет понять за несколько секунд

Человек, открывший карточку, задаёт себе несколько вопросов почти одновременно. Тот ли это товар? Сколько стоит? Есть ли в наличии и когда привезут? Можно ли доверять магазину? Если ответы на эти вопросы видны сразу, покупатель переходит к деталям. Если нет — возвращается в поиск.

• Что это. Понятное название, фотография, по которой товар узнаётся, ключевая характеристика: размер, объём, модель.
• Сколько стоит. Цена крупно и сразу, без «уточняйте у менеджера», если это возможно в вашей отрасли.
• Когда получу. Наличие и сроки доставки или самовывоза для города покупателя.
• Как купить. Заметная кнопка добавления в корзину или быстрого заказа.
• Можно ли доверять. Рейтинг, отзывы, гарантия, условия возврата.

Всё это должно поместиться на первый экран компьютерной версии и в первые полтора-два экрана мобильной. Остальное — описание, характеристики, отзывы, похожие товары — ниже.

Фотографии: главный аргумент

В интернет-магазине покупатель не может потрогать товар, и фотографии заменяют ему этот опыт. Качество и количество снимков напрямую влияют на конверсию и на количество возвратов.

Минимальный набор для большинства категорий — общий вид на нейтральном фоне, несколько ракурсов, крупные планы деталей, товар в использовании или в интерьере, фотография, показывающая масштаб. Для одежды — на модели. Для мебели — в интерьере и с размерами. Для техники — разъёмы и панели управления.

Галерея

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

Единообразие

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

Цена, наличие и кнопка

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

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

Кнопка покупки — единственный элемент акцентного цвета на первом экране. Текст на ней — конкретное действие: «В корзину», «Купить», «Заказать». Рядом можно разместить второстепенную кнопку быстрого заказа или покупки в один клик, но визуально она должна уступать основной.

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

Варианты товара

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

• Показывайте варианты кнопками или образцами, а не выпадающим списком, если их немного. Так человек сразу видит все возможности.
• При выборе цвета меняйте главную фотографию на соответствующую. Покупатель должен видеть именно тот вариант, который выбрал.
• Недоступные варианты показывайте, но затемняйте, и предлагайте подписаться на поступление.
• Если цена зависит от варианта, обновляйте её сразу при выборе.
• Для размеров одежды и обуви добавляйте таблицу размеров прямо в карточке, а не на отдельной странице.

Описание и характеристики

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

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

Описание пишется для человека, а не для поисковика. Коротко, по делу, с выгодами, а не только со свойствами. Не «корпус из алюминиевого сплава», а «лёгкий корпус из алюминия: весит меньше килограмма, удобно брать в поездки». Для крупных магазинов с тысячами позиций уникальные описания для каждого товара — большой объём работы, поэтому мы советуем начинать с самых продаваемых и маржинальных позиций. Это также помогает продвижению: уникальные описания дают карточкам шанс ранжироваться по товарным запросам.

Отзывы и доверие

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

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

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

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

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

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

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

Дополнительные продажи и навигация

Карточка не должна быть тупиком. Если товар не подошёл, покупатель должен легко найти альтернативу. Если подошёл — увидеть, что ещё может понадобиться.

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

Вывод

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