статья
Как получить конверсию до 20% первым экраном
Структура первого экрана лендинга/сайта
для максимальной конверсии
Почему первый экран кардинально влияет на конверсию?
Посетитель уже на первом экране сканирует ваш лендинг на предмет – интересно или не интересно. Если первое впечатление не очень, то шансы получить заявку - низкие.

Как сделать так, чтобы на первом экране пользователю стало интересно?

Здесь надо погрузиться в психофизиологию. Как устроено восприятие лендинга? Что происходит в голове человека, когда он открыл ваш сайт?

В голове человека есть ключевая задача. Считается, что человек заходит на сайт с «пустой головой» и мы погружает в его голову смыслы про наш бизнес. Но это не так, человек заходит на сайт с некоторой задачей в голове и важно эту задачу учитывать.

Какая главная задача посетителей?
Главная задача в голове посетителя – найти нужную информацию. Кто-то ищет цену, кто-то каталог, кто-то конкретный товар, кто-то условия доставки или сроки изготовления. Не важно, что именно они ищут, главный вывод для нас - мозг человека хочет решить его задачу максимально быстрым путём.
Взгляд человека мгновенно проходит по лендингу и ищет элементы интерфейса, которые помогут решить его главную задачу – найти информацию.
Угадайте, какой элемент сайта или лендинга искликан больше всего по карте кликов Яндекс.Метрики? Верхнее меню. Почему? Потому что в нём посетители видят хоть какие-то шансы быстро добраться до нужной информации.
Что может помешать посетителю быстро найти нужную информацию?
Во-первых, и главное – замусоренный первый экран. Если у вас не структурирована информация, ужасная пёстрая фоновая картинка, огромное меню, ссылки на ватсап, телеграм, куча текстов, ужасная форма – взгляд не может сфокусироваться ни на одном конкретном элементе.

Во-вторых, и тоже главное – у вас на первом экране попросту нет элементов, которые могли бы помочь человеку решить его задачу. Кнопка «Оставить заявку» не в счёт, это точно не то, что он ищет.
Как сделать первый экран с конверсией до 20%?

Работа с первым экраном – целое искусство. Предлагаю готовую и проверенную структуру - сейчас мы соберём её, как матрёшку, от простого к сложному.
Шаг 1
Давайте всё упростим! Никакого информационного шума – сделаем оффер, кнопку и фоновую картинку.
Оффер
1-2 строчки, крупный кегль, никаких 4U, просто адекватное предложение. Посетитель прочитал оффер и подумал про себя: «Ок, я понял о чём тут речь и что мне предлагают».
Кнопка
Большая. БОЛЬШАЯ! Сделайте кнопку и увеличьте в 2 раза. Сделайте её контрастного цвета к фону, сделайте её красивой (скруглите края и т.п.). Сделайте на кнопке анимацию, чтобы она раз в 2-3 секунды вспыхивала и привлекала к себе внимание.
Очень важен текст кнопки - это должен быть доступный и актуальный посетителям следующий шаг.
Фоновая картинка
Отражает ваш продукт, при этом не слишком пёстрая и на ней читается текст оффера и с ней хорошо контрастирует кнопка. Если нужно – затемните фоновую картинку на 50-70%, обычно это решает все вопросы. Цвет текста оффера – сделайте белый.
Шаг 2
Сделаем шапку с меню, телефоном и кнопкой «Заказать звонок», она никогда не бывает лишней. Почему? Потому, что люди привыкли к тому, что наверху сайта есть меню и телефон, они автоматически ищут их взглядом. Глупо это не использовать.
Меню
Делаем 3-5 пунктов, ключевые вопросы, которые могут заинтересовать людей. Не делайте пункты меню «О компании», это людям не интересно, по карте кликов Яндекс.Метрики чаще всего кликают на пункты меню вроде «Цены», «Каталог», «Примеры работ» и тому подобные.
Спросите своего менеджера, что на самом деле спрашивают чаще всего?
Телефон
Делаем крупным кеглем и кликабельным – если по нему кликают, открывайте форму заказа звонка. Вы удивитесь, но по телефону постоянно кликают. Важно: сделайте его кликабельным только в декстоп версии, в мобильной при клике автоматически открывается звонилка и это хорошо.
Кнопка «Заказать звонок»
Не такая крупная, как основная кнопка, но тоже заметная, контрастного цвета и с анимацией.
Как прокачать конверсию меню
При клике на пункт меню – открывайте всплывающее окно (popup) в котором давайте общую информацию по теме пункта меню и предложите оставить заявку, чтобы узнать подробнее.
Описание
Короткий текст, который даёт общую информацию и аргументирует, зачем оставить заявку
Форма заявки
Хороший дизайн формы, поля не должны выглядеть как в Windows 3.11, подписи внутри полей, кнопка с анимацией
Фото менеджера
В b2c нише презентабельная девушка, в b2b нишах может быть директор по производству или генеральный. Фото не стоковое, реального человека (не обязательно сотрудника вашей компании)
Шаг 3
Прямо под кнопкой вы можете сделать либо дополнительное меню, либо три иконки. При клике на эти пункты меню или иконки сделайте так же появление popup с коротким текстом и предложением оставить заявку.
Пункты меню
Сделайте так же функциональные, не делайте «О компании», лучше всего подходят варианты «Доставка», «Сроки», «Гарантии» - то, что клиенты могли бы спросить у менеджера по телефону, что-то «твёрдое».
Иконки
Сделайте максимально простыми, похожими на иконки у кнопок в word. Карта кликов Яндекс.Метрики показывает, что по таким иконкам люди кликают, а по красивым и нестандартным иконкам – не кликают.
Кейс тренинга тренеров
Доработкой первого экрана подняли конверсию с 4,4% до 9,3%
syntone.ru/training/TT
Кейс Университет практической психологии
Доработкой только первого экрана подняли конверсию с 5% до 15%
upp.syntone.ru
Кейс Whitewill
Доработкой только первого экрана подняли конверсию с 14% до 25%
Сделайте красиво!

Сделайте хороший дизайн, один экран вам обойдётся всего в 3-5 тысяч рублей, поверьте, оно того стоит. Не доверяйте своему вкусу, возьмите дизайнера. Дизайн – это мета-смысл, который посетитель считывает за доли секунды. В отсутствии доказательства качества вашего товара или услуги человек оценивает по тому, насколько у вас хороший дизайн.
Хотите разбор вашего сайта?
Дмитрий Романов, автор статьи, основатель Лаборатории конверсии
Я готов сделать разбор вашего сайта в скайпе.
На разборе мы сгенерируем от 10+ гипотез для повышения конверсии и детально проработаем первый экран. Разбор вас ни к чему не обязывает, после разбора я предложу передать нам разработку ТЗ, прототипов и сопровождения, а дальше вы решите, да-да, нет-нет.

Мои контакты
8 (903) 176-86-31
demaroman@yandex.ru
vk.com/id160620
skype: dmitryromanow
Made on
Tilda