Механики эти встречаются на рынке не так часто. После просмотра листинга товаров в 175 e-commerce приложениях описанные ниже механики – всё, что попалось мне на глаза.
Замечу, что в статье я не говорю о том, как «обязательно стоит делать». Сегодня мы просто разберём примеры того, что можно встретить в листинге помимо карточек товаров, и будем развивать свою насмотренность, а кто-то почерпнёт идеи для тестов.
Структура статьи
Все примеры я разбил по тематикам, начиная с относительно простых и заканчивая менее стандартными механиками:
- Изменение вида карточек
- Продвижение товаров и услуг
- Контентные блоки
- Навигация
- Обратная связь
- Прочие механики
Изменение вида карточек
6 примеров
Товары в интерьерах
Начнём с простого: от однотипных карточек товаров глаз может устать. Поэтому, если специфика товаров позволяет, можно размещать их, например, в разных интерьерах.
Пример ✅ Сантехника-Онлайн
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_68762C8EB363-1_1.jpeg)
Фоны в карточках товаров
Если отойти от товаров для дома, которые можно вписать в интерьер, в листинг можно внести больше разнообразия, реализовав фото товаров на фонах разного цвета.
Пример ✅ Буше
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_258D60CFED8E-1_1.jpeg)
Изображения на экранах устройств
Другой пример — изображения на экранах устройств. Насколько увлекательным был бы выбор телевизора, если бы все товары были в выключенном состоянии?
Пример ✅ М.Видео
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_69D566E17C9E-1_1.jpeg)
Товары в различных ракурсах
В fashion-индустрии нередко можно встретить практику, когда товары на основных фото выполнены в разных ракурсах. Это также визуально добавляет разнообразия.
Пример ✅ Спортмастер
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file.png)
Видео в карточках
Чтобы клиент не «засыпал» во время прокрутки листинга, довольно часто вместо статичных фото используется автовоспроизведение видео.
Пример ✅ Ozon
![](https://awdee.ru/wp-content/uploads/2024/02/Untitled1-ezgifcom-r.gif)
Динамический layout
Чтобы пользователь не уставал от единообразных элементов, некоторые приложения используют динамический layout, чередуя количество карточек в ряду.
Пример ✅ IDOL
![](https://awdee.ru/wp-content/uploads/2024/02/ezgifcom-resize.gif)
Продвижение товаров и услуг
12 примеров
Популярные товары
В глубине листинга, когда есть риск, что клиент уже устал от похожих друг на друга карточек, его можно «взбодрить» горизонтальной подборкой популярных товаров.
Пример ✅ Elyts
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_A35B249C61A8-1_1.jpeg)
Новые коллекции
При просмотре товаров старой коллекции, некоторые участники рынка ненавязчиво напоминают своим клиентам, что новинки уже в продаже.
Пример ✅ O’STIN
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_4DA6413EA4B0-1_1.jpeg)
Хиты продаж
Чаще всего подборку с хитами продаж можно встретить в начале листинга. Однако иногда её размещают и посреди, в виде врезки между карточками.
Пример ✅ Зоозавр
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-1.png)
Акции в категории
Ссылки на акции в листинге, с одной стороны, привлекают внимание клиента, с другой — могут сократить средний чек, если изначально он не планировал покупку по акции.
Пример ● Джум
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-2.png)
Рекомендуемые товары
Подборка рекомендаций, врезанная в листинг, поможет столкнуть клиента с нужными (для компании) товарами, даже если он выбрал другую сортировку (не по рекомендуемым).
Пример ● Farfetch
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_43B1A0D2AEBE-1_1.jpeg)
Дополнительные услуги
Если вы предоставляете консультации и подбор товаров с помощью специалистов (например, дизайн интерьера), об этом также можно упомянуть при просмотре листинга.
Пример ✅ Leroy Merlin
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-3.png)
Сбор контактных данных
Вариация предыдущего примера: некоторые компании успевают не только рассказать об услуге, но ещё и не упускают возможность собрать контакты клиента в моменте.
Пример ● Циан
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_CFD0C5F32819-1_1.jpeg)
Скидки на товары из корзины
У некоторых игроков также реализована механика, когда на товары, ранее добавленные в корзину, компания предлагает дополнительную скидку, подсвечивая это прямо в листинге.
Пример ✅ Яндекс.Маркет
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_4B72DD12A950-1_1.jpeg)
Подарочные карты
От большого числа товаров у клиента, который ищет подарок, может случиться паралич выбора. Почему бы не предложить ему облегчить себе задачу, купив подарочную карту?
Пример ✅ Sunlight
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-4.png)
Блоки допродажи
Upsell товаров можно встретить на пути клиента не один раз. Но разместить их в листинге — ещё и так, чтобы такая подборка визуально не кричала — умудряются немногие.
Пример ✅ Кухня на районе
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_0E07BB58AF52-1_1.jpeg)
Реклама внутренних предложений
Нередко на маркетплейсах можно встретить кейсы, когда листинг разбавляется рекламой различных товаров и брендов, закупивших платное продвижение.
Пример ● Золотое Яблоко
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-5.png)
Реклама сторонних предложений
Чему клиент с большей вероятностью не обрадуется в листинге — так это рекламе, которая не только никак не связана с запросом, но ещё и уводит его из приложения в браузер.
Пример ❌ Юла
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_BA673E6178DE-1_1.jpeg)
Контентные блоки
6 примеров
Рецепты
Хорошая идея для food ритейла — включение в листинг рецептов с товарами из этого же листинга. Заинтересовался рецептом — вдохновился — купил ингредиенты.
Пример ✅ Самокат
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-6.png)
Подборки образов
По аналогии с предыдущим пунктом листинг товаров для дома можно дополнить подборкой идей для интерьера с этими товарами.
Пример ✅ Cozy Home
![](https://awdee.ru/wp-content/uploads/2024/02/Cozy_home.png)
Статьи
Листинг можно «обогатить» полезными материалами, которые расширят знания клиента о товарах и дадут ему ответы на потенциальные вопросы.
Пример ✅ SimpleWine
![](https://awdee.ru/wp-content/uploads/2024/02/SimpleWine.png)
Описание продукции
Продавая продукцию под собственной торговой маркой, некоторые не упускают возможность рассказать о ней, подсвечивая состав, процесс производства, вкус и другие её характеристики
Пример ✅ Самокат
![](https://awdee.ru/wp-content/uploads/2024/02/ezgifcom-animated-gi.gif)
Полезные советы
Добавляя полезные советы в отношении товаров в листинге, вы обогащаете знания клиентов, повышаете полезность сервиса и делаете процесс покупок более увлекательным.
Пример ✅ Самокат
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-7.png)
Новости
Некоторые участники рынка идут в контентную тему дальше и разбавляют листинг подборками новостей, понимая, что целевой аудитории они могут быть интересны.
Пример ✅ Дром Авто
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_3291900C8CBD-1_1.jpeg)
Навигация
2 примера
Разбивка на подкатегории
Единообразный длинный листинг может утомить. Поэтому иногда его можно разделить на подкатегории, снабдив листинг быстрыми ссылками на каждую из них.
Пример ✅ Перекрёсток
![](https://awdee.ru/wp-content/uploads/2024/02/photo.png)
Ссылки на подкатегории
Часто подкатегории встречаются в виде быстрых фильтров в начале листинга. Но иногда предложение перейти к ним можно встретить и посреди общего списка товаров.
Пример ✅ Sunlight
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-8.png)
Обратная связь
2 примера
Запрос оценки товара
В листинг можно вплести запрос на фидбэк по купленному ранее товару с возможностью поставить оценку, не переходя на отдельные экраны.
Пример ✅ Яндекс.Маркет
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_0230DF788A30-1_1.jpeg)
Запрос оценки приложения
Примеры, когда в листинг внедрён запрос на оценку самого приложения, встречаются в классифайдах, в которых поиск — критичный шаг на пути клиента.
Пример ✅ Дром Авто
![](https://awdee.ru/wp-content/uploads/2024/02/1.jpeg)
Прочие механики
3 примера
Запрос на уведомления
При поиске товаров клиенту можно предложить подписаться на уведомления, чтобы узнавать о новых поступлениях в числе первых.
Пример ✅ Auto.ru
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-9.png)
Highlight нового функционала
Иногда листинг также может использоваться, как точка контакта клиента с новыми функциями приложения, которые могут сделать покупки более удобными.
Пример ✅ Lamoda
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_610690AA100E-1_1.jpeg)
Индикатор прогресса
Чтобы листинг не казался бесконечным, иногда его снабжают индикатором прогресса. Встречается редко, но, видимо, гипотеза в том, что это повышает глубину просмотра.
Пример ● Hoff
![](https://awdee.ru/wp-content/uploads/2024/02/unnamed-file-10.png)
To be continued…
Как видно, методов «разбавления» и «оживления» листинга товаров не так уж и мало. Разумеется, эффективность у них разная, и всё важно тестировать. Но прежде чем запускать тесты, нужно набрать идей. И надеюсь, что данная статья была вам полезна как раз в развитии насмотренности.
Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если не хотите их пропускать. На связи.
Обсуждение
Похожее
Как защищать свои дизайн-решения перед требовательными клиентами: мнения дизайнеров
Консистентность в дизайне
Как и куда расти дизайнеру