Хороший лендинг: 11 правил проектирования. Крутые лендинги

13 небанальных идей для крутого лендинга

Мы уже делали подборку крутых лендингов для вдохновения. Эта статья – своеобразный ее сиквел. Все лендинги в этой подборке отличаются небанальными дизайнерскими решениями и способами подачи информации. Их нельзя назвать уникальными – ежедневно дизайнеры разного калибра выдают сотни новых лендингов, и где-то эти решения уже встречались. Больше подойдет слово «незатасканные». Миксуйте несколько идей в одной посадочной странице – и ваша работа выгодно выделится на фоне конкурентов.

Текстовые и визуальные лайфхаки

Обращайтесь напрямую к клиенту

Речь идет не о банальном «Здравствуйте, мы компания Х и работаем на рынке с бородатого года». Это скучно и никого не цепляет. А вот парень из подмосковного Солнечногорска сделал удачный оффер и вынес контактную информацию в начало лендинга. Никаких заумных фраз и козыряния многолетним опытом. Человек обращается к читателям точно так же, как общался бы с ними «вживую».

Обыграйте название продукта или услуги в тексте лендинга

Как сделали ребята из строительной компании «Меритон». Новый жилой комплекс сам рассказывает о себе потенциальным клиентам. Креативная подача сразу цепляет, а название бренда повторяется от экрана к экрану и точно отложится в памяти после закрытия страницы.

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

Внедряйте символику и отсылки

Лендинг – это «лицо» товара или услуги в интернете. Ассоциации с устойчивыми и всем знакомыми символами (историческими, социокультурными и т. д.) сделают это лицо узнаваемым. Ева Кац использовала в продвижении школы личного продюсирования эстетику советских транспарантов: большие белые буквы на красном фоне, печатный шрифт.

Как оформлять тексты для сайта, чтобы их читали

Чувственная подача инфы на грани фола

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

Подайте информацию в формате квеста

99 % лендингов начинаются с оффера. Туроператор Grand Tour пошел другим путем – он не стал раскрывать выгоды для клиента в первом экране, а вовлек посетителей в мини-квест, где с каждым скроллом открывается новая информация об услуге. На главной странице Grand Tour, оформленной в виде лендинга, реализованы сразу несколько удачных примочек для захвата внимания. Здесь и всплывающий текст, и интерактивная анимация, и звуковые эффекты.

Поиграйте со шрифтами

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

Придумайте креативный футер

Весь лендинг «Котофабрики» пестрит креативом, но их футер просто огонь. Ребята беззлобно простебались над стереотипными блоками о гарантиях (в самом деле, кто читает те мелкие тексты?) и сделали убедительное предложение.

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

Задействуйте юмор

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

Технические лайфхаки

Анимация при скролле

Создатели лендинга-презентации iPhone X использовали технологию Canvas, позволяющую рисовать прямо на странице. Готовых плагинов под нее нет, вся эта красота реализуется через JavaScript.

Видео во всплывающем окне

Видео без автовоспроизведения не всегда красиво вписываются в дизайн посадочной страницы. Поэтому создатели лендинга для сервиса Evernote спрятали видеоролики в картинки. Сделать такое можно любым плагином для создания модальных окон, в которое встраивается видео. Например, LightBox или Easy Modal.

Интегрированные в лендинг инвойсы

Веб-сервис управленческого учета «Финолог» предлагает удобный и лаконичный счет на оплату, с заполнением которого разберется любой. Сделать подобное можно любым хорошим плагином для создания форм: Contact Form 7, JS Forms или через онлайн-сервис JBCallme.

12 примеров великолепных лендингов: черпаем вдохновение у профессионалов

Прелоадер (анимация при загрузке лендинга)

Яркий пример такого решения – посадочная страница компании Piratecode. Анимация при загрузке реализуется через JavaScript или через плагин Preloader.

Визуальный конструктор товара в лендинге

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

Итак, что в итоге:

Не бойтесь креативить. Лендинг – это не операция на сердце, его всегда можно исправить. Пробуйте разные варианты, оценивайте конверсию посредством А\Б-тестирования.

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

Напоследок напомним, что у нас работают крутые дизайнеры, верстальщики и копирайтеры. Если нужен лендинг с огоньком – обращайтесь, сделаем!

kak-sdelat-krutoy-lending-nebanalnye-idei

texterra.ru

5 Рекомендаций для крутых лендингов

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

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

1. Прощупайте почву

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

Компания Conversion Rate Experts сделала миллион долларов для бренда Moz? имея на руках одну только landing page и немного email-писем.

Conversion Rate Experts просто выяснила у клиентов Moz, что им нравится, что им требуется для регистрации на услугу и почему они отказываются от услуги, и использовала эту информацию, чтобы создать прототипы лендингов, а затем распространила ссылки на них среди подписчиков в Twitter у Moz. После получения обратной связи, компания выпустила новый лендинг для Moz, предлагающий услугу всего лишь за $1. Отразив на странице именно то, что хотели бы потенциальные клиенты, Conversion Rate Experts принесли отличную прибыль своим заказчикам.

2. Создавайте больше лендингов

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

Исследования показали, что компании могут ожидать на 50% больше лидов после увеличения количества лендингов с 10 до 15. Причина состоит в том, что больше страниц дают больше возможности для превращения потенциальных клиентов в лидов. Кроме того, это позволит вам делать таргет-ориентированные лендинги, а значит гибко подстроиться под любую категорию клиентов.

3. Избегайте словосочетания “Подать заявку”

Хотя чистая и качественная CTA-кнопка и убеждает клиентов выполнить желаемое действие, кнопка со словом “Подать” успешно отталкивает людей. Даже если вы успели построить хорошие отношения с клиентом, большинство из них часто бывают не готовы подать какую-либо информацию прямо сейчас. Попробуйте делать призывы к действию, вроде “Получить бесплатную книгу”, “Подписаться на нашу рассылку”. Такие подписи не только более располагают к себе, но и точно говорят о том, какую выгоду несет ваше предложение.

4. Будьте последовательны

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

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

5. Сфокусируйтесь на дизайне

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

Убедитесь, что в дизайне используются контрастные цвета и помните, что для целевой страницы “меньше” означает “больше”.

idandy.ru

Хороший лендинг: 11 правил проектирования

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

Разрабатывая лендинг для себя или клиента, мы придерживаемся множества правил, которым он должны соответствовать. Я сформулировал основные моменты, которыми и хочу поделиться с вами. Думаю, вы найдёте их полезными.

Итак, поехали.

На что нужно обратить внимание до разработки целевой страницы

1. Отдельные страницы для разных сегментов пользователей

Когда-то давно у меня был клиент, который продавал гастрономические туры через интернет. Пользователи, которых мы собирались вести на лендинг, можно было, как и всегда, условно поделить на 3 группы: «горячие», «тёплые» и «холодные» — по степени готовности к покупке. Согласитесь, было бы не очень хорошо, если бы мы вели «холодных» пользователей, которые только заинтересовались продуктом, на ту же страницу, что и «горячих»? Напором подробной информации о продукте можно запросто спугнуть подобных пользователей. Именно поэтому трафик стоит сегментировать и вести на разные страницы.

2. Заранее продумываем «рельсы убеждения»

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

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

3. Одна страница — одна цель

Это очень важный момент, про который многие почему-то забывают. На странице может быть несколько призывов к действию (CTA), но основная цель всегда одна: заказать товар, оставить заявку, купить, получить раздатку и т. п. «Рельсы убеждения» целевой страницы всегда должны вести к одной-единственной цели. Например, если предлагать пользователю купить москитные сетки для окон, а также вызвать замерщика, велика вероятность, что он не сделает ни того, ни другого.

4. Объявления должны быть релевантны содержанию страницы

Не секрет, что лендинги плохо поддаются SEO, поэтому основным источником новых пользователей становится реклама. А если заголовок (к примеру, h2) целевой страницы и её контент не соответствуют заголовку рекламного объявления, есть риск, что очень много пользователей будут кликать по кнопке «Назад».

В качестве примера рассмотрим следующее:

Плохой вариант

Хороший вариант

Очевидно, да? Только проблема в том, что почему-то так мало кто делает — очень часто трафик ведётся на страницы, которые имеют общий характер. А вот если привести пользователя на страницу с заголовком, идентичным заголовку объявления, у него только укрепится чувство, что он кликнул куда надо. Кроме того, у такого подхода есть неочевидный плюс: показатель качества рекламного объявления, заголовок которого релевантен заголовку целевой страницы, будет выше, а цена клика по такому объявлению — ниже. Таким образом, можно не только удержать пользователя, но и привести его задёшево.

На что нужно обратить внимание во время разработки целевой страницы

5. Хороший продающий заголовок

В продолжение предыдущего пункта поговорим о заголовках чуть подробнее.

Заголовок — это первое, что читает клиент. Он должен быть чётким и недвусмысленным; должен отражать суть вашего предложения потенциальным клиентам, отражать содержание страницы. Весьма качественные заголовки можно делать по «Формуле 4U»:

Полезность (Usefulness). Это одно из самых важных правил. Если заголовок не несёт для клиента пользы, то после его прочтения он ничего не сделает.
Уникальность (Uniqueness). Если ваш заголовок звучит так же, как миллионы других, то вы не выделяетесь из толпы, вы ничем не привлекаете клиента.
Ультраконкретность (Ultraspecificity). Дайте клиенту в заголовке максимум полезной и точной информации.
Срочность (Urgency). Ну, тут, наверное, пояснений особо не требуется — намекните клиенту, что не стоит терять время.

Подробнее почитать про метод, а также познакомиться с примерами можно здесь.

6. Понятный и заметный CTA

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

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

7. Картинка стоит тысячи слов…

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

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

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

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

8. …а видео стоит тысячи картинок

Люди с большим энтузиазмом нажмут на кнопку «Play», чем прочитают даже пару строчек текста. Просто наш мозг по природе своей очень ленив и предпочитает, чтобы ему давали уже пережёванную информацию, готовую к усвоению. Видео с этим справится просто замечательно. Правда, если длится оно не больше двух минут. Согласно видео-экспертам из Wistia, короткие ролики заставляют людей смотреть. Я верю, что это действительно так.

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

9. Только самая нужная информация

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

Что касается количества форм на странице и их расположения, то тут я придерживаюсь следующего правила: форма в первом экране + форма в последнем экране + миниатюрная форма на 2–3 блока с контентом. На мой взгляд, это оптимальный вариант по отношению к объёму самой страницы.

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

10. Социальные доказательства

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

Невероятно важно, особенно для новых продуктов, вызвать доверие посетителей. Это легко сделать, предъявив узнаваемых клиентов. Так, ещё одним весомым социальным доказательством целевой страницы могут стать логотипы крупных клиентских компаний. Конечно, если вы с такими работаете.

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

Чем заняться, когда лендинг уже запущен

11. A/B-тестирование

Факт: лендинг всегда может быть лучше.

Пока мы разрабатываем лендинг, у нас возникает масса альтернативных идей по копирайту, картинкам и общему дизайну. Но в итоговый вариант всё это не уместить. А вдруг, окажись страница немного другой, конверсия была бы выше? Чтобы проверить все такие гипотезы, и нужно A/B-тестирование.

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

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

emailmatrix.ru