Как определить что креатив в листинге хороший
Перейти к содержимому

Как определить что креатив в листинге хороший

  • автор:

Оформление листинга и превью товаров в интернет-магазине: 7 ключевых правил UX

Всем привет! Меня зовут Максим Жуков, я из Kislorod. Специализируемся на разработке и развитии e-commerce проектов.

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

Сегодня публикуем новый материал из внутренней базы знаний — обо всём, что касается правильной работы с листингами. Вы узнаете, почему важно уделить внимание листингам товара с точки зрения UX, что обязательно должно быть в превью карточек товаров, почему стоит избегать функционала «Быстрый просмотр» и чем его заменить.

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

Листинг товаров в интернет-магазине — это страница со списком позиций категории. Позиции представлены в виде превью, при нажатии на которое посетитель попадает в карточку товаров.

Листинги — одни из самых важных страниц интернет-магазина, на них покупатель получает первую информацию о товарах.

Важно грамотно оформлять листинги для:

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

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

Сетка — это количество столбцов и строк с превью товаров. Чаще всего используется 3-5 столбцов. Если актуально показывать большую фотографию и выводить в превью много характеристик, то разумно делать крупные превью — соответственно, столбцов будет меньше. О балансе размеров превью товаров и их количестве в сетке мы еще поговорим.

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

Иногда реализуют отображение товаров списком или таблицей — это зависит от специфики интернет-магазина. Подробнее расскажем об этом в следующий раз.

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

Можно реализовать возможность перехода на определенную страницу, как на ozon.ru

Отображать более сотни товаров на странице не стоит — это снизить скорость загрузки. А динамическая подгрузка товаров может негативно сказаться на индексации. Вариант — комбинировать пагинацию и динамическую подгрузку по нажатию на кнопку «Показать ещё».

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

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

Возможные решения для удобства пользователя:

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

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

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

У нас две задачи:

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

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

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

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

Универсальные характеристики должны отображаться в превью товара всегда, независимо от специфики интернет-магазина. К ним относятся:

Изображение товара

Изображение — важнейший элемент превью. Товары без изображений игнорируют, расценивая как отсутствующие, а их отображение в листинге — как баг. Вследствие этого доверие к интернет-магазину падает.

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

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

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

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

Название и тип товара

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

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

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

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

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

Это актуально не только для сегмента DIY, но и для e-grosery. Продавая бананы, указывайте цену за 1 банан и за 1 кг. Или хотя бы вес банана для ориентира.

Вариации товара

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

Индивидуальные характеристики присущи определенным категориям товаров. К ним могут относиться:

Рейтинг товара

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

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

Совместимость с другим товаром

Информация о совместимости товаров актуальна в технических категориях. Пользователям удобно видеть совместимость товаров и продуктов без перехода в карточку. Для визуального отображения совместимости можно использовать изображения — показывать крупным планом разъемы и соединения комплектующих. Иногда достаточно текстового указания, как в примере ниже:

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

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

Рекомендации

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

Особые условия

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

Код или артикул товара

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

Чтобы вывести все важные характеристики в превью, но не перегружать их, используйте минимум текста и по возможности заменяйте текст иконками. Дэвид Льюис в книге «Нейромаркетинг в действии» утверждает, что информацию, представленную в виде образов, на 20% легче осмыслить, чем информацию, представленную словами.

На скриншоте ниже — превью, которые мы разработали для винотек Grape. В этой нише для покупателей кроме внешнего вида бутылки и этикетки, имеют значение следующие характеристики: цвет, содержание сахара, страна и регион, год разлива, объем.

Чтобы упростить восприятие и избежать перегруженности, мы не отображали в превью названия характеристик — вроде «Страна» или «Объем бутылки» — а сразу указывали характеристику. Пользователю и так понятно, что Грузия — это страна, в которой произведено вино, а 0,7 литра — объем бутылки. Где это возможно заменили текст иконками. В итоге превью получились информативными и в то же время не перегруженными.

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

Пользователи не понимали, что эти частично закрашенные кружки означают жесткость. Название характеристики «Жесткость» появлялось только при наведении на изображение курсора.

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

Функция быстрого просмотра популярна: ее используют 48% из 50 изученных Baymard Institute интернет-магазинов. Во многих статьях вы встретите информацию о пользе этого функционала. Почему мы рекомендуем использовать быстрый просмотр с осторожностью?

В исследованиях Baymard Institute, функционал оказался полезным для испытуемых только в одном случае — когда изображения товара были слишком маленькими. Нужно понимать, что функция «Быстрый просмотр» — это зачастую лишь костыль для интернет-магазинов с плохой реализацией листинга товаров, разработчики которых не читали эту статью 🙂

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

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

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

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

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

  • окно быстрого просмотра не открывается случайно — только по нажатию на «Подробнее» в превью.
  • контент окна практически совпадает с контентом карточки, не хватает только отзывов. Полный объем характеристик помещается в окне за счёт скролла. Поэтому пользователь получает всю необходимую информацию.

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

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

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

Особенно полезна функция, если:

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

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

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

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

Учтите, что отображение в каждом превью кнопок «Добавить в избранное», «Добавить в корзину» и «Сравнить» может загромождать листинг товаров интернет-магазина и смещать фокус с важной информации о товаре. Их также можно отображать при наведении курсора. Это уменьшает визуальную нагрузку в списке товаров, не ограничивая его функциональность.

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

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

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

Давайте возможность перейти к категории заинтересовавших товаров.

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

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

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

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

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

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

Выделить уже просмотренные товары можно еще проще — использовав для них другой цвет текста. Это помогает пользователям не тратить время на повторный просмотр продуктов.

Также можно реализовать блок с недавно просмотренными товарами — помогает пользователям быстро вернуться к просмотренным товарам.

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

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

Ставьте лайк (+1), если было полезно. Вам несложно — нам приятно 😉

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

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

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

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

Оптимизация листингов интернет-магазинов: Полное руководство

Мещерякова

Работа над продвижением любого интернет-магазина должна начинаться с оптимизации листингов. Корректно сформированные и оптимизированные листинги позволят привлечь на сайт целевой, коммерческий трафик, который впоследствии может быть конвертирован в продажи. При этом возможен и обратный сценарий, когда ошибки или переоптимизация листингов приведет к потери трафика по основным ВЧ и СЧ запросам. В статье вы найдете полный гайд по внутренней оптимизации листингов интернет-магазина под требования поисковиков и сводку основных ошибок, которые могут заморозить рост проекта.

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

ОСНОВНЫЕ ЭЛЕМЕНТЫ ОПТИМИЗАЦИИ ЛИСТИНГОВ

Сбор семантического ядра, кластеризация

Ассортимент

Listing-1

Цены

Listing-2

Фильтры и сортировки

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

Количество необходимых параметров для фильтрации определяется, прежде всего, тематикой – например, для строительного магазина это могут быть 5-10 фильтров по типу поверхности и помещения, цвету, фасовке, размеру и т. д., а для сайта промышленного оборудования будет достаточно одного фильтра по производителю.

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

Listing-3

Анкоры карточек, вывод основных характеристик товаров

С ужесточением алгоритмов и появлением новых текстовых фильтров наполнять ключевыми запросами листинги становится все сложнее. Одним из вариантов безопасного использования ключей является добавление их в название товара на листинге. При этом одна и та же карточка может быть выведена с разным названием в зависимости от категории. Так можно охватить все основные синонимы и long-tail хвосты запросов и получить прирост СЧ и НЧ трафика. Аналогичным образом можно использовать вывод основных характеристик и описаний товара в превью карточки:

Listing-4

Коммерческие кнопки

Для поисковиков важно не только само наличие кнопок «Купить», «Заказать», «В корзину» как коммерческих элементов, но и их корректная реализация и доступность к индексации:

  1. Текст на кнопке должен быть оформлен не картинкой, а анкорной ссылкой.
  2. Теги <span onclick>, <input> и <button> не индексируются; требуется использовать тег <a>, <span> или <div>.
  3. URL, на который ведет данная кнопка, либо атрибут внутри тега <a> или <span> (например, сlass=»») должен содержать одно из значений: order, cart, show, buy, addtocart.

Статус товара «В наличии»

Маркер «В наличии» распознается поисковиками как коммерческий элемент, поэтому его рекомендуется выводить в листинги. Логичным будет товары, которых нет в наличии, спускать вниз списка или выносить на последние страницы пагинации. Минилайфхак: ярлык «Нет в наличии» можно закрывать от индексации и размещать изображением, если на сайте есть проблемы с ассортиментом – поисковики будут индексировать подобные товары как обычные.

Вывод товаров во всех уровнях каталога

Часто страницы каталога верхнего уровня используются только для навигации по подразделам – на них размещаются ссылки на внутренние категории. Подобные страницы будут плохо ранжироваться, из-за чего может быть упущен достаточно частотный трафик. Разместив там стандартный листинг с карточками товаров, мы позволим пользователю приступить к выбору, не уточняя категорию, и покажем поисковым системам наличие ассортимента. Если товаров много, а плодить лишние страницы пагинации не хочется, подобные хабовые страницы можно организовать по аналогии с https://www.ozon.ru/ по следующей схеме:

Баннер – Ссылки на основные категории – Ссылки на наиболее популярные бренды – Товарные карусели с акциями, популярными предложениями и другими подборками

Listing-5

Теги title и meta-description. Генерация тегов

На листингах в тегах, помимо ключей в разных вариациях и топонимов, необходимо указывать коммерческие слова – «купить», «цена», «интернет-магазин», «заказать» и т. д. Поскольку оптимизировать вручную теги для крупного интернет-магазина с сотнями категорий трудозатратно, оптимально на начальных этапах продвижения реализовать генерацию тегов по заданному шаблону. Генерация позволяет быстро и повсеместно заполнить title и meta-description с использованием основного ключа и иных необходимых элементов.

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

Тексты

Целесообразность использования текстов на листингах в эпоху фильтра Баден-Баден очень сомнительна. Проверить их необходимость можно только экспериментально – путем добавления и удаления контента и анализа ситуации.

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

  • Перелинковка (ссылки на смежные разделы, популярные бренды, товарные карусели, хиты продаж/популярное и др.).

Listing-7

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

Listing-8

  • Информация об акциях и скидках (в виде баннеров, подборки товаров и т. п.).
  • Видео (обзоры оборудования, видео-отзывы покупателей и др.).
  • Калькуляторы, сравнение товаров, создание списков и другие пользовательские элементы (положительно сказываются как на поведенческих факторах в поисковиках, так и на доверии пользователей).
  • Вопрос-ответ (реализуем блок по дефолту в свернутом виде – пользователи кликают, чтобы посмотреть ответ, – профит).

Listing-10

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

Listing-9

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

  • Инфографика, списки, таблицы, картинки и т. п. – сплошное полотно текста воспринимается сложнее и, вероятнее всего, будет пролистано.
  • Лайфхаки.
  • Статистические данные. Здесь можно реализовать шаблонный вывод каких-то базовых характеристик и необходимых ключевых слов. Например, на сайте агентства недвижимости мы реализовали генерацию небольших описаний на страницах категорий по подобной маске:

Мы нашли [кол-во предложений] двухкомнатных квартир в [город] по цене от [min цена листинга] руб. Воспользуйтесь нашими фильтрами для удобного поиска объектов по требуемым параметрам. Максимальная стоимость продажи двухкомнатной квартиры во вторичном жилье составляет [max цена листинга] рублей. Средняя цена – [средняя цена] руб., за квадратный метр – [цена за кв. м] рублей. На нашем сайте представлены квартиры площадью от [min площадь объекта] м2 до [max площадь объекта] м2.

Пагинация

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

Неправильно: ajax-подгрузка товаров и бесконечный скролл, закрытие пагинации от индексации, дублирование контента.

Правильно: постраничная пагинация, настройка атрибута rel=»canonical» и уникализация тегов и контента каждой страницы.

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

Микроразметка

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

Формирование структуры сайта и урлов карточек товаров

В общем, утрированном случае структура интернет-магазина должна соответствовать следующей схеме:

Главная – Категория – Подкатегория – Товар

В урлах листингов желательно отображать вложенность (например, /catalog/elektroinstrumenty/lobziki/). Карточки могут аналогично содержать в урле полный путь или быть привязаны к одному общему разделу (например, /product/). Главное требование к структуре сайта и урлов – это ее логичность. Пользователь должен легко находить требуемые разделы и товары.

Тегирование

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

Listing-11

Меню

Меню должно быть понятным, простым в навигации, сквозным и открытым для индексации, чтобы пользователь мог попасть на любую страницу сайта в 2-3 клика. Грамотно реализованное меню способствует корректному распределению внутреннего ссылочного веса и содержит ссылки на все основные, трафиковые категории и подкатегории, что позволяет им лучше ранжироваться в поисковиках. Анкоры ссылок в меню должны содержать основной смысловой ключ, отражающий суть страницы.

Внутренняя перелинковка

Помимо привычной перелинковки внутри карточек товаров с помощью блоков «С этим товаром покупают» и «Похожие товары», в листингах можно выводить аналогичные блоки популярных товаров или смежных категорий. Еще один вариант перелинковки, применимый к листингам, – через характеристики и свойства товаров, которые могут быть оформлены в виде ссылок на соответствующие страницы тегирования или подразделы. Это увеличивает ссылочный вес данных страниц и повышает удобство пользования сайтом.

Listing-12

Хлебные крошки

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

Внешний вид листингов

Имеет значение как формат вывода карточек (плитка/строчка/таблица), так и различные ярлыки (скидок, популярных товаров или новинок и т. д.) и другие элементы, повышающие конверсию (подарки, счетчики акций и прочее). Наличие указанных элементов и способа отображения карточек может определяться тематикой – например, для сайта недвижимости листинги чаще всего выводятся в строчном виде с крупными изображениями и указанием контактов менеджера, ведущего объект:

Listing-13

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

ЛИСТИНГИ ДЛЯ САЙТОВ УСЛУГ: А ЧТО, ТАК МОЖНО БЫЛО?

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

Listing-14

Listing-15

ДИСКЛЕЙМЕР ВМЕСТО ВЫВОДА

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

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

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

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

Layout листинга

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

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

ВкусВилл

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

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

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

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

hardclient

Маркет Деливери
?

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

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

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

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

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

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

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

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

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

hardclient

SeasonMarket

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

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

hardclient

Впрок

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

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

hardclient

Маркет Деливери

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

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

hardclient

Amazon

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

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

hardclient

Ригла

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

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

hardclient

Технопарк

Фото товара

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

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

hardclient

Быстроном

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

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

hardclient

СберМаркет

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

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

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

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

hardclient

Дром База

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

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

hardclient

Циан

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

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

hardclient

Olx.kz

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

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

hardclient

Wildberries

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

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

hardclient

La Redoute

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

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

hardclient

Farfor

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

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

hardclient

Joom

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

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

hardclient

SeasonMarket

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

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

hardclient

Кухня на районе

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

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

hardclient

Духи.рф

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

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

hardclient

Hoff

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

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

hardclient

Кухня на районе
?

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

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

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

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

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

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

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

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

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

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

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

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

hardclient

Яндекс.Лавка

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

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

Слайдер

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

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

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

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

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

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

Cell snapping

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

hardclient

Дром База

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

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

hardclient

Krisha.kz
?

Page control

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

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

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

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

hardclient

Ozon

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

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

hardclient

Sokolov

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

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

hardclient

Столплит

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

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

hardclient

Ozon

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

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

hardclient

МегаМаркет

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

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

hardclient

12 Storeez

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

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

hardclient

Novex

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

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

hardclient

Wildberries

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

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

hardclient

Hoff

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

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

hardclient

Яндекс.Маркет
?

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

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

hardclient

Gulliver Market

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

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

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

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

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

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

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

hardclient

Zolla

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

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

hardclient

12 Storeez

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

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

hardclient

Светофор

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

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

hardclient

Lichi

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

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

hardclient

Яндекс.Лавка

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

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

hardclient

Впрок

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

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

hardclient

Leroy Merlin

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

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

hardclient

Буквоед

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

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

hardclient

Zolla

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

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

hardclient

Лента Онлайн
?

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

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

hardclient

eBay

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

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

hardclient

Rendez Vous

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

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

hardclient

Буквоед

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

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

hardclient

Быстроном

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

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

hardclient

Леонардо

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

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

hardclient

Rendez Vous

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

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

hardclient

Wildberries

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

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

hardclient

Маркет Деливери

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

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

hardclient

СберМаркет

Маркеры

Применяются

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

hardclient

Яндекс Лавка

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

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

hardclient

Love Republic

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

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

hardclient

LC Waikiki

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

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

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

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

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

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

hardclient

Зоозавр

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

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

hardclient

AliExpress

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

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

hardclient

Ешь Деревенское

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

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

hardclient

Uzum Market

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

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

hardclient

Сима-ленд

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

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

hardclient

Gloria Jeans

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

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

hardclient

Л’Этуаль

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

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

hardclient

Farfor

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

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

hardclient

Ozon

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

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

hardclient

Wildberries

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

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

hardclient

СберМаркет

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

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

hardclient

FlowWow

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

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

hardclient

Rendez Vous

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

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

hardclient

Novex

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

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

hardclient

Рив Гош

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

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

hardclient

Холодильник.ру

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

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

hardclient

Комус

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

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

hardclient

Азбука Вкуса

Однозначны

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

hardclient

Henderson

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

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

hardclient

Эльдорадо

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

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

hardclient

Sunlight

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

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

hardclient

Lalafo

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

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

hardclient

Акушерство

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

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

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

hardclient

belle you

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

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

hardclient

12 Storeez

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

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

hardclient

Акушерство

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

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

hardclient

Shein
?

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

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

hardclient

Л’Этуаль

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

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

hardclient

Духи.рф

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

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

hardclient

Подружка

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

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

hardclient

Lamoda

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

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

hardclient

Bungly Boo!

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

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

hardclient

Petshop

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

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

hardclient

Zara
?

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

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

hardclient

Яндекс.Маркет

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

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

hardclient

Poison Drop

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

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

hardclient

Акушерство

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

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

hardclient

LC Waikiki

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

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

hardclient

Belle you

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

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

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

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

Цена и скидки

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

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

hardclient

МегаМаркет

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

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

hardclient

ЦУМ

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

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

hardclient

Lamoda

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

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

hardclient

СберМаркет

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

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

hardclient

O’STIN

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

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

hardclient

Маркет Деливери

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

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

hardclient

La Redoute

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

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

hardclient

СберМаркет

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

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

hardclient

igooods

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

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

hardclient

FlowWow

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

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

hardclient

СпортМастер

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

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

hardclient

Poison Drop

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

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

hardclient

Ситилинк

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

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

hardclient

Порядок

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

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

hardclient

Петрович

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

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

hardclient

Триал-Спорт

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

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

hardclient

Ozon

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

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

hardclient

М.Видео

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

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

hardclient

befree

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

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

hardclient

Shein

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

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

hardclient

Lady & Gentleman City

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

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

hardclient

LC Waikiki

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

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

hardclient

Маркет Деливери

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

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

hardclient

Комус

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

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

hardclient

СберМаркет

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

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

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

hardclient

Впрок

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

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

hardclient

Rendez Vous
?

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

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

hardclient

СберМаркет
?

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

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

hardclient

Л’Этуаль

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

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

hardclient

ВкусВилл

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

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

hardclient

Буквоед

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

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

hardclient

Fitness Formula
?

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

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

hardclient

Столплит

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

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

hardclient

ВкусВилл

Число оценок

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

hardclient

Красное и Белое

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

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

hardclient

СпортМастер

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

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

hardclient

Kazan Express
?

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

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

hardclient

Леонардо

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

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

hardclient

СберМаркет

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

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

hardclient

СберМаркет

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

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

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

hardclient

Uzum Market

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

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

hardclient

Lamoda
?

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

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

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

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

hardclient

Зоозавр

Достаточный размер для тапа

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

hardclient

Лента Онлайн

Контрастна

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

hardclient

Ярче Плюс

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

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

hardclient

Маркет Деливери

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

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

hardclient

Sokolov

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

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

hardclient

МегаМаркет

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

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

hardclient

Лента

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

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

hardclient

LC Waikiki

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

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

hardclient

OBI

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

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

hardclient

Леонардо

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

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

hardclient

Ozon

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

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

hardclient

ВкусВилл

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

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

hardclient

ВкусВилл

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

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

hardclient

Самокат

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

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

hardclient

Ozon
?

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

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

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

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

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

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

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

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

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

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

hardclient

igooods

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

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

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

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

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

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

hardclient

Самокат

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

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

hardclient

ВкусВилл

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

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

hardclient

Leroy Merlin

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

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

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

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

hardclient

EcoMarket

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

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

hardclient

Сима-ленд
?

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

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

hardclient

ВкусВилл

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

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

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

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

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

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

hardclient

Мой SPAR
?

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

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

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

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

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

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

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

Добавлена

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

hardclient

Lamoda

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

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

hardclient

ЦУМ

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

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

hardclient

СберМаркет

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

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

hardclient

Lichi

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

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

hardclient

Gipfel

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

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

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

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

hardclient

METRO

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

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

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

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

hardclient

Зоозавр

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

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

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

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

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

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

Haptic Feedback

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

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

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

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

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

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

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

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

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

hardclient

ВкусВилл
?

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

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

hardclient

Kolesa.kz

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

Реализована

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

Вдавливание

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

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

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

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

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

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

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

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

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

hardclient

ВкусВилл

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

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

hardclient

СпортМастер

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

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

hardclient

Lamoda

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

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

hardclient

Столплит

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

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

To be continued…

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

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

Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если хотите их не пропускать. На связи.

Добавить комментарий

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