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

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

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

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

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

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

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

1.jpg

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

2.jpg

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

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

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

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

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

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

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

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

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

В заключение

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


Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
32 инструмента в помощь SEO-специалисту
Игорь
1
комментарий
0
читателей
Полный профиль
Игорь - отличная подборка, сам многим из этих сервисов пользуюсь (ETXT, TEXT.RU, Адаптивность, Pingdom Website Speed Test, Google PageSpeed Tools, 2IP, Whois, Букварикс) Правда не мог найти достойного кластеризатора, но потом наткнулся на вот этот seoquick.com.ua/keyword-grouping/ не сочтите за рекламу:) Было бы интересно услышать ваше мнение о нем. Мне очень даже зашел, из-за скорости работы. Как говорит автор - 100 000 запросов за несколько минут. Я с такими цифрами правда не работал, обычно это до 30 000 точно, но работает очень быстро и в правду. Ну и бесплатно, думаю, это был еще один решающий фактор для меня
Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
Анатолий Шевчик
1
комментарий
0
читателей
Полный профиль
Анатолий Шевчик - +1097988
Все, что нужно SEO-специалисту. Обзор инструментов
Администратор Сайта
1
комментарий
1
читатель
Полный профиль
Администратор Сайта - Шаришь в seo! Сервис реально хороший
Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
Александр Селенков
1
комментарий
0
читателей
Полный профиль
Александр Селенков - Работа проделана огромная. Интересный кейс, все детально и понятно изложено.
Два идеальных способа разориться на старте интернет-магазина
Стас
4
комментария
0
читателей
Полный профиль
Стас - Seonews в последнее время такую чушь несет! Где вы таких афторов находите? Статья ничего не стоит и несет чушь! Кто хоть немного понимает в этом так вам и скажет, и такие де комментаторы горе-сеошники, просто смешно читать, вы хоть модерируете ваши статьи или просто для воды на сайте?! Бред сивой кобылы эта статья до самой последней точки!!!
SEO глазами клиентов 2018
Мария Рогачева
2
комментария
0
читателей
Полный профиль
Мария Рогачева - Никита, в этом вы правы. В каком-то смысле мы оказались заложниками названия. Когда запускали рейтинг, было одно сплошное SEO, сейчас же сложно найти агентства, которые специализируются только на SEO. Не учитывать другие каналы продвижения стало просто неправильно.  Активно думаем в этом направлении.  Спасибо вам за отзыв и внимание к рейтингу! 
4 способа быстро собрать теги для сайта
Рустем Низамутинов
5
комментариев
0
читателей
Полный профиль
Рустем Низамутинов - Расписал и закинул в Google Docs, а то здесь в комментариях ссылки на активны. docs.google.com/document/d/1r0TZLNrQyYLdIzDQsD5YKlMG41HUGQgEep3bxE_ij-M/edit?usp=sharing
Яндекс перестал индексировать сайты, созданные на Wix
Константин Даткунас
3
комментария
0
читателей
Полный профиль
Константин Даткунас - Было бы интересно посмотреть саму выборку из 10 000 и методику анализа.
Как мы разработали и вывели в ТОП сайт курсов рисования
Иван Стороженко
25
комментариев
0
читателей
Полный профиль
Иван Стороженко - Добрый день. 1)Чаще всего основная проблема заключается, в согласовании с клиентом добавляемого контента и то как он будет отображаться. На данном сайте фото и услуги конечно предоставлял клиент, все остальное уже делали мы. 2)Да в принципе, когда есть команда и понимание, что нужно делать, все идет быстро (опять же основная заминка идет на согласовании с клиентом) 3)Смысла делать новый в данном случает нет. В принципе доделывался полноценный сайт. 4)Когда клиент уже не предоставляет информацию, приходится искать у конкурентов (например с других стран или регионов). Но чаще всего клиент, хоть что-то "подкидывает".
Яндекс: как мы модерируем объявления
Гость
5
комментариев
0
читателей
Полный профиль
Гость - Это ж Яндекс, чего вы ожидали-то? Коммерческая структура с раздутым штатом, задачей которой является заработать больше денег. Любыми методами. Задача всех пользователей посадить на Директ, даже если придется разрушить суть рунета, реализуется по полной программе. Все возражающие караются и выпиливаются. И каждый из сотрудников делает все возможное и невозможное, чтобы реализовать любую дурацкую идею - за это еще и премию выхватить можно. Даже если потом придется выполнять "откат", премиальные уже заплачены. Так было с одним из фильтров Яндекса, так было с купленным им сайтом Кинопоиска, который из русскоязычной энциклопедии кино был превращен за безумные деньги в банальный платный онлайн-кинотеатр.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
329
Комментариев
262
Комментариев
235
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
86
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54
Комментариев
53

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