СОЗДАЙ СВОЙ LANDING PAGE ПРЯМО СЕЙЧАС! ВЕСЬ ФУНКЦИОНАЛ БЕЗ ОГРАНИЧЕНИЙ - ПРОСТО ЗАРЕГИСТРИРУЙСЯ!
Бесплатно создать

Увеличиваем конверсию с помощью дизайна



24 августа 2015 г.
Комментариев не добавлено

дизайн лединга

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

Обратите внимание на изображение данной статьи:

- направление полета птицы подчеркивается брызгами воды;
- наличие свободного пространства подчеркивает важность объекта;
- цветовой контраст, который выделяет орла также демонстрирует важность объекта.

Давайте же рассмотрим 2 вида дизайна: дизайн, который увеличит конверсию лид-форм и дизайн, который увеличит конверсию СТА кнопок.


 

I. Дизайн, увеличивающий конверсию лид-формы

 

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

Итак, если на своем лендинге Вы расположили лид-форму, то планируете с ее помощью достигать поставленной цели и нужной конверсии. Не так ли? Иначе глупо размещать лид-форму и не использовать ее по назначению.

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

Начинаем исправлять лид-форму:

 

Прием 1 - Инкапсуляция и увеличение конверсии
 

лендинг

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

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

Рисунок ниже демонстрирует данный прием на практике:

лид форма лендинга

На правой части примера лид-форма сразу становится заметна пользователю.
 

Прием 2 - Контрасты
 

контраст в дизайне лендинга

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

В дизайне лендингов использование метода контраста обосновано тем, что основной элемент нужно выделить, сделать его максимально заметным.

лид-форма

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

Прием 3 - Направление движения
 

лендинг пейдж

Данное изображение наглядно показывает простой прием: пользователь (даже на подсознательном уровне) будет следить за стрелкой-указателем. На приведенном примере стрелка указывает нужное направление для глаз, затем взгляд следит за героем в белых брюках, у которого глаза смотрят на стрелку. То есть двойной эффект изображения.

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

форма для сбора информации

На правом варианте лендинга двойной прием: одна стрелка привлекает внимание к лид-форме, а вторая стрелка внутри самой формы направляет нас к СТА кнопке.

 

II. Дизайн, который увеличивает конверсию СТА кнопок

 

СТА кнопка - это элемент, который мотивирует пользователя к действию. Дизайн СТА кнопки должен быть заметным, и мы также будем следовать этому принципу.
 

Прием 1 - Свободное пространство в дизайне лендинга
 

целевая страница

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

СТА кнопка

Прием 2 - Текст на СТА кнопке лендинга
 

К тексту на СТА элементе есть 2 требования:

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

СТА элемент на лендинге

Обратите внимание на пример: при более полном описании действия размер кнопки придется увеличить. Большой размер СТА элемента - это неплохо для конверсии (даже наоборот), но иногда общий дизайн лендинга не позволяет это сделать.

В таком случае можно «разбить» действие на 2 части: где второе действие расширяет и дополняет первое.

Первое действие можно разместить на кнопке, а второе за ней. Либо оба действия можно поместить в кнопке.

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

Если для Вас сложно освоить приемы web-дизайна, то мы всегда готовы прийти на помощь и предложить шаблоны лендинга

Качественных Вам лендингов!


 

Вернуться назад