- Заказчик
- Компания Darwin занимается брендированием корпоративных подарков, имеет собственное производство и большое количество постоянных клиентов.
- Задача
- Проектирование карточки товара в каталоге на мобильной версии сайта сувенирной продукции
Карточка товара является элементом интерфейса сайта электронной коммерции. Благодаря этому элементу человек знакомится с ассортиментом, получает первое впечатление о конкретном товаре и принимает решение о том, что делать дальше, или останавливается на конкретной позиции товара.
То, какая информация дает карточку товара, для потребителя очень важно. Но, если на сайтах десктопных версий у нас есть почти неограниченное количество места, и мы можем сэкономить и вывести множество параметров, спрятать часть информации в состоянии наведения, то в мобильных версиях есть ряд ограничений. Самое тяжелое ограничение — это пространство. Необходимо ответственно подходить к вопросу проектирования карточек, чтобы не упустить важную роль, не сделать больше, глубже конверсию и удобство для пользователей.
Конечно, каждый магазин требует индивидуального гардероба. К сожалению, нет ни одного решения для всех, поэтому необходимо учитывать специфику самого магазина и его ассортимента. В данном случае этот вопрос мы рассмотрим на тему магазина подарков и сувениров Дарвина.
Контекст
В каталоге Дарвина, как и во многих других интернет-магазинах, есть товары двух типов. Это единственные позиции, которые имеют один неизменный параметр (цвет и размер), и товары, у которых есть торговые предложения (можно выбрать цвет и размер). Товар с торговым предложением, на данный момент, нельзя добавить в корзину из каталога, так как необходимо перейти на страницу товара и выбрать там все необходимые параметры, чтобы добавить именно ту конфигурацию, которая вам нужна.
Определенная спецификация в опыте взаимодействия учитывает тот факт, что товары продаются оптом. То есть пользователь не добавлен в корзину ни одного устройства, он может купить одну и ту же позицию в разных параметрах. Например, на странице цветных футболок добавьте сразу несколько белых цветов размера «M», черного и синего размера «S». Т.е. Чтобы произвести такое сложное действие, необходимо все таки перейти на страницу товара, где пользователь увидит подходящий для этого масштабный интерфейс, изучить товар подробнее и принять решение о покупке. Сделать такого рода действия прямо из каталога сложно и маловероятно.
Так как область просмотра на мобильных устройствах имеет свои особенности, нам необходимо решить нетривиальную задачу, такие возможности должны предоставить пользователю карточку товара. Ее внешний вид должен быть унифицирован для разных типов товаров, чтобы не вводить пользователя в заблуждение.
Бенчмаркинг
Рассмотрим, как при проектировании карточки с товаром подошли крупные ритейлеры. В их ассортименте также есть штучные свойства и параметры, которые можно использовать. Опираясь на их опыт, мы поймем Каким методом можно добиться успеха при проектировании взаимодействия с покупателями.
Конечно, необходимо помнить о масштабах оптовых продаж. В примерах ниже никто не покупает 200 телевизоров или 120 футболок разных цветов и размеров. В этом интерфейсе обычных розничных магазинов нет возможности сделать это удобно.
Дары Иллана
Начнем с прямым конкурентом компании Darwin. На мобильных устройствах пользователь сайта может увидеть два типа цветных карточек. На главной странице в разделе «Новинки/Хиты» представлены маленькие карточки с минимумом информации (Цена, название товара и кнопка «В корзину»). В данном случае сайт предоставляет возможность добавить товар в корзину, даже если у него есть торговое предложение (несколько цветов и размеров). В этом случае у товара выбраны параметры по умолчанию, при этом он добавляется в корзину.
Товар «Колонка Капсула Нео» имеет цвет по умолчанию «Оранжевый». Именно с этим цветом она добавится в корзину на главной странице сайта. Чтобы выбрать другой цвет, нужно перейти на страницу с товаром.
Для простых товаров без учета параметров и конфигураций решение о покупке принимается довольно легко, это другой способ взаимодействия. Нам не обязательно знать много информации об этом товаре, поскольку динамичная колонка широко рекламируется и является понятным продуктом для покупателя.
Если товар более сложный, у него не только разные цвета, но и разные размеры, которые можно выбрать (имеется ряд торговых предложений), такой способ взаимодействия уже не является универсальным. О товаре нужно узнать больше, чем то, что это разрекламированная модная колонка.
Цветные карточки второго типа на данном сайте пользователь может встретить в каталоге. В этом случае важны такие важные параметры товара, как количество на складе, размеры и возможность выбора цвета без перехода на страницу товара. Чтобы добавить товар в корзину необходимо выбрать размеры и количество (тираж) товара нужных параметров.
Карточка товара с обширной информацией. Есть возможность выбора цвета, размера и тиража прямо из каталога. Чтобы добавить в корзину, не нужно переходить на страницу товара.
Данный подход к проектированию карточек открывает широкие возможности для предоставления информации пользователям. Можно вывести неограниченное (только в здравом смысле) количество параметров товара, характеристики и дать возможность не переходя на страницу товара, добавить в корзину нужные товары.
Можно ли принять решение о покупке без информации, которая дает карточку товара, это индивидуальный вопрос для каждого пользователя. Кому-то будет предоставлена ??точная информация о типе, цене и цвете, а кому-то нужно знать больше, например, материал и подробные фотографии товара.
Минусами подаренные карточки — это маленькие фото товара, и то, что размер самой карточки не является «компактным». Приходится делать это на всей запасной части контента, чтобы разместить всю информацию. На первом плане характеристики характеристики не являются «товарным лицом», что отражает эмоциональную составляющую. Ведь большинство людей делают покупки осознанно, основываясь на методе «нравится-не нравится».
Сбер МегаМаркет
Сравнительно молодой маркетплейс имеет один тип карточек товара на всем сайте. Есть нативное приложение, визуально не отличающееся от сайта, которое можно посетить через браузер. Именно каталог приложений данного магазина мы рассмотрим именно в этом примере.
Как и любой маркетплейс Сбер имеет в каталоге товары с различными параметрами, которые можно выбрать. В отличие от Illan Gifts в сбере в карточке можно выбрать размер, но не цвет. Цвет представлен сущностию самого товара, т.е. Если вы хотите несколько расцветок, это разные товары со своими размерами. Изменить цвет можно на странице «Цвет», или найти в каталоге ту же модель другого цвета.
Таким образом можно легко добавить товар в корзину, не переходя на страницу самого товара. Если вы нашли нужный вам цвет, вы можете просто выбрать размер и нажать кнопку «В корзину». Если вам понравилась модель, но вы хотели бы другой цвет, достаточно перейти на страницу с товаром.
Карточка товара Сбер МегаМаркет дает возможность выбрать размер и добавить товар в корзину. Количество товара в корзине вредно после добавления.
Подход к выбору параметров товара и их представления отличаются от Illan Gifts. Здесь крупное фото, которое позволяет оценить товар по его внешнему виду, а не по характеристикам.
LaModa
Этот магазин не является маркетплейсом, где продаются товары разных типов и направлений, но мы выбрали его для примера из-за того, что почти у каждого товара есть параметры выбора (Цвет, Размер).
Как и в Сбер МегаМаркета параметром является цвет товара. В карточках каталога товаров LaModa не дает возможности выбрать что-либо или добавить товар в корзину. Можно только зайти на страницу товара, где будет вся информация и возможность выбрать размер.
Подход LaModa отличается от остальных магазинов. Предполагается, что человек примет окончательное решение о покупке только на странице товара, поэтому в каталоге нет возможности добавить товар в корзину.
В приложении карточка LaModa содержит всю необходимую информацию, но не дает возможности добавить товар в корзину. Добавить товар в корзину можно только со страницы товара, предварительно выбрав размер.
Возможно, это не самое изящное решение, но оно точно допускает ошибочное добавление товара в корзину, и в следующем заказе оно не соответствует параметрам цвета и размера.
Диван.ру
Еще одним любопытным вариантом реализации карточка товара и каталога в целом является магазин мебели divan.ru. Линейки их продукции собраны в карусели с горизонтальным скроллом, таким образом мы можем увидеть разные расцветки одной модели просто пролистав свайпом вбок. Это довольно удобно, когда нужно показать «товар лицом». Карточки имеют фото достаточного размера, чтобы оценить продукт по его внешнему виду и принять решение о том, нравится он вам или нет. Магазин не предоставляет добавить товар из каталога. Чтобы что-то купить, необходимо перейти на страницу товара.
Хотя это и интересный образец каталога, он подойдет далеко не всем. Диван.ру, это узкоспециализированный магазин мебели собственного производства с большим каталогом, но не таким масштабным, как на маркетплейсах. Ограничения также могут наложить выгрузку товаров поставщиками, файлы которых могут быть разрозненными. Но, так как на Divan.ru всякая продукция своя, они вряд ли смогут столкнуться с проблемами такого рода и заниматься размещением продукции самостоятельно по своему усмотрению.
Каталог с каруселями прокрутки в каталоге товаров дает возможность взглянуть на одну модель в разных цветовых исполнениях. Поместить товар в корзину можно только на детальной странице.
ОЗОН
Маркетплейс выбрал разный подход в разных товарных группах. Если товары в каталоге не предполагают выбор каких-либо параметров, то в карточке имеется кнопка «В корзину», и вы можете положить товар в корзину прямо из каталога.
В этом случае магазин OZON имеет карточку с изображением товара «В корзине», чтобы вы могли не переходить к покупке детальной страницы. Сама карточка содержит минимум информации (фото, цена, название, рейтинг и отметки доставки).
Если мы перейдем в раздел товаров, где будут сохраняться позиции с учетом выбора параметров (размер, цвет и т.д.), то вид карты будет другим. Отсутствует кнопка «В корзине», так как перед добавлением товара на заказ необходимо указать его параметры, которых может быть несколько.
В разделе с карточкой одежды OZON нет кнопки «В корзину», так как у товара есть параметры (Цвет и размер), которые необходимо уточнить на странице детали перед добавлением в корзину.
Карточка ЦВЕТА Дарвин
При разработке мобильной версии карточек для магазина товаров в Дарвине мы опирались на опыт других крупных интернет-магазинов и особенности мировых рынков оптовой продажи товаров в электронной коммерции. Карточки товаров должны быть компактными (по 2 шт. в ряд), информативными, достойными товара и иметь необходимые функции для добавления нескольких параметров одного товара в корзину.
Сперва мы попробовали сделать карточную версию на настольной версии (фото выше). У нее было фото товара достаточного размера, варианты цветов, количество доступное на складе и кнопка «В корзину». Проблема была в том, что в карточке не так уж много места и мы могли отобразить лишь несколько вариантов цветов. Чтобы увидеть больше, нужно все равно перейти на страницу товара и купить его в любой точке мира. Получается, что использование цветов таким образом приводит к неполному представлению имеющихся торговых предложений и вынуждает пользователя выйти из каталога, а затем начать обратно, чтобы продолжить покупку.
Чтобы сэкономить место и избежать путаницы, мы попробовали сделать вариант карточек с товарами без кнопки «В корзине», а наличие разных цветов окрашивать лучшей иконкой (пример ниже).
В таком случае купить товар можно только с детальной страницы, предварительно выбрав все нужные параметры товара. Такой вариант можно было бы использовать, но плохо лишить пользователя возможности купить из каталога и вывести из него на другую страницу.
Можно дать возможность отображения товаров в каталоге в виде списка. Такая компоновка дает широкие возможности по включению параметров товара (пример ниже).
У товаров существует огромное количество цветовых вариаций и размеров. В таком случае все равно встает вопрос с каким значением «размер» по умолчанию добавляет товар в корзину, если пользователь хочет добавить товар прямо из каталога. Может возникнуть путаница.
Итак, мы подошли к компромиссному варианту. Оставить значок «», информирующий о наличии других цветов в товаре, при нажатии на кнопку «В корзину» открывается боковое окно для выбора параметров «цвет» и «размер». Плюс дает возможность указать тираж того или иного размера, не переходя на детальную страницу цвета (пример ниже).
