UX-дизайн интернет-магазина: как сделать карточку товара в 2020 году

Мы провели исследование: взяли 20 крупнейших e-commerce в России, а потом рассмотрели их под микроскопом. Получился готовый анализ конкурентов, который поможет проработать UI и UX интернет-магазина.

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

В Ratio мы занимаемся веб-разработкой: создаём на заказ сайты и веб-сервисы, в том числе для e-commerce. В этом году провели исследование, чтобы понимать, в какую сторону развивается UX в онлайн-торговле.

Я директор и участвовал в исследовании как консультант, а сотрудники Ratio собирали и анализировали UX-решения. Данные актуальны на октябрь 2020 года.

Изначально мы не планировали показывать исследование кому-то за пределами Ratio, но результаты вышли настолько интересными, что ими захотелось поделиться.

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

Этот материал — часть цикла. Уже вышла статья про главную страницу, на очереди объёмные посты про каталог и чекаут.

Статьи будут публиковаться не только на vc.ru, так что подписывайтесь на телеграм-канал @panfilovonline — там я буду выкладывать ссылки по мере их появления.

Какие сайты мы исследовали

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

Также взяли Яндекс.Маркет, который до недавнего времени был агрегатором цен, а не интернет-магазином. Теперь он объединился с Беру и позаимствовал его UX, поэтому в статью мы добавили дополнительный сайт — Аптека.ру.

Вот что чаще всего встречается в карточке товара:

  • набор фотографий и/или видео
  • название товара
  • блок с ценой
  • элементы управления покупкой: кнопки «В корзину» и +/-
  • информация о доставке
  • реклама
  • отзывы покупателей

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

В дополнительной информации лучше написать, какой у модели рост и какой размер на ней (Asos)

При этом название товара не играет большой роли, поэтому акцент можно сместить на цену и кнопку «В корзину». Пользователь наверняка уже прочитал название — в каталоге, поисковике или тексте таргетированной рекламы.

Остальные составляющие карточки товара мы рассмотрим подробно.

Блок с ценой

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

Исключение: люксовые онлайн-магазины вроде tsum.ru. Там цену делают небольшого размера, потому что для ЦА она не особенно важна.

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

Обычно цена по скидке привлекает основное внимание — она больше, ярче и заметнее.

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

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

  • указывают выгоду в процентах (Яндекс.Маркет, OZON, Asos, Bonprix, Спортмастер, Детский мир, Book24)
  • пишут сумму скидки в рублях (М.Видео, Связной, DNS, Эльдорадо, Lamoda, Wildberries ВсеИнструменты.ру, Спортмастер)
Lamoda и Wildberries расписывают, из каких составляющих складывается скидка

Бонусные баллы. Если в магазине действует программа лояльности, то в карточке товара будет указано, сколько баллов причитается за его покупку (OZON, Ситилинк, М.Видео, Эльдорадо).

C помощью бонусных баллов OZON продвигает свою дебетовую карту

Иногда магазин вместо бонусов предлагает владельцам карт особые цены. Тогда клубная цена указывается рядом с обычной (Петрович).

Цена в пересчёте на единицу товара. Apteka.ru указывает стоимость одной пары контактных линз рядом с ценой за упаковку, хотя купить их пошуточно нельзя. Зато сразу понятно, сколько будет стоить одна пара.

Если магазин сотрудничает с банками, он может смягчить восприятие высокой цены, показав рядом ежемесячный платёж по кредиту (Беру, OZON, Связной, Ситилинк, М.Видео, DNS, Эльдорадо, Lamoda).

Сумма до бесплатной доставки. В Book24 видно, до какой суммы нужно набрать книг, чтобы получить бесплатную доставку.

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

Кнопка «Нашли дешевле?». Появляется там, где конкуренция по цене особенно жёсткая — например, в магазинах электроники. Нажав на кнопку, пользователь может получить персональное предложение, если найдёт более низкую цену на тот же товар у конкурентов из списка.

«В корзину» и +/-

Кнопка «В корзину» есть на всех рассмотренных сайтах. Она большая, яркая и всегда делает одно и то же — добавляет товар в список покупок, чтобы можно было оформить заказ в чекауте.

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

На сайте DNS нельзя настроить количество товара в карточке

Встречаются промежуточные решения: кнопка +1 на странице товара (OZON) или настройка количества в поп-апе (Яндекс.Маркет, Юлмарт, ВсеИнструменты.ру).

Bonprix, Декатлон и Спортмастер не позволяют настроить количество товара в карточке, но пользователь может добавить его в корзину сколько угодно раз. На сайте Asos используется тот же подход, но после добавления товара в корзину кнопка на пару секунд превращается в статус «Товар добавлен».

Информация о доставке

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

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

При этом информация о доставке часто находится на одной странице с другими данными о товаре, без деления на вкладки (Беру, OZON, Asos, Wildberries, Lamoda, Bonprix, Декатлон, Детский мир). Это делается ради стилистического единства с мобильными версиями — скроллить пальцем удобнее, чем тыкать по вкладкам и промахиваться.

Иногда встречается промежуточное решение: на основной экран выносится краткая информация по каждому пункту, а прочитать целиком можно на соответствующей вкладке (Эльдорадо).

Реклама

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

Вместе с шапкой Спортмастер рекомендует купить перчатки

Рекомендации позиционируются по-разному: кто-то пишет «Вам могут понравиться» или «Рекомендованное», а другие прямо отсылают к опыту других пользователей — «С этим товаром покупают».

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

Совсем виджеты с рекомендациями не используют только Детский мир и Apteka.ru.

Отзывы

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

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

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

Магазин может попросить оценить характеристики товара по отдельности — например, у звука и удобства наушников могут быть отдельные рейтинги (Яндекс.Маркет, Связной, ВсеИнструменты.ру, Спортмастер)

Чтобы покупателю было удобно определить, какому отзыву лучше доверять, в интернет-магазинах принято голосовать за самые полезные комментарии. Лучшие из них получают. повышенное внимание. Обычно можно как плюсовать, так и минусовать отзывы, но на Lamoda есть только голос «за».

При этом отзыв с самой высокой кармой размещается в отдельном блоке. Плашка может представлять из себя цитату (Юлмарт) или отзыв целиком (М.Видео, Связной, ОНЛАЙН ТРЕЙД.РУ, DNS).

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

Подписывайтесь на Telegram-канал

Мы рассмотрели все составляющие карточки товара. Я старался не перегружать статью лишними подробностями, так что если у вас появился вопрос — с удовольствием отвечу на него в комментариях.

Чтобы не пропустить другие материалы с результатами исследования, подписывайтесь на мой телеграм-канал @panfilovonline. Не все статьи будут опубликованы на vc.ru, поэтому телеграм-канал — единственный способ собрать все материалы.

Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.

{ "author_name": "Максим Панфилов", "author_type": "self", "tags": [], "comments": 14, "likes": 11, "favorites": 207, "is_advertisement": false, "subsite_label": "design", "id": 167230, "is_wide": false, "is_ugc": true, "date": "Thu, 15 Oct 2020 14:33:29 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
0
14 комментариев
Популярные
По порядку
Написать комментарий...
7

Все это уже и без исследований понятно для любого Джуна. В чем глубокий смысл?

Ответить
3

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

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

Ответить
2

Даже если вы каждый день собираете интерфейсы для e-commerce и уже давно всё знаете, анализ конкурентов всё равно может быть полезен.

Хотя бы для того, чтобы свои решения перед заказчиком отстоять — смотрите, так топы делают)

Ответить
2

Спасибо, интересно собрано в одном месте то, что вроде как всегда замечаешь.
P.S. Что случилось со спейсингом у Спортмастера в рекомендациях?)

Ответить
1

Сколько токсичных людей, улыбнуло))
Спасибо за статью. Всегда полезно почитать и перенять опыт коллег. Выудить хотя бы одну единицу полезного – уже победа!)

Ответить
1

Спасибо :)

Ответить
1

"При этом название товара не играет большой роли"
хм.. а как же оптимизация для seo продвижения? Обычно в  в тэге H1 есть название товара. 

Ответить
0

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

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

Ответить
1

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

Ответить
0

Просто сейчас понятие UX очень сильно путают с маркетингом. К сожалению.
Вообще изначально UX\эргономика это супер-классная и важная вещь.

Т.е. теперь не удобство использования вышло на передний план, а KPI.

Ответить
0

Это какой-то высер (ради самопиара, очевидно), а не исследование. Ну и пиар получился так себе, потому что раз агентству приходится постить такую ерунду, чтобы найти клиентов, то дела идут совсем плохо. 

Ответить
0

После прочтения статьи карточку https://duzzer.net/ru/catalog/molds_for_production_of_cultured_stone_and_bricks/concrete_stone_mold-boston-moulded-corner-f790d в очередной раз будем пилить. Автору спасибо за пару хорших замечаний!т

Ответить
0

Рад, что статья была полезной. Удачи в работе!

Ответить
0

Спасибо! Век живи, век учись, бесконечно улучшай свой сайт) 

Ответить

Комментарии

null