6 практических советов по оформлению превью товаров

Что такое листинг? Какое оформление превью товаров на сайте способствует увеличению конверсии интернет-магазина? Какую пользу приносит правильное оформление листинга и превью для UX и SEO? В этой статье вы найдете не только полезную информацию, но и получите практические советы по оптимизации листинга и превью.

Что такое листинг и превью товаров на сайте?

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

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

Листинг: основные элементы для привлечения трафика

Листинг состоит из двух главных элементов: сетка и инструменты управления.

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

Это способ размещения превью товаров на странице листинга. Существует 2 основных способа реализации:

1. В виде плитки (3-5 столбцов, 10-40 превью);
2. В виде списка или табличной формы.

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

1. Пагинация для переключения между страницами;
2. Динамическая подгрузка — товары автоматически добавляются при скролле;
3. Микс: динамическая подгрузка + пагинация — т.е. пользователь может как переходить по страницам, так и нажать кнопку «Показать еще», чтобы подгрузилось определенное количество превью товара без перехода на следующую страницу.

Дополнительный функционал

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

10 элементов листинга, на которые стоит обратить внимание

1. Ассортимент.

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

2. Анкоры карточек.

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

‍3. Метка «В наличии».

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

4. Листинг товаров во всех уровнях каталога.

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

5. Тегирование.

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

6. Мета-теги и заголовок H1.

Заполнение мета-тегов и всех заголовков облегчит seo-оптимизацию страниц листингов.

7. Тексты.

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

8. Перелинковка.

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

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

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

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

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

6 практических советов по оформлению превью товаров в интернет-магазине

От того, насколько хорошо структурировано и информативно превью зависит:

1. Как быстро пользователи найдут нужный товар;
2. Сколько времени потребуется на принятие решения;
3. Вероятность перехода на карточку товара.

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

1. Сделайте превью максимально информативным

Согласно исследованию Baymard, пользователям 42% сайтов из 50 протестированных приходится переходить в карточку товара, а после возвращаться в категорию для дальнейшего поиска.

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

Универсальные характеристики товара:

• Фотографии товара.

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

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

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

Tweeto Тучка Мятная — не дает пользователю полного понимания, что это подушка. Но, прописав не только название, но и тип товара, а также добавив фото в превью товара интернет-магазина детской тематики Antoshka у пользователя есть четкое представление о том, что это за продукт и для чего он нужен

• Цена.

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

• Вариации.

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

Индивидуальные характеристики:

• Артикул и код товара.

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

• Рейтинг.

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

• Габариты.

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

• Рекомендации по использованию.

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

2. Используйте графику или иконки

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

3. Добавляйте «Быстрый просмотр» только при необходимости

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

Данный инструмент стоит использовать если:

• В превью изображение товара слишком маленькое для изучения;
• Окно открывается, когда пользователь кликает «Подробнее».

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

4. Выводите расширенные характеристики при наведении курсора

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

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

5. Добавляйте кнопки корзины, «Избранного» и сравнения

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

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

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

Так в чем же польза правильного оформления превью товаров и листингов?

Правильное и грамотное оформление превью товаров и листингов помогает:

• Увеличить конверсию интернет-магазина.

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

• Привлечь целевой трафик.

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

‍