Оформление листинга и превью товаров в интернет-магазине: 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), если было полезно. Вам несложно — нам приятно 😉
Как создать идеальный листинг для Амазона?
Неуклонный рост аудитории Амазона по всему миру делает эту онлайн-площадку все более желанной для наших продавцов. Этому же способствует стабильно высокий объем продаж, осуществляемых сторонними продавцами через Амазон. Если в 2007 году более 2/3 товаров продавала сама компания, то в 2017 году половина продаж пришлась на долю сторонних продавцов, а в 2016 году их чистая выручка составила почти 23 миллиарда долларов. Разве это не хороший повод задуматься о выходе на глобальную площадку, предложенную Амазоном?

Конечно, чтобы успешно конкурировать с другими продавцами, вам нужно будет научиться эффективно работать с Амазоном. И одним из важнейших этапов этой работы является создание листинга. Листингом (по-английски listing) называется карточка товара, в которой описываются все его характеристики и особенности вашего коммерческого предложения. Листинг включает изображения и текст, и в данной статье мы подробно расскажем, как заставить эти две составляющие идеально работать на ваши продажи.
Как правильно представить фото товара?
Лучше один раз увидеть… Амазон уделяет большое внимание качеству фотографий, справедливо считая, что хорошие иллюстрации помогают продавать. Изучив карточки товаров в топах различных категорий, вы быстро убедитесь в обоснованности данного утверждения: бестселлеры обычно имеют 5–6 изображений, если не все разрешенное количество. Амазон разрешает публиковать до 9 изображений, устанавливая ряд правил:
- Каждый товар должен сопровождаться как минимум одной фотографией.
- Главное фото (Main image) должно представлять товар исключительно на белом фоне.
- На главном фото должен отображаться только сам товар без дополнительных аксессуаров, упаковки, иллюстраций примеров использования, текстовых вставок, логотипов и водяных знаков.
- Не допускается использовать в качестве главной картинки графические изображения и рисунки – только фото реального товара.
- Товар должен занимать 85% площади главного фото.
- Для дополнительных фото допускается использование цветного фона и изображение аксессуаров, но последние не должны вводить покупателей в заблуждение – они должны четко понимать, что входит в комплект.
- Логотипы и водяные знаки запрещены для всех изображений.
- Минимально допустимое разрешение для любых изображений – 500 пикселей по самой длинной стороне.
- Рекомендуемое разрешение – 1000 пикселей по длинной стороне. Такое разрешение позволяет задействовать функцию увеличения изображения.
- Изображения принимаются в форматах JPEG (.jpg), TIFF (.tif) и GIF (.gif).
Более подробное руководство по изображениям товаров вы можете найти здесь или в файлах с инструкциями для отдельных категорий продуктов.
Правила Амазона одинаковы для всех продавцов, но все-таки одни пользователи платформы используют изображения более эффективно, чем другие. Берите пример с более успешных продавцов:
- Сделайте максимально качественное фото для главной картинки. Именно эта фотография отображается в выдаче Амазона, именно ее прежде всего видят пользователи. Картинка должна быть не только визуально привлекательной, но и полезной: глядя на нее, покупатель должен сразу понять, что он получает.
Например, это фото не только формально соответствует требованиям Амазона, но и четко показывает, что комплект включает 2 подушки:

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

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

Зато теперь все понятно:

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

А это фото исчерпывающе отвечает на вопрос, из каких материалов сделаны подушки:

Собственно, это и есть главное правило для размещения фото в листинге Амазона: подумайте, что бы вы хотели рассмотреть и узнать, если бы были на месте покупателя.
Что писать в тексте для листинга на Амазоне?
Одной из основных особенностей текстовой части листинга является его строгая структура, регламентированная Амазоном:
- заголовок (title);
- буллиты (key features или bullet points);
- описание (product description).
Заголовок включает название и основные характеристики товара, позволяющие отличить его от аналогичной продукции других продавцов. Например:

В этом заголовке в качестве отличительных признаков используются названия бренда и модели, а также характеристики из фильтра Амазона – диаметр колес и тип подвески.
Кстати, если вы не знаете, какие характеристики товара вынести в заголовок, посмотрите на предлагаемые для этой категории фильтры. Характеристики из фильтров часто органично вписываются в заголовок и помогают выделить особенности, критичные для покупателей. В заголовке можно указывать:
- цвета;
- размеры;
- материалы;
- целевую аудиторию (для мужчин/женщин, детей/взрослых);
- сферу применения продукта (горный велосипед, городской велосипед и т.д.);
- количество предметов в упаковке;
- особенности конструкции;
- нишевую принадлежность.
Можно подсмотреть идеи у конкурентов, но не стоит копировать их: Амазону плевать на уникальность, но полностью «сплагиаченный» заголовок не поможет выделить ваш товар из массы других и привлечь к нему внимание покупателей.
Буллиты – основные характеристики товара, оформленные в виде списка из 5 пунктов. Руководство Амазона намекает, что каждый пункт должен кратко описывать одну характеристику, как проиллюстрировано в вышеуказанном примере: первый пункт описывает раму, второй – вилку, третий – механизм переключения передач и т.д. Однако Амазон не настаивает на такой структуре, позволяя создателям листинга самостоятельно решать, какую информацию выносить в буллиты. Хорошим альтернативным вариантом является описание в каждом пункте отдельного преимущества товара с объяснением, за счет каких характеристик достигается данное преимущество. Например:
- Длительный срок службы благодаря использованию…
- Плавное переключение обеспечивается…
- Комфорт во время езды гарантируют…
Если же вы выбираете классический подход, постарайтесь не просто перечислять характеристики товара, но и объяснять, какие преимущества получает покупатель благодаря этим характеристикам.
Вот пример простого перечисления:

А вот буллиты, связывающие характеристики с преимуществами:

Очевидно, что второй текст более привлекателен для покупателя, да и позиции в рейтинге Амазона у него более высокие.
Последняя текстовая часть листинга – описание товара. Здесь продавцам предлагается более подробно осветить характеристики и достоинства товаров – как уже упомянутые в заголовке и буллитах, так и дополнительные.
Если вы уже подробно рассказали об основных качествах предлагаемого продукта в предыдущих блоках, посвятите большую часть описания мелким деталям или второстепенным характеристикам. Не стоит просто повторять информацию из буллитов, пусть и другими словами. Лучше подумайте, какие вопросы хотел бы задать покупатель, чтобы сделать окончательный выбор в пользу покупки. Расскажите о гарантии и бонусах, если таковые предлагаются; добавьте размерную сетку или технические спецификации, если это поможет покупателю сориентироваться. Исходите из специфики товара: в описании велосипеда разумно сфокусироваться на технических деталях, как это сделано на карточке, представленной ниже (товар входит в десятку топовых в своей категории):

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

В любом случае делайте текст удобным для чтения, используя списки, подзаголовки, выделения шрифтом, как вы бы сделали в хорошем продающем тексте. Используйте и другие атрибуты продающих текстов:
- задавайте вопросы, чтобы создать впечатление диалога с покупателем («Ищете полезную игрушку для ребенка? Этот развивающий конструктор – отличный подарок на день рождения, Новый год или Рождество»);
- описывайте проблему и предлагайте решение («Детям скучно играть с одной и той же игрушкой? Из этого конструктора можно построить много разных игрушек»);
- аргументируйте, почему нужно выбрать именно этот товар (конструктор выполнен из безопасных материалов, большой набор, удобная коробка для хранения, гарантия возврата денег и т.д.);
- приводите факты (150 деталей в комплекте, 2 года гарантии, 800 довольных покупателей на Амазоне);
- заканчивайте текст призывом к действию («Добавляйте конструктор в корзину прямо сейчас – и у вас будет отличный подарок для ребенка к Рождеству!»).
При написании текстов не забывайте о запретах, установленных Амазоном:
- не пишите о своей компании или других продуктах, которые вы предлагаете;
- не включайте в текст рекламные сообщения о распродажах, бесплатной доставке и т.д.;
- не указывайте в текстах имя продавца, электронные адреса, ссылки на сайты и цены.
Для размещения этой информации Амазон предлагает другие разделы, а за нарушение требований грозит удалением карточки товара.
Объем и ключевые фразы
Эти два параметра уже давно являются камнем преткновения при написании текстов для Амазона. Дело в том, что онлайн-платформа ограничивает максимальный объем текстов для каждого блока:
- для заголовков – 200 знаков с пробелами;
- для каждого буллита – 250 знаков;
- для описания – 2000 знаков.
Цифры приблизительные, так как требования Амазона слегка варьируются в зависимости от категории товара (поэтому необходимо ознакомиться не только с общими правилами создания карточек товара, но и с руководством для конкретного раздела). Однако эти руководства ничего не говорят об оптимальном использовании ключевых фраз, да и весь алгоритм ранжирования Амазона держится в строжайшем секрете. Достоверно известно лишь то, что контент во всех трех блоках индексируется, и для ранжирования достаточно всего одного вхождения ключевой фразы.
Но ведь можно использовать и больше вхождений в надежде на то, что это поднимет товар на более высокие позиции в выдаче Амазона! Отсюда мы можем наблюдать громоздкие заголовки и длиннющие буллиты: 
Зачастую продавец максимально использует объем, выделенный Амазоном, исключительно для того, чтобы насытить текст ключевыми фразами. Это выглядит логично, НО:
- Достоверно неизвестно, насколько такой подход помогает продвинуть товар в выдаче Амазона. На платформе полно топовых листингов с лаконичными заголовками, буллитами и описаниями. Вот бестселлер, выдаваемый в топе категории «Горные велосипеды»:

- Громоздкие заголовки и буллиты трудно читать, а это может отпугнуть потенциальных покупателей.
- Длинные тексты плохо сочетаются с приложениями для мобильных устройств. В зависимости от конкретной платформы покупатели видят лишь некоторую часть текста, обычно меньше половины.
Вывод очевиден: пишите текст не для поисковых алгоритмов, а для людей.
Заголовки хорошо читаются, если в них около 100 знаков с пробелами, а вместо перечисления ключевых слов содержится действительно полезная информация об основных отличиях товара.
Буллиты можно сделать и подлиннее, особенно если специфика товара предполагает наличие аспектов, требующих разъяснения для покупателя. Однако в этом случае выделите основные характеристики/преимущества в начале каждого пункта, как это сделано в вышеописанном примере детского конструктора – это поможет сфокусировать внимание при чтении.
Для ряда товаров разъяснения не нужны, и вряд ли имеет смысл использовать весь предоставленный объем только для того, чтобы налить «воды» вперемешку с ключевыми фразами. Вот один из бестселлеров категории «Женские джинсы», который при желании можно было бы лишь слегка дополнить чем-то вроде «натуральная ткань с небольшим добавлением спандекса для эластичности и удобства в носке» или «застежка-молния для тех, кто не любит возиться с пуговицами». Но ведь это далеко не 200 знаков!

Памятуя о пользователях, совершающих покупки с мобильных устройств, вставляйте ключевые слова в самое начало заголовков и буллитов. При этом именно в заголовке используйте самое высокочастотное ключевое слово, а в буллитах уделите внимание дополнительным фразам. Самые важные качества товара опишите в первых трех буллитах – они отображаются по умолчанию, в то время как для просмотра остальных пунктов пользователь должен развернуть описание.
А вот в блоке «Описание товара» вполне уместны и длинные предложения, и обилие ключевых фраз, органично вписанных в текст. Используйте их в различных вхождениях, включая варианты с опечатками. Вместо того чтобы немилосердно загромождать короткие блоки, вложите свой креатив в создание качественного описания, тем более что большой объем и произвольная форма этому способствуют.
Кроме того, именно этот блок отражается первым в мобильной версии Амазона, поэтому обязательно нужно хорошо продумать первые 2–3 предложения описания: именно их увидят пользователи, не разворачивая остальной текст. И помните, что плохо отформатированный текст на мобильных устройствах читать еще труднее, поэтому делите описание на небольшие абзацы, используйте списки и выделяйте отдельные пункты.
Оформляем текст правильно
Еще одной особенностью текстов для Амазона является наличие правил оформления, с оригинальной версией которых вы можете ознакомиться здесь. Для разных блоков текста у Амазона есть отдельные требования:
- Для заголовков:
- первую букву каждого слова нужно писать с большой буквы за исключением союзов, артиклей и коротких предлогов;
- числительные записываются цифрами, а не словами;
- нельзя использовать символы и другие графические знаки, кроме букв и цифр.
- Для буллитов:
- каждый пункт списка нужно начинать с большой буквы;
- при написании предложений нельзя использовать дефис, точку, восклицательный знак или спецсимволы;
- для разделения фраз в пределах одного пункта используется точка с запятой;
- числительные передаются цифрами;
- единицы измерения записываются полностью.
К оформлению описаний у Амазона особых требований нет, нужно лишь писать полными предложениями и грамотно.
Хотя в руководстве Амазона сказано, что нарушение этих правил может привести к удалению карточки товара, на практике такое наказание применяется далеко не всегда. Выше вы уже видели пример текста конструктора ETI Toys, где используются и точки, и восклицательные знаки – таких примеров на Амазоне полно. Тем не менее, новичку стоит быть осторожным и придерживаться правил, чтобы его товар не заблокировали на этапе модерации.
Следуйте требованиям Амазона и нашим советам, чтобы сделать идеальный листинг и успешно продавать товары на крупнейшей в мире онлайн-площадке!
Внутренняя оптимизация листингов. Большое руководство для интернет-магазинов + чек-лист
Листинги — это очень важные элементы в структуре eCommerce-сайта. С их оптимизации начинается продвижение любого магазина, поскольку хорошо проработанный список товаров — это не только дружественное юзабилити, но что более важно — основополагающий фактор ранжирования для поисковых систем.
Правильные листинги нравятся Яндексу и Google. За это они предоставляют магазинам преимущества — отображают их на более высоких позициях в поиске, когда пользователи вводят целевые запросы. Выше позиции в выдаче — больше переходов на сайт. Больше целевых переходов — лучше продажи. Такова основополагающая логика ранжирования.
При этом вполне вероятен и обратный сценарий, когда плохая оптимизация или, наоборот, переоптимизация каталога приводят к проседанию трафика по высоко- и среднечастотной семантике — самым конверсионным и стратегически важным запросам для любого интернет-магазина. В этой статье мы расскажем, как избежать подобных сценариев. Бонусом — полезный чек-лист для проверки листингов магазина на соответствие актуальным требованиям поисковых систем.
Какие листинги нравятся поисковикам
Начнем с того, что такое листинги. Если коротко, это страницы с блочной витриной товаров. Самые простые примеры — категории, подкатегории, теговые страницы. Листинги — обязательный атрибут любого интернет-магазина. Но не только. Их используют и на других eCommerce-сайтах, например, если это площадка с услугами или витрина производителя. В этом случае они могут быть не похожими на классическую плитку с товарами. Вне зависимости от своего типа все листинги подчиняются единым принципам SEO-оптимизации.

С точки зрения поисковых систем эти разделы должны включать базовый минимум элементов:
— превью-карточек товаров, которые ведут на отдельные страницы с расширенными характеристиками;
— фотографии товаров;
— название каждого продукта в формате ссылки (текстового анкора);
— указание цены и валюты;
— кнопки действия: купить/заказать/оформить;
— отображение статуса доступности товара: в наличии/отсутствует/предзаказ и т.д.;
— дополнительную навигацию в виде «хлебных крошек»;
— кнопки страниц пагинации.
Повторимся, это базовый минимум элементов, которые важны для поисковиков. На практике листинги стараются делать более функциональными: на страницы внедряют интерактивные фильтры, в самих карточках добавляют возможность предпросмотра и многое другое. Технические фишки могут быть разными, но цель у них всегда одна: улучшить опыт взаимодействия пользователя с каталогом.
С продуманными и правильно оптимизированными листингами интернет-магазин получает следующие преимущества:
— рост трафика по коммерческим запросам средней и высокой частотности;
— улучшенную навигацию по сайту;
— оптимизацию поведенческих факторов;
— увеличение конверсий.
Этого вполне достаточно, чтобы понять, насколько сильно разделы каталога влияют на конверсионный потенциал интернет-магазина. Теперь давайте разберемся, как последовательно подходить к оптимизации листингов.
Распределение поисковых запросов
Основа поисковой оптимизации листингов — грамотное распределение ключевых запросов под каждую из категорий. Перед непосредственным разворачиванием сайта у вас должно быть собрано семантическое ядро — список поисковых фраз с разбивкой на кластеры. Эти запросы будут распределяться между разными разделами. Таким образом, с оглядкой на ядро формируют структуру всего сайта, в т.ч. листингов.
Имея заранее собранную семантику проще понять, как правильнее организовать каталог: какую структуру он должен иметь, какое количество категорий и подкатегорий включать. Что немаловажно: вы будете знать, какие группы товаров эффективнее продвигать на одном листинге. Например, нужно ли разводить по отдельным категориям обычные и профессиональные наушники или целесообразнее размещать все модели в одном подразделе.
При выборе семантики под листинги важно четко разграничивать поисковые запросы не только по частотности (высоко-, средне- и низкочастотные), но и по интенту (информационные и коммерческие). Первое, что следует запомнить — листинги оптимизируют исключительно под кластеры коммерческие запросов. С точки зрения частотности основное внимание уделяют среднечастотной семантике.
Минимальное количество товаров на странице
Размер ассортимента — важный коммерческий фактор, который учитывают поисковики при ранжировании. Листинг с небольшим количеством товаров — это плохо. Даже если магазин имеет репутацию, хорошие поведенческие и надлежащую техническую оптимизацию, полупустой товарный раздел все равно будет улетать на задворки выдачи. Для общего понимания: листинги категорий топовых магазинов рунета в среднем содержат по 60-80 товаров. Конечно, такой ассортимент может предложить далеко не каждый магазин, но задача минимум — стремиться к тому, чтобы на одной странице основного раздела отображалось не менее 15-20 товаров.
Даже если ассортимент магазина небольшой, всегда можно найти решение, как сделать каталог более наполненным. Например, можно переделать или изначально создать структуру разделов с ориентацией ограниченный ассортимент. То есть не плодить мелкие категории, а объединить все в один общий и хорошо наполненный раздел. Например, небольшой магазин одежды может отказаться от полупустых листингов «жилеты», «пиджаки», «брюки», а объединить все в большую категорию — мужские костюмы.
Если ассортимент совсем небольшой, можно попробовать раздробить отдельные товарные карточки по характеристикам. Например, вы предаете платье в трех цветах — делайте под каждый фасон отдельную карточку. Скорее всего, это будет не очень удобно с точки зрения пользовательского опыта, но позволит выкрутиться перед поисковиками. Как уникализировать такие однотипные карточки товаров для поисковых систем — читайте здесь. Но в целом, лучше всегда стремиться к реальному расширению ассортимента.
Указание цены
Стоимость товара обязательно прописывают как в самих карточках, так и на страницах листинга — это еще одних важный SEO-фактор, который учитывают поисковые алгоритмы. Если вы по каким-либо причинам не публикуете цены — предлагаете скинуть их в директ, уточнить по телефону или выслать прайс другим способом — не стоит рассчитывать на хорошие позиции в поисковой выдаче. Особенно четко эта закономерность прослеживается в Google. Цены на товар должны быть представлены обязательно. В крайнем случае их можно указать в обтекаемом формате «от … рублей». Это, конечно, насторожит живого пользователя, но подойдет поисковикам.
Товарные фильтры и сортировка

Наличие фильтра на страницах листингов не является прямым фактором ранжирования. Тем не менее, эти интерфейсы опосредованно влияют на позиции раздела в поисковой выдаче за счет оптимизации поведенческих. Фильтры и сортировки по различным параметрам улучшают навигацию по магазину, снижают процент отказов, увеличивают длительность пользовательских сессий — это ценные сигналы для поисковых систем, которые напрямую определяют рейтинг страниц в выдаче Google и Яндекса.
Фильтры — это всегда большой плюс для юзабилити магазина, но наравне с ними не стоит пренебрегать возможностями более простых опций сортировки. Тестирование показывает, что именно с них пользователи начинают первичный поиск товаров, и уже после этого переходят к более тонким настройкам с помощью фильтра. 
Анкорный текст в товарных карточках
По мере ужесточения поисковых алгоритмов оптимизировать страницы под ключи становится сложнее. Относительно безопасный формат использования семантики — использование анкоров в названии товаров. Здесь используют главным образом низкочастотные вхождения и long tail запросы (запросы с длинным хвостом). Увлекаться не стоит — анкорный текст должен быть релевантным и без переспама. Аналогичным образом можно оптимизировать текст с характеристиками в товарной карточке на странице листинга.

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

Если позиция временно отсутствует на складе, целесообразно подумать о механизме отложенной покупки. Например, можно предложить пользователю сделать предзаказ, предоставив ему скидку или другой вовлекающий бонус за ожидание.
Оптимизация текстов на страницах листингов
С алгоритмом Баден-Баден использовать бессодержательные seo-тексты на страницах листингов — не только неэффективно, но и опасно, поскольку весь сайт или его отдельные страницы с легкостью могут залететь под фильтр. Именно поэтому с текстовой оптимизацией разделов интернет-магазинов работают максимально и аккуратно.
Важность текстов на этих страницах с момента запуска Баден-Бадена — спорный вопрос. Проверить, усиливает ли текст позиции листингов в выдаче Яндекса, можно только экспериментально — добавляя аккуратно оптимизированный контент, выжидая время и анализируя позиции. Но помимо Яндекса есть еще трафик из Googlе, для которого даже самые нечитабельные портянки текста никогда не были особой проблемой (по крайней мере в рунете). Поэтому многие оптимизаторы не спешат отказываться от текстов на страницах листингов.
Чего точно не нужно делать:
— использовать длинные (больше 1,5-2 тыс. зн.) неструктурированные тексты внизу каталога;
— вписывать в текст более 5 ключевых запросов (безанкорных);
— использовать ссылки с коммерчески спамными анкорами, содержащими слова «купить», «дешево» и т.д.;
— размещать скрытый текст, пытаясь таким наивным способом обмануть поисковые системы.
Что можно делать:
— размещать небольшой текст, длиной 500-1000 зн., с разбивкой на абзацы и маркировкой;
— текст должен соответствовать интенту страницы — быть предельно полезным и давать ответы на популярные вопросы;
— вписывать не больше одного-двух поисковых запросов в максимально естественном вхождении и без спамного окружения;
— оформить текст на странице в формате FAQ, когда по каждому вопросу можно развернуть короткий ответ.
Оптимизация Title
Title — самый важный метатег с точки зрения продвижения. С ним все довольно сложно. С одной стороны, он должен быть оптимизирован для поисковых систем — содержать ключевые запросы, через которые ПС будет идентифицировать и ранжировать содержимое страницы. С другой — быть максимально вовлекающим для живого человека, т.к. именно тайтл определяет CTR сниппетов (показатель кликабельности) в поисковой выдаче.

Для самых трафиковых страниц тайтлы принято прописывать вручную. Это желательно делать и для листингов. Вполне справедливо, что на это уйдет много времени, чем если генерировать метатеги с помощью шаблонов. Но, поверьте, качественный тайтл стоит того.
В качестве компромиссного варианта можно сгенерировать тайтлы автоматически, выгрузить их в виде списка и внимательно изучить. Самые кривые и непривлекательные конструкции — отредактировать вручную.
Требования к тайтлам листингов:
— уникальный заголовок для каждого листинга;
— использование ВЧ запроса в прямом вхождении (сам ключ располагают как можно ближе к началу);
— длина 60-70 знаков с пробелами;
— читабельность и соответствие интенту страницы;
— использование ГЕО (если актуально).
Для улучшения кликабельности сниппета в тайтле можно прописывать цены. Это, действительно, прокачивает CTR, но требует периодической проверки и актуализации информации, а если товаров много — это не самая простая задача.

Оптимизация H1 на страницах листингов
Второй по важности метатег — Н1. Он отображается в виде заголовка непосредственно на странице листинга. Сюда также вписывают ВЧ запрос. Допускается использовать тот же ключ, что и в тайтл, но в более естественной словоформе. Если в Title прописывалось ГЕО, в заголовке Н1 его можно не указывать. Также здесь не принято использовать коммерчески спамные слова: «купить», «заказать», «дешево» и т.д.
С учетом этих требований, оба метатега могут выглядеть примерно так:
Title: Мужские костюмы купить с доставкой — Москва
H1: Широкий выбор мужских костюмов
В H1 листинга используют только один запрос. Сам заголовок располагают ближе к началу страницы — над плиткой товаров. Остальные ключи распределяют по тексту и, при необходимости, вписывают в заголовки нижнего уровня: H2 и H3.
Создание тегированных страниц
Помимо стандартных категорий и подкатегорий в структуре интернет-магазина можно использовать дополнительные тегированные страницы. Это своего рода псевдокатегории, в которых представлены товары, объединенные по узким признакам. Например, «короткие платья в горошек», «рубашки женские в клетку» и т.д.

Что дают тегированные страницы:
- увеличение общего охвата семантики;
- получение конверсионного трафика из поиска по НЧ запросам;
- рост глубины просмотров и оптимизацию поведенческих в целом.
Тегированные страницы можно создавать автоматически (на основе результатов фильтрации) или вручную, подбирая сочетание самых популярных характеристик.
Преимущества первого способа очевидны — меньше ручной работы. Но у него есть и недостатки. Большая часть сгенерированных разделов будут низкоконверсионными. Обычно такие страницы дают немного трафика, но ощутимо расходуют краулинговый бюджет, из-за чего могут возникать проблемы с индексацией важных документов.
Ручное создание тегированных страниц — более эффективное, хоть это и занимает много времени. Здесь помогают специальные инструменты, например, тот же Вордстат. С его помощью можно посмотреть, какие характеристики того или иного продукта интересуют пользователей. На основе этих сочетаний создают тегированные страницы под конкретные товары на собственном сайте.
Больше о реализации и использовании тегированных страниц — читайте здесь.
Настройка страниц пагинации
В больших каталогах используют постраничный вывод товаров. Порядковая нумерация страниц — это и есть пагинация.

Два сценария пагинации: развернуть ленту еще на 60 позиций или перейти на отдельную страницу
Такая организация контента выполняет две важных функции:
- оптимизирует скорость загрузки и без того тяжелых страниц листинга;
- улучшает юзабилити сайта, т. к. отпадает необходимость долгого скролла вниз.
В то же время для поисковых роботов такая организация контента не очень понятна. Большое количество однотипных страниц могут быть приняты за дубли, и тогда начнутся проблемы:
- важные страницы вылетят из индекса;
- перестанут ранжироваться определенные товары;
- произойдет неправильное распределение ссылочного веса внутри сайта.
Чтобы избежать столь существенных SEO-ошибок страницы пагинации нужно правильно настроить. Это делают двумя способами:
1) Настройка на странице метатега Robots (не путать со служебным файлом robots.txt). С помощью noindex, follow из индекса убирают все страницы пагинации кроме первой, но не запрещают краулерам переходить по ссылкам внутри них.

2) Второй вариант обработки — настройка атрибута rel=”canonical”. С его помощью указывают среди похожих страниц сайта самую главную — каноническую.

Представим, что в каталоге есть три страницы пагинации: page 1, page 2, page 3. Страница page1 — это основная (каноническая). Нам нужно указать это поисковикам. Что мы и делаем, путем добавления в <head> документов page2 и page3 ссылки-указателя, ведущую на приоритетную страницу. Выглядит она так:
Чего не стоит делать:
- внедрять ajax-подгрузку листинга, когда вместо постраничного вывода товары подтягиваются по мере скролла страницы;
- закрывать все страницы пагинации от индексации;
- пытаться уникализировать каждый документ.
Важно!
При проведении глобальных технических работ — переносе магазина на новую CMS, обновлении дизайна, изменении структуры — настройки пагинации часто слетают. В этом случае все страницы залетают в индекс, что влечет описанные выше проблемы. Поэтому после любых серьезных работ на сайте, вебмастеру обязательно следует проверять корректность настроек пагинации.
Реализация микроразметки
Это еще одна, пусть и рекомендательная, но крайне важная составляющая оптимизации магазина. Речь идет о внедрении специальной разметки данных на страницах сайта, благодаря которой поисковые роботы лучше распознают содержимое каждого документа. Ее можно реализовать вручную (более предпочтительный вариант, хоть и требующий навыков) или сгенерировать при помощи специальных плагинов.
Что может микроразметка:
- способствует корректному индексированию документов, что особенно важно для однотипных страниц-листингов;
- формирует расширенные сниппеты в поисковой выдаче.

С микроразметкой в сниппет подтягиваются дополнительные сведения – он становится не только информативнее, но и заметнее. Вероятность перехода на сайт возрастает в разы, даже если он находится не на верхних позициях в выдаче.
Чего НЕ может микроразметка:
- наличие микроразметки не коррелируется с ранжированием напрямую, т.е. по умолчанию она не гарантирует лучших позиций в выдаче, но опосредованно приносит немало пользы;
- внедрение микроразметки не обеспечивает попадание в колдунщики — блоки с расширенными ответами в выдаче Google и Яндекс.
Реализация грамотной перелинковки
Страницы сайта должны быть связаны внутренними ссылками. Это нужно для того, чтобы ссылочный вес правильно распределялся между отдельными документами, что в свою очередь оптимизировало ранжирование всего ресурса и обеспечивало ему хорошие позиции в выдаче. О базовых принципах seo friendly перелинковки лучше почитать отдельно.
На страницах листингов проблема перелинковки отчасти решается сама собой, хотя бы потому, что каждый товар содержит анкорную ссылку, ведущую на страницу продукта. Таким образом документ с большим весом (категория) передает часть ссылочного веса менее трастовой странице — карточке товара. Но этим ограничиваться не стоит.
На страницах листингов хорошо работают кросс-контентные блоки: всевозможные тематические подборки «С этими товарами также покупают», «Лучшее для вас», «Вы недавно просматривали» и т.д.
Также в листингах не помешает перелинковка, когда кликабельными делают характеристики или свойства продуктов; благодаря им пользователь попадает на соответствующие страницы, где создана выборка товаров по нужному параметру, например, бренду. По своей сути, это те же тегированные страницы, о которых говорилось выше.
Использование хлебных крошек

Это невзрачный элемент интерфейса решает много важных задач. Хлебные крошки — это сразу и о перелинковке, и о навигации, и об оптимизации поведенческих. Итак, вкратце, каким образом они улучшают сайт:
1. Распределяют ссылочный вес страниц по всему сайту.
2. Служат вспомогательным элементом навигации — пользователь видит, на каком уровне вложенности он находится и лучше ориентируется на сайте. Как результат: качественнее опыт пользования сайтом, меньше возвратов на поиск, дольше длительность сессий, — все это важные сигналы для поисковиков.
3. Хлебные крошки можно дополнить выпадающим меню для еще лучшего UX и оптимизации поведенческих факторов внутри сайта.
4. Нестандартный сценарий — использование в тексте хлебных крошек ключевых запросов. Таким образом можно увеличить долю анкорных ссылок, которые имеют немалый вес для поисковых систем.

Визуальное удобство листингов
Избегайте нагромождения элементов. Используйте отравленные фотографии на белом фоне — это сделает каталог более комфортным для глаз. Стандартизируйте все фотографии: применяйте единый масштаб и общий ракурс для всех товаров. Меняйте формат курсора при наведении на кликабельные элементы листингов. Все это очень важные моменты для страниц с большим количеством визуального содержимого.
Общие требования к оптимизации листингов
Здесь хотелось бы поговорить о тех аспектах SEO-оптимизации, которые касаются всего сайта и листингов в частности.
Логичная SEO-структура магазина
Что касается структуры сайта, то здесь точно не нужно изобретать велосипед. Используйте самую простую и очевидную иерархию вложенности:
Главная страница → Листинг категории → Листинг подкатегории/Теговая страница → Карточка товара
Настраивайте человекопонятные URL. Их названия должны соответствовать разделам сайта, так чтобы, глядя на урл, пользователь понимал, на каком уровне вложенности он находится (эффект «хлебных крошек»).

Высокая скорость загрузки
Это очень важное требование для всего магазина и тяжелых страниц каталога в частности. Отрисовка контента листингов, занимающая больше 2-3 секунд с десктопа и 3-4 секунд с мобильных, — это уже плохо. Постоянно отслеживайте показатель скорости и при необходимости принимайте меры. Какими инструментами мониторить скорость и как оптимизировать страницы — читайте здесь.
Единство дизайна и интерфейсов
Дизайн страниц листингов не должен кардинально отличаться от остального сайта. При переходе в каталог, у пользователя не должно возникать ощущения, что он попал на другой ресурс. Это же касается и основных интерфейсов магазина.
Отсутствие авторана для мультимедийного контента
Шумящие вкладки раздражают всех. Юзабилити-тесты показывают, что лишь небольшая часть пользователей будет искать крестик, чтобы заглушить музыку или видео, если она запущена автораном. Большинство — просто покинет сайт. Это нужно учитывать при разработке сценариев для мультимедийного контента. Вот несколько рекомендаций на этот счет.
1. Музыка на странице магазина — зло с точки зрения UX., и от нее стоит отказать в любом формате.
2. С видео не все так однозначно. На страницах листингов оно может быть полезно, если это, например, промо бренда или видеоинструкция. Но в этом случае важно соблюдать следующие правила:
- размещайте видео внизу страницы;
- не используйте авторан;
- компромиссный вариант — авторан, но без звука по умолчанию;
- кнопка остановки хорошо заметна и доступна в любой момент.
Эффективные сценарии использования Pop-Up
Всплывающие окна — хорошие помощники, когда нужно сообщить о горячих акциях, самых выгодных предложениях в каталоге или попросить подписаться на рассылку. Но это при условии, что внедрен грамотный сценарий их использования. В противном случае они будут накручивать не конверсии, а отказы. Чтобы этого избежать, соблюдайте следующие правила:
- всплывающие окна отображаются не ранее, чем на втором-третьем экране прокрутки;
- содержание поп-апа релевантно странице, на которой он отображается;
- одна страница — одно всплывающее окно;
- всплывающее окно появляется только на первой странице пагинации; при переходе на другие страницы листинга — 2, 3 и т.д. — поп-апы уже не отображаются.
- большая и заметная кнопка закрытия всплывающего окна доступна сразу, а не спустя несколько секунд.
Чтобы получать максимум от использования поп-апов и при этом не создавать неудобств для пользователей, важно проводить А/В тестирование разных сценариев и внимательно изучать записи Вебвизора в Яндекс.Метрике.
Навигация по странице
Листинги — это обычно длинные страницы, в которых три, четыре и более экранов прокрутки. Кнопка «Наверх» имеет решающие значение, и о ней не стоит забывать. Помимо обратного скроллинга дублируйте кнопки пагинации вверху и внизу страницы.
Именно из этих нюансов, которые по отдельности могут показаться несущественными, в комплексе и формируется дружественный UX интернет-магазина, а это в свою очередь — хорошие поведенческие, высокие позиции в выдаче, растущие конверсии и прибыль.
Чек-лист по оптимизации листингов
А вот и обещанный чек-лист, в котором мы собрали главное по внутренней оптимизации товарных разделов. Сохраняйте его себе, и вперед — к высоким конверсиям!
Как тестировать креативы
Что такое и для чего используется тестирование креативов? Эта страшная штука составляет значительную долю расходов любого арбитражника, вебмастера, маркетолога и ещё других сфер жизни.
Нас интересует, как не слить весь рекламный бюджет на это самое тестирование.
Итак, зачем нужно тестирование? В двух случаях:
Например, для похудения — это полные люди, желающие сбросить лишний вес.
Когда человек не испытывает регулярной физической нагрузки, организм начинает накапливать жиры. С возрастом человек начинает меньше двигаться, а также после 21 года прекращает расти (жиры не перерабатываются в рост). Обычно в 21-22 года заканчивают университет, а нас интересуют люди, которые могут купить товар, а не безработные. Поэтому добавим ещё несколько лет чтобы человек нашёл “сидячую” работу.
В 90% случаев, мужчинам обычно всё равно какой у них вес, отсекаем их.
Получается, что основная ЦА любого оффера под похудение — Женщины 25+
Остальная аудитория оффера достаточна мала, таргетировать рекламу будет очень тяжело, и вероятнее всего сольетесь в минус.
Все веб-ресурсы тоже изначально нацелены на определенную аудиторию. Найти ресурс с аудиторией близкой к ЦА — и полдела сделано.
К сведению: В любой тизерной сети их менеджеры вам скажут, какая у них аудитория превалирующая. Это не является тайной. Однако может упростить вам жизнь.
Так зачем же тестирование нужно, если и так всё уже выяснили? Если можно спросить в тизерке, есть ли у них такие люди или нет?
Даже самый крутой товар, не имеющий аналогов, не будет продаваться за 1 рубль, если не объяснить человеку, что он ему нужен как воздух.
ИЩЕМ СВЯЗКИ
Связка — это тизер\баннер\пост, прокладка (при наличии), лендинг.
Рекламную сеть и способ рекламы выбираем в зависимости от ЦА.
Тизеры
У тизеров нас волнует 2 параметра — это CTR и количество конверсий. (дарю вам тизер в MGID-е)

В тизерных сетях с CTR ниже, чем 0.3% даже не имеет смысла работать. При работе с таргетированной рекламой CTR должен быть не ниже 2%.
Тизер должен соответствовать товару. Легко получить высокий CTR на тизере с фразой “НЕ ПЕРЕХОДИТЕ ПО ССЫЛКЕ!”, только такой трафик не понятно зачем нужен. Основная задача — это получить заказы товара.
На практике хорошо работает:
Тизеры на самом деле тестируются редко. В основном запускают как можно больше, а потом отключают те, что не могут набрать CTR.
Если CTR хороший, а конверта нет, можно попробовать поменять тизеру прокладку и/или лендинг.
РУКОВОДСТВО К ДЕЙСТВИЮ
Сколько нужно крутить тизеры будет зависеть от: цены за клик, наличия блеклиста; рублёвый это или обычный оффер.
Откручиваем тизеры так же, как собираем блеклист. Открутили стоимость 1 лида, если меньше 2-х заявок (рублёвые меньше 3-х) — стопаем. Когда блеклиста нет, тогда можно покрутить больше, чем стоимость 1 лида.
Хорошие тизеры и баннеры живут недолго, обычно до 1 месяца. А вот объявления в директе, гораздо дольше, до 1 года … в отличие от аккаунтов ?
Это называется баннерная слепота. Почему так происходит? Надоедает картинка пользователям.
Выбрасывать тизеры не нужно, открутили месяц, дайте месяц-два ему отдохнуть. Потом можно будет его крутить снова.
ПРОКЛАДКА И ЛЕНДИНГ
Во-первых, прокладка НЕ ПРОДАЁТ ТОВАР, она существует для ПОВЫШЕНИЯ ДОВЕРИЯ к продукту.
Главный критерий, который нас интересует в прокладках — это пробив. Притом пробив должен быть целевой, т.е. пользователь должен нажать на кнопку “перейти на сайт” или на название препарата. Нормальный пробив считается порядка 20% (1 к 5). Заказ с лендинга при этом должен быть не больше чем 1 к 20. Это получается конверсии 1 к 100.
С такими показателями вы уверенно будете лить в плюс по цене клика в 3 рубля.
Человек, покупающий товар, делает это на эмоциях. Повышение эмоций — одна из задач прокладки. И это первое, на что стоит обратить внимание при её выборе.
Вы сами должны являться первым тестирующим звеном. Прокладку должно быть интересно прочитать даже вам, а ещё лучше, когда у вас появляется желание купить товар.
Не думайте, что: “Я же не конечный потребитель и вообще мне не нужно увеличивать детородный орган”. Никому не нужно это в принципе. Но, прочитав прокладку, захотели бы вы сделать это? Нет? Ищите другую.
СПЛИТ-ТЕСТИРОВАНИЕ
А/B тест, по сути одно и тоже — незаменимая вещь любого арбитражника. Однако не нужно сплитовать сразу все прокладки и лендинги. Чем больше звеньев, тем больше трафика нужно откручивать.
На A/Б тест пускаем либо прокладки, либо лендинги. Но ни в коем случае всё сразу.
Оптимально тестировать 2-3 прокладки\ленда. Больше можно, но дольше и дороже.
На практике это выглядит следующим образом. Выбираем 1 лендинг, который нам понравился больше всего или с самым высоким конвертом по системе и выбираем 2-3 прокладки в сплит. Наоборот, для лендингов: 1 прокладка — 2-3 лендинга.
Предлагаю пускать тесты по очереди. Вычисляем лучшую прокладку и затем лучший лендинг в связке с ней.
По итогу мы сталкиваемся с одним из 3-х вариантов:
Вариантов, почему так произошло, масса:
3.1. Найти утечку трафика. Проверяем пробив, если норм, проблема в лендинге. Если пробива нет, но люди нормально провели времени на прокле, в ней и проблема. Если на прокладке не задерживаются, тогда это несоответствие тизеров и проклы или нам льют роботов.
3.2. Несоответствие ЦА. Проверяем в статистиках пол и возраст посетителей. Можно попробовать сменить аудиторию. Существуют такие товары, где покупатели не являются конечными потребителями, например более 80% всей мужской косметики (дезодоранты, гели, парфюм и т.д) покупают женщины, лечение алкоголизма — 80% покупают женщины, элитное такси и отели — заказывают не богачи, а их помощники.
3.3. Отлитый источник. Это часто встречается, когда вы пытаетесь повторить крупные кейсы. Часть людей из тех, кто видит кейс, решают повторить его без изменений. Это не работает. Попробуйте найти другой источник трафика.
3.4. Особенность ГЕО. В разных странах разный менталитет, а значит, будет разное отношение к офферу. Например, в мусульманских странах очень тяжело лить на женские тематики.
3.5. Не работает оффер. В основном, это касается старых офферов, потерявших актуальность. 3-4 года назад был оффер “Ягоды Годжи” и тогда его разбирали как горячие пирожки на Казанском вокзале, однако сегодня “Ягоды Годжи” продаются в каждом втором магазине. Пытаться его продать сейчас — сродни выбрасыванию денег лопатой с балкона.
3.6. Все ссылки, указанные в объявлениях, корректны и работают? Минутка юмора или топовые фейлы: Ребята лили на похудение, где-то тупанули, в итоге в объявлениях указали прямую ссылку на главную страницу Shakes.pro. Был случай, как кто-то скопипастил чужие объявления и забыл поменять потоковые ссылки на свои. В итоге он лил несколько дней трафик другому человеку))) И каждый месяц встречается 1-2 человека, которые запускают тот же Bactefort в Австралию или в Канаду. Хотя такого ГЕО никогда там не было. И долго возмущаются, почему заявки идут в невалид.
ОПТИМИЗАЦИЯ
Оптимизировать промо-материалы также необходимо через сплит-тестирование.
Допустим, что у нас уже есть связка с неплохим конвертом по ней. Но денег всегда мало, и мы хотим идеальный конверт 1:1 )))
Наверное, вы слышали такое понятие как “контрольный образец”. В нашем случае это: прокладка/лендинг, в которые мы не вносили изменения. Поэтому если решили оптимизировать связку, то всегда нужно одновременно сравнивать два варианта: оригинал и измененный на одном и том же трафике. Так вы поймёте, какие фичи работают, а какие — нет.
Как бы не стремились получить идеальный конверт, мы ограничены временем жизни связки. Поэтому всегда стоит помнить про закон Парето (80/20). Иначе говоря, имеет смысл тестировать только глобальные изменения.
Можно, конечно, пытаться тестировать мелкие правки, например: кнопка «Заказать» какого цвета лучше конвертит? Вы потратите громадное количество времени и средств, но существует большая вероятность не увидеть разницу конверта в цветах кнопки (главное, чтобы кнопку было видно). К моменту получения результатов связка может уже изжить себя.
Другое дело, когда мы тестируем крупные вещи — наличие всплывающего окна “Есть вопросы? Оставьте свой номер, и мы вам перезвоним”. Такой попап может либо значительно улучшить конверт, а может раздражать пользователей и похоронить мысль оставаться на сайте. Не думайте, что попапы — это универсальное решение, где-то лечит, но где-то калечит. Для этого нужно всё сплитовать и анализировать.
Инструменты: в оптимизации промо помогут Вебвизор, карты скроллов и кликов. Смотрим, где застревают пользователи или, наоборот, видим, что их ничего не цепляет. Пытаемся как-то исправить ситуацию: меняем, добавляем или удаляем блоки.
Не забываем мониторить и придумывать всякие новые фичи для сайтов, пытаемся их вклеить на страницы.