Последние новости и публикации

главная / Блог / Слайдер, убивающий конверсию.

Слайдер, убивающий конверсию.

Первый экран сайта!
Это первый и последний шанс оставить клиента на сайте.
Все начинающие разработчики лендингов грешат размещением слайдера на 1 экране их сайта.
Сейчас мы говорим о продающих сайтах и слайдерах во весь экран.

Забегая наперед, сразу скажу, если ваш сайт не продает и люди с него уходят (отказы на сайте) и вы хотите докопаться до причин отсутствия конверсии, проверьте, не установлен ли у вас на сайте слайдер во весь первый экран.

Этот вопрос вызывает много споров и возражений. Мне приводят в пример кучу сайтов с примерами слайдеров на 1 экранах.

Давайте определимся «на берегу» — мы будем говорить только о коммерческих лендингах, задача которых сосредоточить внимание посетителя на оффере, призыве к действию и подвести его к нашей цели — покупке или подписке.

Почему я качу бочку на слайдер?

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

А мы задумали за 3-4 секунды дать понять, что мы ему предлагаем, и зачем ему это нужно.
А тут какие-то картинки летают слева направо или наоборот.
И не дай бог еще и заголовки мелькают перед глазами  и сменяют друг друга.
Ну о каком внимании посетителя к нашему предложению тут вообще можно говорить.
Почему слайдер на сайте убивает конверсию?

Причин несколько:

1. Низкая кликабельность.

Статистика из интернета: «Сайт парижского университета Notre Dam за последний год посетили 3 755 000 человек. Из них на слайдер кликнули 1,15%. Выходит, разработчики используют самую важную область страницы впустую. Интересно, что 89% кликов пришлось на первое изображение. Остальные 4 поделили 10%»

2. Эффект «баннерной слепоты»

Форма слайдера визуально напоминает рекламные баннеры. Пользователи их не  очень любят и игнорируют. Об этом свидетельствуют тепловые карты метрики.

Отсутствие адаптации или сложности в адаптации к мобильным устройствам.

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

3. Сложности в подборе  скорости переключения изображений.

Что это значит?

Казалось бы технически это сделать просто, но …..

Задержка 0,5-2 секунды, в  этом случае невозможно осмысленно воспринять информацию, что сильно раздражает.
Если наоборот, с длительным промежутком, 3-5 сек, посетители просто не заметят слайдер, воспримут его за картинку и прокрутят страницу вниз. Тогда зачем его устанавливать, утяжелять страницу?
Возможно, первый слайд захватит внимание зрителя, но начиная со второго, внимание будет катастрофически снижаться..

Проблема с UX дизайном или юзабилити (удобством пользователя восприятия информации)

Чаще всего слайдер на сайте содержит кликабельные призывы перейти к более детальному изучению предложения.

Например, пользователь кликнул на одно изображение, ознакомился с информацией,  а дальше он должен вернуться обратно, дождаться следующего слайда и проделать ту же операцию еще раз, и так далее.

В этом и состоит проблема с юзабилити (удобством восприятия информации)

Даже с точки зрения простой логики, несколько офферов (УТП — уникальных торговых предложений), заключенных в одном блоке, сводят не нет, все усилия разработчика контента и банально убивают конверсию вашего сайта.
Для аналогии, вы хотите показать несколько вещей зрителю. Их можно сложить в сундук, или разложить на полках, где они все будут на виду.
Явно, что эффективнее не складывать все в кучу, а разделить их по принципу 1 страница → 1 предложение →1 целевое действие.

Даю вам краткий чек лист для проверки 1 экрана или главной страницы сайта на конверсию.

Все хорошо, если у вас:

  1. Статичное изображение продукта. (Возможен в отдельных случаях видео бекграунд закрытый градиентом или цветом с прозрачностью 50-90%);
  2. Четкий и понятный заголовок крупным шрифтом H1 (до 60 знаков), который говорит: что за продукт, чем он полезен, и что клиент от него получит и как скоро);
  3. Дескриптор: подзаголовок H2 который раскрывает суть продукта в деталях и усиливает значение деталей;
  4. Ясный и четкий призыв к действию (СТА) написанный в активном залоге;

Например:

Плохо — «Вы можете оплатить /или купить»

Хорошо — «Оплатить сейчас» или «Заказать прямо сейчас», или «Подписаться на рассылку»

4. Дедлайн (ограничение по времени или по количеству); 

5. Форма захвата не более 3 полей или кнопка с описанием события, которое произойдет после заказа или подписки.

Например:

«Оформить подписку и получить 5 видео уроков бесплатно» На кнопке: «ПОЛУЧИТЬ БЕСПЛАТНО»;

6. Есть буллеты о дополнительных преимуществах продукта или оффера;

7. Отсутствуют отвлекающие детали, активная анимация, слайдер, ссылки на сторонние ресурсы (соцсети)

8. Отсутствуют малозначимые части контента, которые можно разместить в секциях ниже;

9. Сбалансированная цветовая гамма из 3 — 4 цветов , учитывая черный и белый;

10. Используется один шрифт. Можно использовать дополнительный для имен собственных и названий брендов;

Есть еще требования к верстке и типографике, но об этом в следующий раз.

Высоких вам конверсий!

Слайдер, убивающий конверсию.

Первый экран сайта!
Это первый и последний шанс оставить клиента на сайте.
Все начинающие разработчики лендингов грешат размещением слайдера на 1 экране их сайта.
Сейчас мы говорим о продающих сайтах и слайдерах во весь экран.

Забегая наперед, сразу скажу, если ваш сайт не продает и люди с него уходят (отказы на сайте) и вы хотите докопаться до причин отсутствия конверсии, проверьте, не установлен ли у вас на сайте слайдер во весь первый экран.

Этот вопрос вызывает много споров и возражений. Мне приводят в пример кучу сайтов с примерами слайдеров на 1 экранах.

Давайте определимся «на берегу» — мы будем говорить только о коммерческих лендингах, задача которых сосредоточить внимание посетителя на оффере, призыве к действию и подвести его к нашей цели — покупке или подписке.

Почему я качу бочку на слайдер?

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

А мы задумали за 3-4 секунды дать понять, что мы ему предлагаем, и зачем ему это нужно.
А тут какие-то картинки летают слева направо или наоборот.
И не дай бог еще и заголовки мелькают перед глазами  и сменяют друг друга.
Ну о каком внимании посетителя к нашему предложению тут вообще можно говорить.
Почему слайдер на сайте убивает конверсию?

Причин несколько:

1. Низкая кликабельность.

Статистика из интернета: «Сайт парижского университета Notre Dam за последний год посетили 3 755 000 человек. Из них на слайдер кликнули 1,15%. Выходит, разработчики используют самую важную область страницы впустую. Интересно, что 89% кликов пришлось на первое изображение. Остальные 4 поделили 10%»

2. Эффект «баннерной слепоты»

Форма слайдера визуально напоминает рекламные баннеры. Пользователи их не  очень любят и игнорируют. Об этом свидетельствуют тепловые карты метрики.

Отсутствие адаптации или сложности в адаптации к мобильным устройствам.

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

3. Сложности в подборе  скорости переключения изображений.

Что это значит?

Казалось бы технически это сделать просто, но …..

Задержка 0,5-2 секунды, в  этом случае невозможно осмысленно воспринять информацию, что сильно раздражает.
Если наоборот, с длительным промежутком, 3-5 сек, посетители просто не заметят слайдер, воспримут его за картинку и прокрутят страницу вниз. Тогда зачем его устанавливать, утяжелять страницу?
Возможно, первый слайд захватит внимание зрителя, но начиная со второго, внимание будет катастрофически снижаться..

Проблема с UX дизайном или юзабилити (удобством пользователя восприятия информации)

Чаще всего слайдер на сайте содержит кликабельные призывы перейти к более детальному изучению предложения.

Например, пользователь кликнул на одно изображение, ознакомился с информацией,  а дальше он должен вернуться обратно, дождаться следующего слайда и проделать ту же операцию еще раз, и так далее.

В этом и состоит проблема с юзабилити (удобством восприятия информации)

Даже с точки зрения простой логики, несколько офферов (УТП — уникальных торговых предложений), заключенных в одном блоке, сводят не нет, все усилия разработчика контента и банально убивают конверсию вашего сайта.
Для аналогии, вы хотите показать несколько вещей зрителю. Их можно сложить в сундук, или разложить на полках, где они все будут на виду.
Явно, что эффективнее не складывать все в кучу, а разделить их по принципу 1 страница → 1 предложение →1 целевое действие.

Даю вам краткий чек лист для проверки 1 экрана или главной страницы сайта на конверсию.

Все хорошо, если у вас:

  1. Статичное изображение продукта. (Возможен в отдельных случаях видео бекграунд закрытый градиентом или цветом с прозрачностью 50-90%);
  2. Четкий и понятный заголовок крупным шрифтом H1 (до 60 знаков), который говорит: что за продукт, чем он полезен, и что клиент от него получит и как скоро);
  3. Дескриптор: подзаголовок H2 который раскрывает суть продукта в деталях и усиливает значение деталей;
  4. Ясный и четкий призыв к действию (СТА) написанный в активном залоге;

Например:

Плохо — «Вы можете оплатить /или купить»

Хорошо — «Оплатить сейчас» или «Заказать прямо сейчас», или «Подписаться на рассылку»

4. Дедлайн (ограничение по времени или по количеству); 

5. Форма захвата не более 3 полей или кнопка с описанием события, которое произойдет после заказа или подписки.

Например:

«Оформить подписку и получить 5 видео уроков бесплатно» На кнопке: «ПОЛУЧИТЬ БЕСПЛАТНО»;

6. Есть буллеты о дополнительных преимуществах продукта или оффера;

7. Отсутствуют отвлекающие детали, активная анимация, слайдер, ссылки на сторонние ресурсы (соцсети)

8. Отсутствуют малозначимые части контента, которые можно разместить в секциях ниже;

9. Сбалансированная цветовая гамма из 3 — 4 цветов , учитывая черный и белый;

10. Используется один шрифт. Можно использовать дополнительный для имен собственных и названий брендов;

Есть еще требования к верстке и типографике, но об этом в следующий раз.

Высоких вам конверсий!