КАРТОЧКИ ТОВАРОВ В ЛИСТИНГЕ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
ГАЙДЛАЙНА
174
Мы часто сталкивается с листингом товаров, совершая покупки онлайн. И от того, как спроектированы карточки товаров, зависит, купим мы их или нет. Как сделать карточки информативными, функциональными и привлекающими внимание, чтобы обеспечить лучший клиентский опыт? Обсудим в этой статье.

Помимо позитивных референсов, в статье будет и много негативных примеров – того, как делать не стоит. Ни в коем случае здесь я не ставлю целью выставить напоказ чьи-то недостатки. Подсвечивание ошибки одного может помочь избежать ее многим. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
Партнер Experience.Partners
Автор сайта HardClient.com
О ЧЕМ ПОГОВОРИМ
В этой статье мы разобьем карточки товаров на составные части и обсудим каждую из них в деталях:
Это один из 18 больших чек-листов по eCommerce. Остальные – в моем Telegram.

1. ОБЩИЕ МОМЕНТЫ

Карточки выделяются на фоне

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

Без пустых областей

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

Не перегружены

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

Реагируют на наведение курсора

Появлением незначительной тени, рамки, незначительным изменением фона, анимированным увеличением фото или изменением изображения.

Не выцветают при наведении

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

Детали при наведении

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

Кликабельна вся область карточки

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

2. ФОТОГРАФИИ ТОВАРА

Добавлены по всем товарам

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

Единообразны по дизайну

Если фото товаров сделаны с разных ракурсов, на разном фоне и это не дизайнерский замысел, это может создать впечатление о том, что все сделано в формате «тяп-ляп».
hardclient
hardclient

Вписываются в рамку

Изображения товаров не должны заметно обрезаться рамкой карточки или, наоборот, быть меньше рамки.
hardclient

В хорошем качестве

Если фото товаров загружены в плохом качестве, размываются и пикселят, это может вызвать отторжение у клиента.
hardclient

Соответствуют реальности

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

Без водяных знаков

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

Подгружаются заранее

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

Анимация в случае загрузки

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

Реагируют на наведение курсора

Чтобы карточка была более вовлекающей, фото можно сделать интерактивным так, чтобы при наведении курсора оно незначительно приближалось.

СЛАЙДЕР

При перемещении курсора

В некоторых случаях фото переключаются при перемещении курсора по карточке. Такая механика делает карточку более интерактивной и вовлекающей.

При нажатии на кнопки

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

Автоматический

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

Page control

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

Типы фото

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

Динамический контент

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

Порядок фото vs. тип товара

В Fashion-индустрии порядок фото часто может зависеть от типа товара, чтобы лучше донести ценностное предложение и вовлечь клиента.

Видео в слайдере

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

Без задержек в загрузке

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

PLACEHOLDER

Нестандартный

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

Соответствует типу товара

Можно пойти дальше и для каждой из категорий товаров разработать свои placeholder'ы. Это облегчит восприятие информации в карточке.

Визуально второстепенный

Placeholder должен быть визуально второстепенным относительно любых фото товаров, чтобы не отвлекать внимание клиента.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

3. ЦЕНА ТОВАРА

Выделяется на фоне карточки

Цена должна хорошо выделяться в рамках карточки. Этого можно достичь за счет работы с размером, жирностью и цветом шрифта.
hardclient

Отступы между порядками

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

Крупные суммы без копеек

Особенно в случае с крупными суммами по возможности не стоит указывать копейки: ценности в этой информации мало, зато интерфейс ей можно перегрузить.
hardclient
hardclient

Не дублируется

Дублировать цену – да еще и в маленькой карточке товара – смысла нет. Но, видимо, не все согласны с этим утверждением.
hardclient

Без чрезмерных пояснений

Если в листинге представлены штучные товары, не стоит в явной форме указывать, что цена именно «за штуку» – клиенту и без этого текста будет все понятно.
hardclient
hardclient

РАСПОЛОЖЕНИЕ

Привычно

В большинстве карточек при отображении товаров в листинге плиткой это нижняя левая или центральная часть карточки.
hardclient

В кнопке покупки

В качестве альтернативы, некоторые сервисы достаточно органично размещают цену внутри кнопки покупки.
hardclient

ВАЛЮТА

Указана символом

Вместо указания руб. можно использовать широко распространенный и уже ставший привычным символ ₽. Это позволит визуально разгрузить интерфейс.
hardclient

Указана с отступом

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

Вторична относительно цены

Валюта – вторичный элемент интерфейса по сравнению с ценой. Подчеркните это визуально. И уж точно не делайте валюту более заметной, чем цена.
hardclient
hardclient

СКИДКИ

Механика скидок применяется

Если вы применяете скидку, дайте клиенту понять, какова будет выгода клиента, отобразив ее. Иначе выделение цены лишь вызовет дополнительные вопросы.
hardclient
hardclient

Старая цена визуально вторична

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

Старая цена заметна

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

Старая цена перечеркнута

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

Старая цена без пояснения

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

Старая цена рядом с новой

Не стоит визуально разводить старую и новую цены. Они должны читаться, как единая визуальная группа элементов.
hardclient

% скидка в виде маркера

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

% скидка равна разнице цен

Если % скидка применяется вместе с элементами старой и новой цен, убедитесь, что расчеты корректны, и процент скидки в точности соответствует разнице цен.

Скидка в рублях для крупных сумм

Как вариант, может использоваться маркер абсолютной скидки. Его можно применять, если абсолютная сумма скидки достаточно внушительная.
hardclient

Элемент срочности

Чтобы дополнительно побудить клиента воспользоваться скидкой, можно указать срок ее действия: количество дней или дату ее окончания.
hardclient

Отсутствие отдельно не поясняется

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

Цена по карте клиента

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

Ссылка на оформление карты

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

4. КНОПКА КОРЗИНЫ

Кнопка предусмотрена

Базовый момент: кроме редких случаев, у клиента должна быть возможность добавить товар в корзину без необходимости перехода на его страницу.
hardclient

Видимость кнопки

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

Размер кнопки

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

Хорошо выделяется

Кнопка должна быть одним из наиболее заметных элементов карточки. Сделать это можно за счет использования контрастной заливки.

Аффорданс

По-хорошему, кнопка добавление в корзину должна выглядеть, именно как кнопка, а не ссылка, текст или что-либо другое. Креативность в данном случае может навредить.
hardclient

Расположение единообразно

Спроектируйте верстку карточек таким образом, чтобы кнопка не «скакала» от товара к товару. В противном случае смотреться это будет не лучшим образом.
hardclient

Не дублируется

Размещайте в карточках только одну кнопку добавления в корзину. В противном случае это может размыть фокус внимания клиента.
hardclient

ИКОНКА

Понятна

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

Минималистична

Выбирайте лаконичные иконки. При помещении в кнопку иконка будет достаточно маленькой, и большое количество деталей лишь ухудшит ее восприятие.

Контрастна

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

В хорошем качестве

Иконка должна быть загружена в хорошем качестве и не должна пикселить и размываться. В идеале лучше использовать векторное изображение.
hardclient

ТЕКСТ КНОПКИ

Добавлен на кнопку

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

Контрастный и легко читаемый

Используйте легко читаемый контрастный шрифт, достаточно большого размера. Шрифт кнопки должен из того же семейства, что и остальные тексты на сайте.

Целевое действие

Сделайте так, чтобы текст кнопки отталкивался от целевого действия клиента: «Купить», «В корзину» и т.д.

Центрирован

Текст кнопки в большинстве случаев должен располагаться по центру и не должен прилипать к ее границам.
hardclient

РЕАКЦИЯ НА НАВЕДЕНИЕ КУРСОРА

Изменяет вид

Кнопка должна давать визуальную обратную связь и изменять свой вид при наведении курсора: например, изменять цвет заливки или образовывать тень.
hardclient

Визуально усиливает фокус

Изменение вида кнопки должно побуждать клиента к целевому действию. Выцветание или осветление кнопки может привести к обратному результату.

Контекстная подсказка

Если кнопка содержит в себе лишь иконку, контекстная подсказка с пояснением при наведении на нее курсора лишней не будет.
hardclient

РЕАКЦИЯ НА КЛИК

Реакция моментальная

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

Обновление подытога

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

Подтверждение действия

Сама кнопка должна давать визуальную обратную связь, подтверждая, что товар добавлен. Например, за счет изменения текста, цвета заливки или иконки.

Анимация

Нажатие на кнопку может быть анимировано: при клике она может уменьшаться в размерах и слегка менять цвет, как бы вдавливаясь в экран.