15.01.2026

Карточка товара в мобильной версии магазина drwn.ru

Карточка товара является важным элементом интерфейса. Через нее человек знакомится с ассортиментом, получает первое впечатление о товарах и принимает решение пойти дальше, или остановится на конкретной позиции.

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

Контекст

В каталоге «Darwin», как и у многих других интернет-магазинов, есть два типа товаров. Это единичные позиции, и товары у которых есть торговые предложения (можно выбрать цвет и размер). Товары с торговыми предложениями, на данный момент, нельзя добавить в корзину из каталога, так как необходимо выбрать его параметры.

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

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

Benchmarking

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

Конечно, необходимо помнить про особенность оптовых продаж. В примерах ниже никто не покупает 200 телевизоров, или 120 футболок разных цветов и размеров. По этому интерфейс обычных розничных магазинов не дает нам полной картины.

Illan Gifts

Начнем с прямого конкурента. На мобильных устройствах пользователь может увидеть два типа карточек товара. На главной странице в разделе «Новинки/Хиты» представлены маленькие карточки с минимумом информации (Цена, название товара и кнопка «В корзину»). В данном случае сайт дает возможность добавить товар в корзину не переходя на страницу товара, даже если у него есть торговые предложения (несколько цветов и размеров). В этом случае у товаров выбраны параметры по умолчанию, с которыми они добавляется в корзину.

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

Это отличный способ взаимодействия для простых товаров без множества параметров и конфигураций, решение о покупке которых принять довольно легко. Если товар более сложный, у него не только разные цвета, но и разные размеры, которые можно выбрать (имеется ряд торговых предложений), такой способ взаимодействия уже не является оптимальным.

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

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

Данный подход к проектированию карточки товара открывает широкие возможности для подачи информации пользователям. Можно вывести неограниченное (только что здравым смыслом) количество характеристик и дать возможность не переходя на страницу товара добавить его в корзину.

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

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

Сбер МегаМаркет

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

Карточка товара «Сбер МегаМаркет» дает возможность добавить товар в корзину. Количество товара в корзине настраивается после добавления.

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

LaModa

«LaModa» не дает возможности выбрать что-либо в карточке товара или добавить товар в корзину. Можно только перейти на страницу товара, где будет вся информация и возможность выбрать размер/цвет.

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

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

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

Divan.ru

Еще одним любопытным примером реализации карточек товара и каталога является магазин мебели «divan.ru». Линейки их продукции собраны в карусели с горизонтальным скроллом, таким образом мы можем увидеть разные расцветки одной модели просто пролистав свайпом вбок. Это удобно, когда нужно показать «товар лицом». Карточки имеют фото достаточного размера, чтобы оценить продукт по его внешнему виду и принять решение о том нравится он вам или нет. Магазин не дает возможности добавить товар из каталога в корзину. Чтобы что-то купить, необходимо перейти на страницу товара.

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

Каталог с каруселями дает возможность сразу взглянуть на одну модель в разных цветовых исполнениях. Положить товар в корзину можно только на детальной странице товара.

OZON

Маркетплейс выбрал разный подход в разных товарных группах. Если товары в каталоге не предполагают выбора каких-либо параметров, то его можно добавить в корзину.

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

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

В разделе с одеждой карточка товара «OZON» не имеет кнопку «В корзину», так как у товаров есть параметры (Цвет и размер), которые нужно выбрать перед добавлением в корзину.

Карточка товара «Darwin»

При разработке мобильной версии карточки товара для магазина «Darwin» мы опирались на опыт других крупных ритейлеров и учитывали особенности оптовой продажи товаров в электронной коммерции. Карточки товаров должны быть компактными (по 2 шт. в ряд), информативными, хорошо представлять товар и иметь нужные функции для добавления в корзину.

Сперва мы попробовали сделать карточку похожей на десктопную версию (фото выше). Она имела фото товара достаточного размера, варианты цветов, количество доступное на складе и кнопку «В корзину». Проблема была в том, что в карточке не так много места и мы можем отобразить только несколько вариантов цветов. Чтобы увидеть больше, нужно все равно перейти на страницу товара и продолжить покупку оттуда. Получается, что отображение цветов таким образом дает неполное представление о наличии торговых предложений и заставляет пользователя уходить из каталога и потом возвращаться обратно, чтобы продолжить покупки.

Чтобы сэкономить место и избежать путаницы мы попробовали сделать вариант карточки товара без кнопки «В корзину», а наличие разных цветов обозначить специальной иконкой (пример ниже).

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

Можно дать возможность отображения товаров в каталоге в виде списка. Такая компоновка дает широкие возможности по отображению параметров товара (пример ниже).

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

Итак мы подошли к компромиссному варианту. Оставить информацию о наличии других цветов у товара, а при клике на кнопку «В корзину» вызывать диалоговое окно для выбора параметров «цвет» и «размер». Плюс дать возможность указать тираж того или иного размера не переходя на детальную страницу товара (пример ниже).