Первый экран сайта. Первый и последний шанс оставить клиента на сайте и получит конверсию

Все начинающие разработчики лендингов грешат размещением слайдера на 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. Используется один шрифт. Можно использовать дополнительный для имен собственных и названий брендов;

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

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