Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки. Каждый из них содержит подробный чек-лист.
- Layout листинга
- Выделение карточек в листинге
- Фото товара
- Слайдер
- Page control
- Название и подписи
- Маркеры
- Варианты товара
- Цена и скидки
- Рейтинг и отзывы
- Кнопка корзины
- Кнопка избранного
- Реакция карточки на касание
Layout листинга
По 2 карточки в ряду
Чаще всего можно встретить листинг с 2 карточками в ряду: так и фото товара получаются достаточно большие, и на экран помещается достаточно карточек.
✅
По 1 карточке в ряду
Такой формат часто используется, чтобы можно было посмотреть фото более детально (например, fashion) или разместить больше контента (например, электроника и бытовая техника).
✅
По 3 карточки в ряду
Некоторые компании (в основном food-ритейл) используют сетку по 3 карточки в ряду. Товаров помещается больше, но контент карточки, включая фото, сильно уменьшается.
?
Разный layout для разных товаров
Для каждого типа товаров компания может использовать свой, наиболее подходящий layout листинга.
✅
Изменяющийся layout
При скролле однотипного листинга у клиента может возникнуть усталость. С ней, в основном в fashion, борются за счёт изменения формата карточек.
✅
Возможность смены layout’а
Иногда в приложении клиенту также даётся возможность сменить layout листинга. В таком случае каждый сможет выбрать наиболее подходящий для себя вариант.
✅
Выделение карточек в листинге
Карточки выделяются на фоне
Базовый момент: лучше если карточки будут обособляться с помощью выделения и не будут визуально смешиваться между собой.
❌
С помощью тени
Очень часто можно встретить выделение карточек за счет добавления тени по контуру. Важно не переборщить, чтобы тень была ненавязчивой.
✅
С помощью цвета
Также довольно часто встречается выделение карточки цветом, который отличается от фона листинга. Например, белый на светло-сером фоне или наоборот.
✅
С помощью обводки
Добавить лёгкую обводку для карточек — рабочая и достаточно распространённая механика.
✅
Границы карточек заметны
Однако делая границы карточек визуально слишком лёгкими, вы рискуете тем, что клиент их не заметит. В примере они есть, но нужно хорошенько присмотреться, чтобы их увидеть.
❌
Карточки не слишком контрастны
И наоборот: выделяя карточки на фоне листинга, главное — не перегнуть палку и не сделать их слишком контрастными. Ненавязчивое выделение не значит, что оно незаметно.
❌
Фото товара
Есть по всем товарам
Фото — один из ключевых факторов при принятии решения о покупке товара. Размещая карточки без фото, можно значительно снизить шансы на успешную продажу.
❌
Placeholder, если фото нет
Если всё же по каким-то причинам фото товара отсутствует, как минимум предусмотрите вместо него релевантный placeholder.
✅
Подгружаются заранее
Фото в карточках товаров должны подгружаться заранее, чтобы клиенту не приходилось ждать при каждой прокрутке экрана листинга.
❌
В хорошем качестве
Фото товара должны быть в достаточно хорошем качестве. Размещая пиксельные фото, вы рискуете тем, что клиент может транслировать впечатление от фото на сам товар.
❌
Обложка репрезентативна
Обложка в карточке товара, должна быть репрезентативной, чтобы заинтересовать клиента и побудить ознакомиться с предложением детально.
❌
Единый размер контейнеров
Контейнеры под фото лучше сделать одного размера, чтобы карточки не отличались по высоте.
❌
Занимают всю область контейнера
По возможности фото должны соответствовать размеру контейнеров, чтобы между их границами не образовывались пустые пространства.
❌
Товар центрирован в фото
Базовый момент: товар должен быть размещен по центру фото и смещать на себя фокус внимания. Размещать товар где-то сбоку изображения — вероятно, не лучшая идея.
❌
Товар центрирован визуально
Отдельный момент, который стоит учитывать: если фон фото совпадает с фоном карточки, даже если товар центрирован на фото, визуально в карточке он не будет центрирован.
❌
Отступы от границ карточки
Спроектируйте фото так, чтобы между самим товаром и границами карточки были отступы: товар не должен к ним «прилипать».
❌
Фон единообразный
По возможности сделайте фон фото в карточках товара единообразным, чтобы его смена не отвлекала от ознакомления с самими товарами.
❌
Фон фото vs. цвет листинга
Встречаются и интересные кейсы, когда фон фото совпадает с фоном листинга. Хоть это и противоречит гайдлайнам по выделению карточек, но смотрится интересно.
✅
Без водяных знаков
Иногда компании наносят на фото водяные знаки. Для этого есть причины. Но я пишу о клиентском опыте. Поэтому скажу, что для клиента такие знаки — бесполезный визуальный шум.
❌
Подписи легко читаются
Подписи можно добавлять в фото товара на полноценной карточке, но стоит учитывать, что в листинге они могут быть практически нечитаемы.
❌
Выцветание фото, если товара нет
Иногда, если товара нет, фото делают выцветшим. Как считаете, хорошо это или плохо? Подчёркивает отсутствие или затрудняет ознакомление? Напишите в комментах.
?
Зум фото в листинге
В некоторых кейсах в карточках встречается дополнительный функционал увеличения фото двумя пальцами прямо в листинге.
✅
Подсказки по зуму фото
Однако функция зума в листинге — пока ещё не используется широко. Поэтому не лишним будет ненавязчиво рассказать о ней с помощью локальной подсказки.
✅
Затемнение при зуме фото
Лучше если при зуме фото фоновая область экрана будет затемняться, чтобы оно не сливалось с другими элементами и привлекало к себе фокус внимания.
❌
Видео в карточке товара
Иногда встречаются кейсы, когда по умолчанию в карточках выведено не фото, а видео, которое начинает проигрываться автоматически, привлекая больше внимания.
✅
Воспроизведение одного видео
Однако в случае с автовоспроизведением видео не стоит перегибать палку и запускать его параллельно на нескольких карточках. Это фокус внимания как раз может размыть.
❌
Highlight наличия видео
Более скромный вариант — просто подсветить наличие видео в карточке товара в листинге с помощью релевантной иконки.
✅
Уместность анимации
Некоторые компании в карточки товаров добавляют GIF-анимацию. Стоит подумать дважды: внимание это привлечет, но впечатление может сложиться не лучшее.
❌
Слайдер
Предусмотрен
Всё чаще и чаще можно встретить паттерн, когда фото товара можно быстро пролистать прямо в листинге без необходимости перехода в полную карточку.
✅
Пояснение о прокрутке
Слайдеры в листинге всё же ещё относительно новы, поэтому нелишним будет рассказать об этом при первом визите клиента с помощью локальной подсказки.
✅
Автопрокрутка слайдера
В некоторых кейсах также встречается автопрокрутка слайдера: анимация даёт клиенту понять, что фото можно пролистать.
✅
Cell snapping
Привязка к ячейкам позволяет прокручивать фото в слайдере ровно на 1 вне зависимости от длины свайпа (если превышена минимальная длина свайпа).
✅
Анимация соответствует действию
Анимация должна соответствовать действию клиента: если он смахивает слайдер, лучше менять фото не резко, а с помощью анимации наложения или замещения.
❌
Скорость смены слайдов
До автопрокрутки с помощью cell snapping будет лучше, если скорость смены слайдов при свайпе будет не фиксирована, а привязана к тому, как быстро клиент их смахивает.
❌
Прокрутка закольцована
Сделайте прокрутку слайдера закольцованной, чтобы у клиента была возможность быстро вернуться к началу и ознакомиться с фото повторно, когда он дошёл до конца.
✅
Фото подгружаются
Базовый момент: убедитесь, что фото в слайдерах корректно загружаются, и вместо них не будут красоваться пустые области.
❌
Быстрая подгрузка фото
Реализуйте моментальную, либо раннюю подгрузку фото в слайдере, чтобы не заставлять клиента ждать каждый раз при его прокрутке.
✅
Блокирование вертикальной прокрутки
При пролистывании слайдера вертикальный скролл листинга должен блокироваться, если намерение свайпа очевидно (угол менее 45° или более 135°).
❌
Без кнопок прокрутки
В отличие от десктопа, пользователи приложений уже привыкли к возможности свайпа слайдеров. А специальные кнопки прокрутки встречаются крайне редко.
❌
Количество фото?
Иногда в сервисах объявлений можно встретить highlight числа фото по товару. С одной стороны, карточки более информативны. С другой — есть риск перегрузить интерфейс.
?
Page control
Добавлен в карточку
Если вы используете слайдер, page control в карточке сыграет роль своеобразной подсказки, что фото можно прокручивать.
❌
В формате точек
Наиболее часто page control можно встретить именно в формате нескольких точек, объединённых в один объект.
✅
В формате нескольких черт
Также page control нередко реализуют и в виде нескольких черт, каждая из которых отвечает за отдельный слайд.
✅
В формате единой линии
Гораздо реже page control заменяется единой линией — своего рода аналогом scroll bar’а. Который, впрочем, также имеет право на существование, так как свою функцию выполняет.
✅
За рамками фото
Будет лучше, если page control будет выведен за фото. Иначе есть риск, что он будет плохо заметен на его фоне.
✅
Точки хорошо видны
Где бы ни находился page control, спроектируйте его так, чтобы точки были хорошо видны на фоне, поверх которого они расположены.
❌
Текущая точка хорошо выделяется
Хорошо выделите текущую точку на фоне остальных, чтобы клиенту было легче сориентироваться, на какой позиции он в рамках слайдера.
❌
Видны не все точки
В отличие от полноценной карточки товара, если фото слишком много, отображение всех точек на page control может перегрузить интерфейс. Поэтому их лучше ограничить.
❌
Уменьшение точек по краям
Если количество фото больше отображаемого количества точек, крайние точки могут визуально уменьшаться, как бы подсказывая, что на них слайдер не заканчивается.
✅
Привычно размещён
Чаще всего page control размещают в центральной нижней области — клиенты ожидают увидеть его именно там.
✅
Нестандартное размещение
Однако встречаются кейсы, когда page control размещают либо снизу сбоку, либо в верхней части. Как считаете, чем это обосновано? Поделитесь идеями в комментах.
?
Отступы от фото
Не стоит размещать page control вплотную к границам фото, иначе они будут визуально «прилипать» друг к другу. Смотреться всё это будет не очень.
❌
Тайминг переключения
Лучше, если переключение page control будет происходить ровно в момент смены фото в слайдере — без каких-либо задержек.
✅
Анимация переключения
При переключении слайдера page control может меняться не прерывисто, а с помощью анимации. Хоть и мелочь, но когда разработчик обращает внимание на детали — это приятно.
✅
Название и подписи
Названия контрастны
Сделайте текст названий достаточно контрастным, чтобы его было легко прочитать даже клиентам с неидеальным зрением.
❌
Названия краткие
По возможности делайте названия товаров краткими, чтобы они легче воспринимались и не перегружали карточку.
✅
В названиях только ключевой контент
Добавляя в названия по несколько характеристик и ненужные слова, без которых смысл не потеряется, вы лишь перегружаете карточку и ухудшаете восприятие.
❌
Размер видимой части текста
По возможности задавайте размер видимой части названий так, чтобы по большинству позиций оно было видно полностью.
❌
Обрезание в конце текста
Если текст не вписывается в карточку, в большинстве случаев его обрезают в конце, оставляя видимым начало.
❌
Обрезание в середине текста
Однако если в конце текста есть ценный контент, можно обрезать его середину, оставляя видимыми последние символы.
✅
Обрывание текста многоточием
Наиболее часто встречающийся паттерн при обрезании текста — многоточие.
✅
Обрывание текста выцветанием
Более элегантное решение по сравнению многоточием — плавное выцветание текста ближе к концу видимой части.
✅
Обрывание текста не границами контейнера
Однако не стоит обрезать название границами контейнера. Иначе может сложиться впечатление, что это просто некорректная верстка.
❌
Использование caps lock’а?
С одной стороны, caps lock позволяет сделать текст более заметным. С другой, он может выглядеть слишком «кричащим», да и контента может поместиться меньше.
?
Корректная локализация
Локализуя названия товаров, лучше выбирать качественные сервисы для перевода. Иначе есть риск, что названия и описания будут далеки от корректных.
❌
Название vs. подписи
Чтобы информация лучше воспринималась, часть текста из названия товара можно вынести в отдельный label с подписью.
✅
Подписи визуально вторичны
Подписи можно сделать визуально вторичными, чтобы их текст не сливался с текстом названий.
✅
Подписи понятны и уместны
Убедитесь, что подписи будут уместны и не вызовут у клиента вопросов из разряда «что же пытался донести до меня автор?»
❌
Без артикулов в названиях
Артикулы также лучше выносить из текста названий, чтобы не перегружать текст. Если они действительно нужны, можно размещать в виде отдельных визуально вторичных элементов.
❌
Тип товара как отдельное поле
В некоторых случаях, чтобы разгрузить название, тип товара выносят в отдельное поле. Смотрится это неплохо.
✅
Бренд как отдельное поле
Если бренд имеет важное значение при просмотре карточек листинга, его также нередко выводят в качестве отдельного поля, а остальной контент выводят в подпись.
✅
Вес как отдельное поле
В food-ритейле часто встречается вывод веса товара в виде подписи. Это также позволяет снизить количество названий, которые приходится обрезать.
✅
Без дублирования
При этом в дублировании контента в названии и подписи нет особого смысла. Повторяющийся текст лишь утяжеляет карточку.
❌
Маркеры
Применяются
В маркерах на карточках товаров нет ничего плохого: они привлекают внимание и делают их более информативными. Однако есть ряд «но». Об этом — дальше.
✅
Хорошо заметны
Базовый момент: цель маркера — привлечь внимание клиента к карточке товара. Соответственно, сам он должен быть хорошо заметен.
❌
В хорошем качестве
Еще 1 базовый момент: маркеры должны быть выполнены в хорошем качестве. Пикселящие маркеры хорошего впечатления точно не оставят.
❌
Динамический цвет маркеров
Чтобы маркеры были заметнее, можно динамически менять их цвет в зависимости от того, на каком фоне они расположены.
✅
Анимация в маркерах
Иногда для дополнительного привлечения внимания маркеры анимируют. Если анимация ненавязчивая, выглядеть это может неплохо.
✅
Не как часть фото товара
Реализуйте маркеры как полноценные элементы интерфейса, а не как часть фото. Иначе в разы усложните себе задачу по их обновлению.
❌
Без мелкого текста
Если маркер реализован просто как часть фото, есть риск, что его текст будет слишком сильно мельчить и не будет читаться при просмотре карточки в листинге.
❌
Цвет текста контрастный
Создавая дизайн маркера, убедитесь, что цвет шрифта будет достаточно контрастным, чтобы текст легко читался.
❌
Текст локализован
Если ваше приложение локализовано на несколько языков, убедитесь, что работы по переводу покрывают и маркеры.
❌
Текст не обрезается
Если вы спроектировали маркеры так, что они ограничены в размерах, и добавляете текст, который в них не вписывается, какой в этом смысл? Он просто не будет виден.
❌
Единообразие регистра
Маркеры можно сделать разнообразными, но лучше не играть с регистром, делая одни — в sentence case, а другие — в caps lock. Выглядеть это всё будет неконсистентно.
❌
Единообразие размера шрифта
То же самое касается и размера шрифта. Маркеры в разных размерах шрифта смотрятся, мягко скажем, неидеально.
❌
Текст маркеров краткий
Из предыдущего пункта вытекает основное требование: не пытайтесь засунуть в маркер целое предложение. Чем меньше текста, тем лучше.
❌
Текст и иконки
Текст в маркерах иногда сопровождается релевантными иконками. Они привлекают внимание и облегчают восприятие.
✅
Размещены поверх фото
Часто для экономии пространства маркеры размещают поверх фото товаров. В примере все смотрится гармонично. Однако у этого есть подводный камень (следующий пункт).
✅
Не перекрывают фото
Маркеры реализованы для привлечения внимания. Но при этом они не должны влиять на восприятие фото товара, перекрывая его собой.
❌
Полупрозрачный фон маркеров
Частично проблему перекрытия фото маркерами может решить полупрозрачный фон: и силуэты фото видны, и маркеры целы.
✅
Вынесены за фото
Если маркеры при наложении на фото всё же перекрывают его, как вариант, их можно вынести за его рамки. Смотреться будет неплохо.
✅
Маркеров не слишком много
Не добавляйте в карточки слишком много маркеров, пытаясь донести ценность — иначе они могут начать конкурировать между собой и перегрузят интерфейс.
❌
Маркеры vs. кнопки
Создавая маркеры, убедитесь, что они не вводят в заблуждение своим видом, будто это кнопки, и что на них можно нажать.
❌
Соответствуют контексту
Маркеры должны соответствовать прочим элементам карточки. Например, если вы используете скидочный маркер, позаботьтесь о том, чтобы скидка по товару отображалась.
❌
Без конкуренции с другими объектами
Особенно если маркеры — часть фото, есть риск, что они начнут конкурировать с другими элементами карточек.
❌
Маркеры понятны
Убедитесь, что маркеры, которые вы собираетесь добавить, понятны как для аудитории постоянных клиентов, так и для тех, кто только скачал приложение.
❌
Однозначны
Маркеры должны быть однозначны и не должны вызывать лишних вопросов. В примере скидка описана расплывчато, но даже на странице товара непонятно, от чего она зависит.
❌
Размер маркеров vs. фото
В попытке повысить заметность маркеров не стоит перебарщивать и делать их сопоставимыми по размеру с фото товара.
❌
Отступы от текста
Текст маркеров не должен «прилипать» к их границам. Хоть и незначительные, но отступы лучше добавить.
❌
Полезное использование площади
И наоборот: делать отступы слишком большими — тоже не лучшая практика. Это будет неэффективным использованием пространства. Во всем нужно знать меру.
❌
Без дополнительных действий
Если в маркере вы говорите о скидке, не усложняйте клиенту жизнь и не требуйте от него каких-либо дополнительных действий: примените её автоматически.
❌
Варианты товара
Содержатся в карточке
Добавив в карточки информацию о вариантах товара, мы можем сделать их более информативными. Главное — не перегрузить интерфейс.
✅
Размещение за рамками фото
Чтобы варианты лучше считывались, их можно разместить не поверх изображения, а на однородном фоне за рамками фото.
✅
Размещение с отступом
Размещая варианты рядом с фото не забывайте про отступы: объекты не должны «прилипать» друг к другу.
❌
Направленность вариантов
Чаще всего варианты размещают в горизонтальный ряд. Но иногда встречаются и кейсы, выходящие за эти рамки. Что думаете по этому поводу? Напишите в комментах.
?
Варианты понятны
Вместо того чтобы просто сказать, что есть Х вариантов, лучше спроектировать элемент так, чтобы клиенту было понятно, какой именно параметр вариативен.
❌
Минимум текста
Там, где мысль можно донести кратко, лучше донести её кратко. Любые слова, без которых смысл не теряется, из блока с вариантами лучше удалить.
❌
Текст вариантов согласован
Если в вариантах вы используете текст, убедитесь, что его части будут согласованы между собой вне зависимости от числа вариантов.
❌
Число вариантов ограничено
Если вариантов товара много, лучше не показывать их все, чтобы не перегрузить карточку.
❌
Highlight числа скрытых вариантов
При ограничении числа вариантов в конце списка можно подписать, сколько их ещё скрыто. Это сделает карточку более информативной, несильно её перегружая.
✅
Highlight отсутствия варианта
Если какого-то из вариантов сейчас нет на складе, но он появится в будущем, его можно не скрывать полностью, а пометить, как временно отсутствующий.
✅
Отображение только текущего варианта?
Встречаются кейсы, когда виден лишь текущий вариант, а остальные скрыты. Как считаете, какие у этого есть плюсы и минусы? Напишите в комментах.
?
Цвета с помощью палитры
Вместо того чтобы прописывать цвета текстом, лучше реализовать их с помощью палитры: такой формат будет более лаконичным и не перегрузит карточку.
✅
Отделение цветов от фона
Лучше в маркеры цветов добавить незначительную обводку или тень. Это позволит избежать риска, что цвет может слиться с фоном.
❌
Без отображения одного цвета
В отличие от прочих вариантов, например, размеров, если товар есть лишь в 1 цвете, подсвечивать его в карточке, выделяя под это элемент интерфейса, необязательно.
❌
Цвета палитры vs. цвет товара
Цвета палитры должны как минимум содержать цвет текущего товара. Иначе есть риск ввести клиента в заблуждение.
❌
Highlight текущего варианта
Если варианты визуально отличаются (например, цвет вещи), текущий вариант можно выделить на фоне остальных, чтобы улучшить восприятие.
✅
Переключение между вариантами
Варианты можно сделать кликабельными, чтобы клиент мог быстро выбрать, например, нужный цвет одежды прямо в карточке листинга.
✅
Смена фото при выборе варианта
Если в карточке есть возможность изменить вариант, при его выборе фото должно соответственно обновляться, чтобы не вводить клиента в заблуждение.
❌
Цена и скидки
Цена хорошо выделяется
Если в процессе принятия решения цена — значимый фактор, лучше выделить её на фоне остальных элементов карточки.
✅
Цена, как вторичный элемент?
Как считаете, когда цену товара можно сделать визуально вторичной? Правильно: когда она не играет для целевой аудитории особого значения.
✅
Отступы в цене
Для улучшения восприятия тысячные и миллионные значения в стоимости товара лучше отделять с помощью пробела.
✅
Цена по скидке vs. обычные цены
Цену товаров, которые идут по скидке, стоит выделять на фоне цен без скидки. Так карточка будет лучше привлекать внимание клиента.
✅
Старая цена и новая цена
Если товар идёт со скидкой, часто по нему отображаются как текущая цена, так и старая.
✅
Скидка в процентах
Чтобы улучшить восприятие и сделать выгоду более заметной, новую и старую цены можно снабдить маркером со скидкой в процентах.
✅
Скидка хорошо заметна
Давая скидку на товар, позаботьтесь о том, чтобы она была хорошо заметна. Иначе эффект будет не столь сильным, каким мог бы быть.
❌
Срок действия скидки
Эффект от скидки также можно усилить, создав ощущение срочности за счёт добавления срока её действия.
✅
Старая цена визуально вторична
Так как старая цена неактуальна на текущий момент, её можно сделать визуально вторичной относительно новой цены.
✅
Старая цена легко читается
Однако в порыве сделать старую цену визуально вторичной, убедитесь, что сумму можно прочитать. Иначе от такой механики не будет никакого эффекта.
❌
Старая цена перечёркнута
Помимо визуальной вторичности, старую цену лучше перечеркнуть, давая понять, что она сейчас не действует.
✅
Угол перечеркивания
Размещая линию перечеркивания не горизонтально, а под углом, можно повысить читаемость старой цены.
✅
Цвет линии перечеркивания
Если цвет линии перечёркивания отличается от цвета текста старой цены, это также позитивно влияет на еэ читаемость.
✅
Без чрезмерного акцента
Если вы итак отображаете скидку в процентах, старую и новую цены не стоит дополнять прочими элементами: клиенту итак понятно, что товар идёт со скидкой.
❌
Без дублирования цен
Базовый момент: в дублировании цен нет никакого смысла. Если кто-то знает причину, по которой это сделано в примере, пожалуйста, поделитесь в комментах.
❌
Различие цен понятно
Если вы отображаете стандартные цены и цены по карте лояльности, убедитесь, что из визуала клиенту это будет понятно, и у него не возникнет лишних вопросов.
❌
Highlight снижения цены
Если цена за последнее время снизилась, этот факт можно подсветить, дополнительно привлекая внимание клиента.
✅
Валюта в виде символа
Вместо того чтобы прописывать валюту в сокращенной форме, можно использовать привычный символ. Это, хоть и незначительно, но позволит разгрузить интерфейс.
✅
Валюта визуально вторична
Некоторые идут ещё дальше и делают валюту визуально вторичной относительно цены. Это смещает фокус внимания на сумму и делает интерфейс ещё легче.
✅
Отступ между суммой и валютой
Между суммой и валютой лучше добавить отступ. Объекты не должны визуально «прилипать» друг к другу.
❌
Единый шрифт валюты и цены
Валюту можно сделать в более тонком начертании, другим цветом или использовать меньший размер. Но сам шрифт лучше сделать единым с тем, который используется в цене товара.
❌
Валюта локализована
При локализации приложения не забывайте и про валюту, если вы прописываете её текстом.
❌
Копейки визуально вторичны
Также, чтобы не перегружать интерфейс (чаще в случае с весовыми товарами), помимо валюты, визуально вторичными делают и копейки.
✅
Копейки там, где это нужно
Базовый момент, но всё же встретился у крупной компании: отображайте копейки только тогда, когда их в сумме не ноль.
❌
Цена весовых товаров
Иногда компании пользуются тем, что клиент привык к цене весовых товаров за килограмм, делая её вторичной, а в качестве основной указывая цену за меньший вес.
❌
Рейтинг и отзывы
Оценка добавлена
Добавив оценки товаров в карточки листинга, мы позволяем клиенту сформировать представление о товаре на более ранней стадии — ещё до перехода к полной карточке.
✅
Формат оценки: 5 звёзд
Формат из 5 звёзд более нагляден, так как часть из них будут незаполненными в зависимости от оценки. Однако есть риск перегрузить интерфейс карточки.
?
Формат оценки: 1 звезда
Такой формат, наоборот, делает карточку визуально более лёгкой, но оценка относительно трудно воспринимается, так как звезда чаще всего никак не реагирует на оценку.
?
Оценка визуальная и текстовая
Визуальное представление лучше дополнить текстом, чтобы клиент не пытался понять, какова оценка, чисто по закрашенной части звезд.
❌
Точность оценки
Оценку лучше отображать с точностью до десятых (чаще) или сотых (реже). Это повысит информативность карточки, не особо перегружая её.
✅
Цветовая маркировка
Иногда оценку дополняют цветовой маркировкой. Такая механика может повысить скорость считывания.
✅
Если оценок нет – отображать?
Вопрос дискуссионный: стоит ли отображать в карточках товаров в листинге, что по ним нет оценок? Давайте обсудим в комментах.
?
Если оценок нет, оценка — не 0
Что точно не стоит делать — писать, что оценка — ноль. Такое исполнение может исказить восприятие и создать впечатление, что она не отсутствует, а крайне низкая.
❌
Если оценок нет — креатив
Некоторые компании, отображая новые товары, проявляют креативность и не портят впечатление отсутствием оценок в явной форме.
✅
Число оценок
Число респондентов помогает понять, насколько оценка репрезентативна и насколько клиент может ей доверять.
✅
Рейтинг vs. число оценок
Если вы размещаете оценку и количество отзывов в качестве единого элемента, эти показатели можно сделать визуально различными, чтобы они легче считывались
✅
Пояснения к числу оценок?
Как считаете, стоит ли в явной форме пояснять, что это именно число оценок? Ненужная перегрузка интерфейса или ценное дополнение? Напишите в комментах.
?
Понятность показателей
Показатели, связанные с рейтингом, должны быть понятны клиенту. В примере «/1» встречается не во всех карточках, и непонятно, что это такое. Но это точно не число оценок.
❌
Число комментариев
Некоторые компании заменяют общее число оценок числом комментариев от клиентов, купивших товар, с которыми можно ознакомиться в полной версии карточки.
✅
Иконки для отзывов
В количестве отзывов текст «отзывов» можно заменить иконкой, смысл которой будет понятен большинству. Это также поможет разгрузить интерфейс.
✅
Кнопка корзины
Добавлена в карточку
Особенно если это распространённый товар или товар импульсного спроса, дайте добавить его в корзину прямо из листинга, без нужды переходить в полную версию карточки.
❌
Нет, если требуется ознакомление?
Выделил это, как отдельный дискуссионный пункт: если перед покупкой требуется ознакомление с полной версией карточки, в листинге кнопка корзины может отсутствовать.
?
Добавление без авторизации
Блокируя добавление товара в корзину необходимостью авторизации, вы рискуете. Часть клиентов авторизуются, а часть (и значительная) может просто уйти.
❌
Привычно расположена
Разместите кнопку добавления в корзину там, где её можно встретить в большинстве других приложений — в нижней части карточки.
✅
Достаточный размер для тапа
Сделайте кнопку достаточно большой, чтобы снизить риск ошибочного тапа не по кнопке. Рекомендуется сделать кнопку минимум 44px по каждому из измерений.
✅
Контрастна
Сделайте цвет кнопки контрастным по отношению к фону карточки и листинга, чтобы она лучше привлекала внимание.
❌
Содержит иконку
Часто, чтобы облегчить восприятие, в кнопку добавляют релевантную иконку: в виде корзины, тележки, пакета или плюса.
✅
Иконка в хорошем качестве
Не было бы этого пункта в статье, если бы не откровенно пикселящие иконки у одной из крупнейших ювелирных компаний на рынке (почему-то только в левом ряду).
❌
Содержит текст
В качестве альтернативы или дополнения иконке в кнопке также часто можно встретить и текст.
✅
Оптимизация размера текста
Если смысл не теряется, лучше меньше текста, чем больше. Если итак понятно, что «В корзину» — это добавить в корзину, слово «добавить» уже не к чему.
❌
Текст не вводит в заблуждение
Текст кнопки не должен вводить клиента в заблуждение. В примере ещё ни один товар в корзину не добавлен, хотя кнопки гласят, что он «в корзине».
❌
Текст с отступами
Проектируя различные состояния кнопки, убедитесь, что текст всегда будет вписываться и отступы до её границ будут достаточными.
❌
Контент центрирован
Ещё один базовый момент, но раз уж он встречается у крупных компаний, заострю внимание: контент кнопки лучше центрировать по обеим осям.
❌
Дата доставки
Кнопка корзины уже стала привычной для большинства клиентов. Поэтому её текст можно сделать нестандартным: например, разместив в нём ближайшую дату доставки.
✅
Если товар отсутствует
Если товар закончился, кнопка корзины может играть роль заказа оповещения о его поступлении. Так можно и оценить спрос, и повысить шансы на будущую покупку.
✅
Если товар скоро поступит
Если срок поступления товара известен и он появится скоро, кнопка корзины может играть роль в том, чтобы побудить клиента заказать этот товар заранее.
✅
Объединение с ценой
Некоторые участники рынка объединяют кнопку корзины с ценой товара в единый элемент. Смотрится достаточно неплохо, да и информативность не теряется.
✅
Понятность элементов в кнопке
Иногда в кнопке можно встретить элементы, которые будут понятны далеко не всем. У одной части клиентов это может вызвать интерес. У другой — лишь вопросы и ступор.
?
Реакция на касание
Добавив в кнопку корзины реакцию на касание, вы делаете интерфейс чуть более отзывчивым.
✅
Добавление моментальное
Сделайте реакцию на нажатие кнопки моментальной: товар должен добавляться в корзину без каких-либо задержек.
❌
Выделение кнопки vs. карточки
При добавлении товара в корзину кнопку корзины принято видоизменять. Но что вы скажете по поводу выделения целой карточки? Хорошо или не очень? Напишите в комментах.
?
Активность после добавления
Лучше воздержаться от перевода кнопки в неактивное состояние после добавления товара в корзину. Есть разные варианты обновления её функционала (о них далее).
❌
Добавление нескольких единиц
Особенно в случае с food-ритейлом, предусмотрите возможность добавления через карточку листинга сразу нескольких единиц товара.
✅
Изменение вида кнопки
Если добавление нескольких единиц товара предусмотрено, видоизменяйте кнопку корзины при добавлении первой единицы, давая клиенту понять: можно добавить и больше.
❌
Анимация изменения кнопки
Некоторые компании добавляют в изменение состояния кнопки корзины анимацию, делая реакцию интерфейса более плавной.
✅
Выбор числа кнопками
Базовый и наиболее часто используемый вариант изменения количества единиц — кнопки «плюс» и «минус».
✅
Выбор числа барабаном
Однако для сценариев с выбором большого числа единиц (например, корм для кота на месяц) лучше предусмотреть более гуманную альтернативу — барабан.
✅
Выбор числа текстовым вводом
В качестве замены или дополнения к барабану также можно предусмотреть и текстовый ввод. Плюс не забываем о фиксации раскладки клавиатуры на числовом вводе.
✅
Динамическое изменение стоимости
При добавлении нескольких единиц товара, помимо цены за штуку, также можно отображать и общую стоимость.
✅
Указание единиц измерения
Добавляя несколько единиц весовых продуктов, не забудьте указывать и единицы измерения, чтобы клиент не путался между числом пачек товара и общим весом.
❌
Highlight кванта продажи?
Иногда при изменении числа единиц в явной форме также подсвечивается и шаг, с которым можно это делать. Что думаете по этому поводу? Напишите в комментах.
?
Не больше, чем на складе
Чтобы грамотно управлять ожиданиями клиента, важно предусмотреть ограничение по количеству добавленных единиц: оно должно быть не больше, чем есть на складе.
✅
Возможность снизить число до нуля
Если клиент уже добавил товар в корзину и предусмотрено изменение числа единиц, дайте ему возможность сократить его до нуля, чтобы удалить товар из корзины.
✅
Снижение до нуля без усложнений
Нажимая на «минус», если в корзине 1 единица товара, клиент отдаёт себе отчет в том, что убирает его. Не заставляйте его лишний раз подтверждать своё намерение.
❌
Когда уточнять число единиц?
Иногда о том, сколько единиц товара клиент хочет купить, спрашивают ещё до добавления в корзину. Нестандартно. Что думаете по этому поводу? Напишите в комментах.
?
Без чрезмерной анимации
Если вы решили использовать анимацию при добавлении товара в корзину, сделайте её изящной и ненавязчивой.
❌
Переход в корзину после добавления
В некоторых случаях повторное нажатие на кнопку также может вести клиента в корзину. Но важно понимать, что это снижает шансы на дальнейшее ознакомление с каталогом.
✅
Выбор варианта при нажатии
Если требуется выбрать вариант товара (например, размер), об этом можно спросить сразу при нажатии на кнопку корзины.
✅
Кнопка избранного
Добавлена
Если клиенту понравился товар, дайте ему возможность добавить его прямо из листинга, без необходимости переходить в полную карточку.
✅
Визуально привычна
Визуализация избранного — уже устойчивый и сложившийся паттерн: большинство клиентов ожидают увидеть в карточке кнопку в виде сердечка, либо закладки.
❌
Привычно расположена
Не изобретайте колесо: расположите кнопку избранного там, где её можно найти в большинстве e-com приложений — в правом верхнем углу карточек листинга.
✅
Хорошо заметна
Особенно если кнопка избранного размещена поверх фото товара, убедитесь, что она будет хорошо заметна на фоне как в активном, так и в неактивном состояниях.
❌
Активное vs. неактивное состояние
Подберите иконки неактивного состояния так, чтобы клиент понимал, что товар ещё не в избранном. Закрашенная и контрастная иконка может ввести в заблуждение.
❌
Кликабельная область
Кнопка избранного чаще всего небольшая, но клиенту должно быть удобно на неё нажать. Поэтому активную область можно слегка расширить за её пределы.
❌
Добавление без авторизации
Как и в случае с кнопкой корзины, не ставьте на пути клиента барьеры в виде обязательной авторизации при попытке добавить товар в избранное.
❌
Возврат из запроса в 1 касание
Даже если вы требуете авторизоваться, чтобы добавить товар в избранное, хотя бы дайте клиенту вернуться к листингу в 1 касание.
❌
Призыв без блокировки экрана
Вместо того чтобы блокировать запросом весь экран, можно поступить более элегантно: показать небольшое, но заметное сообщение с призывом авторизоваться.
✅
Добавление без лишних действий
Спрашивать про размер при добавлении в избранное может быть излишне. По тем товарам, которые не дойдут оттуда до покупки, это будет бесполезная работа.
❌
Анимация добавления
Добавление и удаление из избранного можно реализовать с помощью анимации. Такое микровзаимодействие сделает опыт использования приложения чуть более приятным.
✅
Цикличная анимация?
Некоторые идут дальше и делают анимацию кнопки в активном состоянии зацикленной. Как вам такое? Красота или кто-то переборщил? Напишите в комментах.
?
Haptic Feedback
Добавление в избранное также можно сопровождать слабой вибрацией. Записью экрана это не передать, но в примере вибрация похожа на биение сердца. Неплохо придумано.
✅
Реакция системы моментальна
При нажатии на кнопку избранного другие объекты на экране должны обновляться моментально, без какой-либо задержки.
❌
Без блокировки экрана
При нажатии на кнопку не стоит блокировать весь экран. Лучше, если все процессы, связанные с добавлением в избранное, будут проходить в фоновом режиме.
❌
Добавление в подборки
При добавлении в избранное предложение включить товар в подборку иногда размещается прямо в карточке, недалеко от самой кнопки.
✅
Быстрое добавление в списки
Встречается также и функция добавления в списки наряду с кнопкой избранного. Удобно или просто дублирование схожих функций? Напишите в комментах.
?
Счетчик лайков
Иногда на основе добавления в избранное по товару также отображается счетчик лайков, играющий роль своего рода социального доказательства.
✅
Реакция карточки на касание
Реализована
Добавив карточкам товаров в листинге реакцию на касание, мы делаем интерфейс чуть более отзывчивым.
✅
Вдавливание
Одна из наиболее ожидаемых реакций — когда карточка немного «вдавливается» в экран, отвечая на нажатие со стороны пользователя.
✅
Вдавливание и затемнение
Анимацию вдавливания карточки в экран некоторые компании дополняют незначительным затемнением. Смотрится также неплохо.
✅
Не выцветание
Выцветание карточки при нажатии хоть и дает визуальную реакцию, но всё же может быть воспринято, как неактивное состояние. От такого лучше воздержаться.
❌
Прочие интересные фичи
Здесь я собрал наблюдения, по которым не набралось целого блока пунктов. Но обойти их стороной я просто не могу. Раздел этот, как и все остальные, со временем будет пополняться.
Количество товара в наличии
Если есть такая техническая возможность, в карточках можно подсвечивать количество товаров, доступных для заказа. Это позволит лучше управлять ожиданиями клиента.
✅
Сравнение товаров
Часто из карточек товары напрямую можно добавлять в сравнение. Поведение кнопки очень схоже с избранным, поэтому целый блок пунктов не дублирую.
✅
Поиск похожих товаров
Ряд компаний в e-commerce уже натренировали нейросети подыскивать для клиента визуально похожие товары и выводят эту функцию в карточки листинга.
✅
Дополненная реальность
Некоторые компании используют дополненную реальность, чтобы, например, примерить мебель в интерьере или одежду прямо на себе.
✅
Контекстные меню
Встречаются кейсы, когда кнопки действий прячутся в контекстные меню, появляющиеся при зажатии карточки. Главное — не забыть добавить соответствующую подсказку.
✅
To be continued…
Надеюсь, этой статьёй мне удалось немного прокачать вашу насмотренность? Если да, то дайте знать в комментах. Если нет — жду фидбэка там же.
Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую русскоязычную базу знаний по UX/UI в e-commerce.
Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если хотите их не пропускать. На связи.
Обсуждение
Похожее
9 UX-правил для создания удобного слайдера на главной странице
Тёмные паттерны: интерфейсы, предназначенные для обмана
Использование Auto Layout компонентов в Figma