Слайдер на сайте.
Первый экран сайта!
Это первый и последний шанс оставить клиента на сайте.
Все начинающие разработчики лендингов грешат размещением слайдера на 1 экране их сайта.
Сейчас мы говорим о продающих сайтах и слайдерах во весь экран.
Забегая наперед, сразу скажу, если ваш сайт не продает и люди с него уходят (отказы на сайте) и вы хотите докопаться до причин отсутствия конверсии, проверьте, не установлен ли у вас на сайте слайдер во весь первый экран.
Этот вопрос вызывает много споров и возражений. Мне приводят в пример кучу сайтов с примерами слайдеров на 1 экранах.
Давайте определимся «на берегу» — мы будем говорить только о коммерческих лендингах, задача которых сосредоточить внимание посетителя на оффере, призыве к действию и подвести его к нашей цели — покупке или подписке.
Почему я качу бочку на слайдер?
Казалось бы такой хороший способ показать товар лицом. Дело в том, что смена контента на 1 экране отвлекает посетителя от того, что мы задумали.
А мы задумали за 3-4 секунды дать понять, что мы ему предлагаем, и зачем ему это нужно.
А тут какие-то картинки летают слева направо или наоборот.
И не дай бог еще и заголовки мелькают перед глазами и сменяют друг друга.
Ну о каком внимании посетителя к нашему предложению тут вообще можно говорить.
Почему слайдер на сайте убивает конверсию?
Причин несколько:
1. Низкая кликабельность.
Статистика из интернета: «Сайт парижского университета Notre Dam за последний год посетили 3 755 000 человек. Из них на слайдер кликнули 1,15%. Выходит, разработчики используют самую важную область страницы впустую. Интересно, что 89% кликов пришлось на первое изображение. Остальные 4 поделили 10%»
- Эффект «баннерной слепоты»
Форма слайдера визуально напоминает рекламные баннеры. Пользователи не любят и игнорируют. Об этом свидетельствуют тепловые карты метрики.
- Отсутствие адаптации или сложности в адаптации к мобильным устройствам.
Вся привлекательность слайдера заключается в крупном, привлекательном и качественном изображении. На экране мобильного устройства этот эффект пропадает. И кроме всего прочего, слайдер (карусель) очень ощутимо тормозит загрузку страницы.. В результате половина вашей аудитории не только не оценит ваше желание удивить пользователя красивыми изображениями, но и может в принципе потерять интерес к вашему сайту.
- Сложности в подборе скорости переключения изображений.
Что это значит?
Казалось бы технически это сделать просто, но …..
Задержка 0,5-2 секунды, в этом случае невозможно осмысленно воспринять информацию, что сильно раздражает.
Если наоборот, с длительным промежутком, 3-5 сек, посетители просто не заметят слайдер, воспримут его за картинку и прокрутят страницу вниз. Тогда зачем его устанавливать, утяжелять страницу?
Возможно, первый слайд захватит внимание зрителя, но начиная со второго, внимание будет катастрофически снижаться..
- Проблема с UX дизайном или юзабилити (удобством пользователя восприятия информации)
Чаще всего слайдер на сайте содержит кликабельные призывы перейти к более детальному изучению предложения.
Например, пользователь кликнул на одно изображение, ознакомился с информацией, а дальше он должен вернуться обратно, дождаться следующего слайда и проделать ту же операцию еще раз, и так далее.
В этом и состоит проблема с юзабилити (удобством восприятия информации)
Даже с точки зрения простой логики, несколько офферов (УТП — уникальных торговых предложений), заключенных в одном блоке, сводят не нет, все усилия разработчика контента и банально убивают конверсию вашего сайта.
Для аналогии, вы хотите показать несколько вещей зрителю. Их можно сложить в сундук, или разложить на полках, где они все будут на виду.
Явно, что эффективнее не складывать все в кучу, а разделить их по принципу 1 страница → 1 предложение →1 целевое действие.
Даю вам краткий чек лист для проверки 1 экрана или главной страницы сайта на конверсию.
Все хорошо, если у вас:
- Статичное изображение продукта. (Возможен в отдельных случаях видео бекграунд закрытый градиентом или цветом с прозрачностью
50-90%);
- Четкий и понятный заголовок крупным шрифтом H1 (до 60 знаков), который говорит: что за продукт, чем он полезен, и что клиент от него получит и как скоро);
- Дескриптор: подзаголовок H2 который раскрывает суть продукта в деталях и усиливает значение деталей;
- Ясный и четкий призыв к действию (СТА) написанный в активном залоге
Например:
Плохо — «Вы можете оплатить /или купить»
Хорошо — «Оплатить сейчас» или «Заказать прямо сейчас», или «Подписаться на рассылку»
- Дедлайн (ограничение по времени или по количеству);
- Форма захвата не более 3 полей или кнопка с описанием события, которое произойдет после заказа или подписки.
Например:
«Оформить подписку и получить 5 видео уроков бесплатно» На кнопке: «ПОЛУЧИТЬ БЕСПЛАТНО»;
- Есть буллеты о дополнительных преимуществах продукта или оффера;
- Отсутствуют отвлекающие детали, активная анимация, слайдер, ссылки на сторонние ресурсы (соцсети)
- Отсутствуют малозначимые части контента, которые можно разместить в секциях ниже;
- Сбалансированная цветовая гамма из 3 — 4 цветов , учитывая черный и белый;
- Используется один шрифт. Можно использовать дополнительный для имен собственных и названий брендов;
Есть еще требования к верстке и типографике, но об этом в следующий раз.
Высоких вам конверсий!
