34 Тенденции посадочных страниц в 2017 году. часть 1

Posted on by riasevastopol

Представьте, что вам необходимо написать песню на Грэмми. Как вы поступите: станете направляться последним трендам, слушать внутренний голос, привлечете лучших музыкантов?

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

Это справедливо и для лендингов.

Обложка альбома Middle of Nowhere, трижды номинированного на Грэмми.

Само собой разумеется, не все тенденции долговечны. Кое-какие тренды забываются за пара лет — в противном случае и дней. Одновременно с этим, не учитывать последние веяния — значит, добровольно дать пальму первенства соперникам.

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

В 2017 году на вершине популярности окажутся 34 тренда разработки лендингов из 6 главных разделов:

  • Макет лендинга
  • Визуальный контент
  • Анимированные элементы
  • Призыв к действию (Call-to-Action, CTA)
  • Ценностное предложение
  • Социальное подтверждение

В первой части материала мы обсудим тренды, которые связаны с макетами целевых страниц и визуальным контентом.34 Тенденции посадочных страниц в 2017 году. часть 1

Просматривайте кроме этого: Тренды веб-дизайна, убивающие вашу конверсию

Макет лендинга 1. Долгий — не означает плохой

Возможно, вам неоднократно виделось утверждение, словно бы высококонверсионный лендинг (как и лид-форма) должен быть маленьким. Так и было до недавнего времени. Но сейчас мы движемся в сторону более долгих лендингов.

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

По итогам сплит-теста конверсия долгого варианта была выше на 37,5%. Обратите внимание на «чистый» дизайн второй версии — без отвлекающих элементов.

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

Мими Ан (Mimi An) из Hubspot так комментирует эту тенденцию: «Большая часть нынешних клиентов сами ищут данные о товаре. На стадии осведомленности они надеются на прочие каналы и ресурсы компаний. И лишь удовлетворив эти запросы, они психологически готовы к контакту и покупке с продавцом».

Но долгие лендинги действенны не для любого бизнеса. Исходя из этого экспериментируйте и тестируйте собственные догадки.

Просматривайте кроме этого: Как долгим должен быть действенный лендинг?

2. минимализм и Простота

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

  • Белое пространство
  • Четкие заголовки
  • Четкие кнопки CTA
  • Призывы к действию контрастных цветов
  • Инкапсуляция
  • Высокая читабельность и т. д.

Пример теста двух вариантов страницы: минималистичного и «захламленного» от British Gas. Вторая версия повысила онлайн заказы на 50%.

Просматривайте кроме этого: минимализм и Простота в веб-дизайне

3. Поделённый экран (Split Screen)

Еще один тренд, снижающий когнитивную нагрузку и выделяющий заголовок. Разделение экрана на лид и визуальный контент-форму (либо блок с информацией) сокращает трение и облегчает восприятие информации.

Пример от Stitch Fix: слева пользователи находят визуальное объяснение, а справа — информационное.

Анимированный поделённый экран от Typeform.

4. Отсутствие панели навигации

Данный тренд очищает страницу от дополнительных элементов и разрешает достигать коэффициента внимания 1:1.

Вместо панели на домашних страницах кое-какие компании применяют прием «в случае если весьма хочется», либо «if какое количество really want it» (узнаваемый, как перевернутый лендинг, «upside down landing page»), где панель навигации находится внизу страницы. Так, внимание пользователя акцентируется не на второстепенных элементах, а на основной цели.

Брайан Харрис (Bryan Harris) из Videofruit стал популяризатором данной идеи. Он говорит, что прием повысил число подписок на 35%.

Результаты до и по окончании редизайна: количество подписок в неделю.

Просматривайте кроме этого: Лучшие практики Landing Page с высокой конверсией. Нестандартные примеры

5. Призыв к действию, продолжающий фразу «Я желаю…»

Эра однообразных призывов ушла в прошлое. Сейчас компании применяют максимально понятные фразы, отвечающие главным потребностям клиентов.
Призыв, что продолжает фразу «Я желаю…», преподносит неповторимое ценностное предложение с позиции аудитории.

«Я желаю взять приглашение». Взглянуть всю страницу

6. Полупрозрачный несложный заголовок

Данный тренд продолжает прошлый и дает еще больше шансов. Заголовок-«невидимка» не похож на обычные заголовки, по причине того, что конечно вписывается в контекст лендинга. Так, что не всегда воспринимается как заголовок:

В данном примере от Dakwak подзаголовок и заголовок больше похожи на вопрос-ответ, чем на стандартные элементы лендинга.

7. Мобильные приложения

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

Количество пользователей интернета в мире (в миллионах): десктопы и мобильные устройства.

Пример мобильного лендинга от Pearr:

Обстоятельства популярности тренда согласно данным MarketingLand:

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

Просматривайте кроме этого: Мобильные приложения приходят на смену интернет-магазинам

8. Соцсети

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

Пример рекламы в соцсетях от Plate.

Новые участники приобретают два блюда безвозмездно!

И лендинг для соц.сетей.

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

9. Отдельная страница для мобильных устройств

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

По словам Максимилиано Фиртмана (Maximiliano Firtman) из Smashing Magazine, отзывчивый дизайн — это лучше, чем ничего, но отельный мобильный сайт будет содействовать повышению конверсии. Сейчас пользователи желают приобретать новые и информацию возможности скоро и легко, так разрешите им делать это прямо с экрана мобильного.

Просматривайте кроме этого: Из-за чего LPgenerator не применяет адаптивный дизайн для шаблонов лендингов?

Визуальный контент 10. Видео

Компании, ресурсов которых достаточно для создания видео, не должны упускать эту возможность. Ролики — один из лучших каналов коммуникации. Экскурсоводы по продукту, видео-истории все чаще появляются на лендингах.

Эта тенденция сохранит актуальность и в 2017 году.

Пример видео «Определите, как это трудится, за 2 60 секунд».

Пример теста от Lostmy.name: видео либо изображение?

Вариант с видео повысил конверсию до 22% — в зависимости от устройства.

Просматривайте кроме этого: Для чего маркетологу панорамное видео?

11. Autoplay-видео на полный экран

Кроме стандартного видео, autoplay на полный экран также остается в тренде. Полноэкранная заставка додаёт лендингу динамики, не отвлекая от целевого действия. Эффект наложения от CoSchedule:

Фахад Мухаммед (Fahad Muhammad) из Instapage употребляет термин «контекстное видео» (contextual video) и отмечает, что оно формирует у визитёра настрой на конверсионное воздействие. Видео сходу обозначает цели страницы и ликвидирует трение. Благодаря полноэкранному ролику возможно добавить на лендинг пара изображений, каковые будут дополнительно мотивировать к целевому действию.

12. Настоящие фото

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

Пример от AutoPilot

Страница «Отечественная история» — и фото основателей бизнеса.

реальных пользователей и Фотографии команды (ниже).

Поверьте, ваши пользователи просмотрели много сайтов за собственную жизнь. Они сходу отличат стоковые от настоящих изображений (особенно это относится своеобразных сфер бизнеса). Фото настоящих людей — метод выделиться, придав бизнесу «человеческий вид».

Просматривайте кроме этого: Как фотография основателя компании воздействует на степень доверия пользователей?

13. Фоновое изображение

Второй метод выделиться — вызвать эмоции визитёров фоновым изображением. Так вы донесете невербальное сообщение и по-максимуму используете пространство лендинга.

Пример от Creatrix.

Разве возможно остаться равнодушным, глядя на это чудо?

14. Иллюстрации vs Изображения

Иллюстрации на данный момент в тренде: они придают бренду креативный и неповторимый имидж. Дизайнер KlientBoost Оливия Тейлор (Olivia Taylor) улучшила конверсию лендинга клиента, поменяв это изображение

на иллюстрацию:

Коэффициент конверсии второй версии лендинга оказался выше на 13%.

Брендированные иллюстрации привлекут внимание пользователя и точно запомнятся им.

15. Плоский дизайн vs материальный веб-дизайн

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

Согласно данным DesignModo, плоский дизайн имеет пара плюсов:

  • Спасение от лишних графических и анимационных элементов уменьшает время загрузки;
  • Отсутствие скевоморфических элементов (skeuomorphic) активизирует восприятие контента аудиторией;
  • Плоский дизайн легко приспособить и сделать отзывчивым.

К этим преимуществам компания Cubet додаёт еще пара:

  • Плоский дизайн смотрится стильно;
  • Несложный мобильный интерфейс интуитивно понятен пользователям;
  • броский цвет задает настроение для конверсии;
  • Плоский дизайн не испытывает недостаток в неестественных «украшательствах», наводящих скуку и отвлекающих визитёров.

До и по окончании: Google — признанный законодатель моды в сети.

Просматривайте кроме этого: Плоский дизайн: практические советы

16. Фото продукта

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

Магазин для любителей гольфа на eBay:

Просматривайте кроме этого: Изображения как реализовывающий контент

17. Карточный дизайн

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

Пример от Clarks:

Версия B повысила конверсию на 17.5%.

Пример от юрфирмы Quincy Requin: функции и офферы бренда поданы через аккуратные «карточки»-блоки.

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

Высоких вам конверсий!

По данным: klientboost.com

Случайные статьи:

Как сделать Landing Page с нуля своими руками | GeniusMarketing


Подборка похожих статей:

riasevastopol

More Posts