Многофункциональная SEO-платформа
для профессионалов
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

Россия +7 (495) 960-65-87
Шрифт:
2 9972

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

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

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

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

Сегодня параллакс-эффект стал таким же вездесущим, как хот-доги в Нью-Йорке. Согласно 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). И, конечно, поисковик наградит тех, кто нашел время на создание лендингов, отвечающих потребностям мобильных пользователей.

В заключение

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


Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Витя praktik_man
    1
    комментарий
    0
    читателей
    Витя praktik_man
    больше года назад
    Довольно интересная статья ;)
    -
    0
    +
    Ответить
    Поделиться
    • Дарья Калинская
      209
      комментариев
      0
      читателей
      Дарья Калинская
      Витя praktik_man
      больше года назад
      Витя, спасибо!
      Заходите чаще - постараемся и дальше рассказывать много занятного и интересного :)
      -
      0
      +
      Ответить
      Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
23 действительно эффективных совета по продвижению интернет-магазина
Гость - Троль Гуру паНгинации - Что такое паНгинация?))))
Как построить качественную ссылочную массу сайта
Анна Фра
1
комментарий
0
читателей
Полный профиль
Анна Фра - www.youtube.com/watch?v=jtINdDyNdFU полезное видео
Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
Андрей Ольшевский - Очень неточная статистика, объясню почему. Довольно часто делаю анализ сайтов на качество и объём ссылочной массы. Всегда делаю выгрузку из трех источников – Вебмастера Яндекса, сервиса Мегаиндекс, сервиса Линкпад. Потом с помощи алгоритмов и функции Excel отсеиваются много дублей, битых ссылок, несуществующих урл и тп. Как показала практика, вебмастера Яндекса вполне достаточно, там вся информация и она самая актуальная, в других сервисах куча мусора, а нового, чтоб было найдено и проиндексировано ПС - очень мало. Поэтому мирятся количеством в данном анализе не профессионально.
Как создать интернет-магазин: сколько стоит открытие?
Гость - да у битрикса что ни обновление - то сплошные баги. недавно знакомый обновился на лицензии интернет-магазина, про***лись заказы за последнюю неделю, слетели все связи по складам. одним словом, жопа. при этом обновился на сразу, а спустя месяц после выкатывания, надеялся, успеют все поправить
ТОП-10 автоматизированных сервисов контекстной рекламы
Гость - Не доверяйте свои данные системам от агентств, если рекламу у них вы не ведете. Юзал алитикс и к50. Пробуйте эти две системы как мин. А лучше всего автоматизировать с помощью эксель, pbi и подобных сервисов. Но пока это сложно для большинства
Как упростить продвижение вечными ссылками?
Coursh - Зарегестрировался. Накинули 1100 рубликов за пополнение на 10к. Очень неплохо!
Кому и зачем нужен маркетплейс от Яндекса
Дарья Калинская
209
комментариев
0
читателей
Полный профиль
Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
Кейс: как молодому сайту увеличить органический трафик с 0 до 10 000 посетителей за 6 месяцев
Олег Буряк
38
комментариев
0
читателей
Полный профиль
Олег Буряк - Никаких санкций!!!! на сайт за резкий скачок уникальных естественных ссылок !!!не было наложено!!!. Все дальше читать не буду! УДАЧИ Вам! кошмар!
Инструкция по применению: обзор сервиса обратного звонка Callbackhunter
Ирина - Ну вообще колбэкхантер самый дорогой сервис из всех, есть более дешевые аналоги
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
285
Комментариев
262
Комментариев
209
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
71
Комментариев
67
Комментариев
60
Комментариев
55
Комментариев
52
Комментариев
50
Комментариев
45
Комментариев
44

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