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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блок с ценой

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

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

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

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

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

указывают выгоду в процентах (Яндекс.Маркет, 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-канал

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

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