Руководство / Конверсия и выбор

Карточка товара интернет-магазина одежды: схема, примеры и чек-лист

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

Александр ГельманОбновлено 11 ноября 20269 мин чтения
Главная мысль

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

Какую задачу решает карточка одежды

Покупатель ищет платье на мероприятие через неделю. Ему нравится фотография, но пока непонятно, подойдёт ли размер, насколько плотная ткань и успеет ли доставка. Кнопка «Купить» уже есть. Оснований нажать на неё ещё недостаточно.

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

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

Схема карточки: от интереса к уверенному выбору

Авторская схема проверки. Порядок блоков уточняется под товар и экран.
  1. 1. Узнать вещь
    Фото, название, цена, цвет.
  2. 2. Оценить посадку
    Вид на человеке, детали, параметры модели.
  3. 3. Выбрать вариант
    Размеры, замеры, наличие нужного сочетания.
  4. 4. Проверить условия
    Доставка в свой город, стоимость, возврат.
  5. 5. Добавить в корзину
    Выбранный вариант и понятное подтверждение.

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

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

Фотографии должны отвечать на вопросы о вещи

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

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

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

Размер, замеры и наличие: проверяем вместе

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

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

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

Не выбирайте размер за покупателя без объяснения. Условная рекомендация «По вашим замерам подходит M» должна позволять проверить исходные данные и самостоятельно выбрать другой вариант.

Доставка и возврат входят в решение о покупке

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

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

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

Что особенно важно проверить на телефоне

Nielsen Norman Group относит понятный выбор варианта, наличие и обратную связь после добавления в корзину к базовым задачам товарной страницы. На небольшом экране эти действия проверяйте в связке.

  • Таблица размеров открывается, читается и закрывается без потери выбранного цвета.
  • Покупатель видит, какой размер выбран, и может изменить его до добавления.
  • Сообщение об обязательном размере находится рядом с выбором и объясняет следующее действие.
  • Закреплённая кнопка покупки, если она используется, не закрывает размеры, подсказки, чат и уведомление о cookies.
  • После добавления видно, какая вещь, цвет и размер оказались в корзине. Повторный тап не создаёт непреднамеренные дубли.
  • Возврат из корзины сохраняет контекст; человек может продолжить сравнение вещей.

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

Короткий чек-лист для команды

Что проверитьКритерий готовности
Фото и вариантСнимки соответствуют выбранному цвету и показывают существенные детали.
ПосадкаЕсть вид на человеке и сведения, позволяющие интерпретировать длину и объём.
РазмерПонятны система размеров, замеры и способ их применения.
НаличиеДоступность показана для сочетания цвета и размера.
УсловияПокупатель узнаёт срок и стоимость получения для своего региона.
ВозвратКраткие условия не противоречат полной инструкции.
КорзинаДобавлен правильный вариант; результат действия заметен.
ТелефонПанели и всплывающие элементы не перекрывают путь покупки.

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

Как оценить результат изменений

До внедрения проверьте, что аналитика различает просмотр товара и добавление конкретного варианта в корзину. Например, в GA4 для электронной торговли предусмотрены события view_item и add_to_cart. В другой системе используйте сопоставимые события с тем же смыслом.

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

Разделяйте мобильные и настольные устройства, категории, наличие размеров и источники входа. Сравнение до и после без учёта распродажи, новой коллекции и состава трафика не показывает причинный эффект. При достаточном объёме используйте корректно спланированный A/B-тест; при малом — сочетайте наблюдения за выполнением задач с осторожной оценкой динамики.

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

Источники и методика

Рекомендации связывают задачи покупателя с работой магазина. Учебные примеры иллюстрируют способ расчёта и не описывают результаты клиентских проектов.

  1. Baymard: 5 Apparel UX Best Practices ↗
  2. Baymard: Apparel E-commerce UX Research Launch ↗
  3. Nielsen Norman Group: UX Guidelines for Ecommerce Product Pages ↗
  4. Google Analytics: Measure ecommerce ↗
Александр Гельман

Практика управления электронной коммерцией: запуск собственного канала REDMOND, работа с конверсией, обработкой заказов и экономикой продаж. Опыт и кейсы.

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

Обсудить задачу ↗