Блог

Дизайн интернет-магазина одежды: где теряются заказы между каталогом и оплатой

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

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

Планку задает не соседний бренд, а карточка на маркетплейсе: через площадки идет 94% онлайн-продаж одежды и обуви (IBC Real Estate, изложение RB.RU, 16.03.2026). Человек приходит с привычкой, натренированной на Wildberries, и сравнивает путь покупки с ней. Ниже - карта воронки и порядок починки по доле потерь.

Короткий ответ: где именно теряются заказы

Главная цифра: средний отказ от корзины - 70,22% по сводке 50 исследований (Baymard Institute, обновлено 22.09.2025). Оговорка, без которой ее брать нельзя: это мировые данные, преимущественно США и ЕС, российских замеров по шагам такого качества не существует. Ниже вся воронка одной таблицей, каждая цифра с источником.

ШагЧто теряетсяЧто чинить в первую очередь
Каталог и фильтрыАссортимент - фактор выбора номер один, 59% (Data Insight)Фильтр по категории, цвету, размеру и цене; скорость каталога
Карточка: размерНельзя примерить - барьер у 56% (Data Insight); размер дает 30-45% возвратов (Shift, 24.07.2025)Сетка на втором экране, параметры модели, система измерения
Карточка: фотоНедоверие к качеству - барьер у 64%; «не оправдал ожиданий» - 40% возвратовФото на живом человеке, посадка и ткань текстом, 8-10 дополнительных кадров
КорзинаСредний отказ 70,22% (Baymard, 22.09.2025)Итоговая сумма с доставкой видна до корзины
ОформлениеДоп. расходы 40%, регистрация 18%, длинное оформление 17%, технические ошибки 17%Заказ без регистрации, форма на 8 полей вместо средних 11,3
ОплатаСтрах вводить карту 19%, мало способов оплаты 9%Два-три способа оплаты, знакомые платежные логотипы
После оплатыУсловия возврата - 13% отказов; без памятки окно возврата 3 месяца вместо 7 днейУсловия возврата в карточке, печатная памятка в посылке

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

Что в дизайне интернет-магазина одежды устроено иначе

Отраслевое отличие одно, и оно определяет всю конструкцию: одежду нельзя примерить и нельзя потрогать. Барьеры покупки онлайн выглядят так: недоверие к качеству - до 64%, невозможность примерить - до 56%, сложный возврат - до 32% (Data Insight, «CJM Fashion», выборка 954 человека 18-64 лет, 28.08.2025). Ни одного из них нет у магазина книг или техники.

  • Размер и система измерения. Значение без системы не означает ничего.
  • Посадка и тип фигуры. Оверсайз и длина рукава - факты, а не «стиль».
  • Фото вместо примерки. На человеке, с ростом и обхватами, а не на манекене.
  • Условия возврата на виду. В карточке, а не в подвале мелким шрифтом.

Второе отличие - модель покупки: полностью онлайн проходят путь 43%, еще 22% смотрят онлайн, а покупают офлайн (Data Insight). Сайт бренда одежды работает не только кассой, но и витриной для точки: у «Сколько?Можно» был один магазин в Новосибирске, и сайт бренда работает еще и витриной для него.

Третье мы вынесли из собственного исследования рынка перед проектом «Сколько?Можно»: архитектура интернет-магазина давно стандартизирована. Играть можно визуалом, усложнять механику корзины и оформления - нельзя. Клиент хотел сверхкреативный магазин, мы отстояли обратное и сошлись на компромиссе: стандартный путь покупки плюс точечные вольности вроде встроенного плеера.

Как только пользователь начинает разбираться, как устроена навигация, он перестает разбираться, что купить.

Каталог и фильтры: первый отсев

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

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

  • Выбранный фильтр сохраняется при возврате из карточки назад в каталог.
  • LCP не более 2,5 с и CLS не более 0,1 по 75-му перцентилю, отдельно на мобильном (web.dev, Core Web Vitals). CLS тут ломают подгрузка фото и «прыгающие» фильтры.
  • Товарная разметка Schema.org Product и Offer: без нее карточки не участвуют в товарных выдачах и трафик приходится покупать.

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

Карточка: размер, который на самом деле размер

«Размер M» без указания системы измерения - это не размер. В маркировке «Честный знак» размер одежды состоит из двух обязательных значений: тип системы измерения и само значение. Систем несколько: РОССИЯ (42, 46-48), ЕВРОПА, МЕЖДУНАРОДНЫЙ (S, M, 2XL, ONESIZE), ИТАЛИЯ, ФРАНЦИЯ, ВЕЛИКОБРИТАНИЯ, а также РОСТ по ГОСТ 25295-2003 и ГОСТ Р 53230-2008.

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

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

  • Цвет, размер и бренд - обязательные атрибуты, а не «желательные».
  • 8-10 дополнительных фотографий сверх основных ракурсов.
  • Размерная сетка с параметрами модели и инструкцией по замеру.
  • Рекомендации по типам фигуры и росту.
  • Оверсайз указан отдельным атрибутом, а не словом «свободный крой» в описании.
  • Размер на бирке и фактический разведены, если не совпадают.

На телефоне карточка разваливается в одном месте - строка выбора размера. Минимальная цель нажатия: 24×24 CSS-пикселя по WCAG 2.2 (SC 2.5.8), 44×44 pt по Apple HIG, 48×48 dp по Material Design. Плашки S/M/L/XL часто рисуют мельче любого порога, а промах по соседнему размеру - это будущий возврат за счет магазина.

Корзина и оформление: здесь уходит большинство

Разложим 70,22% по причинам. Из тех, кто ушел с оформления не «просто посмотреть»: 40% - неожиданные дополнительные расходы, 20% - долгая доставка, 19% - страх вводить карту, 18% - потребовали регистрацию, 17% - длинное оформление, 17% - технические ошибки, 12% - не видно итоговой суммы (Baymard, 22.09.2025). Четыре причины из семи - верстка страницы, а не логистика и не цена товара.

Длина формы измерена отдельно: средний чекаут содержит 11,3 поля при достаточных 8 и занимает 5,1 шага (Baymard, 26.06.2024). В среднем магазине можно выбросить каждое третье поле и ничего не потерять. Восьми хватает на весь заказ целиком.

  • Имя
  • Телефон
  • Город
  • Адрес доставки
  • Способ доставки
  • Способ оплаты
  • Комментарий к заказу
  • Согласие на обработку персональных данных по 152-ФЗ - единственное поле, которое нельзя сократить

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

Граница нашей работы: платежные системы и агрегаторы доставки подключает клиент - так было и на проекте. Мы отвечаем за путь и интерфейс, за договоры с эквайрингом - владелец магазина.

Возвраты: почему на своем сайте их вдвое меньше

Возврат - это метрика оформления карточки, и в выдаче по теме об этом не говорит никто. Доли различаются по каналам в разы.

Где покупаютДоля возвратовГлавная причина
Свой сайт бренда15-25%Не оправдал ожиданий - 40%; размер - 30%; дефекты - 20%
Нишевые площадки (Lamoda)до 35%Отдельной разбивки агентство не дает
Крупные маркетплейсы30-45%Размер - 45%; не оправдал ожиданий - 35%

Источник вилок - агентство Shift, изложение на ECOMHUB, 24.07.2025. Методология публично не раскрыта, поэтому это оценка агентства, а не отраслевой стандарт. Смысл читается и без точности до процента: «не оправдал ожиданий» - прямая оценка карточки, то есть фото, описания, цвета и ткани. Возвраты чинятся в карточке, а считаются в бухгалтерии.

Вкладыш в посылке после этого выглядит иначе: не жест заботы, а два с половиной месяца разницы в сроке возврата. На «Сколько?Можно» печатные вкладыши были частью проекта - «чек разрешений» и «билет трансформации». Работа над магазином не заканчивается там, где заканчивается сайт. Отдельно на сайте обязаны лежать оферта и полная информация о продавце и способах направления претензий: этого требует Постановление Правительства РФ № 2463 от 31.12.2020.

Что редизайн интернет магазина одежды дает в деньгах и часах

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

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

РаботаЦенаСрок
Интернет-магазин с нуляот 175 000 ₽6-10 недель
Своя админ-панельот 250 000 ₽по объему
Переработка существующего сайтаот 80 000 ₽по объему
UX-аудит магазинаот 80 000 ₽1-2 недели
Поддержка магазинаот 25 000 ₽ в месяц10-15 часов

Арифметика открытая: 175 000 плюс 250 000 - это 425 000 ₽, и бюджет проекта до 500 000 ₽ ложится ровно в эту модель. Прикинуть свою вилку и посмотреть состав работ можно на странице веб-дизайна. Две итерации правок входят в смету и отдельно не оплачиваются.

Разговор о бюджете стоит начинать не с вопроса «на сколько вырастет конверсия», а с вопроса «сколько часов в месяц команда тратит на загрузку товаров и правку остатков». Эта экономия считается в часах администратора и предсказуема. Конверсия - нет.

Что проверить самому за один вечер

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

  1. Показать итоговую сумму с доставкой до корзины: доп. расходы - 40% отказов, самая крупная строка.
  2. Убрать обязательную регистрацию перед оформлением - 18%.
  3. Сократить оформление до 8 полей: среднее по рынку - 11,3.
  4. Довести размерную сетку до второго экрана карточки и добавить параметры модели.
  5. Добавить фото на живом человеке с указанием роста и обхватов.
  6. Вынести условия возврата в карточку, а не в подвал - 13% отказов.
  7. Дать второй и третий способ оплаты - на нехватку способов приходится 9%.

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

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

  • С какого шага воронки вы предлагаете начать и почему именно с него?
  • Чем будете измерять результат до и после и что замеряете сейчас, до старта?
  • Что вы делаете с размерной сеткой и условиями возврата?
  • Кто подключает платежи и доставку - вы или мы?

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

Нужен не совет, а результат?

Расскажите задачу - посмотрим и предложим решение.

Написать в Telegram