Слайдеры (карусели) на главной странице — это почти всегда ПЛОХАЯ идея. В статье разберемся почему.

Что такое «слайдер на сайте»

Полагаю, что статью читают специалисты, но дам небольшую вводную для специалистов. 

Слайдер — интерактивный элемент на странице, который компактно представляет несколько блоков контента (изображения, тексты, ссылки) в одной области экрана. 

Каждый слайд автоматически меняется с периодичностью (5+ секунд) или вручную пользователем. Для управления есть элементы: стрелки, маркеры.

Сладер-карусель используется для акцента на важной информации (акциям, продуктам) и создания визуально привлекательного контента.

Ожидания бизнеса от слайдеров

Заказчики ожидают от разработчиков сайтов интерактивных элементов. Они считают, что анимация «оживляет» сайт. Чаще всего анимированные слайдеры просят поставить на главной странице сайта, в каталогах с услугами.

Аргументы, которые приводят заказчики:

• хотим психологически сократить дистанцию между компанией и покупателем, 
• нужно стимулировать к покупке, 
• хотим весь спектр услуг/направлений деятельности/групп товаров/акций. 

Разработчики сайтовб специалисты в UI/UX должны определить какими инструментами можно решить задачу и нужен ли для этого слайдер.

Почему слайдеры не работает

Слайдеры плохо работают на всех устройствах, а особенно плохо — на мобильных устройствах. Я выделю три причины.

Анимация раздражает

Пользователи давно научились игнорировать всё, что хоть отдаленно напоминает навязчивую рекламу. 

В 2013 году Nielsen Norman Group показали, что пользователи часто игнорируют баннеры и назвали это («banner blindness» — слепота к баннерным элементам). Большинство пользователей видят только первый слайд, последующие слайды получают мизерное внимание. 

Кроме баннерной слепоты люди ещё и блокируют рекламу: говоря откровенно — никто не хочет видеть рекламу. Конверсия с рекламных объявлений продолжает падать, а блокировщики пользуются популярностью. 

42,7% интернет-пользователей блокируют рекламу. Одна из причин блокировок — для скорости (41%) и чтобы убрать баннеры (71%).

У 31% россиян блокировщики установлены одновременно и в браузере, и на телефоне.

Наши практические примеры говорят не в пользу слайдеров. Просматривая статистику Яндекс.Метрики мы видим, что на слайдерах посетители покидают страницу.

Вывод простой: баннерная слепота так же работает и на уровне сайтов.

Размытие CTA

Каждый слайд — это новый призыв к действию (Call to Action). И эти действия (например: «Купить курс», «Записаться на вебинар», «Получить консультацию») могут вести к разному результату.

Человеку нужно расшифровать посылы, а это повышает когнитивную нагрузку и убивает фокус. 

Особенно тяжело пользователям мобильных устройств, анализируя информацию на маленьком экране, которая ещё и постоянно меняется.

Так, вместо конверсии на одно действие, мы получаем «ноль» конверсий.

Вывод: удаление слайдера-карусели и замена его на один сильный заголовок и один CTA почти всегда повышает конверсию.

Проблемы с SEO и производительностью

Если слайдер стоит самым первым элементом страницы, то нужно решить технический вопрос: Какой из слайдов получит заголовок H1? На странице может быть только один заголовок H1. 

Если редактор ошибётся, то заголовок H1 может указать для нескольких слайдв и поисковик неверно интерпретирует контент на слайдах.

Верстка слайдеров под разные разрешения требует аккуратности и обязательной проверки по адаптивности. Для мобильной версии слайдер должен занимать не всю высоту, а только часть рабочей области. Так пользователю будет ясно, что ниже ещё есть информация.

Десяток тяжелых изображений, подгружаемые скрипты  — всё это тормозит загрузку страницы. А скорость загрузки — прямое ранжирование для поисковых систем. Контент на втором и третьем слайде часто не индексируется. 

Вывод: удалить или опитмизировать слайдер.

Слайдеры как элемент управления

Часто используют как один из вариантов оформления цены. Но минус очевиден: покупатель не видит все варианты и не может их сравнивать. Особенно, если выбор происходит на смартфоне.

Покажу один из неудачных примеров выбора тарифов на сайте нашей платформы TeamDo. Красиво, но придётся отказаться от такого решения. 

Когда слайдеры могут быть полезны?

Показываем прогресс, результат, отзывы

Слайдер может быть уместен там, где пользователь готов к стереотипной визуальной форме представления контента. То есть к той, которую он уже видел и она его не раздражает. 

Пример 1. Результат «до/после»

Слайдером удобно показывать результаты «было → стало». Актуально для сайтов медицины, косметологии, всех видов традиционного дизайна (интерьеры), строительство, с небольшой натяжкой — для образования (курсы).

Проверяем визуализацию на мобильных устройствах: если на слайдере сложно рассмотреть содержимое, то лучше перейти к статической форме контента.

Пример 2. Отзывы

Отзывы, цитаты, видео-отзывы оформленные в слайдере могут быть удобны, но если есть чёткая навигация: кнопки «Вперед/Назад», стрелки. 

Заключение

За годы существования веб-дизайна и CRO (Conversion Rate Optimization) была накоплена огромная доказательная база, показывающая негативное влияние слайдеров (особенно автоматических каруселей) на ключевые метрики сайтов.

Автопереключение слайдов обычно раздражает пользователей. Поэтому слайдер нужно рассматривать в контексте окружения (какая информация идет до слайдера и после него), задачи и самого контента, который планируется поместить в баннер.