Дизайн карточки товара для интернет-магазина

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

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

Вопросы, на которые должна ответить карточка

Удобно проектировать карточку не от элементов, а от вопросов покупателя. В голове у человека, открывшего страницу товара, примерно такой список:

1. Это то, что я ищу?
2. Сколько стоит?
3. Есть ли в наличии нужный размер, цвет, модификация?
4. Как выглядит вживую, а не на рекламной картинке?
5. Подойдёт ли мне по характеристикам?
6. Когда и как я его получу, сколько стоит доставка?
7. Что говорят те, кто уже купил?
8. Можно ли вернуть, если не подойдёт?

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

Верхняя часть: фото, название, цена, кнопка

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

Галерея

Фотографии продают сильнее любого текста. Что важно:

• Несколько ракурсов, а не одно фото на белом фоне.
• Фото в использовании или в интерьере, чтобы был понятен масштаб.
• Крупные детали: фактура ткани, качество швов, разъёмы, маркировка.
• Возможность увеличить фото до полного размера, а на мобильных — листать свайпом и приближать жестом.
• Если у товара несколько цветов, фото меняется при выборе цвета.

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

Цена

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

Кнопка покупки

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

Вторичные действия — «В избранное», «Сравнить», «Купить в один клик» — оформляются скромнее и не конкурируют с главной кнопкой.

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

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

Видимые варианты вместо выпадающих списков. Если вариантов немного, показываем их кнопками или цветными образцами. Выпадающий список скрывает информацию и требует лишнего клика.

Недоступные варианты не исчезают. Размер, которого нет в наличии, показываем перечёркнутым или бледным, а не убираем. Иначе покупатель решит, что такого размера не бывает вообще. Рядом можно предложить подписаться на поступление.

Подсказки по выбору. Ссылка на таблицу размеров рядом с выбором размера. Пояснение, чем отличаются комплектации. Для сложных товаров — короткая подсказка «Какой выбрать?».

Нельзя добавить в корзину без выбора. Если обязательный параметр не выбран, кнопка не должна молча ничего не делать. Подсвечиваем блок выбора и пишем, что нужно указать.

Информация о доставке и наличии

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

• Наличие: «В наличии», «Осталось 3 штуки», «Под заказ, 5–7 дней».
• Ближайшая дата доставки и её стоимость для города покупателя.
• Возможность самовывоза и адреса пунктов.
• Порог бесплатной доставки, если он есть.

Из практики: в магазине товаров для дома мы добавили в карточку строку «Доставим завтра» с определением города по местоположению. Это простое изменение уменьшило количество вопросов в чате и заметно повысило конверсию в корзину, особенно для недорогих товаров, где покупатель не готов ждать неделю.

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

Ниже первого экрана начинается часть для тех, кто изучает товар подробно. Здесь важна структура, а не объём текста.

Описание

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

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

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

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

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

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

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

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

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

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

• Галерея компактнее — не на всю высоту экрана, с точками-индикаторами количества фото.
• Название, цена и рейтинг сразу под галереей.
• Кнопка «В корзину» закреплена внизу экрана при прокрутке, вместе с ценой.
• Выбор вариантов — крупными кнопками, удобными для пальца.
• Описание, характеристики и отзывы — раскрывающимися блоками.

Рекомендации и допродажи

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

Вывод

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

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