Карусель у веб-дизайні: коли слайдер шкодить, а коли працює

Суперечка про карусель майже завжди йде без цифр. Одна сторона каже «слайдери мертві», друга — «клієнт хоче показати пʼять акцій одразу». Нижче чотири докази, які переводять розмову з рівня смаку на рівень фактів: клікова статистика першоджерела, критерій доступності рівня 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, і чи є до контенту інший шлях. Каруселі, що проходять усі чотири перевірки, існують: новинні стрічки й галереї товарів. Ті, що не проходять, зазвичай просто ховають пʼять повідомлень замість того, щоб донести одне.

Якщо у вас на головній стоїть слайдер і ви не знаєте, до якої категорії він належить, — покажіть сторінку, подивимось разом на цифри й доступність.