Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

Если хотите быть в курсе трендов в UX/UI- дизайне, подписывайтесь на наш Telegram-канал. Мы запустили новую рубрику, где разбираем свежие направления в дизайне вместе с экспертами из крупных брендов и дизайн-тусовки.

Внимание — листингам товаров

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

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

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

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

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

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

Сетка товаров

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

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

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

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

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

Возможность перехода на страницу выдачи на ozon.ru

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

Комбинация пагинации и динамической подгрузки по нажатию на кнопку «Показать еще» на dns-shop.ru

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

Полезный функционал

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

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

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

Превью товара

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

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

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

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

7 ключевых правил работы с листингами и превью товаров

1. Выводите важную информацию в превью карточек товаров

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

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

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

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

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

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

Возможность оценить товар с разных сторон на ozon.ru

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

Комбинация изображений товара в быту и на нейтральном фоне на ozon.ru

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

Содержимое матраса в превью товаров на askona.ru

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

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

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

Указание типа товара перед названием на ozon.ru

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

Цена

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

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

Отображение цен и скидок на wildberries.ru

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

Отображение цены за упаковку и метр квадратный на isolux.ru

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

Отображение цен за килограмм, штуку и упаковку на online.globus.ru

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

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

Отображение цветов, размеров и наличия на bonprix.ru

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

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

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

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

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

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

Указание на совместимость с ноутбуками на eldorado.ru

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

Размеры

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

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

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

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

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

Отражение особых условий в превью товаров на scubamarket.ru

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

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

2. Используйте минимум текста и иконки для характеристик в превью

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

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

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

Отображение характеристик товаров в превью на grapewines.ru

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

Обозначение жесткости на сайте askona.ru

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

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

Обозначение жесткости на сайте ormatek.com

3. Используйте быстрый просмотр с осторожностью

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

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

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

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

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

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

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

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

4. Отображайте дополнительную информацию при наведении курсора

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

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

Отображение дополнительных характеристик при наведении курсора (слева) на wildberries.ru

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

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

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

5. Дайте возможность сравнить товары, добавить товар в избранное и корзину из листинга

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

Возможность сравнить, добавить в избранное и корзину в листинге на ozon.ru

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

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

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

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

6. Показывайте дополнительные блоки в листинге

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

Блок с альтернативными товарами на ozon.ru

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

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

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

7. Выделяйте добавленные и просмотренные товары в листинге

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

Визуально похожие превью ноутбуков на ozon.ru

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

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

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

Визуальные отличия добавленного и не добавленного в корзину товара в превью на ozon.ru

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

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

Визуальное отличие просмотренного и непросмотренного товара на citylink.ru

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

Блок с недавно просмотренными товарами на wildberries.ru

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

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