Карусель в веб-дизайне: когда слайдер вредит, а когда работает

Спор о карусели почти всегда идёт без цифр. Одна сторона говорит «слайдеры мертвы», другая — «клиент хочет показать пять акций сразу». Ниже четыре доказательства, которые переводят разговор с уровня вкуса на уровень фактов: кликовая статистика первоисточника, критерий доступности уровня A, цена в Core Web Vitals и SEO-сплит-тест. Плюс отдельный раздел о случаях, когда карусель в веб-дизайне вполне уместна, потому что рамка «карусель всегда зло» так же неверна, как и «карусель обязательна».

Сначала определение, чтобы не спорить о словах. W3C: карусель показывает набор элементов по одному за раз; синонимы — «слайдшоу» и «слайдер». Там же W3C признаёт, что карусели остаются спорным паттерном именно с точки зрения юзабилити, потому что их содержимое трудно обнаружить.

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

Самую известную статистику о каруселях — «1% кликов, 84% на первом слайде» — цитируют десятки блогов, почти всегда без ссылки. Первоисточник один: Эрик Раньон, разработчик сайта Университета Нотр-Дам, опубликовавший собственные данные в январе 2013 года. Данным больше десяти лет, читать их надо с этой поправкой. Но это единственный открытый набор, где есть абсолютные числа, а не пересказ.

Вот что зафиксировали на главной странице Нотр-Дам за период наблюдения:

• 28 928 кликов по слайдам карусели;
• 315 665 ручных перелистываний — перелистывали более чем в десять раз чаще, чем кликали;
• примерно 1% посетителей главной вообще кликал по карусели;
• из тех, кто кликал, 84% кликов приходились на первый слайд, остальные четыре делили остаток примерно поровну — по 4% каждый;
• в числах: 6 331 клик у первой позиции против 1 509 у пятой.

Тот же автор привёл данные ещё с нескольких сайтов. На трёх сайтах со статической каруселью (без автопрокрутки) средняя доля кликов была от 1,7% до 2,3%, а первый слот забирал 48–62% всех кликов. Концентрация на первом слайде меньше, чем в Нотр-Дам, но никуда не девается.

И сразу контрпример от того же автора, без него картина будет нечестной: один сайт с автопрокруткой дал самый высокий показатель — 8,8% посетителей главной кликали по слайду, а распределение было 40% на первом слайде, 18% на втором и целых 11% на последнем. То есть карусель способна работать. Утверждение «слайдеры всегда мертвы» не подтверждается даже тем источником, из которого его обычно выводят.

Практический вывод из этих чисел другой: почти весь трафик карусели забирает первый слайд, так что слайды со второго по пятый — это не «ещё четыре шанса», а способ спрятать четыре сообщения. Если на каждом слайде свой призыв к действию, вы делите внимание между пятью кнопками вместо того, чтобы усилить одну — об иерархии призывов мы подробно писали в материале кнопки в веб-дизайне и конверсия.

Доказательство 2. Автокарусель без паузы — нарушение WCAG уровня A

С заказчиком этот аргумент работает лучше всего: норму видно в документе, её не надо доказывать.

Критерий WCAG 2.2.2 «Pause, Stop, Hide» имеет уровень A — самый низкий, то есть обязательный уровень соответствия. Формулировка: для любого движущегося, мигающего или прокручивающегося содержимого, которое (1) стартует автоматически, (2) длится дольше пяти секунд и (3) показывается параллельно с другим содержимым, должен быть механизм поставить на паузу, остановить или скрыть его — кроме случаев, когда движение неотделимо от самой активности. W3C прямо относит «автоматически меняющиеся презентации» к контенту, подпадающему под этот критерий.

Переведите на практику: типичная карусель героя, которая сама листает слайды каждые 5 секунд и не имеет кнопки паузы, не проходит уровень A. Не «не очень удобна» — не проходит.

WebAIM добавляет, что именно ломается технически:

• когда слайд с клавиатурным фокусом исчезает во время автопрокрутки, фокус теряется;
• неправильно реализованные карусели имеют слайды, которые принимают клавиатурный фокус, пока они скрыты — пользователь табом «проваливается» в невидимый контент;
• у пользователя должен быть доступный и с клавиатуры, и мышью способ поставить на паузу, остановить или скрыть автоматическое движение;
• кнопки паузы, «следующий» и «предыдущий» должны быть именно элементами <button>, а не ссылками;
• медиазапрос prefers-reduced-motion — официально рекомендованный механизм для пользователей, которых движение на странице сильно отвлекает.

Паттерн ARIA APG от W3C задаёт остальное: контейнер с ролью region или group и aria-roledescription="carousel", каждый слайд — role="group" с aria-roledescription="slide". Вращение должно останавливаться, как только клавиатурный фокус попадает в карусель, и не возобновляться без явного запроса пользователя; так же оно останавливается при наведении мыши.

Кому это вредит больше всего, перечисляет Nielsen Norman Group: людям с нарушениями моторики, людям с низким уровнем чтения и иностранцам, которые читают сайт не на родном языке — они просто не успевают прочитать панель до того, как она исчезнет.

Доказательство 3. Карусель стоит вам LCP и копит CLS

Первый слайд карусели героя — это, как правило, крупное изображение вверху страницы. По определению web.dev, кандидатами на LCP являются элементы <img> и элементы с фоновой картинкой через url(). То есть первый слайд героя-карусели почти всегда и есть LCP-элемент страницы, а хорошим LCP считается 2,5 секунды или меньше. И если слайды не загружаются лениво, браузер тянет не одну картинку, а все: скрипт слайдера, разметку пяти слайдов и их изображения.

С CLS механика ещё интереснее. Сдвиги, идущие один за другим с интервалом меньше секунды, считаются как одно «окно сессии» длительностью до 5 секунд. Автокарусель, которая переключает слайды разной высоты или подгружает картинку с опозданием, бьёт именно в этот режим накопления — несколько сдвигов подряд складываются в одно окно с большим суммарным значением. Пороги CLS и остальные метрики мы разбирали в материале Core Web Vitals простыми словами, а что ещё тормозит загрузку — в статье про скорость сайта.

NN/g запрещает автопрокрутку на мобильных по двум причинам, и первая из них как раз про производительность: она замедляет страницу. Вторая — короткие мобильные экраны люди и так быстро листают. Baymard в своих требованиях к мобильным каруселям отдельным пунктом ставит быструю загрузку слайдов.

Доказательство 4. Сплит-тест: что дало удаление карусели

SearchPilot провёл SEO-сплит-тест: убрали карусель товаров на категорийных страницах e-commerce. Уже на следующий день органический трафик вырос примерно на 4 000 сессий, рост держался все 11 дней теста, итог — +29% органического трафика.

Формулировать здесь надо точно. Это тест органического трафика, а не конверсии. Он не доказывает, что удаление карусели повышает продажи, и не доказывает, что так будет на вашем сайте: один тест на одном сайте — это сигнал, а не закон. Утверждение «удаление карусели почти всегда повышает конверсию», которое ходит по блогам, мы не повторяем: первоисточника у него нет.

Мобильные: отдельный набор правил

Мобильная карусель ломается иначе, чем десктопная. NN/g: точки-индикаторы особенно плохо работают на мобильных, потому что люди их часто просто не замечают. Крупное изображение не гарантирует внимания — люди часто сразу прокручивают такие блоки и пропускают всё содержимое внутри. А карусель, которая выглядит как рекламный баннер, попадает под баннерную слепоту: анимированную рекламу вообще замечают лишь в 27% случаев.

Baymard для мобильных требует четырёх вещей: без автопрокрутки, с поддержкой свайпа, с текстом в HTML (а не вшитым в картинку) и с быстрой загрузкой слайдов.

Когда карусель уместна

Теперь честная вторая половина. Карусель на главной остаётся массовым паттерном: 33% ведущих e-commerce-сайтов США и Европы имеют её на десктопе. Проблема не в самом факте наличия. Baymard фиксирует, что 46% всех каруселей на главных страницах e-commerce имеют проблемы с UX-производительностью. То есть большинство сделано плохо, а не существует ошибочно.

W3C называет типичные уместные применения: лента новостных заголовков, подборка материалов на главной и галереи изображений.

Галерея товара — самый убедительный случай. Baymard: мобильные пользователи склонны свайпать, и как только существование скрытых изображений обозначено визуально, они их почти не пропускают. Условие — именно пометка. Главная ошибка обрезанной галереи в том, что пользователь считает видимые по умолчанию миниатюры полным набором. В недавнем тестировании Baymard на 75% мобильных сайтов вместо миниатюр использовали точки-индикаторы.

И ключевое правило, которое делает карусель безопасной, формулирует тот же Baymard: карусель никогда не должна быть единственным или основным путём к разделу или товару. Если всё, что есть в слайдере, доступно ещё и через нормальную навигацию или блок ниже, цена пропущенного слайда падает до нуля.

Если карусель всё-таки остаётся: чек-лист

Правила ниже — не наши, а сводка из NN/g, Baymard, W3C и WebAIM.

1. Без автопрокрутки по умолчанию. Базовое правило NN/g: показывать новую панель только тогда, когда пользователь сам об этом просит. На мобильных автопрокрутку не включать вообще.
2. Если автопрокрутка на десктопе нужна — интервал 5–7 секунд для слайдов с минимумом текста, пауза при наведении, полная остановка после ручного взаимодействия (Baymard). Порог WCAG — пять секунд, так что кнопка паузы нужна в любом случае.
3. Не больше 5 кадров. NN/g: дальше пользователи просто не доходят.
4. Слайды продублированы где-то ещё. Карусель — не единственный путь к контенту.
5. Доступность по APG: остановка вращения при клавиатурном фокусе и наведении, корректные роли, настоящие <button> для управления, уважение к prefers-reduced-motion.
6. Текст — в HTML, не в картинке. И первое изображение оптимизировано, потому что это ваш LCP.

Если после этого списка смысл карусели исчезает — это и есть ответ. Часто вместо пяти слайдов достаточно одного экрана с одним чётким сообщением; логику такого удаления мы разбирали в материале про минимализм в веб-дизайне, а какие паттерны интерфейса сейчас работают — в трендах UI/UX. Тогда задача перестаёт быть настройкой слайдера — это работа над первым экраном.

FAQ

Итог

Карусель в веб-дизайне проверяется не вкусом, а четырьмя измеримыми вещами: сколько людей кликают (мало, и почти все по первому слайду), проходит ли блок уровень A по WCAG (автопрокрутка без паузы не проходит), сколько он стоит в LCP и CLS, и есть ли к контенту другой путь. Карусели, которые проходят все четыре проверки, существуют: новостные ленты и галереи товаров. Те, что не проходят, обычно просто прячут пять сообщений вместо того, чтобы донести одно.

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