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

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

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

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

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

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

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

Сегодня параллакс-эффект стал таким же вездесущим, как хот-доги в Нью-Йорке. Согласно 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
#SEOnews14: мы празднуем – вы получаете подарки!
Анна Макарова
0
комментариев
0
читателей
Полный профиль
Анна Макарова - Гость, добрый день! С победителями мы связывались сразу после розыгрыша. Если мы вам не написали, значит, ваш номер не выпал. Но не расстраивайтесь, у нас обязательно будут новые розыгрыши!
Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
Светлана Зубрицкая
1
комментарий
0
читателей
Полный профиль
Светлана Зубрицкая - Нужно убрать пробелы между строк и заменить кавычки на вот такие "
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Ann Yaroshenko
5
комментариев
0
читателей
Полный профиль
Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Воообще, на самом деле здесь двоякое впечатление от таких аудитов. Конечно, для полного глубокого анализа и подготовки рекомендаций по сайту - нужны доступы к системам аналитики и инструментам вебмастера. Но если оценивать подобные аудиты с точки зрения чистого SEO (которое все больше и больше становится лишь малой частью digital-маркетинга, лишь одним из каналов) - они имеют место быть. Но с оговоркой, что они сделаны с учетом анализа конкурентов/отрасли. Современные инструменты и алгоритмы позволяют делать это маркетологам в автоматическом режиме, и даже давать рекомендации - возможностями машинного обучения уже никого не удивишь. Да, полное перечисление "мифического" списка ошибок, построенного по предикативным правилам, да еще и с учетом устаревших особенностей ПС - это явный признак некачественного аудита. В первую очередь потому, что эти "ошибки" следует рассматривать в качестве рекомендаций от ПС (как и говорится в справочнике вебмастера у Яндекса/Google). Однако если эти данные даются с отсылкой на данные о конкурентах, об отрасли, используются методы ML и Natural language processing для обработки исходных данных, кластеризации запросов, классификации страниц/запросов/сайтов, определения структуры документа - такие отчеты имеют право на существование. Но ключевым моментом является то, что подобные инструменты достаточно сложны в разработке, а значит требуют квалифицированных специалистов для их разработки. Которых просто нет у студий рассылающих подобные "сео отчеты". Подобные отчеты по "ошибках" тоже неплохой источник информации, но лишь на 0 этапе анализа сайта. И в принципе, теоретически, возможно почти полное составление "хороших аудитов" без участия маркетолога, на основе лишь открытых данных сайта/внешних источников, но только при соответствующем применении всех современных возможностей анализа данных и рекомендательных систем. И в любом случае подобный "хороший отчет" требует конечного заключения от эксперта.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Kosta Bankovski
4
комментария
0
читателей
Полный профиль
Kosta Bankovski - Спасибо за приятные слова! Буду и дальше делиться наработками ;)
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Как вывести сайт в ТОП 10 Google в 2019 году
Ирина
8
комментариев
0
читателей
Полный профиль
Ирина - Работают. Как естественные, так и закупные. >Мои сайты в первую очередь заточены на яндекс Соболезную. >Насколько поисковые алгоритмы с гугловскими у него. Разница в 10 лет. Вон в Яше все долбят на ключи, на вхождения и прочий трэш из древностей. А у Гугла, вон почитайте про eat, ymyl Не все понятно но спасибо за ответы. Я так понимаю что с ссылками деть никто точно не знает) Ну это и хорошо вообщем. Самому разбираться как то интересней. Но не всегда. Есть к примеру 2captcha.com/ru и на него 100к ссылок есть. Ну а смысл какой?
Как я пытался купить CRM-систему, но мне ее поленились продать
Kristina
1
комментарий
0
читателей
Полный профиль
Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
360
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
107
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
79
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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