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

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

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

Шрифт и его размер

лендинг

Посетитель должен в первые секунды увлечься вашим предложением. Этого сложно достичь, если вы используете мелкий шрифт. Когда-то приемлемым считался размер в 12 пикселей. Для современного пользователя это уже слишком мелко.
Маркетинговые исследования выявили, что концентрация внимания у пользователей интернета в прошлом году упала на восемь секунд. Те же исследователи утверждают, что среднестатистический посетитель читает только 28% слов текста.

ПРИНЦИП №1

  • Чтобы удержать внимание такого пользователя генерируйте сильные заголовки (к этой теме мы вернемся в следующей статье).
  • Заголовок должен быть написан крупным шрифтом и плавно перетекать в интересный контент, который захочется прочитать до последней точки.
  • К тексту лучше подобрать шрифт примерно от 14 до 18 пикселей.

Что такое слайдер и зачем он лендингу

лендинг

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

Но есть мнение, что слайдер лишь занимает место на странице, а CTR от его наличия увеличивается только на 1%. Плюс ко всему, слайдеры иногда выглядят, как мелькающие картинки и просто отвлекают внимание.
Не покупайтесь на продвинутый, технологичный и динамичный элемент дизайна. Будьте проще. Хотя разработчику не составит труда сделать для вас «штуку» с картинками, которые можно листать. И, возможно, он действительно будет неплохо смотреться на лендинге.

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

Известные маркетологи считают, что в ходе эволюции интернет-маркетинга слайдер перешел в разряд рудиментарных органов и нужен сайту так же, как Homo Sapiens — хвост. Не верите? Почитайте Пипа Лайя, Криса Говарда и Тима Эша.

ПРИНЦИП №2:

  • Если вы решили разместить слайдер, только потому, что увидели это дизайнерское решение у конкурентов – не делайте этого. Думайте своей головой.
  • Разработайте уникальный вариант подачи информации, который подойдет для ваших целей. Или поручите это своему дизайнеру.
  • Определите реальную ценность товара или услуги и сделайте визуальный упор на нее.
  • Не забывайте про кнопки призыва к действию. Они должны быть расположены так, чтобы посетитель, прочитав ваше предложение тут же попадал взглядом на СТА-элемент.

Допустим, вы предлагаете записаться на видео семинар. У вашего потенциального клиента не должен возникать вопрос, как это сделать. Будьте на шаг впереди. Рассказав о том, что вы измените его жизнь за 1,5 часа, тут же предложите ему принять участие – красивой заметной кнопкой.

Низкая контрастность – плохая конверсия

лендинг

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

  • Светлый текст на светлом фоне;
  • Темный текст на темном фоне.

Данный прием хорошо работает в печатной продукции. Для дизайна в виртуальном мире он не подходит.
Вернемся к здоровью ваших клиентов. Вы знали, что, чем старше становится человек, тем меньше света пропускает роговица его глаза? Например, в 20 лет человек видит в два раза лучше, чем в 40. А к 60 годам этот показатель уменьшается на 20%. Подобные цифры справедливы для людей с хорошим зрением. Вспомните, что мы живем в век «очкариков». Если не хотите стать причастным к этой малоприятной тенденции, берегите здоровье своих клиентов. Пусть ваш контент будет комфортно читать.

ПРИНЦИП №3:

Предлагаем вам обратную формулу под названием Контрастные шрифты «радуют глаз»:

  • Светлый шрифт на темном фоне; 
  •  Темный шрифт на светлом фоне.

В этой формуле есть одна невидимая переменная – реверсивный шрифт (белый текст на черном фоне). Будьте аккуратны, менять направление движения цвета не всегда уместно. Известный маркетолог Дэвид Огилви предупреждал своих коллег о том, что в рекламном тексте лучше не использовать этот приём.

Длина строки

лендинг

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

ПРИНЦИП №4:

лендинг

Если высота небольшая, может возникнуть ощущение «слипшегося текста». Чтобы избежать подобных ошибок дизайна, воспользуйтесь специальным сервисом, который вычислит для вас идеальную высоту строки по принципу золотого сечения (например, Golden Ratio Typography Calculator).

Ширина строки

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

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

Независимое исследование института Бэймарда выявило, что оптимальная строка состоит примерно из 50 или 60 символов (плюс минус 15 знаков).

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

Все тот же независимый институт Бэймарда рекомендует выставлять следующие параметры:

Ширина текста – 516 пикселей
Шрифт – 18 пикселей
65 символов в строке

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

Цветовые акценты и их отсутствие в СТА-элементе

Источник изображения darksiteofmarketing.com

Источник изображения darksiteofmarketing.com

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

(Работа с этим элементом подробно описана в публикации «Психология призыва к действию»)

ПРИНЦИП № 5:

Коротко о яркой кнопке:

  • Чем ярче кнопка, тем больше внимания;
  •  Цвет кнопки не должен «конфликтовать» с основным оформлением сайта;
  •  Цвет кнопки и фона должны различаться;
  •  Один призыв – одна кнопка. Не нужно использовать элемент по принципу – чем больше, тем лучше.

Стандарты – наше все

screencapture-www-squarespace-com-templates-1430687434439

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

ПРИНЦИП №6:

Все на «своих» местах:

  • Логотип и слоган, как правило, всегда отображаются в левом верхнем углу;
  • Оставьте меню в правом верхнем углу;
  • Раздел «О нас» — информация о компании;
  • Раздел «Контакты» — здесь налаживается обратная связь;

Заключение

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

Удачи и высоких конверсий!