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