UX-дизайн интернет-магазина: как сделать карточку товара в 2020 году
Мы провели исследование: взяли 20 крупнейших e-commerce в России, а потом рассмотрели их под микроскопом. Получился готовый анализ конкурентов, который поможет проработать UI и UX интернет-магазина.
Карточка товара — это его страница в каталоге. В статье я расскажу, из чего российские интернет-магазины и маркетплейсы собирают такие страницы. Эта информация будет полезна UX-дизайнерам, разработчикам и другим специалистам в сфере электронной коммерции.
В Ratio мы занимаемся веб-разработкой: создаём на заказ сайты и веб-сервисы, в том числе для e-commerce. В этом году провели исследование, чтобы понимать, в какую сторону развивается UX в онлайн-торговле.
Я директор и участвовал в исследовании как консультант, а сотрудники Ratio собирали и анализировали UX-решения. Данные актуальны на октябрь 2020 года.
Надеюсь, статья поможет вам найти правильные ориентиры для собственных проектов. На скриншотах показаны десктопные версии сайтов, но все наши наблюдения актуальны и для мобилок — мы рассматривали принципы, по которым строится UX, а не конкретные визуальные решения.
Этот материал — часть цикла. Уже вышла статья про главную страницу, на очереди объёмные посты про каталог и чекаут.
Статьи будут публиковаться не только на vc.ru, так что подписывайтесь на телеграм-канал @panfilovonline — там я буду выкладывать ссылки по мере их появления.
Какие сайты мы исследовали
Для анализа мы выбрали 19 онлайн-магазинов, стараясь выцепить крупнейших игроков в основных секторах потребительского рынка: электроника, одежда, стройматериалы, спорт и маркетплейсы «всё-в-одном».
Также взяли Яндекс.Маркет, который до недавнего времени был агрегатором цен, а не интернет-магазином. Теперь он объединился с Беру и позаимствовал его UX, поэтому в статью мы добавили дополнительный сайт — Аптека.ру.
Вот что чаще всего встречается в карточке товара:
- набор фотографий и/или видео
- название товара
- блок с ценой
- элементы управления покупкой: кнопки «В корзину» и +/-
- информация о доставке
- реклама
- отзывы покупателей
С фотографиями всё понятно — их должно быть много и лучше, чтобы они показывали товар в момент его непосредственного использования. Например, магазины одежды часто нанимают фотомоделей — снимок одежды на человеке лучше отражает её потребительские свойства, чем фотка на столе или манекене.
При этом название товара не играет большой роли, поэтому акцент можно сместить на цену и кнопку «В корзину». Пользователь наверняка уже прочитал название — в каталоге, поисковике или тексте таргетированной рекламы.
Остальные составляющие карточки товара мы рассмотрим подробно.
Блок с ценой
Для покупателей важна цена товара, поэтому каждый магазин старается разместить рядом с ней информацию, подталкивающую к покупке. Обычно цена заметна сразу и хорошо читается.
Старая цена. Чтобы подчеркнуть выгоду во время распродаж, интернет-магазины пишут старую цену рядом с той, которая действует сейчас. Старая цена при этом будет зачёркнута или набрана серым шрифтом.
Обычно цена по скидке привлекает основное внимание — она больше, ярче и заметнее.
Выгода. Чтобы усилить желание купить товар, магазины сравнивают новую цену со старой. Для этого они:
- указывают выгоду в процентах (Яндекс.Маркет, OZON, Asos, Bonprix, Спортмастер, Детский мир, Book24)
- пишут сумму скидки в рублях (М.Видео, Связной, DNS, Эльдорадо, Lamoda, Wildberries ВсеИнструменты.ру, Спортмастер)
Бонусные баллы. Если в магазине действует программа лояльности, то в карточке товара будет указано, сколько баллов причитается за его покупку (OZON, Ситилинк, М.Видео, Эльдорадо).
Иногда магазин вместо бонусов предлагает владельцам карт особые цены. Тогда клубная цена указывается рядом с обычной (Петрович).
Цена в пересчёте на единицу товара. Apteka.ru указывает стоимость одной пары контактных линз рядом с ценой за упаковку, хотя купить их пошуточно нельзя. Зато сразу понятно, сколько будет стоить одна пара.
Сумма до бесплатной доставки. В Book24 видно, до какой суммы нужно набрать книг, чтобы получить бесплатную доставку.
Символ российского рубля. ₽ уже знаком клиентам, так что большинство магазинов использует его, а не надпись «руб».
Кнопка «Нашли дешевле?». Появляется там, где конкуренция по цене особенно жёсткая — например, в магазинах электроники. Нажав на кнопку, пользователь может получить персональное предложение, если найдёт более низкую цену на тот же товар у конкурентов из списка.
«В корзину» и +/-
Кнопка «В корзину» есть на всех рассмотренных сайтах. Она большая, яркая и всегда делает одно и то же — добавляет товар в список покупок, чтобы можно было оформить заказ в чекауте.
Интереснее дела обстоят с кнопками настройки количества. Клиенты редко покупают несколько одинаковых товаров, поэтому интернет-магазины выносят эту настройку в чекаут. Так карточка товара не перегружается лишними кнопками, а нажимать на +/- в чекауте даже удобнее — можно указать количество для всех товаров в списке.
Встречаются промежуточные решения: кнопка +1 на странице товара (OZON) или настройка количества в поп-апе (Яндекс.Маркет, Юлмарт, ВсеИнструменты.ру).
Bonprix, Декатлон и Спортмастер не позволяют настроить количество товара в карточке, но пользователь может добавить его в корзину сколько угодно раз. На сайте Asos используется тот же подход, но после добавления товара в корзину кнопка на пару секунд превращается в статус «Товар добавлен».
Информация о доставке
В карточке товара обязательно указывается подробная информация о доставке. Вот общий список, но в полном виде он практически не встречается:
- предполагаемая дата доставки
- цена доставки или надпись «бесплатно»
- возможность самовывоза
- в наличии товар или нет
- есть ли примерка перед покупкой
При этом информация о доставке часто находится на одной странице с другими данными о товаре, без деления на вкладки (Беру, OZON, Asos, Wildberries, Lamoda, Bonprix, Декатлон, Детский мир). Это делается ради стилистического единства с мобильными версиями — скроллить пальцем удобнее, чем тыкать по вкладкам и промахиваться.
Иногда встречается промежуточное решение: на основной экран выносится краткая информация по каждому пункту, а прочитать целиком можно на соответствующей вкладке (Эльдорадо).
Реклама
Также в карточках товаров находится информация, которая должна стимулировать дополнительные продажи. Это могут быть преимущества магазина или виджет с рекомендованными товарами.
Рекомендации позиционируются по-разному: кто-то пишет «Вам могут понравиться» или «Рекомендованное», а другие прямо отсылают к опыту других пользователей — «С этим товаром покупают».
Иногда рекомендации трансформируются в виджет «Похожие товары». Но это уже не про дополнительные продажи, а про помощь в выборе.
Совсем виджеты с рекомендациями не используют только Детский мир и Apteka.ru.
Отзывы
Отзывы других клиентов снимают часть страхов, которые мешают сделать покупку. Поэтому магазины поощряют тех, кто пишет отзывы — обычно бонусными баллами.
Кнопка «Оставить отзыв» всегда располагается наверху списка и делается максимально заметной. Клиенты редко оставляют положительные комментарии — чтобы лишний раз напомнить о такой возможности, сайты делают кнопку большой.
При этом магазины стараются, чтобы написать полезный отзыв было проще. Преимущества и недостатки обычно заполняются в разных полях — это помогает оценить товар более объективно (Яндекс.Маркет, М.Видео, Спортмастер, Петрович).
Чтобы покупателю было удобно определить, какому отзыву лучше доверять, в интернет-магазинах принято голосовать за самые полезные комментарии. Лучшие из них получают. повышенное внимание. Обычно можно как плюсовать, так и минусовать отзывы, но на Lamoda есть только голос «за».
При этом отзыв с самой высокой кармой размещается в отдельном блоке. Плашка может представлять из себя цитату (Юлмарт) или отзыв целиком (М.Видео, Связной, ОНЛАЙН ТРЕЙД.РУ, DNS).
Магазины техники обычно ведут свой блог. Если на товар есть обзор, виджет с ним обязательно появится в карточке.
Подписывайтесь на Telegram-канал
Мы рассмотрели все составляющие карточки товара. Я старался не перегружать статью лишними подробностями, так что если у вас появился вопрос — с удовольствием отвечу на него в комментариях.
Чтобы не пропустить другие материалы с результатами исследования, подписывайтесь на мой телеграм-канал @panfilovonline. Не все статьи будут опубликованы на vc.ru, поэтому телеграм-канал — единственный способ собрать все материалы.
Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.
Все это уже и без исследований понятно для любого Джуна. В чем глубокий смысл?
Смысл в том, чтобы не полагаться на чутьё. Тем более на чутьё джуна)
Вживую изучить опыт конкурентов всегда лучше, чем собирать UX только по памяти и личным предпочтениям.
С помощью такого исследования можно найти решения, которые на первый взгляд заметить трудно — например, что Связной по-разному отображает цену в зависимости от типа акции.
Даже если вы каждый день собираете интерфейсы для e-commerce и уже давно всё знаете, анализ конкурентов всё равно может быть полезен.
Хотя бы для того, чтобы свои решения перед заказчиком отстоять — смотрите, так топы делают)
Спасибо, интересно собрано в одном месте то, что вроде как всегда замечаешь.
P.S. Что случилось со спейсингом у Спортмастера в рекомендациях?)
блять всем этим юикс дрочерам хочется гвоздь в голову забить, посмотришь на современные интерфейсы плакать хочется, макось, винда, фейсбук гугл, такое чуство что эти ребята соревнуются между собой кто дальше кнопку запрячет и сделает всё еще более не понятней, а вебдизайнеры вообщн ебанулись давно на всю голову
Просто сейчас понятие UX очень сильно путают с маркетингом. К сожалению.
Вообще изначально UX\эргономика это супер-классная и важная вещь.
Т.е. теперь не удобство использования вышло на передний план, а KPI.
Сколько токсичных людей, улыбнуло))
Спасибо за статью. Всегда полезно почитать и перенять опыт коллег. Выудить хотя бы одну единицу полезного – уже победа!)
Спасибо :)
"При этом название товара не играет большой роли"
хм.. а как же оптимизация для seo продвижения? Обычно в в тэге H1 есть название товара.
Для SEO название товара имеет большое значение, но в статье мы больше про дизайн и пользовательский опыт.
То есть название в карточке, конечно, остаётся, но оно больше предназначено для поисковых роботов. Визуально акценты будут расставлены в другую сторону — покупатель уже прочёл название, когда искал страницу, поэтому можно выделить другие части карточки.
Комментарий удален модератором
После прочтения статьи карточку https://duzzer.net/ru/catalog/molds_for_production_of_cultured_stone_and_bricks/concrete_stone_mold-boston-moulded-corner-f790d в очередной раз будем пилить. Автору спасибо за пару хорших замечаний!т
Рад, что статья была полезной. Удачи в работе!
Спасибо! Век живи, век учись, бесконечно улучшай свой сайт)