листинг в сети что это
Листинги как способ привлечения трафика и увеличения конверсий
В феврале Яндекс представил обновления Турбо-страниц. Среди новых функций – листинг товаров для интернет-магазинов. Мы подумали, что это отличный повод рассказать подробнее о листингах и об их роли в SEO-продвижении.
Что такое листинг?
Листинг – это страница-категория на сайте. Она представляет собой список чего-либо (товаров, услуг, билетов и т.д.). На страницах-листингах размещается от двух и более позиций, а не каждый предмет в отдельности.
Листинги играют одну из ключевых ролей при привлечении поискового трафика на сайт. Именно здесь, как правило, сосредоточены ключевые слова со среднечастотными и высокочастотными запросами. Алгоритм работы листингов можно представить следующим образом: листинги помогают пользователям (и поисковым системам) быстрее найти страницу нужного товара или услуги. В результате улучшается взаимодействие пользователей с сайтом. В свою очередь, это увеличивает вероятность конверсии. Совершенные конверсии улучшают поведенческие факторы ранжирования сайта в поиске, а это улучшает ранжирование сайта по категорийным запросам, ведущим на эти страницы. И, как следствие, увеличивается трафик по категорийным запросам.
Какие типы листингов бывают:
«Классический» листинг. Это привычный список, отображающийся на странице, где основную часть занимает сетка товаров, услуг. Такой листинг можно увидеть при просмотре категорий товаров, выборке по брендам, при фильтре по характеристикам, а также в результатах поиска по сайту.
Примеры классических листингов можно встретить почти на каждом интернет-магазине.
Хабовый листинг. Такие страницы отображают центральные категории товаров/услуг или тем на сайте и могут объединять несколько подкатегорий. Их задача – облегчить выбор подраздела, помочь сузить выбор и найти необходимый товар. Хабовые листинги применяются, как правило, для больших интернет-магазинов с огромным ассортиментом категорий.
Листинг-лендинг. Применяется в том случае, когда полная сетка товаров и услуг не поможет пользователю без первоначального уточнения. Первый экран такого листинга – фильтр для выбора конкретных характеристик/параметров. Листинг-лендинг подходит, когда результаты поиска меняются слишком быстро или когда нельзя дать релевантный ответ без уточнения запроса. Листинг-лендинг часто применяется на сайтах бронирования билетов и отелей.
Экспертные подборки. Как и в контент-маркетинге, так и в поисковой оптимизации наметился тренд на «экспертность» и «авторитетность». Страницы с тщательно проработанной подборкой товаров и интересными комментариями к ним пользуются популярностью у посетителей сайтов. Такие подборки способны успешно конкурировать с классическими листингам как в выдаче Google, так и в выдаче Яндекса.
Как эффективнее работать с листингами
Совет 1. Создавать страницы, только если есть ассортимент. Как правило, в топ поисковой выдачи попадают страницы с большим ассортиментом товара. Именно поэтому ваша страница не должна уступать конкурентам по количеству отображаемых товаров на ней. Создание отдельной страницы листинга всего лишь для одного товара будет ошибкой. Если у вас, например, один или два товара, то эту страницу листинга лучше объединить с «родственной» категорией. Как понять, сколько товаров размещать на странице? Проанализируйте страницы конкурентов, которые находятся в топ поисковой выдаче по интересующим вас запросам, а затем посчитайте общее среднее количество товаров на странице. При необходимости внесите изменения и увеличьте количество отображаемых позиций. Однако не стоит выводить по 500 товаров на одной странице. Это ухудшит и скорость загрузки, и удобство взаимодействия. Вполне уместно использовать пагинацию, а также отображать количество товаров в категории другими способами (например, можно в скобках указывать количество товаров по данной выборке рядом с названием категорий в фильтре подбора).
Совет 3. Проверить работу фильтров и сортировки. Наличие фильтров – положительный момент для оценки удобства страницы, а также для улучшения поведенческих показателей. В разных категориях товаров должны работать соответствующие фильтры. Например, для интернет-магазина техники будет очевидным, что фильтры для категории смартфонов и для категории ноутбуков будут существенно отличаться. Сортировка товар по различным критериям – тоже один из инструментов, влияющих на поведенческие метрики. Среди возможных вариантов сортировки: по цене, по наличию на складе, новизне, популярности, скидке. Можно также предложить посетителям сайта самостоятельно выбирать тип отображения товаров и их количество на странице.
Совет 4. Следить за текстами. Если есть большое желание разместить текст на странице листинга, то старайтесь, чтобы он был полезен для пользователя. Можно добавить на страницу рекомендации по выбору товаров, поделиться полезными советами, разместить отзывы, рассказать о бренде и так далее.
Совет 5. Добавить на страницу разделы с популярными товарами и рекомендованными брендами. Один из способов увеличить вероятность совершения конверсии – дать пользователям сразу перейти к популярным товарам и услугам с высоким рейтингом. Такой ход привлечет внимание. Помимо популярных товаров можно создать подборку с рекомендованными брендами. Один из плюсов таких подборок – это возможность оптимизации под ключевые запросы с названием производителя.
Совет 6. Избегать однотипного оформления карточек на страницах листинга. Некоторые интернет-магазины при наполнении страниц товаром используются шаблонные названия для карточек товара, что может негативно восприниматься поисковыми системами. Чтобы избежать этого, сделайте названия товаров более полными, например, можно добавлять материал изделия, размер, цвет, производителя и так далее. Подробное и уникальное описание товаров и услуг будет оценено не только вашими посетителями, но и поисковыми системами.
Названия товаров одинаковые, хотя модели разные
Что еще важно при работе с листингами:
Следите за тем, чтобы не появлялись технические дубли страниц. Они могут возникнуть из-за самого функционала страниц, например: сравнение, поиск по сайту, избранное, корзина. Отследить дубли помогут Яндекс.Вебмастер и Google Search Console.
Отзывы и рейтинги можно использовать не только в отдельных карточках товара, но и сделать заметнее на самих листингах (например, выводить среднюю оценку и количество отзывов).
Демонстрация товара. Если есть возможность, добавляйте больше фото в карточку товара, а затем настройте быстрый просмотр.
Проработать «хлебные крошки». Это важный элемент навигации сайта, который помогает пользователям ориентироваться на сайте. Кроме этого, за счет ее оптимизации можно улучшить сниппеты сайта в выдаче поисковых систем.
При создании листингов необходимо обеспечить необходимость пагинации, в случае, если товаров в подборке больше, чем умещается на одной странице.
Листинг на Турбо-страницах Яндекса
Мобильные пользователи сегодня – это преобладающая часть аудитории почти на любом сайте. Так, по данным Яндекс.Радара, смартфоны преобладают среди всех типов используемых в России устройств.
Растет и с каждым годом доля интернет-покупок с мобильных телефонов. В 2019 году в России она выросла до 60%. Это означает, что все пристальное внимание сосредоточено на адаптивной верстке и удобстве при выборе товара или услуги, а также оформлении заказа.
Если у вас есть интернет-магазин и включены Турбо-страницы, то наверняка вы уже заметили нововведение. С ноября 2019 года в Турбо-версии сайтов стал доступен листинг товаров для интернет-магазинов. Они дают возможность представить весь ассортимент магазина на товарных витринах. Списки по умолчанию уже активированы в «Вебмастере» для всех интернет-магазинов, использующих технологию Турбо. Ранее на Турбо-страницах был доступен лишь просмотр отдельных карточек товаров.
Сейчас Яндекс научился преобразовывать страницы со списками товаров в формат Турбо автоматически. Таким образом, страницы с товарами моментально загружаются, и у покупателей есть возможность быстрее просмотреть и выбрать нужный товар и оформить заказ прямо на Турбо-версии магазина.
Списки товаров помогут увеличить конверсию добавления в корзину и покупки товаров для владельцев магазинов. По данным Яндекса, обновление Турбо-страниц позволило повысить конверсию в покупку. Сейчас для Турбо-страниц она в среднем на 30% выше относительно сайта.
Однако прежде чем принимать решение о внедрении такого функционала на весь сайт, необходимо его предварительное тестирование, чтобы понять будет ли этот инструмент эффективен именно для вашего бизнеса.
Вывод
Листинги – это важный элемент при поисковой оптимизации. Работа с листингами требует немало времени, постоянного отслеживания обновлений среди инструментов, а также терпения, потому что моментального результата здесь ждать не приходится. Однако «правильные» листинги помогут попасть в топ поисковой выдачи, привлечь новых пользователей и увеличить количество конверсий.
Листинг на сайте интернет-магазина: как оформить без ошибок
Блок листинга товаров в интернет-магазине сразу же дает посетителю всю необходимую информацию об изделиях. При нажатии на продукт из списка товарных позиций пользователь попадает на страницу карточки товара. Там он сможет получить еще больше сведений, характеристик и отзывов о продукте и быстрее определиться с выбором.
В статье мы расскажем, как правильно оформлять листинг на сайте интернет-магазина, какие подводные камни могут всё испортить и какие ошибки совершают даже самые крупные и популярные компании.
Зачем нужно оптимизировать листинг
Правильно оформленный список карточек товаров позволит получить больше целевого трафика на сайт, так как корректная оптимизация листинга улучшает ранжирование веб-ресурса в поисковых системах. Блок реализуемых продуктов удобен для посетителей сайта:они смогут оперативнее выбрать нужный товар, сравнить его с другими, оформить заказ и оплатить. Оптимизированная сетка товарных позиций позволяет увеличить конверсию и уменьшить число выходов к выдаче.
Типы листингов
Существует несколько видов оформления блока карточек товаров. Какой вариант выбрать, зависит от тематики сайта и бизнеса, разновидностей реализуемых продуктов или услуг.
Классический листинг
Представляет собой привычную сетку, где выводится большое количество товарных позиций, относящихся к определенным категориям, подкатегориям, брендам или фильтрам интернет-магазина. Например, если мы зайдем в раздел «Компьютерные кресла» сайта с офисной мебелью, на странице отобразятся товары именно этой категории.
Хабовый листинг
Это список, который объединяет карточки товаров разных разделов. Задача такой разновидности — облегчить выбор нужной категории или подкатегории, сузить количество позиций и найти необходимый продукт. Такие блоки применяются в основном в больших интернет-магазинах, которые имеют очень широкий ассортимент.
Листинг-лендинг
Такой вариант используется, только когда без первоначального уточнения полная сетка товаров не удовлетворит потребности пользователя. Чтобы посмотреть блок предложений, необходимо заполнить специальную форму фильтра с характеристиками и параметрами. Как правило, листинг-лендинг применяется на сайтах бронирования билетов или отелей. Например, если вы зашли на сайт авиаперевозчика, нужно ввести куда/откуда, дату и время. Только тогда появятся необходимые предложения.
Экспертные листинги
Такая разновидность больше подойдет для информационных сайтов, где размещается огромное количество обзоров, а также книжных, цветочных интернет-магазинов. Это страницы с тщательной подборкой товарных позиций. Примеры подборок для книжных магазинов: «Лучшие бестселлеры», «Захватывающие приключения», «Подборка детских книг», «Руководства для будущих мам». Для цветочных магазинов: «Цветы на юбилей», «Букеты на день учителя», «Цветочные композиции на 8 Марта».
Как правильно оформить листинг
Чтобы собрать наиболее эффективную структуру сетки карточек товаров, следует подобрать около 10 конкурентов по поисковой выдаче и проанализировать их блок листинга. Наиболее часто встречающиеся в нем параметры и функции следует реализовать на своем веб-ресурсе, это позволит обойти конкурирующие компании в топе поисковика.
Перечислим наиболее распространенные и важные элементы, которые необходимы для эффективного продвижения сайта и удобства пользователей. Обычно листинг включает в себя полезный функционал и превью реализуемых продуктов. Разберем подробнее каждый элемент.
Название товара
Заголовок карточки товарной позиции должен быть понятен и удобочитаем. Не стоит писать лишь название, лучше указать еще тип продукции, бренд и несколько важных характеристик (размеры, цвета, опциональные параметры, объем). Примеры корректных заголовков:
Стоимость
Это важный элемент для пользователей, так как он позволяет оценивать товар и сравнивать его с другими. Цена должна сразу отображаться на карточке, однако на некоторых сайтах стоимость появляется только при наведении курсора на позицию — это не совсем удобно для покупателя. Если на продукт действует скидка, следует перечеркнуть старую цену и указать новую. Также можно показать, на сколько процентов тот или иной товар подешевел.
Фотография
Карточка может содержать несколько фото продукта в разных вариациях. Изображения помогают быстрее оценить товарную позицию. Пользователи смотрят на качество, размеры и цвета. Все фотографии в сетке должны быть качественными, иметь высокое разрешение и подходить под общий дизайн сайта, чтобы увеличить конверсию. Потенциальный клиент должен представлять, как использует этот продукт и какую выгоду получит от покупки.
Рейтинг
Это важный элемент в листинге. Он пригодится, если посетителю сложно самостоятельно выбрать необходимый продукт из широкого каталога интернет-магазина. Такая функция будет уместна на сайтах по реализации электроники или бытовой техники. Подбирая какой-либо товар, посетители часто опираются на мнения других пользователей. Поэтому следует показывать потенциальным покупателям средний рейтинг и количество оценок.
Артикул или код продукта
Этот элемент следует отображать на карточках конкретных моделей, тогда посетителю будет удобнее найти необходимый продукт. Также артикул может помочь тем людям, которые сначала смотрят товары в магазине, а затем заказывают их через сайт, так как там дешевле. Код товара позволит покупателю быстро отыскать понравившуюся модель и приобрести ее по выгодной цене.
Дополнительная информация при наведении курсора на карточку
Если пользователю понравился какой-либо продукт, он захочет узнать о нем больше — посмотреть дополнительные изображения и характеристики. За счет этой функции при наведении курсора на товар покупатель сможет быстро сравнить его с другими и сделать выбор в пользу наиболее выгодного предложения. При этом интерфейс сайта не перегружается и сохраняется баланс. Также функция экономит время клиента — он не изучает нерелевантные позиции, а сразу просматривает нужные.
Такой функционал полезен, если у товара:
Кнопки «Сравнить», «Купить», «Добавить в избранное»
Чтобы сократить количество выходов к выдаче и увеличить конверсию, лучше сразу дополнить карточку товара функциями быстрой покупки, сравнения, добавления в отложенное. Так потенциальный покупатель сэкономит время и не вернется обратно к поиску, чтобы найти сайт поудобнее. Обязательно стоит давать доступ к этим функциям незарегистрированным посетителям, хотя бы один раз.
Часто эти кнопки загромождают карточку, и важная информация теряется на фоне. Тогда лучше их отображать только при наведении курсора на товар. Это отличное решение проблемы, так можно уменьшить визуальную нагрузку, сохранит весь функционал и не усложнить поиск этих функций.
Позиции, добавленные в корзину, сравнение или в избранные, должны выделяться в сетке. Это будет удобно для покупателя, так как при повторном визите на сайт может измениться порядок товарных позиций, и найти необходимую будет уже проблематично.
Основные ошибки в оформлении листинга
Рассмотрим наиболее распространенные проблемы, которые часто мешают успешному продвижению веб-ресурса в поисковых системах.
Отсутствие ассортимента
Чтобы охватить большое количество ключевых запросов, часто создают новые страницы разделов, подразделов, меток или брендов, на которых практически нет товарных позиций. Это неправильный подход, так как в топе выдачи отображаются конкуренты с большим количеством карточек товаров. В итоге чтобы их обойти, необходимо быть лучше и не уступать по ассортименту продуктов. Ко всему прочему увеличение сетки товарных позиций делает продвигаемую категорию более релевантной.
Прежде чем создавать страницы под собранное семантическое ядро учтите это:
Пример как быть не должно:
Карточка есть, а товара нет в наличии
Многие сайты допускают такую ошибку— на первой странице листинга отображаются позиции, которых нет в наличии. Это говорит поисковым системам, что в продвигаемом разделе плохой ассортимент, что очень сильно мешает ранжированию.
Помимо этого, такая ошибка увеличит количество возвращений к выдаче. Если пользователь зайдет на сайт и обнаружит, что необходимый продукт не в наличии, скорее всего, он продолжит поиск у конкурентов, а вы потеряете большое количество клиентов.
Чтобы выйти из этой ситуации, необходимо предложить предзаказ. Например, кнопку «Купить» заменить на «Уведомить о появлении». Когда позиция снова появится в продаже, клиенту об этом сообщат.
Как не стоит делать:
Отсутствие параметров фильтров и сортировки блока товаров
Это важные элементы разделов и подразделов, которые помогают пользователям быстро найти продукт. В большинстве случаев сетка листинга наполнена огромным количеством карточек, без фильтров и сортировки посетитель может потеряться и уйти к конкурентам.
Если функция реализована грамотно, поведенческие факторы и ранжирование веб-ресурса улучшатся. Чтобы выбрать правильные параметры фильтров и сортировки, которые позволят повысить позиции в топе, следует проанализировать конкурентов и сделать функции отбора карточек по аналогии.
Как не должно быть:
Незаполненные Alt картинок в карточках товарных позиций
Эта ошибка не сильно влияет на продвижение самого раздела или подраздела, но мешает продвигать карточку продукта в поиске по изображению. Многие интернет-магазины не заполняют Alt у картинок и оставляют их пустыми. Так делать нельзя, потому что альт — это важный критерий ранжирования при поиске позиции по фото.
Заполнены атрибуты или нет, удобно смотреть через плагин Seo meta in 1 click. Он очень быстро устанавливается и им легко пользоваться.
Заключение
Роль листинга очень важна в продвижении, именно он позволяет:
Чтобы ваш веб-ресурс попал в топ поиска по нужным запросам, необходимо ответственно подойти к оптимизации листинга и учесть все рекомендации, чтобы избежать большого количества ошибок и неэффективного продвижения.
Оформление листинга и превью товаров в интернет-магазине: 7 ключевых правил UX
Всем привет! Меня зовут Максим Жуков, я из Kislorod. Специализируемся на разработке и развитии e-commerce проектов.
Недавно рассказывали, как прокачать поиск на сайте, чтобы увеличить конверсию. Статья собрала много положительных отзывов в профсообществе, поэтому решили продолжить.
Сегодня публикуем новый материал из внутренней базы знаний — обо всём, что касается правильной работы с листингами. Вы узнаете, почему важно уделить внимание листингам товара с точки зрения UX, что обязательно должно быть в превью карточек товаров, почему стоит избегать функционала «Быстрый просмотр» и чем его заменить.
Перед чтением рекомендуем подписаться на наш телеграмм-канал, в котором мы делимся опытом точечного увеличения конверсий в клиентских проектах, исследованиями, гипотезами и наблюдениями. Подписались? Тогда поехали.
Листинг товаров в интернет-магазине — это страница со списком позиций категории. Позиции представлены в виде превью, при нажатии на которое посетитель попадает в карточку товаров.
Листинги — одни из самых важных страниц интернет-магазина, на них покупатель получает первую информацию о товарах.
Важно грамотно оформлять листинги для:
удобства пользователей — чтобы помогать быстрее сравнивать и находить нужные товары. Это работает на увеличение конверсии.
Страница листинга обычно включает сетку товаров, полезный функционал, превью карточек товаров, иногда — дополнительные элементы.
Сетка — это количество столбцов и строк с превью товаров. Чаще всего используется 3-5 столбцов. Если актуально показывать большую фотографию и выводить в превью много характеристик, то разумно делать крупные превью — соответственно, столбцов будет меньше. О балансе размеров превью товаров и их количестве в сетке мы еще поговорим.
На скрине выше показано отображение товаров плиткой. В верхнем правом углу реализован функционал выбора размера превью.
Иногда реализуют отображение товаров списком или таблицей — это зависит от специфики интернет-магазина. Подробнее расскажем об этом в следующий раз.
На одну страницу обычно выводят от десяти до сорока позиций. Если товаров много, нужно реализовать пагинацию — переключение страниц.
Можно реализовать возможность перехода на определенную страницу, как на ozon.ru
Отображать более сотни товаров на странице не стоит — это снизить скорость загрузки. А динамическая подгрузка товаров может негативно сказаться на индексации. Вариант — комбинировать пагинацию и динамическую подгрузку по нажатию на кнопку «Показать ещё».
Создавать страницу листинга для категории с малым количеством товаров нет смысла. В ТОП попадают страницы с хорошим ассортиментом — поэтому при выборе количества отображаемых позиций важно ориентироваться и на конкурентов. О решении расскажем ниже — в блоке про оптимизацию листингов.
Применение полезного функционала в листинге улучшает пользовательский опыт и помогает быстрее находить нужные товары — без необходимости многократно перемещаться из списка товаров в карточки и обратно.
Возможные решения для удобства пользователя:
О фильтрации и о сортировке подробно рассказали в этой статье, остальные нюансы рассмотрим ниже.
Превью — первое, на что обращает внимание пользователь. Это ключевой элемент листинга, разрабатывая который нужно учесть важный нюанс.
Поэтому важно соблюсти баланс — превью товаров должно отображать не максимальное, но достаточное количество информации, чтобы листинг не был перегружен, а пользователи видели доступные варианты.
Если в превью не выводится необходимая для сравнения информация (размер, варианты расцветок) пользователю приходится постоянно перемещаться со страницы категории в карточку товара и обратно для уточнения деталей. По результатам исследований 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), если было полезно. Вам несложно — нам приятно 😉