КАРТОЧКИ ТОВАРОВ В ЛИСТИНГЕ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
Мы часто сталкивается с листингом товаров, совершая покупки онлайн. И от того, как спроектированы карточки товаров, зависит, купим мы их или нет. Как сделать карточки информативными, функциональными и привлекающими внимание, чтобы обеспечить лучший клиентский опыт? Обсудим в этой статье.
Помимо позитивных референсов, в статье будет и много негативных примеров – того, как делать не стоит. Ни в коем случае здесь я не ставлю целью выставить напоказ чьи-то недостатки. Подсвечивание ошибки одного может помочь избежать ее многим. Не согласны с замечаниями – обязательно пишите, обсудим. Ну а если материал окажется полезным, подписывайтесь в Telegram и делитесь этим постом.
Помимо позитивных референсов, в статье будет и много негативных примеров – того, как делать не стоит. Ни в коем случае здесь я не ставлю целью выставить напоказ чьи-то недостатки. Подсвечивание ошибки одного может помочь избежать ее многим. Не согласны с замечаниями – обязательно пишите, обсудим. Ну а если материал окажется полезным, подписывайтесь в Telegram и делитесь этим постом.
О ЧЕМ ПОГОВОРИМ
В этой статье мы разобьем карточки товаров на составные части и обсудим каждую из них в деталях:
1. ОБЩИЕ МОМЕНТЫ
Карточки выделяются на фоне
За счет незначительной тени, разницы в цветах фона и заливки, слабо заметных разделительных линий, обрезания фото по форме карточки и т.д.
Без пустых областей
Спроектируйте верстку карточек таким образом, чтобы в ней отсутствовали неоправданные пустые блоки, которые лишь занимают место.
Не перегружены
В карточках листинга отображайте только ключевую информацию, чтобы визуально не перегрузить интерфейс. Для деталей есть страница товара.
Реагируют на наведение курсора
Появлением незначительной тени, рамки, незначительным изменением фона, анимированным увеличением фото или изменением изображения.
Не выцветают при наведении
Выцветание карточки при наведении может создать у клиента ощущение, что она не активна или товара нет в наличии.
Детали при наведении
Часть контента карточек можно отображать только при наведении, чтобы дать клиенту требуемую информацию и функции, но при этом не перегружать общий интерфейс.
Кликабельна вся область карточки
В карточках не должно быть некликабельных областей. Клик должен приводить либо к выполнению целевого действия, либо к переходу на страницу товара.
2. ФОТОГРАФИИ ТОВАРА
Добавлены по всем товарам
Базовый момент: все карточки должны быть снабжены изображениями товаров, чтобы улучшить восприятие информации.
Единообразны по дизайну
Если фото товаров сделаны с разных ракурсов, на разном фоне и это не дизайнерский замысел, это может создать впечатление о том, что все сделано в формате «тяп-ляп».
Вписываются в рамку
Изображения товаров не должны заметно обрезаться рамкой карточки или, наоборот, быть меньше рамки.
В хорошем качестве
Если фото товаров загружены в плохом качестве, размываются и пикселят, это может вызвать отторжение у клиента.
Соответствуют реальности
Мало что может быть хуже, чем сначала сформировать у клиента ожидания от продукта, а затем доставить товар, отличающийся по внешнему виду.
Без водяных знаков
Воздержитесь от использования водяных знаков, либо, как минимум, не перекрывайте ими ключевой контент изображения.
Подгружаются заранее
Избегайте случаев, когда клиент, прокручивая экран, вынужден ждать, пока загрузятся фото в карточках. Как вариант, их можно подгружать заранее, еще до прокрутки.
Анимация в случае загрузки
Если фото все же не успевают загрузиться при прокрутке листинга до карточки товара, реализуйте анимацию, чтобы сгладить процесс ожидания загрузки.
Реагируют на наведение курсора
Чтобы карточка была более вовлекающей, фото можно сделать интерактивным так, чтобы при наведении курсора оно незначительно приближалось.
СЛАЙДЕР
При перемещении курсора
В некоторых случаях фото переключаются при перемещении курсора по карточке. Такая механика делает карточку более интерактивной и вовлекающей.
При нажатии на кнопки
Некоторые игроки делают слайдер менее навязчивым и добавляют в карточки кнопки, при нажатии на которые клиент может просмотреть другие фото.
Автоматический
Автоматический слайдер не требует от клиента никаких действий. Активацию лучше сделать с задержкой, чтобы он не срабатывал, при перемещении курсора по экрану.
Page control
Чтобы лучше управлять ожиданиями клиента в отношении количества фото в карточке, используйте элемент page control.
Типы фото
В слайдере отображайте как продукт сам по себе (без лишних деталей), так и в контексте использования. Также подсвечивайте ключевые особенности крупным планом.
Динамический контент
Контент слайдера может быть динамическим и подстраиваться под запрос, который привел клиента в листинг, тем самым повышая релевантность.
Порядок фото vs. тип товара
В Fashion-индустрии порядок фото часто может зависеть от типа товара, чтобы лучше донести ценностное предложение и вовлечь клиента.
(Комментарий от Петра Костюкова – интересно пишет про технологичную медийную рекламу, рекламные интеграции, делает обзоры eCom-проектов)
(Комментарий от Петра Костюкова – интересно пишет про технологичную медийную рекламу, рекламные интеграции, делает обзоры eCom-проектов)
Видео в слайдере
Некоторые участники рынка также добавляют в слайдер видео, чтобы лучше погрузить клиента в детали товара.
Без задержек в загрузке
Как и при прокрутке листинга, важно, чтобы фото в слайдере были доступны в момент, когда клиент прокручивает его, и ему не приходилось ждать.
PLACEHOLDER
Нестандартный
Выполните placeholder так, чтобы он согласовался с дизайном сайта, был его частью, передавал какую-либо идею, а не просто констатировал, что изображения нет.
Соответствует типу товара
Можно пойти дальше и для каждой из категорий товаров разработать свои placeholder'ы. Это облегчит восприятие информации в карточке.
Визуально второстепенный
Placeholder должен быть визуально второстепенным относительно любых фото товаров, чтобы не отвлекать внимание клиента.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. ЦЕНА ТОВАРА
Выделяется на фоне карточки
Этого можно достичь за счет работы с размером, жирностью и цветом шрифта.
Отступы между порядками
Тысячи и миллионы в значениях стоимости можно отделать с помощью отступов для облегчения восприятия информации клиентом.
Крупные суммы без копеек
Особенно в случае с крупными суммами по возможности не стоит указывать копейки: ценности в этой информации мало, зато интерфейс ей можно перегрузить.
Не дублируется
Дублировать цену – да еще и в маленькой карточке товара – смысла нет. Но, видимо, не все согласны с этим утверждением.
Без чрезмерных пояснений
Если в листинге представлены штучные товары, не стоит в явной форме указывать, что цена именно «за штуку» – клиенту и без этого текста будет все понятно.
РАСПОЛОЖЕНИЕ
Интуитивно
В большинстве карточек при отображении товаров в листинге плиткой это нижняя левая или центральная часть карточки.
В кнопке покупки
В качестве альтернативы, некоторые сервисы достаточно органично размещают цену внутри кнопки покупки.
ВАЛЮТА
Указана символом
Вместо указания руб. можно использовать интуитивно понятный символ ₽. Это позволит визуально разгрузить интерфейс.
Указана с отступом
Валюта не должна прилипать к тексту суммы. Добавьте после суммы отступ, чтобы информация визуально легче считывалась.
Вторична относительно цены
Валюта – вторичный элемент интерфейса по сравнению с ценой. Подчеркните это визуально. И уж точно не делайте валюту более заметной, чем цена.
СКИДКИ
Механика скидок применяется
Если вы применяете скидку, дайте клиенту понять, какова будет выгода клиента. Иначе выделение цены лишь вызовет дополнительные вопросы.
Старая цена визуально вторична
Текст старой цены не должен оттягивать на себя внимание: фокус должен оставаться именно на новой цене. Выцветание и более мелкий шрифт помогут решить задачу.
Старая цена заметна
При этом можно и перестараться. Если старая цена слишком мелкая и выцветшая, клиенту тяжело будет ее считать, и разница в ценах станет не очевидной.
Старая цена перечеркнута
Повысьте интуитивность восприятия старой цены, перечеркнув ее давая легче понять, что она не актуальна.
Старая цена без пояснения
Если цена уже визуально вторична и перечеркнута, отдельный текст, о том, что это именно «Старая цена», будет излишним и перегрузит интерфейс.
Старая цена рядом с новой
Не стоит визуально разводить старую и новую цены. Они должны читаться, как единая визуальная группа элементов.
% скидка в виде маркера
Сделайте процентную скидку более заметной, поместив ее в яркий, выделяющийся на фоне карточки маркер, привлекающий внимание клиента.
% скидка равна разнице цен
Если % скидка применяется вместе с элементами старой и новой цен, убедитесь, что расчеты корректны, и процент скидки в точности соответствует разнице цен.
Скидка в рублях для крупных сумм
Как вариант, может использоваться маркер абсолютной скидки. Его можно применять, если абсолютная сумма скидки достаточно внушительная.
Элемент срочности
Чтобы дополнительно побудить клиента воспользоваться скидкой, можно указать срок ее действия: количество дней или дату ее окончания.
Отсутствие отдельно не поясняется
Если вы предлагаете товар без скидки, смысла в том, чтобы указывать это в явной форме, нет. Это может лишь негативно сказаться на желании приобрести товар.
Цена по карте клиента
Если цены по карте лояльности отличаются от стандартных, отображайте их визуально первичными, чтобы привлечь внимание клиента.
Ссылка на оформление карты
Снабдите цену по карте ссылкой на лендинг программы лояльности с возможностью регистрации. Иначе более низкая, но недоступная цена может отпугнуть клиента.
4. КНОПКА КОРЗИНЫ
Кнопка предусмотрена
Базовый момент: кроме редких случаев, у клиента должна быть возможность добавить товар в корзину без необходимости перехода на его страницу.
Видимость кнопки
Кнопка может быть видна всегда, но если элементов много, ее можно отображать лишь при наведении, чтобы визуально не перегружать интерфейс.
Размер кнопки
Сделайте кнопку достаточно большого размера, чтобы на нее легче было нажать, особенно на мобильных устройствах.
Хорошо выделяется
Кнопка должна быть одним из наиболее заметных элементов карточки. Сделать это можно за счет использования контрастной заливки.
Аффорданс
По-хорошему, кнопка добавление в корзину должна выглядеть, именно как кнопка, а не ссылка, текст или что-либо другое. Креативность в данном случае может навредить.
Расположение единообразно
Спроектируйте верстку карточек таким образом, чтобы кнопка не «скакала» от товара к товару. В противном случае смотреться это будет не лучшим образом.
Не дублируется
Размещайте в карточках только одну кнопку добавления в корзину. В противном случае это может размыть фокус внимания клиента.
ИКОНКА
Интуитивно понятна
Не стоит изобретать колесо и придумывать нестандартные версии иконки. Чем проще и интуитивнее, тем лучше. Иконка корзины или плюса для этого хорошо подойдет.
Минималистична
Выбирайте лаконичные иконки. При помещении в кнопку иконка будет достаточно маленькой, и большое количество деталей лишь ухудшит ее восприятие.
Контрастна
Сделайте иконку контрастной по отношению к заливке кнопки так, чтобы она легче считывалась и воспринималась.
В хорошем качестве
Иконка должна быть загружена в хорошем качестве и не должна пикселить и размываться. В идеале лучше использовать векторное изображение.
ТЕКСТ КНОПКИ
Добавлен на кнопку
В некоторых случаях кнопка также может содержать текст, облегчающий восприятие ее целевой функции.
Контрастный и легко читаемый
Используйте легко читаемый контрастный шрифт, достаточно большого размера. Шрифт кнопки должен из того же семейства, что и остальные тексты на сайте.
Целевое действие
Сделайте так, чтобы текст кнопки отталкивался от целевого действия клиента: «Купить», «В корзину» и т.д.
Центрирован
Текст кнопки в большинстве случаев должен располагаться по центру и не должен прилипать к ее границам.
РЕАКЦИЯ НА НАВЕДЕНИЕ КУРСОРА
Изменяет вид
Кнопка должна давать визуальную обратную связь и изменять свой вид при наведении курсора: например, изменять цвет заливки или образовывать тень.
Визуально усиливает фокус
Изменение вида кнопки должно побуждать клиента к целевому действию. Выцветание или осветление кнопки может привести к обратному результату.
Контекстная подсказка
Если кнопка содержит в себе лишь иконку, контекстная подсказка с пояснением при наведении на нее курсора лишней не будет.
РЕАКЦИЯ НА КЛИК
Реакция моментальная
При нажатии на кнопку товар должен добавляться в корзину без каких-либо заметных задержек со стороны сайта.
Обновление подытога
При клике на кнопку добавления в корзину иконка корзины и сумма подытога также должны своевременно обновляться.
Подтверждение действия
Сама кнопка должна давать визуальную обратную связь, подтверждая, что товар добавлен. Например, за счет изменения текста, цвета заливки или иконки.
Анимация
Нажатие на кнопку может быть анимировано: при клике она может уменьшаться в размерах и слегка менять цвет, как бы вдавливаясь в экран.
Без чрезмерной анимации
По возможности постарайтесь обойтись микро-анимацией. Анимация товара, медленно улетающего в корзину, может выглядеть неуместно.