Мы часто сталкивается с листингом товаров, совершая покупки онлайн. И от того, как спроектированы карточки товаров, зависит, купим мы их или нет. Как сделать карточки информативными, функциональными и привлекающими внимание, чтобы обеспечить лучший клиентский опыт? Обсудим 173 гайдлайна в этой статье.
Помимо позитивных референсов, в статье будет и много негативных примеров – того, как делать не стоит. Ни в коем случае здесь я не ставлю целью выставить напоказ чьи-то недостатки. Подсвечивание ошибки одного может помочь избежать ее многим. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим материалом с друзьями и коллегами по цеху.
Это один из 20+ чек-листов по UX/UI в e-commerce. К середине декабря 2022г все они будут доступны в моем профиле на Habr.
Структура статьи
В этой статье мы разобьем карточки товаров на составные части и обсудим каждую из них в деталях:
1. Общие моменты
Карточки выделяются на фоне
За счет незначительной тени, разницы в цветах фона и заливки, слабо заметных разделительных линий, обрезания фото по форме карточки и т.д.
Без пустых областей
Спроектируйте верстку карточек таким образом, чтобы в ней отсутствовали неоправданные пустые блоки, которые лишь занимают место.
Не перегружены
В карточках листинга отображайте только ключевую информацию, чтобы визуально не перегрузить интерфейс. Для деталей есть страница товара.
Реагируют на наведение курсора
Появлением незначительной тени, рамки, незначительным изменением фона, анимированным увеличением фото или изменением изображения.
Смотреть пример
Не выцветают при наведении
Выцветание карточки при наведении может создать у клиента ощущение, что она не активна или товара нет в наличии.
Смотреть пример
Детали при наведении
Часть контента карточек можно отображать только при наведении, чтобы дать клиенту требуемую информацию и функции, но при этом не перегружать общий интерфейс.
Кликабельна вся область карточки
В карточках не должно быть некликабельных областей. Клик должен приводить либо к выполнению целевого действия, либо к переходу на страницу товара.
Смотреть пример
2. Фотографии товара
Добавлены по всем товарам
Базовый момент: все карточки должны быть снабжены изображениями товаров, чтобы улучшить восприятие информации.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/eed/8e3/57f/eed8e357f7f1fabb53eeb3193d9d2be0.png)
Единообразны по дизайну
Если фото товаров сделаны с разных ракурсов, на разном фоне и это не дизайнерский замысел, это может создать впечатление о том, что все сделано в формате «тяп-ляп».
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/631/3f8/1e5/6313f81e5a8e58af0652eceb8718fd86.webp)
Вписываются в рамку
Изображения товаров не должны заметно обрезаться рамкой карточки или, наоборот, быть меньше рамки.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/ce5/519/092/ce55190924b95e41601057d41a955f0d.webp)
В хорошем качестве
Если фото товаров загружены в плохом качестве, размываются и пикселят, это может вызвать отторжение у клиента.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/418/1ec/3f5/4181ec3f58cc8e521143d51b463ec175.webp)
Соответствуют реальности
Мало что может быть хуже, чем сначала сформировать у клиента ожидания от продукта, а затем доставить товар, отличающийся по внешнему виду.
Без водяных знаков
Воздержитесь от использования водяных знаков, либо, как минимум, не перекрывайте ими ключевой контент изображения.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/c77/b0c/d61/c77b0cd614bc5b21fafeb1c49500c006.webp)
Подгружаются заранее
Избегайте случаев, когда клиент, прокручивая экран, вынужден ждать, пока загрузятся фото в карточках. Как вариант, их можно подгружать заранее, еще до прокрутки.
Анимация в случае загрузки
Если фото все же не успевают загрузиться при прокрутке листинга до карточки товара, реализуйте анимацию, чтобы сгладить процесс ожидания загрузки.
Реагируют на наведение курсора
Чтобы карточка была более вовлекающей, фото можно сделать интерактивным так, чтобы при наведении курсора оно незначительно приближалось.
Смотреть пример
Слайдер
При перемещении курсора
В некоторых случаях фото переключаются при перемещении курсора по карточке. Такая механика делает карточку более интерактивной и вовлекающей.
Смотреть пример
При нажатии на кнопки
Некоторые игроки делают слайдер менее навязчивым и добавляют в карточки кнопки, при нажатии на которые клиент может просмотреть другие фото.
Смотреть пример
Автоматический
Автоматический слайдер не требует от клиента никаких действий. Активацию лучше сделать с задержкой, чтобы он не срабатывал, при перемещении курсора по экрану.
Смотреть пример
Page control
Чтобы лучше управлять ожиданиями клиента в отношении количества фото в карточке, используйте элемент page control.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/522/a96/953/522a9695353dfccc2f0c85f3c11f61c9.webp)
Типы фото
В слайдере отображайте как продукт сам по себе (без лишних деталей), так и в контексте использования. Также подсвечивайте ключевые особенности крупным планом.
Динамический контент
Контент слайдера может быть динамическим и подстраиваться под запрос, который привел клиента в листинг, тем самым повышая релевантность.
Порядок фото vs. тип товара
В Fashion-индустрии порядок фото часто может зависеть от типа товара, чтобы лучше донести ценностное предложение и вовлечь клиента.
Видео в слайдере
Некоторые участники рынка также добавляют в слайдер видео, чтобы лучше погрузить клиента в детали товара.
Смотреть пример
Без задержек в загрузке
Как и при прокрутке листинга, важно, чтобы фото в слайдере были доступны в момент, когда клиент прокручивает его, и ему не приходилось ждать.
Placeholder
Нестандартный
Выполните placeholder так, чтобы он согласовался с дизайном сайта, был его частью, передавал какую-либо идею, а не просто констатировал, что изображения нет.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/aca/f2d/b3f/acaf2db3f17686918f40969888d80a37.webp)
Соответствует типу товара
Можно пойти дальше и для каждой из категорий товаров разработать свои placeholder'ы. Это облегчит восприятие информации в карточке.
Визуально второстепенный
Placeholder должен быть визуально второстепенным относительно любых фото товаров, чтобы не отвлекать внимание клиента.
3. Цена товара
Выделяется на фоне карточки
Цена должна хорошо выделяться в рамках карточки. Этого можно достичь за счет работы с размером, жирностью и цветом шрифта.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/0c2/14a/257/0c214a2578a59ec1c657b2eac0e604d2.webp)
Отступы между порядками
Тысячи и миллионы в значениях стоимости можно отделать с помощью отступов для облегчения восприятия информации клиентом.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/c09/a81/4c3/c09a814c3483842ba4504c6858e29011.webp)
Крупные суммы без копеек
Особенно в случае с крупными суммами по возможности не стоит указывать копейки: ценности в этой информации мало, зато интерфейс ей можно перегрузить.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/f74/5c9/b0b/f745c9b0b3270d09b02da29121c2710a.webp)
Не дублируется
Дублировать цену – да еще и в маленькой карточке товара – смысла нет. Но, видимо, не все согласны с этим утверждением.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/ff3/df3/2c1/ff3df32c1763ddfe9bfd4c1ae36802b8.webp)
Без чрезмерных пояснений
Если в листинге представлены штучные товары, не стоит в явной форме указывать, что цена именно «за штуку» – клиенту и без этого текста будет все понятно.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/a4c/d51/7f5/a4cd517f5d999c1cecb10fef61044286.webp)
Расположение
Привычно
В большинстве карточек при отображении товаров в листинге плиткой это нижняя левая или центральная часть карточки.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/c1e/369/a28/c1e369a28ed0172aaceedd858ef5110a.webp)
В кнопке покупки
В качестве альтернативы, некоторые сервисы достаточно органично размещают цену внутри кнопки покупки.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/8e0/c2e/224/8e0c2e2246e85feb11fa986e4f2ef182.webp)
Валюта
Указана символом
Вместо указания руб. можно использовать широко распространенный и уже ставший привычным символ ₽. Это позволит визуально разгрузить интерфейс.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/9da/716/05e/9da71605ee959319a8fd1eea63280e04.webp)
Указана с отступом
Валюта не должна прилипать к тексту суммы. Добавьте после суммы отступ, чтобы информация визуально легче считывалась.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/26e/18a/c15/26e18ac159762d94cbad5ff41dbf0009.webp)
Вторична относительно цены
Валюта – вторичный элемент интерфейса по сравнению с ценой. Подчеркните это визуально. И уж точно не делайте валюту более заметной, чем цена.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/a5d/e39/39e/a5de3939e52716193f9e0e325a269d7f.webp)
Скидки
Механика скидок применяется
Если вы применяете скидку, дайте клиенту понять, какова будет выгода клиента, отобразив ее. Иначе выделение цены лишь вызовет дополнительные вопросы.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/cfa/73c/e52/cfa73ce52c5c8c672655c26ccac6be37.png)
Старая цена визуально вторична
Текст старой цены не должен оттягивать на себя внимание: фокус должен оставаться именно на новой цене. Выцветание и более мелкий шрифт помогут решить задачу.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/6f3/b43/8be/6f3b438be24b73c68c7ec38e3288662b.png)
Старая цена заметна
При этом можно и перестараться. Если старая цена слишком мелкая и выцветшая, клиенту тяжело будет ее считать, и разница в ценах станет не очевидной.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/f3b/316/ca1/f3b316ca10cebe5b87e18fb67a2dfd3e.webp)
Старая цена перечеркнута
Улучшите уровень восприятия старой цены, перечеркнув ее и легче давая понять, что она не актуальна.
Старая цена без пояснения
Если цена уже визуально вторична и перечеркнута, отдельный текст, о том, что это именно «Старая цена», будет излишним и перегрузит интерфейс.
Старая цена рядом с новой
Не стоит визуально разводить старую и новую цены. Они должны читаться, как единая визуальная группа элементов.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/bd9/f1b/4fb/bd9f1b4fb9d967e5a346a2e0034b7f7d.png)
% скидка в виде маркера
Сделайте процентную скидку более заметной, поместив ее в яркий, выделяющийся на фоне карточки маркер, привлекающий внимание клиента.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/332/8c5/1b5/3328c51b52fd9a91ef75c48328cb1ac3.webp)
% скидка равна разнице цен
Если % скидка применяется вместе с элементами старой и новой цен, убедитесь, что расчеты корректны, и процент скидки в точности соответствует разнице цен.
Скидка в рублях для крупных сумм
Как вариант, может использоваться маркер абсолютной скидки. Его можно применять, если абсолютная сумма скидки достаточно внушительная.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/8fe/60c/eb6/8fe60ceb65b277356a426bf19efc0f76.webp)
Элемент срочности
Чтобы дополнительно побудить клиента воспользоваться скидкой, можно указать срок ее действия: количество дней или дату ее окончания.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/b86/cec/8c2/b86cec8c2ef597fe43259fb9e27521b6.webp)
Отсутствие отдельно не поясняется
Если вы предлагаете товар без скидки, смысла в том, чтобы указывать это в явной форме, нет. Это может лишь негативно сказаться на желании приобрести товар.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/d77/3ac/44a/d773ac44a83d1bd0897cfd792b319b67.webp)
Цена по карте клиента
Если цены по карте лояльности отличаются от стандартных, отображайте их визуально первичными, чтобы привлечь внимание клиента.
Ссылка на оформление карты
Снабдите цену по карте ссылкой на лендинг программы лояльности с возможностью регистрации. Иначе более низкая, но недоступная цена может отпугнуть клиента.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/e6e/4ad/030/e6e4ad030bccfe30f6e287e79352933a.webp)
4. Кнопка корзины
Кнопка предусмотрена
Базовый момент: кроме редких случаев, у клиента должна быть возможность добавить товар в корзину без необходимости перехода на его страницу.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/a5b/ded/e76/a5bdede76ee0cb561f25e7ea0e95f634.webp)
Видимость кнопки
Кнопка может быть видна всегда, но если элементов много, ее можно отображать лишь при наведении, чтобы визуально не перегружать интерфейс.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/7e8/bae/c0f/7e8baec0fe635ce633b1122371d47419.webp)
Размер кнопки
Сделайте кнопку достаточно большого размера, чтобы на нее легче было нажать, особенно на мобильных устройствах.
Хорошо выделяется
Кнопка должна быть одним из наиболее заметных элементов карточки. Сделать это можно за счет использования контрастной заливки.
Аффорданс
По-хорошему, кнопка добавление в корзину должна выглядеть, именно как кнопка, а не ссылка, текст или что-либо другое. Креативность в данном случае может навредить.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/351/538/71d/35153871dc76066ac836b0427ba78b92.png)
Расположение единообразно
Спроектируйте верстку карточек таким образом, чтобы кнопка не «скакала» от товара к товару. В противном случае смотреться это будет не лучшим образом.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/b4c/efd/49d/b4cefd49d8b8b5c63b1e39e389cda8e9.webp)
Не дублируется
Размещайте в карточках только одну кнопку добавления в корзину. В противном случае это может размыть фокус внимания клиента.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/3ee/2c5/494/3ee2c5494fa9f2d89d0b54414e53b457.webp)
Иконка
Понятна
Не стоит изобретать колесо и придумывать нестандартные версии иконки. Чем проще и понятнее, тем лучше. Иконка корзины или плюса для этого хорошо подойдет.
Минималистична
Выбирайте лаконичные иконки. При помещении в кнопку иконка будет достаточно маленькой, и большое количество деталей лишь ухудшит ее восприятие.
Контрастна
Сделайте иконку контрастной по отношению к заливке кнопки так, чтобы она легче считывалась и воспринималась.
В хорошем качестве
Иконка должна быть загружена в хорошем качестве и не должна пикселить и размываться. В идеале лучше использовать векторное изображение.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/80e/fe4/3ab/80efe43abe012728c2a5d550265caae0.png)
Текст кнопки
Добавлен на кнопку
В некоторых случаях кнопка также может содержать текст, облегчающий восприятие ее целевой функции.
Контрастный и легко читаемый
Используйте легко читаемый контрастный шрифт, достаточно большого размера. Шрифт кнопки должен из того же семейства, что и остальные тексты на сайте.
Целевое действие
Сделайте так, чтобы текст кнопки отталкивался от целевого действия клиента: «Купить», «В корзину» и т.д.
Центрирован
Текст кнопки в большинстве случаев должен располагаться по центру и не должен прилипать к ее границам.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/b60/01e/482/b6001e48256c964295da05a3726d7bfa.png)
Рекция на наведение курсора
Изменяет вид
Кнопка должна давать визуальную обратную связь и изменять свой вид при наведении курсора: например, изменять цвет заливки или образовывать тень.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/efc/61a/e4a/efc61ae4aa0113c067c60d11ab48d699.png)
Визуально усиливает фокус
Изменение вида кнопки должно побуждать клиента к целевому действию. Выцветание или осветление кнопки может привести к обратному результату.
Смотреть пример
Контекстная подсказка
Если кнопка содержит в себе лишь иконку, контекстная подсказка с пояснением при наведении на нее курсора лишней не будет.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/4b3/8ee/2e4/4b38ee2e4bd29200597cc0b23c063c4c.webp)
Реакция на клик
Реакция моментальная
При нажатии на кнопку товар должен добавляться в корзину без каких-либо заметных задержек со стороны сайта.
Обновление подытога
При клике на кнопку добавления в корзину иконка корзины и сумма подытога также должны своевременно обновляться.
Подтверждение действия
Сама кнопка должна давать визуальную обратную связь, подтверждая, что товар добавлен. Например, за счет изменения текста, цвета заливки или иконки.
Анимация
Нажатие на кнопку может быть анимировано: при клике она может уменьшаться в размерах и слегка менять цвет, как бы вдавливаясь в экран.
Без чрезмерной анимации
По возможности постарайтесь обойтись микро-анимацией. Анимация товара, медленно улетающего в корзину, может выглядеть неуместно.
Смотреть пример
Сообщение с подтверждением
Чтобы улучшить восприятие подтверждения действия, дополните реакцию элемента в карточке появлением всплывающего сообщения о том, что товар добавлен.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/b8c/71d/591/b8c71d5917df2f11447d28d40e7ac2a9.webp)
Выделение карточки
При добавлении товара в корзину иногда используется выделение всей карточки. Нестандартно, но отличить в листинге добавленные товары гораздо легче.
Добавление без авторизации
Запрос авторизации сразу при добавлении товара в корзину может быть воспринят, как неудобство, и снизить вероятность совершения покупки.
Без перехода на страницу товара
Кнопка должна выполнять целевую функцию – добавление в корзину. Первый клик по кнопке не должен уводить клиента со страницы листинга.
Смотреть пример
Переход (?) в корзину
Будьте осторожны со сменой функции кнопки. Если при повторном клике она ведет клиента в корзину, а он хотел выбрать другие товары, это может затруднить выбор.
Купить (?) в 1 клик
Также отнеситесь с осторожностью к покупке в 1 клик. С одной стороны, это упрощает путь клиента, с другой – упускаются возможности допродажи.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/0c9/c26/38a/0c9c2638a9bf01ce4ee1dbd0d8ee3edf.png)
Изменение числа товаров
Изменение числа единиц товара
Если ваша сфера предполагает покупку нескольких товаров, кнопка корзины при клике должна превращаться в элемент изменения числа единиц товара.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/9e7/6e1/744/9e76e17447b34546eaaa2e151d328516.webp)
Расположение и размер
Элемент должен размещаться там же и быть того же размера, что и кнопка добавления в корзину, чтобы клиенту не приходилось значительно передвигать куда-либо курсор.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/f96/e1d/2a0/f96e1d2a010f4c6ff22ecea7154f271a.gif)
Формат изменения
У клиента должна быть возможность изменить число единиц товара как через кнопки + и –, так и с помощью ввода текста (если требуется много единиц).
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/91b/660/a2d/91b660a2dd7c759844367b53fdd3c947.webp)
Не больше, чем есть на складе
Чтобы более корректно управлять ожиданиями клиента, предусмотрите, чтобы нельзя было добавить в корзину больше единиц, чем есть на складе.
Удаление из корзины
Если клиент хочет удалить товар, дайте ему возможность сделать это прямо в карточке. В противном случае он все равно его удалит, но при этом еще и испытает неудобство.
5. Название товара
Информативно
Базовый момент. Из названия товара в карточке должно быть четко понятно, что это за товар и в чем его специфика.
Текст не обрезается
Название товара должно быть видно полностью в рамках его карточки в листинге и не должно обрезаться.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/b40/486/2c0/b404862c0d22fb2560e5e3e2d5759496.webp)
Подсказка, если текст обрезается
Если название все же обрезается, продублируйте его в контекстной подсказке, чтобы клиент мог прочитать его без необходимости перехода на страницу.
Выцветание, если текст обрезается
В качестве альтернативы 3 точкам можно реализовать обрезание текста менее стандартно и более визуально приятно – с помощью выцветания текста.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/2b4/7b8/921/2b47b8921d1a8fe3c8b5866655838c80.png)
Без артикула и характеристик
Не стоит добавлять артикул или несколько характеристик в название товара: либо вынесите их в отдельные визуально вторичные поля, либо вообще не отображайте.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/b4e/704/6f8/b4e7046f80553afffdd155503302ace1.webp)
Реагирует на наведение курсора
Сделайте название товара интерактивным так, чтобы оно реагировало на наведение курсора и давало визуальную обратную связь: меняло цвет или подчеркивалось.
Пояснение визуально вторично
Иногда к названию товара добавляют пояснение. В таком случае пояснение делается визуально вторичным, чтобы не оттягивать на себя внимание клиента.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/ea5/890/654/ea5890654d225ba6f716fe7a7b4b9845.webp)
Пояснение не излишне
Если какие-то детали товара указаны в пояснении и названии, пояснение не имеет смысла. В таком случае можно указать детали в пояснении и убрать их из названия.
6. Избранное и сравнение
Вид и расположение
Функционал доступен
Если товаров достаточно много, дайте клиенту возможность добавить их в избранное или сравнение прямо из карточек в листинге, чтобы упростить процесс выбора.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/c47/b2e/89d/c47b2e89d816fbd72e851c72cd95c69e.webp)
Появляется при наведении
Если добавление в избранное или сравнение вторичны, можно отображать их только при наведении курсора на карточку, чтобы визуально разгрузить интерфейс.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/6ca/e51/db1/6cae51db18516872a55aa7025eed848e.webp)
Иконка привычна
Реализуйте действия с помощью иконок, привычных для большинства клиентов. Например, для избранного это сердечко или закладка.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/a00/4f1/868/a004f1868c98090a8147993786d652a4.png)
Иконка визуально вторична
Сделайте неактивную иконку визуально вторичной, чтобы не смещать фокус внимания клиента с изображения, цены и кнопки добавления в корзину.
Расположение привычно
Не заставляйте клиента искать элементы: расположите их там, где они размещены на большинстве других сайтов – в правой верхней части карточек.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/08d/c89/6a7/08dc896a76792296e3afa655aaf35b27.webp)
Реакция на наведение
Изменение вида
При наведении курсора иконка должна реагировать и изменять свой вид: например, может меняться цвет обводки или появляться промежуточная заливка.
Анимация изменений
Изменение вида иконки можно снабдить микро-анимацией, делающей взаимодействие с ней более вовлекающим и приятным глазу.
Закольцованная анимация
Некоторые компании идут еще дальше и делают анимацию иконки повторяющейся до тех пор, пока клиент не отведет от нее курсор – или не совершит целевое действие.
Смотреть пример
Контекстная подсказка
Если клиенту не понятна функция кнопки, предусмотрите контекстную подсказку, которая отталкивалась бы от целевого действия клиента.
Реакция на нажатие
Изменение иконки
При клике иконка должна изменять внешний вид. Чаще всего осуществляется за счет добавления заливки и изменения ее цвета на более яркий.
Изменение хорошо заметно
Если иконка изменяется лишь слегка, это может вызвать у клиента недопонимание и побудить нажать на нее повторно, тем самым убирая товар из избранного/сравнения.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/281/b8d/737/281b8d737e6d1beefdbca58b06c2d5a6.webp)
Анимация изменений
Изменение элемента при клике с помощью ненавязчивой анимации позволит сделать взаимодействие более вовлекающим и приятным глазу.
Сообщение с подтверждением
Чтобы улучшить восприятие подтверждения действия, дополните реакцию элемента в карточке появлением всплывающего сообщения о том, что товар добавлен.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/ae7/0b4/3f7/ae70b43f7515c10e85637a6c89a311ea.webp)
Изменение в шапке
Помимо сообщения также должен обновляться и элемент избранного / сравнения в шапке: чаще всего бейдж со счетчиком изменяется на 1.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/d86/6ed/cb4/d866edcb4c20b3c54301d4ea10611210.webp)
Реакция моментальна
Исключите задержки в реакции интерфейса на клик по элементу, чтобы не вызывать у клиента раздражение (особенно если ему нужно добавить несколько товаров).
Без авторизации
Предоставьте клиенту возможность добавления товаров без авторизации. Иначе он просто не воспользуется функцией, а процесс выбора будет затруднен.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/353/b15/7f1/353b157f152b04a288e8e040d21d17e5.webp)
7. Маркеры
Используются
Чтобы повысить заметность карточки того или иного товара в листинге и сделать ее более информативной.
Хорошо заметны
Незаметные маркеры большой пользы не принесут, поэтому выбираем более яркие и контрастные по отношению к фону цвета их заливки.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/e3f/1e8/22c/e3f1e822c66bd8b96be20a563496a936.webp)
Минимум текста
Если в маркерах разместить большой текст, они начнут выглядеть неуклюже, и это может перегрузить общий интерфейс.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/3fa/661/29f/3fa66129f0c66db5fb007caab4347318.webp)
Текст не обрезается
Текст должен помещаться в маркер и не обрезаться. Базовый момент? Базовый. Но не все его учитывают.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/d72/8fa/37f/d728fa37f4d11901c7a7f39f1118a7fe.png)
Понятные иконки
Чтобы разгрузить интерфейс, вместо текста можно использовать понятные для нового клиента иконки, которые легко доносили бы смысл акции или особенности товара.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/447/766/307/44776630745ed7b9cb8ad4e11c45ffa0.webp)
В хорошем качестве
Если в качестве маркеров используются изображения, убедитесь, что они загружены в хорошем качестве, не размываются и не пикселят.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/fda/9f9/98e/fda9f998ed9046bd493692fd32973627.webp)
Online vs. offline
Если у вас есть offline магазины, унифицируйте маркеры акций и особенностей в торговых залах и в интернет-магазине, чтобы они легче воспринимались.
Один тип – один маркер
Если по одному и тому же поводу в карточках используются несколько маркеров, это может вызвать у клиента ненужные вопросы.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/2a8/359/903/2a8359903d1e8d79ff0e82c8b58d4784.webp)
Текст легко читаемый
Если используете текст на маркере, он должен быть контрастным, не должен мельчить, а шрифт должен быть легким для восприятия.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/3c4/d45/1ec/3c4d451ec8fc38d8173df53415bd0670.webp)
Шрифт соответствует сайту
По-хорошему, шрифт на маркере должен быть из того же семейства, что и основной шрифт сайта. Иначе смотреться все это может не идеально.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/c92/7e0/665/c927e0665f4cd9f83eb26c541a2b812a.webp)
Не дублируются
Убедитесь в том, что усилия тех, кто отвечает за фото-контент, и тех, кто ответственен за маркеры, синхронизированы. Два раза писать об одном и том же смысла нет.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/cca/a65/664/ccaa65664e937e918a13a782fe9954f2.webp)
Не перекрывают контент
Даже если маркеры в карточке размещаются поверх изображений, делайте так, чтобы они не перекрывали собой какой-либо важный контент на фото.
Пользовательские маркеры
Вы также можете упростить выбор товаров, дав клиенту самому выбрать, что подсвечивать в ваших товарах. Например, конкретные ингредиенты.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/e68/74d/666/e6874d6661c1930865a8d661415fa44d.webp)
Контекстная подсказка
Дает пояснение
Используйте контекстную подсказку, доступную при наведении курсора, чтобы пояснить суть акции или особенность товара.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/d7c/7e5/da2/d7c7e5da2dbc1ff6f77df6ad0600a829.png)
Не дублирует текст маркера
Если с помощью текста в маркере вы уже донесли до клиента всю суть акции или особенности, нет смысла дублировать эту информацию в подсказке.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/a1d/b06/5d0/a1db065d06136973b00b481451ecce8e.webp)
В дизайне сайта
Подсказка – это, хоть и маленькая, но тоже часть вашего интернет-магазина. Поэтому хорошо, если она будет соответствовать сайту по дизайну.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/835/df8/082/835df8082aa365f56a2eb283fcae4c98.webp)
Отображение
Функция используется
Настройте сбор обратной связи по товарам и используйте ее в качестве социального доказательства, чтобы повысить доверие клиента и побудить его к покупке.
Рейтинг скрыт, если нет оценок
Отсутствие оценок само по себе нейтрально – товар может быть новым. Но явно подсвечивать это не стоит, чтобы не вызвать ощущения «покупки кота в мешке».
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/2a4/9b8/3b5/2a49b83b5b28cf907fc413b73f77e8a0.webp)
Внешний вид элемента
Иконки привычны
Для отображения рейтинга используйте наиболее привычные и распространенные форматы 5 звезд или 1 звезды с подписью оценки. Для отзывов – иконку сообщения.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/46c/cad/4cb/46ccad4cb064a0282fd163985d5ebe69.webp)
Иконки в хорошем качестве
Убедитесь, что для иконок используется векторная графика или они загружены в хорошем качестве. Базовый момент? Да. Все его соблюдают? Нет.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/d86/0e8/cc9/d860e8cc9675274858499fd909d43f7f.webp)
Точность заливки звезд
Если используется формат 5 звезд, сделайте визуальное отображение более точным: в случае не целых оценок закрашивайте соответствующую часть звезды.
Контекстная подсказка
В качестве альтернативы пояснения по рейтингу и отзывам можно вынести в качестве контекстной подсказки при наведении на элементы.
Лайки вместо рейтинга
Некоторые адаптируют механики соц.сетей и рейтинг заменяют лайками. Задумка интересная, но главное обыграть это так, чтобы клиент не спутал их с избранным.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/4a4/5ab/ea1/4a45abea1004f855a1c52abd46b17b30.webp)
Функциональность
Элемент кликабельный
Если клиент заинтересовался деталями рейтинга или отзывами, у него должна быть возможность перехода к ним из карточки в 1 клик.
Ведет к соответствующему блоку
При клике по элементу и переходе на страницу товара она должна прокручиваться до соответствующего блока, так чтобы клиенту не приходилось делать это вручную.
Нельзя оценить до покупки
Клиенту нельзя давать возможность оценить товар до того момента, как он его купит. Но не все придерживаются этого здравого принципа.
Смотреть пример
9. Варианты товара
Доступны в карточке
Если в листинге есть несколько вариантов товара, целесообразно давать ссылки на другие варианты прямо из карточки, чтобы упростить процесс выбора для клиента.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/120/4af/ebb/1204afebbfef3830a4be142d50cc73ac.webp)
Видны без наведения курсора
Это повышает вероятность того, что клиент узнает, что есть другой вариант товара, а не просто сочтет отображаемый вариант неподходящим и пролистает.
Только в наличии
Чтобы корректно управлять ожиданиями клиента, отображайте только те варианты товара, которые доступны для покупки.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/a8e/c9e/e4b/a8ec9ee4bd7a08cd31b01e2cac7f5fae.png)
Видны без прокрутки
Реализуйте верстку карточек таким образом, чтобы варианты товара полностью вписывались в область карточки, и ее не приходилось прокручивать.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/5d7/c0f/a8f/5d7c0fa8f19e456f3a5f2fcb8655949d.webp)
Общее число вариантов
Если варианты не помещаются в карточку, выведите часть их в карточке и укажите общее число вариантов (со ссылкой на страницу продукта для дальнейшего ознакомления).
Миниатюры по всем вариантам
Клиент не должен сталкиваться с alt-текстом вместо миниатюр вариантов. Неудобство в переключении затрудняет весь процесс выбора.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/22b/57d/5e9/22b57d5e9f2b9a2f31d37884f0199afd.webp)
Активный вариант выделяется
Выделите активный вариант на фоне остальных так, чтобы клиенту легче было понять, какая именно модификация товара отображается у него в карточке.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/26b/bb4/34e/26bbb434e6fcc87040f2bc6c7bf58a85.webp)
Без перечисления цен
Если размещать в карточке другие варианты с ценами и прочей информацией, это может сильно перегрузить ее интерфейс и снизить удобство взаимодействия.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/adc/70f/fd6/adc70ffd684f158d7377763196fdaffd.webp)
Реагируют на наведение курсора
Как и другие элементы, варианты должны давать визуальную обратную связь, изменяя вид при наведении курсора и давая понять, что по ним можно кликнуть.
Подсказки с названиями
Если варианты не подписаны и отображаются только в виде визуальных элементов, реализуйте текстовую подсказку с их названиями при наведении курсора.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/049/d4c/0b7/049d4c0b798b90277badfd6296653c0f.png)
Кликабельны
Сделайте варианты кликабельными, если отображаете их в карточке. В противном случае можно получить неоправданные ожидания по функционалу.
Смотреть пример
Переключение внутри карточки
Сделайте так, чтобы клиент мог переключаться между вариантами прямо внутри карточки без перехода на страницу товара – через клик или наведение.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/b38/4aa/6e8/b384aa6e8b74663ce70d420b64c17e84.gif)
Мгновенное обновление
При выборе другого варианта товара информация в карточке должна обновляться без каких-либо задержек.
Похожие товары
На Озоне через карточку можно ознакомиться не с вариантами, а с похожими товарами. Это повышает шансы на то, что клиент найдет нужный ему товар.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/cc5/d3e/9bf/cc5d3e9bf56e4d482cbbb94304981966.webp)
10. Начисляемые бонусы
Отображаются
Включите в карточку бонусы программы лояльности, начисляемые при покупке, чтобы сделать предложение более заманчивым, а саму карточку – более информативной.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/03c/c75/de1/03cc75de1dca21fcb8aa09a2962bb763.png)
В виде бейджа
Разместите начисляемые бонусы не в формате plain text, а в виде заметного бейджа, снабдив их количество иконкой для привлечения внимания.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/665/2b0/199/6652b01990fb67c12ec4cb49d3ae5b94.webp)
% от суммы покупки
Некоторые игроки не просто добавляют бонусы, но и то, какую часть от суммы покупки клиент получит обратно, чтобы подсветить привлекательность предложения.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/585/cf4/0a2/585cf40a22de7129fed97c4740ccbd07.webp)
Подсказка с пояснением
Не все клиенты – участники программы лояльности. Поэтому хорошей практикой будет добавить подсказку с пояснением при наведении курсора на количество баллов.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/f84/32f/f5b/f8432ff5b92ab27970c189e2af7797f7.webp)
Ссылка на программу лояльности
Новых клиентов можно познакомить с программой лояльности, добавив в подсказку ссылку на ее лендинг (открывать ссылку следует в новой вкладке).
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/a17/71a/813/a1771a8136073c8ad1ebe2fac48c6363.webp)
Размер подсказки ограничен
Не старайтесь внести в подсказку все условия программы, иначе это лишь затруднит восприятие и ухудшит опыт взаимодействия с карточкой.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/57b/e68/26b/57be6826b206d6ff7aeaf2d3e34ffb1b.webp)
11. Характеристики товара
Только ключевые характеристики
Нет смысла выносить все характеристики в карточку – для этого есть страница товара. Оставьте в карточке только ключевые моменты, позволяющие легче различать товары.
Контекстная подсказка
Если вам все же требуется сделать больше характеристик доступными в рамках карточек, часть характеристик можно вывести в контекстную подсказку.
Единообразны
Чтобы товары в категории было легче сравнить, убедитесь, что состав и порядок ключевых характеристик единообразен.
Названия vs. значения
Визуально отличайте названия от значений характеристик для облегчения восприятия информации (например, за счет частичного выцветания названий).
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/66f/a0c/1fd/66fa0c1fd5a6ec890089d948697fc778.png)
Не сплошным текстом
Отображайте характеристики в виде столбца, а не сплошным текстом. В противном случае они будут гораздо хуже считываться.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/14f/f26/31e/14ff2631e7248b0520810bad29a15f34.png)
В виде иконок
Если характеристик немного, вместо текста их можно отобразить в виде маркеров с релевантными иконками, а пояснения можно вынести в контекстную подсказку.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/1bc/f37/9ff/1bcf379ffaa51b2356345e16f52159b8.webp)
12. Количество товара
Товар в наличии
В виде визуальной иконки элемент может сделать карточки более заметными. Если это просто неприметный текст, легче будет просто выделять товары не в наличии.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/eeb/b99/bfa/eebb99bfa74d8e91f92feca5378b01da.webp)
Низкое количество
Данная маркировка позволит лучше управлять ожиданиями клиента и дополнительно побудит его своевременно добавить товар в корзину.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/50a/d32/0e4/50ad320e4a067ea4eb89209c0f17704a.webp)
Подписка на поступление
Если товар отсутствует, его можно отображать в листинге, но при этом предусмотрите функцию подписки на оповещения о его поступлении.
Смотреть пример
![❌ ❌](https://habrastorage.org/getpro/habr/upload_files/e84/28d/6a1/e8428d6a18fdcef24676757585a5e45f.webp)
13. Информация о доставке
Содержится в карточке
Размещение информации о сроках доставки в карточке повышает ее информативность и дает возможность ответить на вопросы клиента на более раннем шаге.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/860/9e8/bff/8609e8bff0d4649a940c191a614e3859.webp)
Скорость и сроки доставки
Если в интернет-магазине реализована возможность экспресс-доставки день-в-день, информация об этом может дополнительно побудить клиента к покупке.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/549/e18/dc2/549e18dc24c0eb4de70791d6e7d60e8b.webp)
Бесплатность услуги
Отсутствие стоимости доставки также может стать фактором, побуждающим клиента к покупке, поэтому информацию о бесплатной доставке можно включить в карточку.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/cfd/b78/4e5/cfdb784e568f3381d96a52506b387f40.webp)
В виде иконок
Вместо текста информацию о доставке можно представить в виде иконок. И интерфейс не перегрузится, и карточки будут более визуально привлекательны.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/723/795/09e/72379509e438953891c2c23a9c65bb58.png)
Контекстная подсказка
Если вы хотите подсветить какие-либо детали доставки, их можно вынести в подсказку, чтобы не перегружать интерфейс карточки.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/29c/583/bd4/29c583bd46ca2588c2261c47439d3fbb.webp)
14. Обзоры товаров
Видео обзор
Если по товару доступен видео обзор, информация об этом может выноситься в виде иконки в его карточку.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/dbe/4f3/c4c/dbe4f3c4cb1c234bab48d3facfb36555.webp)
Подробный обзор
Спортмастер по некоторым товарам делает подробный обзор преимуществ и размещает ссылку на него в карточках листинга, делая их заметнее.
Смотреть пример
![✅ ✅](https://habrastorage.org/getpro/habr/upload_files/208/5d4/0f0/2085d40f08484a31239da02ba028f031.webp)
To be continued...
Карточки товара – важные элементы на пути клиента к покупке, и от них многое зависит. Несмотря на кажущуюся простоту, как и в случае с поисковой строкой, дьявол здесь кроется в деталях. Сегодня мы разобрали много факторов удовлетворенности клиента, которые в сумме могут значительно изменить ситуацию к лучшему, повышая шансы покупки товара.
Следующие статьи будут выходить с таким же уровнем детализации. Не забудьте подписаться на канал в Telegram и поделиться этим материалом с друзьями и коллегами по цеху. Будем на связи.