LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Пустое пространство: секретное оружие для успешных лендингов

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

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

секретное оружие для успешных лендингов

А если делать все правильно, то такой:

секретное оружие для успешных лендингов

Кстати, подробнее о создании этого лендинга можно почитать здесь >>>

В чем же разница, если на обеих страницах есть необходимые элементы для конверсии? В отличие от TaxSlayer, MomBook использует прием, часто не игнорируемый при создании лендингов — пустое пространство (white space).

Что такое «пустое пространство»?

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

Что такое «пустое пространство»?

На данной фотографии роль пустого пространства занимает небо

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

Различают четыре вида свободного пространства:

  1. Микро-пространство: расстояние между небольшими элементами (изображением и заголовком, буквами в словах)
  2. Макро-пространство: расстояние между главными элементами (заголовком и текстом)
  3. Активное пространство: как правило, это ассиметричное пространство, осознанно добавляемое на страницу для придания динамичности
  4. Пассивное пространство: естественное пространство между словами в строке или вокруг диаграммы.

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

Пустое пространство улучшает удобочитаемость

Благодаря нему текст читается заметно приятней и легче, что можно заметить по следующим примерам:

Пустое пространство улучшает удобочитаемость

Выглядит ужасно, не правда ли? А теперь тот же самый текст, но с пространством между строками:

Пустое пространство улучшает удобочитаемость

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

Какой абзац лучше воспринимается?

Пустое пространство улучшает удобочитаемость

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

Пустое пространство улучшает удобочитаемость

Использование пустого пространства для направления посетителей

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

В качестве примера рассмотрим еще один лендинг, разработанный нашей командой дизайнеров:

дизайн
 

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

Правильное использование пустого пространства улучшает впечатление от сайта

Свободное пространство может добавить элегантности и элитарности вашим целевым страницам.

В качестве примера возьмем два объявления:

Правильное использование пустого пространства улучшает впечатление от сайта

Какое выглядит лучше?

Лендинги не так сильно отличаются. Страница Ultimate Tax не в полной мере использует свободное пространство:

Лендинги

Здесь много свободного места в нижней части, но сверху лендинг просто «забит» текстом. Эта страница, напротив, выглядит намного чище и премиальнее:

Лендинги

Использование свободного пространства для оптимизации формы

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

Принцип гештальта (gestalt principle) говорит о том, что посетители склонны пропускать близкорасположенные друг к другу элементы. Свободное пространство позволяет отформатировать поля формы и сделать их удобными для восприятия.

На сайте Fuel 360 представлена форма с достаточным количеством пустого пространства:

Использование свободного пространства для оптимизации формы

Вместо заключения

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

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

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

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

По материалам: wordstream.com

6 июня 2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".