Подписывайтесь на мой новый канал: делюсь интересными фичами из мира e-commerce 3 раза в неделю

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

Лучшие практики UX/UI в мобильном e-commerce

235

гайдлайнов

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

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

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

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

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

Layout листинга
Выделение карточек в листинге
Фото товара
Слайдер
Page control
Название и подписи
Маркеры
Варианты товара
Цена и скидки
Рейтинг и отзывы
Кнопка корзины
Кнопка избранного
Реакция карточки на касание
Прочие интересные фичи

Layout листинга

6 гайдлайнов

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

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

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

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

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

Пример • Mango

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

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

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

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

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

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

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

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

Пример • Bershka

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

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

Пример • Zara

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

6 гайдлайнов

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

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

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

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

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

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

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

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

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

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

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

Пример • Amazon

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

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

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

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

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

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

Фото товара

22 гайдлайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

Пример • Lady & Gentleman City

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

Слайдер

14 гайдлайнов

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

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

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

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

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

Пример • Lamoda

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

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

Пример • Юла

Cell snapping

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

Пример • Rendez Vous

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

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

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

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

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

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

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

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

Пример • Lamoda

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Krisha.kz

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

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

Пример • av.by

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

Page control

14 гайдлайнов

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

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

Антипример • Rendez-Vous

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

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

Пример • Ozon

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

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

Пример • Sokolov

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

Пример • Wildberries

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

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

Пример • Hoff

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

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

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

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

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

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

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

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

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

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

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

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

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

16 гайдлайнов

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

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

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

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

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

Пример • 12 Storeez

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Leroy Merlin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Rendez-Vous

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

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

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

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

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

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

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

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

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

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

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

Пример • Rendez Vous

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

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

Пример • Wildberries

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

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

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

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

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

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

Маркеры

29 гайдлайнов

Применяются

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Bershka

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

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

Пример • Flowwow

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Антипример • FARFOR

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

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

Пример • Ozon

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

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

Пример • Wildberries

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

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

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

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

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

Пример • FlowWow

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

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

Пример • Rendez-Vous

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Однозначны

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19 гайдлайнов

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

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

Пример • belle you

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

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

Пример • 12 Storeez

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

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

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

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

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

Пример • Shein

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

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

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

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

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

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

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

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

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

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

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

Пример • Lamoda

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

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

Пример • Bungly Boo!

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

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

Пример • Petshop

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

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

Пример • Zara

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • ZAFUL

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

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

Пример • Belle You

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

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

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

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

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

Антипример • FARFOR

Цена и скидки

25 гайдлайнов

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

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

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

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

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

Пример • ЦУМ

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

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

Пример • Lamoda

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

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

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

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

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

Пример • O'STIN

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

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

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

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

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

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

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

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

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

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

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

Пример • igooods

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

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

Антипример • Flowwow

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

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

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

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

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

Пример • Poison Drop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

Пример • befree

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15 гайдлайнов

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

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

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

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

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

Пример • Rendez-Vous

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Fitness Formula

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

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

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

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

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

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

Число оценок

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

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

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

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

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

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

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

Пример • Kazan Express

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

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

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

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

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

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

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

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

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

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

39 гайдлайнов

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

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

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

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

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

Пример • Lamoda

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

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

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

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

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

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

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

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

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

Контрастна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

Пример • Детский мир

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

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

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

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

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

Пример • igooods

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Leroy Merlin

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

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

Пример • igooods

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Мой SPAR

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

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

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

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

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

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

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

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

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

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

18 гайдлайнов

Добавлена

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

Пример • Lamoda

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Kaspi.kz

Haptic Feedback

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

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

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

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

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

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

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

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

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

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

Пример • Joom

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

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

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

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

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

Пример • Kolesa.kz

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

4 гайдлайна

Реализована

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

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

Вдавливание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Lamoda

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

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

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

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

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

Пример • Shop

To be continued...

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

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

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

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

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

Надежда Литвинец, UX/UI дизайнер, EPAM
Валентин Лукомский, Product Manager, автор канала Rollin' Days

Все статьи по e-commerce