VIDEMIND
Web Design Дизайн интернет-магазиновГид

Карточка товара: что должно быть на первом экране

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

Карточка товара: что должно быть на первом экране — графика VIDEMIND
VIDEMIND · generated
Содержание · 8
  1. Пять обязательных элементов
  2. Фотографии
  3. Варианты и доступность
  4. Цена и доставка
  5. Где именно теряется покупатель
  6. Что должны показывать фотографии
  7. Отзывы и то, как они читаются
  8. Что в итоге

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

Пять обязательных элементов

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

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

Фотографии

Фотография — главный аргумент в электронной коммерции. Минимальный набор: общий план на нейтральном фоне, деталь материала, предмет в контексте использования и масштаб относительно человека или знакомого объекта.

Возможность увеличить изображение обязательна: покупатель хочет рассмотреть фактуру и швы.

  • Общий план на нейтральном фоне.
  • Макро: фактура, шов, край, механизм.
  • В интерьере или на человеке.
  • Масштаб относительно понятного объекта.
  • Все доступные цвета в одинаковом ракурсе.
Галерея карточки товара: общий план, деталь, контекст и масштаб
Галерея карточки товара: общий план, деталь, контекст и масштабVIDEMIND · generated

Варианты и доступность

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

Смена варианта обязана менять фотографию: выбор синего цвета при фотографии красного предмета разрушает доверие мгновенно.

Смена варианта обязана менять фотографию: выбор синего цвета при фотографии красного предмета разрушает доверие мгновенно.
Карточка товара: что должно быть на первом экране — графика VIDEMIND
VIDEMIND · generated

Цена и доставка

Итоговая цена должна быть видна как можно раньше. Скрытая стоимость доставки, всплывающая на последнем шаге оформления, — главная причина брошенных корзин.

Хорошая практика — показывать в карточке ориентировочный срок и стоимость доставки для города пользователя.

ЭлементГде показатьОшибка
ЦенаПервый экранТолько «от»
НаличиеРядом с ценой«Уточняйте»
ДоставкаПервый экранТолько в корзине
ВозвратРядом с кнопкойВ отдельном разделе

Где именно теряется покупатель

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

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

Карточка товара: что должно быть на первом экране — графика VIDEMIND
VIDEMIND · generated

Что должны показывать фотографии

Порядок кадров важнее их количества: первые три просматривают почти все, до десятого доходят единицы.

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

Отзывы и то, как они читаются

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

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

Карточка товара: что должно быть на первом экране — графика VIDEMIND
VIDEMIND · generated

Что в итоге

Карточка товара работает, когда на первом экране есть фото, название, цена, вариант и кнопка — и когда стоимость доставки не сюрприз.

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

Коротко

Что обязательно должно быть на первом экране карточки товара?
Пять элементов: изображение, название, цена, выбор варианта и кнопка добавления. Описание, характеристики, отзывы и доставка — ниже. Самая частая ошибка: на мобильном цена или кнопка уезжают за сгиб, и их приходится искать прокруткой.
Как показывать варианты, которых нет в наличии?
Зачёркнутыми, а не скрытыми: если позиция исчезает из списка, человек решает, что её не существует, и уходит. И смена варианта обязана менять фотографию — выбор синего цвета при фотографии красного предмета разрушает доверие мгновенно.
Почему бросают корзину на последнем шаге?
Главная причина — скрытая стоимость доставки, всплывающая при оформлении. Ориентировочный срок и стоимость для города покупателя, показанные прямо в карточке, снимают этот сценарий. Вторая причина — недоверие к фотографиям: один студийный кадр без масштаба и контекста не даёт понять, как вещь выглядит в жизни.
Продолжить тему · Дизайн интернет-магазинов

Каталог и фильтры

Сколько товаров показывать в ряд, какие фильтры выносить наверх, как быть с пустой выдачей и почему бесконечная прокрутка вредит каталогу.Дальше

Нашли ошибку или неточность в атрибуции? Напишите нам

Обсуждение

Загружаем…

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

0 / 1500