- html5css.dev
- SEO
- SEO продвижение
- Юзабилити сайта
- Карточки товаров
Карточки товаров
Карточка — место, где принимают решение. Разбираем, что мешает его принять: непонятная цена, плохие фото, спрятанные условия доставки и невозможность сравнить.
Что мешает купить
| Препятствие | Что делает пользователь | Решение |
|---|---|---|
| Цены нет или «по запросу» | Уходит к конкуренту | Цена или вилка на первом экране |
| Непонятно, есть ли в наличии | Пишет в чат или уходит | Статус и срок поставки рядом с ценой |
| Условия доставки спрятаны | Бросает на этапе оформления | Срок и стоимость доставки в карточке |
| Мало фотографий | Идёт смотреть на маркетплейс | 5–8 снимков, включая детали и масштаб |
| Не понять, подойдёт ли | Не рискует | Полные характеристики, размеры, совместимость |
| Варианты — отдельными страницами | Теряется при выборе цвета | Переключатель в одной карточке |
| Кнопка заказа далеко внизу | Не доходит | Кнопка на первом экране и в липкой панели |
Первый экран
Пять элементов, разобранных в уроке о разработке карточки: название, фото, цена, наличие, кнопка. Здесь — как они должны работать с точки зрения удобства:
- Фото открывается на весь экран по тапу, листается свайпом.
- Цена крупная, старая цена зачёркнута, скидка обозначена не только цветом.
- Наличие словами: «В наличии, отправим завтра», а не зелёная точка.
- Кнопка во всю ширину на мобильном и продублирована в липкой панели.
- Ключевые характеристики — 3–5 главных параметров сразу под ценой.
Галерея
| Снимок | Зачем |
|---|---|
| Общий вид на белом | Понять, что это |
| Детали и узлы | Оценить качество |
| Масштаб | Рядом с привычным предметом или с размерами |
| В использовании | Представить у себя |
| Комплектация | Что именно придёт в коробке |
| Видео | Для сложных товаров заменяет десяток фото |
Характеристики
- Таблицей, а не абзацем — сравнивать параметры текстом невозможно.
- С единицами измерения: «вылет 220 мм», а не «220».
- Единообразно внутри категории: если у одного указан вес, он должен быть у всех.
- Главные — сразу, полные — ниже, свёрнуто на мобильном.
- Совпадают с фильтрами каталога.
- Совместимость и ограничения — то, ради чего смотрят характеристики.
Варианты товара
Цвет, размер, объём — переключателем внутри одной карточки:
- При смене варианта обновляются цена, наличие и фотографии.
- Недоступные варианты видны, но помечены — это тоже информация.
- URL может меняться параметром, но canonical указывает на основной вариант.
- Выбранный вариант виден явно, а не только подсветкой рамки.
Отзывы и вопросы
- Реальные отзывы с фото — единственный по-настоящему уникальный блок карточки.
- Отвечайте на вопросы публично — ответ прочитают следующие покупатели.
- Не покупайте отзывы: одинаковые восторги распознаются и снижают доверие.
- Негативный отзыв с ответом работает лучше, чем его отсутствие.
- Сортировка и фильтр по оценке — люди специально ищут негативные.
Итог
Карточка работает, когда на ней есть всё для решения: цена, наличие, достаточно фотографий, полные характеристики и условия доставки. Объём описания на решение почти не влияет, а собственные фото и живые отзывы — влияют сильно. Дальше — корзина и оформление заказа.
Частые вопросы
Что чаще всего мешает купить?
Отсутствие цены на первом экране, непонятные условия доставки, мало фотографий и невозможность понять, подойдёт ли товар. Всё это решается составом карточки, а не текстом.
Сколько фотографий нужно в карточке?
Достаточно, чтобы понять товар без вопросов: общий вид, детали, масштаб рядом с привычным предметом, товар в использовании. Для многих категорий это 5–8 снимков.
Как показывать варианты товара?
Переключателем внутри одной карточки, с обновлением цены и наличия. Отдельные страницы на каждый цвет создают дубли и заставляют пользователя искать заново.
Нужны ли отзывы, если их мало?
Да. Три честных отзыва лучше, чем ни одного, и намного лучше, чем тридцать одинаковых покупных. Отсутствие отзывов при этом не критично, если есть фото и подробные характеристики.