×
Россия +7 (495) 139-20-33

Дизайн посадочной страницы: как не потерять конверсию?

Россия +7 (495) 139-20-33
Шрифт:
2 14318

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

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

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

Жизнь в параллакс-вселенной

Сегодня параллакс-эффект стал таким же вездесущим, как хот-доги в Нью-Йорке. Согласно Google Trends, параллакс начал свое восхождение несколько лет назад и достиг пика популярности в последние несколько месяцев и, кажется, продержится на этих позициях еще какое-то время.

1.jpg

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

2.jpg

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

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

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

Меньше — закон Мура

Вы, возможно, слышали о законе Мура, согласно которому в ходе всей истории вычислительной техники количество транзисторов, размещаемых на кристалле интегральной схемы, удваивается каждые 2 года. Другими словами, наши устройства становятся невероятно быстрыми.

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

Данные HTTP Archive показывают, что в ноябре 2010 года средняя веб-страница весила 702 Кб. А к февралю 2015 года эта цифра выросла до 1,999 Кб. Увеличились и средние размеры изображений.

3.jpg

Выше приведен анализ веб-страниц в целом, но мы видим эту тенденцию и на лендингах. И это надо остановить.

Скорость загрузки страницы — серьезное дело. Всего одна секунда может уменьшить конверсию на 7%. 40% посетителей уйдут со страницы, если она не загружается в течение 3 секунд.

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

Оптимизация страниц для быстрой загрузки

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

Инструменты типа Photoshop и GIMP позволяют сохранять для интернета изображения, которые хорошо смотрятся и мало весят.

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

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

Призраки страшные. Особенно на лендингах!

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

4.jpg

Выглядят ли они хорошо? Возможно, если вам в целом нравятся такие вещи.

Приносят ли они конверсию?

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

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

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

5.jpg

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

6.jpg

Кажется, в этой кнопке нет никакой необходимости. И неважно, что еще они сделали на странице. Все это перечеркивается слабой кнопкой CTA.

Думайте о своих пользователях и о том, как заставить их совершить конверсионное действие.

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

К вопросу о необходимости адаптивного дизайна

По данным сервиса MeanPath, всего 3,08% из исследованных 146 599 190 посадочных страниц содержат код, соответствующий потребностям мобильных браузеров.

Несмотря на то, что люди ищут информацию с мобильных устройств 80% времени, дизайнеры по-прежнему игнорируют необходимость мобильной оптимизации.

Это дает огромные преимущества всем, кто хочет оптимизировать лендинги под мобильные устройства. Покупатели будут очень рады, если им не придется мучиться с размером изображения на экране, чтобы найти нужную информацию. А еще вы получите преимущество перед почти 97% людей, которые решили, что присутствие на мобильном рынке не так уж и важно в 2015 году.

Если этих аргументов недостаточно, то напомним, что с 21 апреля 2015 года Google будет учитывать при ранжировании адаптированность сайта под мобильные устройства (mobile friendly). И, конечно, поисковик наградит тех, кто нашел время на создание лендингов, отвечающих потребностям мобильных пользователей.

В заключение

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


(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Витя praktik_man
    1
    комментарий
    0
    читателей
    Витя praktik_man
    больше года назад
    Довольно интересная статья ;)
    -
    0
    +
    Ответить
    • Дарья Калинская
      249
      комментариев
      0
      читателей
      Дарья Калинская
      Витя praktik_man
      больше года назад
      Витя, спасибо!
      Заходите чаще - постараемся и дальше рассказывать много занятного и интересного :)
      -
      0
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как работать с сервисом для блогеров и бизнеса Perfluence
SergZa
1
комментарий
0
читателей
Полный профиль
SergZa - Не знал, что с небольшим количеством подписчиков можно заработать, буду пробовать;)
Диагностика и снятие ссылочного фильтра «Минусинск» в 2021 году. Кейс
Stanislav Romanenko
7
комментариев
0
читателей
Полный профиль
Stanislav Romanenko - Просто чисткой ссылочного можно просадить позиции в гугле, поэтому с бухты-барахты начинать удалять ссылки как-то тоже не хотелось бы. Ну в общем, если попадётся ещё подобный случай - не стесняйтесь выкладывать новый кейс :) Просто видите как мало кейсов по этому поводу, поэтому каждый на вес золота. "с этой бедой также приходится сталкиваться и пока кроме как крутить в обратную сторону ничего лучше не придумали." - на серче один товарищ скрипт антибота своего под это дело заточил searchengines.guru/ru/forum/981615/page39#unread - вроде боты пропадают, но и часть живых людей тоже :)
Алгоритм продвижения сайта через Pinterest
Гость
1
комментарий
0
читателей
Полный профиль
Гость - А через какое время гугл повысит позиции после индексации доски в пинтерест?
Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
Данил Щеглов
1
комментарий
0
читателей
Полный профиль
Данил Щеглов - Сервис вообще отличный. Я обращался для рекламы к блогерам, которых я мог даже сам выбрать. Справляются быстро и качественно.
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Лидия Просто
2
комментария
0
читателей
Полный профиль
Лидия Просто - У нас тоже был небольшой эксперимент с выдачей. Мы заказали в zenlink несколько статей и публиковали их один раз в сутки в одно и то же время. Статьи были с ключевиками, но при этом имели уникальный текст. В результате за месяц где-то сайт стал мелькать в топах по запросам. Полезный опыт был. Правда мне интересно как это реализовать на сайтах каталогах одежды, к примеру?
Увеличение трафика новостного сайта в 2 раза с помощью SEO. Кейс
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Делали подобное тут ruszakony.ru/rubrikator/ , получилось полная фигня
5 книг от эксперта: Александр Алаев (АлаичЪ и Ко)
Сергей
1
комментарий
0
читателей
Полный профиль
Сергей - Богатый папа, бедный папа - сборник мифов, которые уже разоблачил все. Все сразу стало понятно про "эксперта". Дальше можно список не смотреть. Прочитать ее конечно можно, если ничего другого нет под рукой, но советовать другим, это уже извините, совсем людей не уважать.
Локальное SEO, или Как увеличить трафик стоматологии на 700% в небольшом городе
Дмитрий Дмитриев
1
комментарий
0
читателей
Полный профиль
Дмитрий Дмитриев - расскажите, о чем именно речь? :)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!