Банерна карусель на першому екрані — одна з найстійкіших звичок у веброзробці. Вона зручна для узгодження: маркетолог хоче показати акцію, власник — новий напрям, відділ продажів — гарантію, і замість вибору всі меседжі складають у слайдер по черзі.
Проблема в тому, що для відвідувача це не три повідомлення, а жодного.
Що відбувається насправді
Людина відкриває сайт і за кілька секунд вирішує, чи туди вона потрапила. У цей момент вона дивиться на перший екран — і бачить банер, який починає рухатися. Далі спрацьовує звичка: усе, що саме рухається й змінюється, мозок відносить до реклами й перестає помічати.
Друга причина ще простіша — час. Щоб побачити третій слайд, треба нічого не робити секунд десять. Стільки на першому екрані не затримується майже ніхто: люди гортають далі, до змісту.
Тому типова картина в записах сесій виглядає однаково: більшість кліків збирає перший слайд, решта — статистична похибка. Це не означає, що карусель шкідлива завжди. Це означає, що другий і третій банери просто не існують для аудиторії, хоча ви за них платили дизайнеру.
Технічна ціна
Слайдер рідко буває безкоштовним для швидкості. Кожен банер — це велике зображення, часто на всю ширину екрана, і всі вони підвантажуються при відкритті сторінки. Плюс сама бібліотека каруселі.
На мобільному це особливо помітно: банер, зроблений під широкий екран, або обрізається до нечитабельного, або тягне за собою окремі версії зображень. Наслідок — сторінка вантажиться довше, а перший екран довше залишається порожнім. Як це виміряти й що з цим робити, розібрано в матеріалі про швидкість сайту.
Окремий дрібний, але дратівливий ефект — стрибок верстки, коли банер підвантажився й посунув усе під собою. Це знайома більшості ситуація: людина цілиться в пункт меню, а сторінка в цю мить підʼїжджає.
Є ще одна незручність, суто організаційна: банери швидко застарівають. Акція закінчилася, а слайд висить, бо міняти його треба через дизайнера. Статичний екран із текстом власник править сам за хвилину — і саме тому він частіше буває актуальним.
Коли слайдер справді доречний
Є випадки, де карусель на місці:
- галерея одного обʼєкта — фото товару, номера в готелі, виконаного проєкту, де людина сама хоче гортати;
- відгуки або логотипи клієнтів — там немає завдання, щоб побачили кожен елемент;
- добірка товарів у ряд — горизонтальна стрічка з видимим краєм наступної картки, яка прямо натякає, що її можна тягнути.
Спільне в цих випадках одне: гортання ініціює користувач, а не таймер. Карусель стає інструментом перегляду, а не способом показати три різні меседжі по черзі.
Чим замінити на першому екрані
Робоча альтернатива — один статичний екран, який відповідає на питання «що це і для кого», з однією зрозумілою кнопкою дії. Решта напрямків іде нижче окремим блоком, де їх видно одночасно.
Такий підхід виграє ще й тим, що його можна перевіряти. Один екран — одна гіпотеза: змінили заголовок, подивилися на поведінку. У каруселі з трьох банерів незрозуміло, що саме вплинуло, і A/B-тест втрачає сенс.
Якщо ж напрямів справді багато й вони рівнозначні, чесніше не ховати їх у слайдер, а зробити компактну сітку з двох-трьох карток. Це займе стільки ж місця, але всі варіанти будуть видні відразу.
Якщо слайдер уже стоїть: перевірка за десять хвилин
Прибирати наосліп не треба — спершу подивіться на факти. Три прості кроки дають відповідь без складних інструментів.
Крок перший. Поставте окрему мітку на кнопку кожного банера й подивіться статистику за два тижні. Якщо другий і третій слайди зібрали разом менше десятої частини кліків першого — вони не працюють, і це не питання дизайну.
Крок другий. Відкрийте головну з мобільного інтернету, а не з домашнього Wi-Fi. Порахуйте, скільки секунд екран лишається порожнім або сірим. Усе, що більше трьох секунд, коштує вам частини відвідувачів ще до того, як вони щось побачили.
Крок третій. Покажіть головну людині, яка не знає ваш бізнес, і за пʼять секунд заберіть екран. Спитайте, що вона запамʼятала. Якщо відповідь розмита — меседж не долетів, а карусель у цьому винна майже завжди.
Далі рішення просте: залишити один найсильніший банер статичним, а решту пропозицій рознести по сторінці окремими блоками. Це та зміна, яку можна зробити за годину, і вона майже нічим не ризикує.
Коротке правило
Слайдер доречний там, де гортати хоче користувач. Він недоречний там, де гортати хочете ви. Якщо на головній стоїть карусель із трьох акцій — заміна на один сильний екран майже завжди дає кращий результат і швидшу сторінку.
Ми проєктуємо головні сторінки саме за цим принципом: спершу вирішуємо, яке одне повідомлення має спрацювати, а вже потім думаємо про решту.
Скільки банерів має бути в слайдері?
Якщо вже вирішили лишити карусель — не більше трьох. До другого слайда доходить меншість відвідувачів, до третього — одиниці, тож усе далі просто важить і сповільнює сторінку.
Чи шкодить слайдер SEO?
Сам по собі ні, шкодить його вага. Кілька великих зображень, які вантажаться одразу, псують швидкість завантаження й показник найбільшого елемента на екрані — а це вже впливає на поведінку користувачів.
Чи має слайдер перегортатися автоматично?
Краще ні. Автоперегортання забирає контроль: людина починає читати й текст їде. Якщо автоперегортання потрібне за задумом, робіть паузу під час наведення і стрілки для ручного керування.
Що ставити замість слайдера?
Один статичний екран із головною думкою і кнопкою, а під ним — блок із двох-трьох напрямків. Так усі меседжі видно одночасно, без очікування, і кожен можна виміряти окремо.
Потрібен сайт під ключ?
Від структури й дизайну до запуску. Домен і доступи оформлюємо на вашу компанію.