Карусель на первом экране — один из самых спорных элементов на сайте. Её любят заказчики, потому что в неё влезает всё и не нужно выбирать главное сообщение. Её не любят исследователи интерфейсов, потому что дальше первого слайда доходят единицы. Мы не считаем карусель злом: в части сценариев она уместна и удобна. Вопрос в том, где именно она уместна и как её сделать, чтобы она помогала, а не мешала.
Почему карусель на первом экране обычно не работает
Первый экран решает одну задачу: за несколько секунд объяснить, куда человек попал и что здесь можно сделать. Карусель эту задачу размывает.
- Слайды сменяются раньше, чем человек дочитывает текущий. Скорость чтения у всех разная, а интервал в карусели один для всех.
- Автоматическое движение воспринимается как рекламный баннер, и взгляд его пропускает — эффект известен давно и воспроизводится в любом исследовании.
- Каждый следующий слайд видит в разы меньше людей, чем первый. Пятый слайд не видит почти никто, но на его подготовку тратится столько же сил.
- Несколько крупных изображений замедляют загрузку самого важного экрана и портят показатели скорости.
- Карусель снимает необходимость договариваться внутри компании: вместо одного главного предложения на экран попадают пять компромиссных.
Практический вывод простой: если нужно сообщить одну главную мысль, лучше статичный первый экран с понятным предложением и одной кнопкой. Остальные сообщения раскладываются ниже по странице отдельными блоками — там их увидят больше людей, чем на втором слайде.
Где карусель уместна
| Сценарий | Почему подходит | Что важно учесть |
|---|---|---|
| Фотографии товара | Человек сам хочет посмотреть больше кадров и управляет просмотром | Нужны миниатюры и увеличение по нажатию |
| Отзывы | Содержимое равнозначное, блок экономит место на странице | Не запускать автопрокрутку, показать общее количество |
| Логотипы партнёров | Декоративный блок, важной информации в нём нет | Останавливать движение при наведении и при уменьшенном движении |
| Подборка товаров в каталоге | Привычный сценарий просмотра, есть куда перейти дальше | Обязательна ссылка на полный список |
| Экраны проекта в кейсе | Последовательный просмотр иллюстраций одного сюжета | Подписи к кадрам и отложенная загрузка |
| Главный экран сайта | Подходит почти никогда | Если решение принято, оставить не больше трёх слайдов и без автосмены |
Чем заменить карусель на первом экране
Когда мы предлагаем убрать карусель, первый вопрос звучит так: куда девать остальные предложения. Варианты, которые работают:
- Одно предложение на первом экране и ряд коротких блоков сразу под ним — человек листает вниз, а не ждёт смены слайда.
- Сетка из трёх-четырёх направлений: всё видно одновременно, сравнивать удобнее.
- Вкладки с явными подписями: переключение происходит по решению человека, а не по таймеру, а содержимое остаётся в разметке.
- Разные первые экраны для разных источников трафика, если аудитории действительно отличаются.
Как сделать карусель нормально
Если карусель уместна по сценарию, дальше вопрос исполнения. Требования, которые мы предъявляем на приёмке:
- Без автопрокрутки. Если заказчик настаивает, движение останавливается при наведении, при фокусе с клавиатуры и после первого действия человека, а интервал ставится не меньше пяти-семи секунд.
- Видно, что можно листать. Край следующего слайда, выглядывающий из-за границы, работает лучше любых стрелок: он сразу объясняет устройство блока.
- Крупные элементы управления. Полупрозрачные стрелки по краям изображения промахиваются на телефоне и теряются на светлых фотографиях. Кнопки должны быть не меньше 44 пикселей по каждой стороне.
- Индикатор положения. Человек должен понимать, сколько всего слайдов и где он сейчас. Точки без выраженного активного состояния бесполезны.
- Свайп на телефоне и клавиатура на десктопе. Стрелки влево и вправо должны переключать слайды, когда карусель в фокусе.
- Отложенная загрузка изображений. Первый слайд грузится сразу, остальные — по мере показа.
- Содержимое доступно без скриптов. Как минимум первый слайд должен быть в разметке и виден, если JavaScript не выполнился.
- Стабильная высота области. Слайды разной высоты дёргают страницу при переключении и портят показатель смещения раскладки.
Доступность
Карусель — частый источник проблем для тех, кто пользуется клавиатурой и программами чтения с экрана. Что мы проверяем: скрытые слайды не должны попадать в обход табуляцией, у кнопок нужны текстовые подписи, у блока — понятная роль, а автоматическое движение обязано останавливаться при включённой системной настройке уменьшенного движения. Последнее не формальность: у части людей постоянное движение на экране вызывает физический дискомфорт.
Карусель без библиотек
Браузеры давно умеют прилипание при прокрутке, и простая карусель собирается на нескольких строках стилей плюс две кнопки с коротким обработчиком. Горизонтальная прокрутка с прилипанием к слайдам даёт бесплатно и свайп, и инерцию, и работу с клавиатуры, и корректное поведение при масштабировании страницы.
Сравнение с готовой библиотекой обычно не в пользу библиотеки: она тянет свои стили, свою разметку и свои особенности, конфликтует с оформлением проекта, требует обновлений и весит десятки, иногда сотни килобайт. Библиотека оправдана, когда нужны сложные сценарии — несколько слайдов в ряду с разным поведением на разной ширине, синхронные карусели, отдельная лента миниатюр. Для блока отзывов или логотипов это избыточно.
Как карусель влияет на скорость
Слайдер на первом экране почти всегда ухудшает время отрисовки основного содержимого: браузер получает несколько крупных изображений вместо одного и не знает, какое из них показать первым. Что мы делаем на проектах:
- первому изображению задаём приоритет загрузки, остальным — отложенную;
- указываем размеры изображений в разметке, чтобы блок не менял высоту после загрузки;
- отдаём современные форматы и несколько размеров под разную ширину экрана;
- скрипт карусели подключаем отложенно, а до его загрузки блок остаётся обычной прокручиваемой лентой.
Как проверить, нужна ли карусель вам
Спор о карусели закрывается данными быстрее, чем аргументами. Мы смотрим в аналитике три вещи: сколько людей вообще взаимодействует со слайдером, сколько доходит до второго слайда и сколько переходов дают слайды со второго по последний. В большинстве проектов картина одинаковая: первый слайд даёт почти все переходы, остальные — единичные события.
Если данных нет, их несложно собрать: события на нажатие стрелок, на свайп и на переход по ссылке внутри слайда ставятся за один вечер, а через пару недель уже видно ответ. Дальше решение принимается не про вкус руководства, а про то, что люди действительно делают на сайте.
Если хочется понять, что именно на вашем сайте мешает людям — карусель, форма или структура страницы, — это отдельная задача с измеримым результатом: аудит юзабилити сайта.
