← ЛЕНТА ТГ-КАНАЛА / пост

Продолжение про карусель баннеров

27.06.2025

Продолжу тему каруселей и покажу вот такую статейку про функционал и техническую сторону. Или вот ещё про карусели от NNg.

Сделал для вас саммари, но со своими комментами. Не то чтобы я спорю, — статья полезная, — просто дополняю )

Ну и + ссылки на исследования (в конце), которых нет в статье.


1️⃣ Первый слайд — самый важный
Очень важно и не только для каруселей.
Но если есть автопрокрутка, то неизвестно, с какого слайда юзер начал смотреть. Потому каждый баннер должен «цеплять».

Ну и персонализацию никто не отменял. Если в каждом баннере всё «именно про тебя», то и вообще неважно с какого начинать )

2️⃣ Карусель — не единственный источник важного контента
В целом да, но есть же «быстрые» акции и т.п. Не размазывать же это по всему сайту?! Да и юзеры вполне себе ожидают увидеть подобную инфу именно в таких карусельках.

3️⃣ Выделять элементы управления каруселью
Но без фанатизма. Аккуратненько, чтобы не перекрывало контент и не мозолило глаз (в коментах показал классный пример).

4️⃣ Делать разумный интервал между слайдами
Имеется ввиду время автопереключения. Рекомендуют 5—10 секунд (зависит от контента).
Ну как сказать, для анимированных или видео может быть и больше, и меньше, для удержания внимания. Предложил бы ускорять переключение для слайдов, где больше картинок/видео, и замедлять для текстов.

5️⃣ Тормозить автопрокрутку при наведении (для десктопов)
Хороший функционал. Ещё дополнил бы задержкой 0,3-0,5 сек (перед стопом), чтобы исключить случайное наведение. У системы и так мало времени, чтобы «зецепить» юзера, а тут ещё задержки какие-то ))

6️⃣ Отказаться от автопрокрутки на мобилах
Ох, ну тут спорно. Зачем юзера заставлять что-то делать, если можно автоматизировать. Если баннер просто торчит, то не все понимают, что его можно листать и не всем это нужно, а ещё они глючат и вместо листания перебрасывают куда-то.

7️⃣ Использовать привычные жесты для прокрутки
Согласен, но не всегда возможно. Например, когда каруселька в картах или внутри чего-то, где есть конфликтующие жесты (но это редкость).

8️⃣ Читаемость текста на слайдах
Считаю, что на баннерах вообще не место «завитушкам» ))

9️⃣ Быстрая загрузка слайдов
В статье ничего не сказали про lading=lazy — очень даже помогает. И для анимаций/видео есть покадровая загрузка.

━━━━━━━━

И ещё парочка исследований на тему.

Потерял источник (сори), но было так:
«Карусели с ручным управлением дают на 28% больше конверсий, чем автоматические» — скорее всего, да. Если уж юзер начал как-то взаимодействовать с каруселью, то возрастает вероятность, что он куда-то нажмёт. НО(!!!) не забываем про ложные клики, это можно (но сложно) отслеживать, но сомневаюсь, что делают.

«72% пользователей пропускают карусель сразу после загрузки страницы»

«Свайп работает в 2 раза лучше, чем "точечный" пейджинг»

«Оптимальное количество слайдов — 3−5 (дальше вовлечение падает на 60+%)»

«Анимация перехода не должна длиться более 300ms»

Про доступность каруселей от W3C


#мнение | ЗоЮ

💬 Комментировать и обсудить в телеграм-канале