Первый экран лендинга. Как заинтересовать пользователя?

Эта статья не догма и не правило. Есть разные варианты, построения, первого экрана лендинга. Я призываю вас экспериментировать, искать что-то более лучшее…

Два принципа разработки коммерческого сайта:

У сайта есть цель. Чаще всего — привлечь клиента, получить лид.
Сайт делается для пользователей, а не для заказчика.

Решения о структуре, текстах, графике сайта нужно принимать исходя из того, чтобы хотел увидеть клиент на вашем сайте.

Почему так важен первый экран?

На скриншоте выше — карта скроллинга из яндекс метрики. Красная область — первый экран, к концу сайта теплота цвета уменьшается до тёмно-зелёного. Первый экран видят все, а дальше только те, кого заинтересовал первый экран. Проработайте первый экран, чтобы пользователи изучали весь сайт.

Задачи первого экрана

Объяснить, куда пользователь попал. Первый экран должен об этом сообщить.
Заинтересовать, т.е втянуть в знакомство с остальным контентом сайта
Передать основную мысль, которую вы хотите донести.
Вызвать доверие. Почувствовав обман пользователь закроет сайт и уйдет к конкурентам.

Элементы первого экрана лендинга

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

Это один из вариантов построения первого экрана лендинга, есть множество других.

Логотип

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

Описание

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

Заголовки и подзаголовки

Заголовок передаёт главную идею страницы. Главная идея должна закрывать какую-то потребность пользователя, нести пользу. Заголовок, как и описание помогает посетителю понять, что вообще здесь происходит и что ему предлагают. Заголовок должен показывать выгоду вашего предложения. Он должен заинтересовать пользователя, чтобы тот ознакомился со следующим абзацем текста.

Ошибочно считать, что заголовок должен, сразу продавать что-то, это неверно. Заголовок должен именно заинтересовать пользователей, втянуть его в чтение остального текста. А остальной текст будет доказывать, убеждать.

Что писать в заголовке?

Опирайтесь на потребности и проблемы пользователя. В зависимости от этого вы можете написать какое-то торговое предложение, выгоду, призыв к действию, давите на боли пользователя. Указывайте факты, чтобы вызвать больше доверия. Дайте ограничения, чтобы ускорить процесс принятия решения.

Ниже, на картинках, примеры заголовков из практики. Сверху заголовок, до переделки сайта, а снизу новый улучшенный заголовок.

Заголовок сайта по услуге изготовление кухонь на заказ

Сверху старый заголовок, снизу новый. Прочувствуйте разницу, какой заголовок заинтересует пользователя, где просто написано «Золотое сечение. Мебельная фабрика» или же тот, где есть конкретное предложение, где есть бонусы в виде «3D проекта кухни бесплатно за один день».

Заголовок сайта по продаже дренажных систем

Старый вариант «Гидромонтаж, канализация в каждом доме». Новый заголовок, на основе потребностей пользователя: «Избавьтесь от луж во дворе, защитите фундамент от разрушения и предотвратите попадание воды в подвал на ближайшие 60 лет с дренажной системой sofrock». Проблемы пользователя: лужи во дворе, разрушение фундамента от влаги, попадание воды в подвал. В заголовке мы сообщаем пользователю что можем решить его проблемы на ближайшие 60 лет.

Заголовок сайта по кузовному ремонту

Старый заголовок«Кузовной центр площадью 600 квадратных метров». Какую пользу дает информация 600 квадратных метров, для пользователя? Зачем ему площадь здания? Какую выгоду это ему даст? Возможно этим заголовком хотели показать то, что у них очень большой цех и они могут обслужить сразу много автомобилей. Тогда лучше написать – «Обслужим без очереди». Новый вариант заголовка: «Кузовной ремонт и покраска без очереди. Гарантия до 3-х лет. От 1-го дня. От 3500 р. за деталь. Рассрочка 0%».

Изображение

Первая задача изображения привлечь внимание пользователя и перевести на чтение текста. Изображение должно быть крупным, ярким, заметным. Откажитесь от изображений из яндекса и гугла. Используйте ваши настоящие фотографии, они вызовут больше доверия.

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

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

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

Факты и выгоды

Выгоды добавляют ценности вашему предложению, а факты усиливают доверие.

Давайте посмотрим примеры.

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

Целевое действие

Действие, которое вы ожидаете получить от пользователя на сайте. Например: отправить заявку, позвонить, скачать прайс-лист, просмотреть видео.

Признаки удачного целевого действия:

легкое,
логичное
выгодно для пользователя
важно совершить прямо сейчас

Все элементы связанные с целевым действием – кнопки, формы должны быть заметными, чтобы пользователю не приходилось их искать.

Формы

Советы по оформлению формы:

Форма должна быть удобной
Не просите у пользователя лишнюю информацию
Сделайте пояснения для полей
Сделайте подсказки при ошибках
Кнопка должна быть контрастной и прямоугольной

Призывы к действию и целевые действия

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

Призыв к действию и целевое действие на сайте по изготовлению кухонь.

Человек, который хочет новую кухню, зачастую не знает какую именно кухню он хочет. Мы можем сыграть на этом и предложить доступ к каталогу. Так мы получим контакты пользователя, а пользователи каталог кухонь.

Форма на сайте по изготовлению ежедневников. Человеку предлагается заказать демонстрацию. То есть ему привезут ежедневники в офис, и он сможет оценить, как они выглядят.

Что не стоит делать на первом экране?

Не используйте стоковые фотки. Человек заходит на разные сайты, видит там одинаковые фотографии, это снижает доверие.

Не используйте вычурные шрифты. Шрифт должен быть простыми, чтобы прочитать текст без проблем.

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

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

Не пытайтесь впихнуть все в первый экран. Определитесь с главной идеей страницы добавьте наиболее важную информацию, а всё остальное перенести на следующие экраны.

Не используйте слайдеры. Дайте конкретное предложение на первом экране максимально подходящее пользователю. Не заставляйте листать слайдер и вникать.

Не копируйте конкурента. Идеи и сайты конкурентов могут быть ошибочны, не копируйте их слепо, перенимайте только удачные решения и тестируйте их.

Подведем итоги. Задачи первого экрана:

дать понять, куда попал пользователь
заинтересовать его
передать главную мысль страницы
вызвать доверие

Элементы первого экрана

логотип
описание
телефон
заголовок и подзаголовок
изображение
факты и выгоды
призыв к действию
контактная форма