hardclient scroll to top
hardclient telegram

Проектируем карточки товаров в листинге

Лучшие практики UX/UI в мобильном e-commerce
235
гайдлайнов
Как спроектировать удобные, информативные и функциональные карточки в листинге товаров? Отвечая на этот вопрос, я скачал около 200 приложений из сферы e-com и постарался подсветить все нюансы в UX/UI карточек, которые стоит учитывать.

Основная моя цель – сделать так, чтобы после прочтения этой статьи вы встречали уже очень мало нового, открывая листинг любого e-com приложения и изучая то, как спроектированы карточки товаров. Иными словами, прокачали свою насмотренность.

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

Автор hardclient.com
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки. Каждый из них содержит в себе подробный чек-лист.

Layout листинга

6 гайдлайнов

По 2 карточки в ряду

Чаще всего можно встретить листинг с 2 карточками в ряду: так и фото товара получаются достаточно большие, и на экран помещается достаточно карточек.

Пример ВкусВилл
hardclient

По 1 карточке в ряду

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

Пример Mango
hardclient

По 3 карточки в ряду

Некоторые компании (в основном food ритейл) используют сетку по 3 карточки в ряду. Товаров помещается больше, но контент карточки (включая фото) сильно уменьшается.

Пример Маркет Деливери
hardclient

Разный layout для разных товаров

Для каждого типа товаров компания может использовать свой, наиболее подходящий layout листинга.

Пример Яндекс.Маркет
hardclient

Возможность смены layout'а

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

Пример Bershka
hardclient

Изменяющийся layout

При скролле однотипного листинга у клиента может возникнуть усталость. С ней (в основном в fashion) борются за счет изменения формата карточек.

Пример Zara
hardclient

Выделение карточек в листинге

6 гайдлайнов

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

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

Антипример SeasonMarket
hardclient

С помощью тени

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

Пример Впрок
hardclient

С помощью цвета

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

Пример Маркет Деливери
hardclient

С помощью обводки

Добавить легкую обводку для карточек – рабочая и достаточно распространенная механика.

Пример Amazon
hardclient

Границы карточек заметны

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

Антипример Ригла
hardclient

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

И наоборот: выделяя карточки на фоне листинга, главное – не перегнуть палку и не сделать их слишком контрастными. Ненавязчивое выделение не значит, что оно незаметно.

Антипример Технопарк
hardclient

Фото товара

22 гайдлайна

Есть по всем товарам

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

Антипример Быстроном
hardclient

Placeholder, если фото нет

Если все же по каким-то причинам фото товара отсутствует, как минимум предусмотрите вместо него релевантный placeholder.

Пример СберМаркет
hardclient

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

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

Антипример Mango
hardclient

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

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

Антипример Дром База
hardclient

Обложка репрезентативна

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

Антипример Циан
hardclient

Единый размер контейнеров

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

Антипример Olx.kz
hardclient

Занимают всю область контейнера

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

Антипример Wildberries
hardclient

Товар центрирован в фото

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

Антипример La Redoute
hardclient

Товар центрирован визуально

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

Антипример Farfor
hardclient

Отступы от границ карточки

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

Антипример Joom
hardclient

Фон единообразный

По возможности сделайте фон фото в карточках товара единообразным, чтобы его смена не отвлекала от ознакомления с самими товарами.

Антипример SeasonMarket
hardclient

Фон фото vs. цвет листинга

Встречаются и интересные кейсы, когда фон фото совпадает с фоном листинга. Хоть это и противоречит гайдлайнам по выделению карточек, но смотрится интересно.

Пример Кухня на районе
hardclient

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

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

Антипример Духи.РФ
hardclient

Подписи легко читаются

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

Антипример Hoff
hardclient

Выцветание фото, если товара нет

Иногда, если товара нет, фото делают выцветшим. Как считаете, хорошо это или плохо? Подчеркивает отсутствие или затрудняет ознакомление? Напишите в комментах.

Пример Кухня на районе
hardclient

Зум фото в листинге

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

Пример Ozon
hardclient

Подсказки по зуму фото

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

Пример Lady & Gentleman City
hardclient

Затемнение при зуме фото

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

Антипример Lady & Gentleman City
hardclient

Видео в карточке товара

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

Пример Ozon
hardclient

Воспроизведение одного видео

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

Антипример Love Republic
hardclient

Highlight наличия видео

Более скромный вариант – это просто подсветить наличие видео в карточке товара в листинге с помощью релевантной иконки.

Пример Яндекс.Лавка
hardclient

Уместность анимации

Некоторые компании в карточки товаров добавляют GIF-анимацию. Стоит подумать дважды: внимание это привлечет, но впечатление может сложиться не лучшее.

Антипример Линии Любви
hardclient

Слайдер

14 гайдлайнов

Предусмотрен

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

Пример СпортМастер
hardclient

Пояснение о прокрутке

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

Пример Lamoda
hardclient

Автопрокрутка слайдера

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

Пример Юла
hardclient

Cell snapping

Привязка к ячейкам позволяет прокручивать фото в слайдере ровно на 1 вне зависимости от длины свайпа (если превышена минимальная длина свайпа).

Пример Rendez Vous
hardclient

Анимация соответствует действию

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

Антипример Sela
hardclient

Скорость смены слайдов

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

Антипример ЦУМ
hardclient

Прокрутка закольцована

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

Пример Lamoda
hardclient

Фото подгружаются

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

Антипример Снежная Королева
hardclient

Быстрая подгрузка фото

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

Пример СпортМастер
hardclient

Блокирование вертикальной прокрутки

При пролистывании слайдера вертикальный скролл листинга должен блокироваться, если намерение свайпа очевидно (угол менее 45° или более 135°).

Антипример Ситилинк
hardclient

Прокрутка слайдера vs. навигация

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

Антипример Megatop
hardclient

Без кнопок прокрутки

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

Антипример Дром База
hardclient

Количество фото?

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

Пример Krisha.kz
hardclient

Несколько фото в слайдере?

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

Пример av.by
hardclient

Page control

14 гайдлайнов

Добавлен в карточку

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

Антипример Rendez Vous
hardclient

В формате точек

Наиболее часто page control можно встретить именно в формате нескольких точек, объединенных в один объект.

Пример Ozon
hardclient

В формате нескольких черт

Также page control нередко реализуют и в виде нескольких черт, каждая из которых отвечает за отдельный слайд.

Пример Sokolov
hardclient

В формате единой линии

Гораздо реже page control заменяется единой линией – своего рода аналогом scroll bar'а. Который, впрочем, также имеет право на существование, т.к. свою функцию выполняет.

Пример Столплит
hardclient

За рамками фото

Будет лучше, если page control будет выведен за фото. Иначе есть риск, что он будет плохо заметен на его фоне.

Пример Ozon
hardclient

Точки хорошо видны

Где бы ни находился page control, спроектируйте его так, чтобы точки были хорошо видны на фоне, поверх которого они расположены.

Антипример МегаМаркет
hardclient

Текущая точка хорошо выделяется

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

Антипример 12 Storeez
hardclient

Видны не все точки

В отличие от полноценной карточки товара, если фото слишком много, отображение всех точек на page control может перегрузить интерфейс. Поэтому их лучше ограничить.

Антипример Novex
hardclient

Уменьшение точек по краям

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

Пример Wildberries
hardclient

Привычно размещен

Чаще всего page control размещают в центральной нижней области – клиенты ожидают увидеть его именно там.

Пример Hoff
hardclient

Нестандартное размещение

Однако встречаются кейсы, когда page control размещают либо снизу сбоку, либо в верхней части. Как считаете, чем это обосновано? Поделитесь идеями в комментах.

Пример Яндекс.Маркет
hardclient

Отступы от фото

Не стоит размещать page control вплотную к границам фото, иначе они будут визуально «прилипать» друг к другу. Смотреться все это будет не очень.

Антипример Gulliver Market
hardclient

Тайминг переключения

Лучше если переключение page control будет происходить ровно в момент смены фото в слайдере – без каких-либо задержек.

Пример Спортмастер
hardclient

Анимация переключения

При переключении слайдера page control может меняться не прерывисто, а с помощью анимации. Хоть и мелочь, но когда разработчик обращает внимание на детали – это приятно.

Пример Золотое Яблоко
hardclient

Название и подписи

16 гайдлайнов

Названия контрастны

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

Антипример Zolla
hardclient

Названия краткие

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

Пример 12 Storeez
hardclient

В названиях только ключевой контент

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

Антипример Светофор
hardclient

Размер видимой части текста

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

Антипример Lichi
hardclient

Обрезание в конце текста

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

Пример Яндекс.Лавка
hardclient

Обрезание в середине текста

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

Пример Впрок
hardclient

Обрывание текста многоточием

Наиболее часто встречающийся паттерн при обрезании текста – это многоточие.

Пример Leroy Merlin
hardclient

Обрывание текста выцветанием

Более элегантное решение по сравнению многоточием – это плавное выцветание текста ближе к концу видимой части.

Пример Буквоед
hardclient

Обрывание текста не границами контейнера

Однако не стоит обрезать название границами контейнера. Иначе может сложиться впечатление, что это просто некорректная верстка.

Антипример Zolla
hardclient

Использование caps lock'а?

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

Пример Лента Онлайн
hardclient

Корректная локализация

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

Антипример eBay
hardclient

Название vs. подписи

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

Пример Rendez Vous
hardclient

Подписи визуально вторичны

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

Пример Буквоед
hardclient

Подписи понятны и уместны

Убедитесь, что подписи будут уместны и не вызовут у клиента вопросов из разряда «что же пытался донести до меня автор?»

Антипример Быстроном
hardclient

Без артикулов в названиях

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

Антипример Леонардо
hardclient

Тип товара как отдельное поле

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

Пример Rendez Vous
hardclient

Бренд как отдельное поле

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

Пример Wildberries
hardclient

Вес как отдельное поле

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

Пример Маркет Деливери
hardclient

Без дублирования

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

Антипример СберМаркет
hardclient

Маркеры

29 гайдлайнов

Применяются

В маркерах на карточках товаров нет ничего плохого: они привлекают внимание и делают их более информативными. Однако есть ряд «но». Об этом – дальше.

Пример Яндекс.Лавка
hardclient

Хорошо заметны

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

Антипример Love Republic
hardclient

Без чрезмерного выделения

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

Антипример Megatop
hardclient

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

Еще 1 базовый момент: маркеры должны быть выполнены в хорошем качестве. Пикселящие маркеры хорошего впечатления точно не оставят.

Антипример LC Waikiki
hardclient

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

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

Пример Bershka
hardclient

Анимация в маркерах

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

Пример FlowWow
hardclient

Не как часть фото товара

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

Антипример Зоозавр
hardclient

Без мелкого текста

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

Антипример AliExpress
hardclient

Цвет текста контрастный

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

Антипример Ешь Деревенское
hardclient

Текст локализован

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

Антипример Uzum Market
hardclient

Текст не обрезается

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

Антипример Сима-ленд
hardclient

Единообразие регистра

Маркеры можно сделать разнообразными, но лучше не играть с регистром, делая одни – в sentence case, а другие – в caps lock. Выглядеть это все будет неконсистентно.

Антипример Gloria Jeans
hardclient

Единообразие размера шрифта

То же самое касается и размера шрифта. Маркеры в разных размерах шрифта смотрятся, мягко скажем, неидеально.

Антипример Л'Этуаль
hardclient

Текст маркеров краткий

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

Антипример Фарфор
hardclient

Текст и иконки

Текст в маркерах иногда сопровождается релевантными иконками. Они привлекают внимание и облегчают восприятие.

Пример Ozon
hardclient

Размещены поверх фото

Часто для экономии пространства маркеры размещают поверх фото товаров. В примере все смотрится гармонично. Однако у этого есть подводный камень (следующий пункт).

Пример Wildberries
hardclient

Не перекрывают фото

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

Антипример СберМаркет
hardclient

Полупрозрачный фон маркеров

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

Пример FlowWow
hardclient

Вынесены за фото

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

Пример Rendez Vous
hardclient

Маркеров не слишком много

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

Антипример Novex
hardclient

Маркеры vs. кнопки

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

Антипример Рив Гош
hardclient

Соответствуют контексту

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

Антипример Холодильник.ру
hardclient

Без конкуренции с другими объектами

Особенно если маркеры – это часть фото, есть риск, что они начнут конкурировать с другими элементами карточек. Например, вот так:

Антипример Комус
hardclient

Маркеры понятны

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

Антипример Азбука Вкуса
hardclient

Однозначны

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

Антипример Henderson
hardclient

Размер маркеров vs. фото

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

Антипример Эльдорадо
hardclient

Отступы от текста

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

Антипример Sunlight
hardclient

Полезное использование площади

И наоборот: делать отступы слишком большими – тоже не лучшая практика. Это будет неэффективным использованием пространства. Во всем нужно знать меру.

Антипример Lalafo
hardclient

Без дополнительных действий

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

Антипример Акушерство
hardclient

Варианты товара

19 гайдлайнов

Содержатся в карточке

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

Пример belle you
hardclient

Размещение за рамками фото

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

Пример 12 Storeez
hardclient

Размещение с отступом

Размещая варианты рядом с фото не забывайте про отступы: объекты не должны прилипать друг к другу.

Антипример Акушерство
hardclient

Направленность вариантов

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

Пример Shein
hardclient

Варианты понятны

Вместо того чтобы просто сказать, что есть Х вариантов, лучше спроектировать элемент так, чтобы клиенту было понятно, какой именно параметр вариативен.

Антипример Л'Этуаль
hardclient

Минимум текста

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

Антипример Духи.рф
hardclient

Текст вариантов согласован

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

Антипример Подружка
hardclient

Число вариантов ограничено

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

Пример Lamoda
hardclient

Highlight числа скрытых вариантов

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

Пример Bungly Boo!
hardclient

Highlight отсутствия варианта

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

Пример Petshop
hardclient

Отображение только текущего варианта?

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

Пример Zara
hardclient

Цвета с помощью палитры

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

Пример Яндекс.Маркет
hardclient

Отделение цветов от фона

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

Антипример Poison Drop
hardclient

Без отображения одного цвета

В отличие от прочих вариантов (например, размеров), если товар есть лишь в 1 цвете, подсвечивать его в карточке, выделяя под это элемент интерфейса, необязательно.

Антипример Акушерство
hardclient

Цвета палитры vs. цвет товара

Цвета палитры должны как минимум содержать цвет текущего товара. Иначе есть риск ввести клиента в заблуждение.

Антипример LC Waikiki
hardclient

Миниатюры вариантов

Иногда вместо палитры можно встретить отображение вариантов в формате миниатюр. В случае с вариантами цвета решение достаточно интересное.

Пример ZAFUL
hardclient

Highlight текущего варианта

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

Пример Belle You
hardclient

Переключение между вариантами

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

Пример Снежная Королева
hardclient

Смена фото при выборе варианта

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

Антипример Farfor
hardclient

Цена и скидки

25 гайдлайнов

Цена хорошо выделяется

Если в процессе принятия решения цена является значимым фактором, лучше выделить её на фоне остальных элементов карточки.

Пример МегаМаркет
hardclient

Цена, как вторичный элемент?

Как считаете, когда цену товара можно сделать визуально вторичной? Правильно: когда она не играет для целевой аудитории особого значения.

Пример ЦУМ
hardclient

Отступы в цене

Для улучшения восприятия тысячные и миллионные значения в стоимости товара лучше отделять с помощью пробела.

Пример Lamoda
hardclient

Цена по скидке vs. обычные цены

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

Пример СберМаркет
hardclient

Старая и новая цены

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

Пример O'STIN
hardclient

Скидка в процентах

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

Пример Маркет Деливери
hardclient

Скидка хорошо заметна

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

Антипример La Redoute
hardclient

Срок действия скидки

Эффект от скидки также можно усилить, создав ощущение срочности за счет добавления срока её действия.

Пример СберМаркет
hardclient

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

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

Пример igooods
hardclient

Старая цена легко читается

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

Антипример FlowWow
hardclient

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

Помимо визуальной вторичности, старую цену лучше перечеркнуть, давая понять, что она сейчас не действует.

Пример СпортМастер
hardclient

Угол перечеркивания

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

Пример Poison Drop
hardclient

Цвет линии перечеркивания

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

Пример Ситилинк
hardclient

Без чрезмерного акцента

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

Антипример Порядок
hardclient

Без дублирования цен

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

Антипример Петрович
hardclient

Различие цен понятно

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

Антипример Триал-Спорт
hardclient

Highlight снижения цены

Если цена за последнее время снизилась, этот факт можно подсветить, дополнительно привлекая внимание клиента.

Пример Ozon
hardclient

Валюта в виде символа

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

Пример М.Видео
hardclient

Валюта визуально вторична

Некоторые идут еще дальше и делают валюту визуально вторичной относительно цены. Это смещает фокус внимания на сумму и делает интерфейс ещё легче.

Пример befree
hardclient

Отступ между суммой и валютой

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

Антипример Shein
hardclient

Единый шрифт валюты и цены

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

Антипример Lady & Gentleman City
hardclient

Валюта локализована

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

Антипример LC Waikiki
hardclient

Копейки визуально вторичны

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

Пример Маркет Деливери
hardclient

Копейки там, где это нужно

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

Антипример Комус
hardclient

Цена весовых товаров

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

Антипример СберМаркет
hardclient

Рейтинг и отзывы

15 гайдлайнов

Оценка добавлена

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

Пример Перекрёсток Впрок
hardclient

Формат оценки: 5 звезд

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

Пример Rendez Vous
hardclient

Формат оценки: 1 звезда

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

Пример СберМаркет
hardclient

Оценка визуальная и текстовая

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

Антипример Л'Этуаль
hardclient

Точность оценки

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

Пример ВкусВилл
hardclient

Цветовая маркировка

Иногда оценку дополняют цветовой маркировкой. Такая механика может повысить скорость считывания.

Пример Буквоед
hardclient

Если оценок нет – отображать?

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

Пример Fitness Formula
hardclient

Если оценок нет – оценка не 0

Что точно не стоит делать – это писать, что оценка – ноль. Такое исполнение может исказить восприятие и создать впечатление, что она не отсутствует, а крайне низка.

Антипример Столплит
hardclient

Если оценок нет – креатив

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

Пример ВкусВилл
hardclient

Число оценок

Число респондентов помогает понять, насколько оценка репрезентативна и насколько клиент может ей доверять.

Пример Красное & белое
hardclient

Рейтинг vs. число оценок

Если вы размещаете оценку и количество отзывов в качестве единого элемента, эти показатели можно сделать визуально различными, чтобы они легче считывались

Пример СпортМастер
hardclient

Пояснения к числу оценок?

Как считаете, стоит ли в явной форме пояснять, что это именно число оценок? Ненужная перегрузка интерфейса или ценное дополнение? Напишите в комментах.

Пример Kazan Express
hardclient

Понятность показателей

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

Антипример Леонардо
hardclient

Число комментариев

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

Пример СберМаркет
hardclient

Иконки для отзывов

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

Пример СберМаркет
hardclient

Кнопка корзины

39 гайдлайнов

Добавлена в карточку

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

Антипример Uzum Market
hardclient

Нет, если требуется ознакомление?

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

Пример Lamoda
hardclient

Добавление без авторизации

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

Антипример Petshop
hardclient

Привычно расположена

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

Пример Зоозавр
hardclient

Размер достаточен для тапа

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

Пример Лента Онлайн
hardclient

Контрастна

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

Антипример Ярче Плюс
hardclient

Содержит иконку

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

Пример Маркет Деливери
hardclient

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

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

Антипример Sokolov
hardclient

Содержит текст

В качестве альтернативы или дополнения иконке в кнопке также часто можно встретить и текст.

Пример МегаМаркет
hardclient

Оптимизация размера текста

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

Антипример Лента
hardclient

Текст не вводит в заблуждение

Текст кнопки не должен вводить клиента в заблуждение. В примере еще ни один товар в корзину не добавлен, хотя кнопки гласят, что он «в корзине».

Антипример LC Waikiki
hardclient

Текст с отступами

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

Антипример OBI
hardclient

Контент центрирован

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

Антипример Леонардо
hardclient

Дата доставки

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

Пример Ozon
hardclient

Если товар отсутствует

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

Пример ВкусВилл
hardclient

Если товар скоро поступит

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

Пример ВкусВилл
hardclient

Объединение с ценой

Некоторые участники рынка объединяют кнопку корзины с ценой товара в единый элемент. Смотрится достаточно неплохо, да и информативность не теряется.

Пример Самокат
hardclient

Понятность элементов в кнопке

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

Пример Ozon
hardclient

Реакция на касание

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

Пример Яндекс.Лавка
hardclient

Добавление моментальное

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

Антипример Четыре Лапы
hardclient

Выделение кнопки vs. карточки

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

Пример Детский Мир
hardclient

Активность после добавления

Лучше воздержаться от перевода кнопки в неактивное состояние после добавления товара в корзину. Есть разные варианты обновления ее функционала (о них – далее).

Антипример Kari
hardclient

Добавление нескольких единиц

Особенно в случае с food ритейлом предусмотрите возможность добавления через карточку листинга сразу нескольких единиц товара.

Пример igooods
hardclient

Изменение вида кнопки

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

Антипример Gipfel
hardclient

Анимация изменения кнопки

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

Пример Лента
hardclient

Выбор числа кнопками

Базовый и наиболее часто используемый вариант изменения количества единиц – кнопки «плюс» и «минус».

Пример Самокат
hardclient

Выбор числа барабаном

Однако для сценариев с выбором большого числа единиц (например, корм для кота на месяц) лучше предусмотреть более гуманную альтернативу – барабан.

Пример ВкусВилл
hardclient

Выбор числа текстовым вводом

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

Пример Leroy Merlin
hardclient

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

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

Пример igooods
hardclient

Указание единиц измерения

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

Антипример EcoMarket
hardclient

Highlight кванта продажи?

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

Пример Сима-ленд
hardclient

Не больше, чем на складе

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

Пример ВкусВилл
hardclient

Возможность снизить число до нуля

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

Пример Самокат
hardclient

Снижение до нуля без усложнений

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

Антипример Ешь Деревенское
hardclient

Когда уточнять число единиц?

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

Пример Мой SPAR
hardclient

Без чрезмерной анимации

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

Антипример Sello
hardclient

Переход в корзину после добавления

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

Пример М.Видео
hardclient

Выбор варианта при нажатии

Если требуется выбрать вариант товара (например, размер), об этом можно спросить сразу при нажатии на кнопку корзины.

Пример СпортМастер
hardclient

Кнопка избранного

18 гайдлайнов

Добавлена

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

Пример Lamoda
hardclient

Визуально привычна

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

Антипример ЦУМ
hardclient

Привычно расположена

Не изобретайте колесо: расположите кнопку избранного там, где ее можно найти в большинстве e-com приложений – в правом верхнем углу карточек листинга.

Пример СберМаркет
hardclient

Хорошо заметна

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

Антипример Lichi
hardclient

Активное vs. неактивное состояние

Подберите иконки неактивного состояния так, чтобы клиент понимал, что товар еще не в избранном. Закрашенная и контрастная иконка может ввести в заблуждение.

Антипример Gipfel
hardclient

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

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

Антипример Л'Этуаль
hardclient

Добавление без авторизации

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

Антипример METRO
hardclient

Возврат из запроса в 1 касание

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

Антипример Novex
hardclient

Призыв без блокировки экрана

Вместо того чтобы блокировать запросом весь экран, можно поступить более элегантно: показать небольшое, но заметное сообщение с призывом авторизоваться.

Пример Зоозавр
hardclient

Добавление без лишних действий

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

Антипример ЦУМ
hardclient

Анимация добавления

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

Пример Лента Онлайн
hardclient

Цикличная анимация?

Некоторые идут дальше и делают анимацию кнопки в активном состоянии зацикленной. Как вам такое? Красота или кто-то переборщил? Напишите в комментах.

Пример Kaspi.kz
hardclient

Haptic Feedback

Добавление в избранное также можно сопровождать слабой вибрацией. Записью экрана это не передать, но в примере вибрация похожа на биение сердца. Неплохо придумано.

Пример Авито
hardclient

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

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

Антипример OBI
hardclient

Без блокировки экрана

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

Антипример Kari
hardclient

Добавление в подборки

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

Пример Joom
hardclient

Быстрое добавление в списки

Встречается также и функция добавления в списки наряду с кнопкой избранного. Удобно или просто дублирование схожих функций? Напишите в комментах.

Пример ВкусВилл
hardclient

Счетчик лайков

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

Пример Kolesa.kz
hardclient

Реакция карточки на касание

4 гайдлайна

Реализована

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

Пример Яндекс.Еда
hardclient

Вдавливание

Одна из наиболее ожидаемых реакций – когда карточка немного «вдавливается» в экран, отвечая на нажатие со стороны пользователя.

Пример Впрок
hardclient

Вдавливание и затемнение

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

Пример Самокат
hardclient

Не выцветание

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

Антипример Season Market
hardclient

Прочие интересные фичи

Здесь я собрал наблюдения, по которым не набралось целого блока пунктов. Но обойти их стороной я просто не могу. Раздел этот, как и все остальные, со временем будет пополняться.

Количество товара в наличии

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

Пример ВкусВилл
hardclient

Сравнение товаров

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

Пример СпортМастер
hardclient

Поиск похожих товаров

Ряд компаний в e-commerce уже натренировали нейросети подыскивать для клиента визуально похожие товары и выводят эту функцию в карточки листинга.

Пример Lamoda
hardclient

Похожие поисковые запросы

При возврате из карточки товара, некоторые предлагают клиенту перейти к результатам похожих запросов. Как вам такая механика? Лучше или хуже предыдущей?

Пример Alibaba
hardclient

Дополненная реальность

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

Пример Столплит
hardclient

Контекстные меню

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

Пример Shop
hardclient
To be continued...
Надеюсь, этой статьей мне удалось немного прокачать вашу насмотренность? Если да, то дайте знать в комментах. Если нет – жду фидбэка там же.

Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую русскоязычную базу знаний по UX/UI в e-commerce.

Подпишитесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!

Благодарность

Благодарю за дополнение статьи идеями хорошего исполнения и антипримерами. Вместе мы делаем контент еще лучше и полезнее.
Все статьи по e-commerce