Основная беда всех, кто делает и видит лендинги &ndash; их похожесть. Даже конструкторы лендингов созданы, чтобы особенно не заморачиваться, поднастроил под свой продукт и вперед.
&nbsp;
Как выделиться на рынке и заинтересовать клиента и главное &ndash; как решить его проблему, а не просто показать еще одну страничку с посылом &laquo;Мы чрезвычайно круты&raquo;?
&nbsp;
Ну и лендинг &ndash; это еще не все. Чтобы получить продажи, придется еще позаботиться о трафике, а для него нужно продвижение и&hellip; вернемся к лендингам.
&nbsp;
1. Много мало не бывает
&nbsp;
По поводу лендингов говорят &ndash; слишком много полей отпугнет клиента, он не будет вводить имя, почту, телефон, кличку питомца и цвет носков. Но есть и исключения.
&nbsp;
Это касается лендингов, где продажи предполагают настройки сложнее, чем &laquo;купить 3 флакона или 2&raquo;. Так поступили в оформлении лендинга dellservers.ru &ndash; клиент попадает на страницу, где может выбрать разные параметры для будущего сервера.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/2c3b5724-ebe6-444d-a5fe-3905a767b30a.png" alt="" />
&nbsp;
В этом случае количество полей не повлияет на лиды и не испугает клиента, поскольку онприходит как раз с определенным запросом и возможность сконструировать свой вариант сервера показывает, что может предложить компания.
&nbsp;
2. Умный кликнет дважды
&nbsp;
В зависимости от целей лендинга можно применить и две кнопки, призывающих к действию. Речь не о кнопках-синонимах вроде &laquo;Заказать&raquo; и &laquo;Купить&raquo;. Кнопки должны быть направлены на разный результат. Например, &laquo;Загрузить приложение&raquo; и &laquo;Зарегистрироваться бесплатно&raquo;, как сделали в Wunderlist.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/746d371a-3b0c-400e-bdf8-abfe3b240b3a.png" alt="" width="726" height="359" />
&nbsp;
В целом, действия ведут к одному и тому же, поскольку нет смысла загружать приложение, если не собираешься создавать учетку и нет смысла регистрироваться, если приложение тебе не нужно. Но призыв к действию имеет разный акцент и нацелен на разное восприятие аудиторией. Конверсию разные кнопки повышают, что и требовалось доказать.
&nbsp;
3. От общего к частному
&nbsp;
Об этом твердят уже давно &ndash; дайте в лендинге конкретику. Обслужили 7 клиентов или тысячу &ndash; неважно, но эти цифры ваши и их нужно использовать.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/f111d8c0-75cd-4d6f-8804-696314b09f03.png" alt="" width="726" height="444" />
&nbsp;
Измерьте работу в часах или людях, а не пишите, что вы лидеры, лучшие, замечательные и уникальные. Если вы думаете, что хвастаться пока особо нечем, расскажите о цифрах в производстве: 100 метров ткани ежедневно, 300 отправок каждую неделю и так далее. Это вдохновляет.
&nbsp;
4.&nbsp; Кто там?
&nbsp;
Зачем на некоторых лендингах размещают фото кураторов, спикеров и т.д.?
&nbsp;
Это персонализация бренда. И кстати, решение о сотрудничестве принимается в том числе и под влиянием приятных, располагающих фотографий, с которых тебе улыбаются реальные люди. За каждой услугой стоит человек и вот он, перед вами &ndash; готов приступить к работе с такой же приятной улыбкой. Найдите хоть кого-то, кто готов в перерывах между версткой сайтов и таргетированием мило улыбнуться и тащите его фото в лендинг. Если, конечно, продукт предполагает это.
&nbsp;
5. Мне только спросить
&nbsp;
Форма заказа &ndash; это еще не все. Есть и форма быстрого ответа.
&nbsp;
Но если там нужно оставить кучу своих данных плюс еще ввести капчу, снять видеоселфи и выложить сторис с отметкой и подписаться на четыре рассылки &ndash; считайте, ею никто не воспользуется. Так что лучше добавить возможность оставить комменты через соцсеть &ndash; чтобы пользователь не делал лишних движений в сторону капчи и ввода своих драгоценных данных.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/675ba6d6-3a19-4996-9642-573eb2f6d395.png" alt="" width="651" height="527" />
&nbsp;
6. Где пруфы, Билли?
&nbsp;
Публикация скринов отзывов или просто текстов неубедительна. Проверить это невозможно. Если клиент дает добро опубликовать ссылку на свой аккаунт &ndash; это идеально. Если ваши отзывы сверстаны в ПДФ или выложены картинкой &ndash; считайте, что они убедят только пенсионеров с китайскими Андроидами. И то вряд ли.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/25abc258-13b6-4b2d-9c30-d3538bda59b0.png" alt="" width="721" height="499" />
&nbsp;
7. До и после
&nbsp;
Если ваш продукт предполагает демонстрацию результатов до и после &ndash; обязательно используйте, это очень эффективный ход. Так сделали создатели приложения для обработки фото Hipstamatic &ndash; результат наложения фильтра виден клиенту сразу.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/2ba47d18-f9b8-4cdc-80aa-953c3959fb82.png" alt="" />
&nbsp;
8. Они идут за тобой!
&nbsp;
В некоторых лендингах используется аналог физического эффекта &ndash; параллакс.
&nbsp;
Простыми словами &ndash; вы идете по улице, а Луна следует за вами, да? Так же будет и на странице, вы скроллите а фоновое изображение продукта следует по всему фону за вами. Это лучше, чем навязчиво следующая со слайдера на слайдер кнопка &laquo;А ну быстро купил!&raquo; или фоновое видео, которое что-то бубнит на каждом экране и только забивает эфир.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/a4bf6c6a-c139-4c1a-a929-db16f4a84494.png" alt="" width="721" height="446" />
&nbsp;
9. Больше движения
&nbsp;
Но в меру. Речь об анимации. Таймеры, интерактивные элементы, виджеты &ndash; все это реально оживляет текст.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/53ce9ae8-062e-4a06-8928-98e9ea07ae18.png" alt="" width="721" height="272" />
&nbsp;
10. Нарисуйте мне это
&nbsp;
Любая авторская иллюстрация спасает лендинг.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/04394f86-e599-437d-9d66-d28705dbefcb.png" alt="" width="721" height="404" />
&nbsp;
Стилизация, даже самые простые рисунки &ndash; лишь бы они были в тематике и соответствовали представления целевой аудитории. Дизайнер, который создает авторские иллюстрации &ndash; это весомый вклад в продвижение.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/4d732902-79e1-41cf-b00c-e187e045c45e.png" alt="" width="721" height="518" />
&nbsp;
11. Гибкость &ndash; наше все
&nbsp;
Мультилендинг позволяет соответствовать целому ряду поисковых запросов.
&nbsp;
Можно сделать так: первый экран презентует несколько продуктов. Пользователь может выбрать любой и увидеть подробное описание его преимуществ. Это оправдано, поскольку не нужно создавать и продвигать несколько отдельных страниц, просто получится один лендинг, но с вариантами выбора.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/633612ce-4d97-4488-9217-0045dbc9b985.png" alt="" width="721" height="420" />
&nbsp;
12. Hover&ndash; играем с картинками
&nbsp;
Одна из редко используемых фишек &ndash; эффект, который возникает при приближении курсора к картинке. Используют, чтобы привлечь внимание клиента к определенным элементам и подробнее раскрыть суть продукта. Например, навели курсор на один из презентуемых продуктов и из картинки появилась другая картинка &ndash; фото или информация. Картинка может также увеличиться при наведении или изменить цвет.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/67a14bf2-be8a-44d4-924e-cb4a5187f7f7.png" alt="" width="721" height="515" />
&nbsp;
13. Split&ndash; два в одном
&nbsp;
Разделенный экран &ndash; классный прием, чтобы продемонстрировать до и после или показать два продукта вместе.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/b01fab5d-f39f-4836-ac10-bbfafad90be8.png" alt="" width="721" height="343" />
&nbsp;
При этом экран может быть анимирован и показывать одну картинку поверх другой при движении мышки (потянули за линию и сменили картинку). А можно просто разделить экран с фоновым изображением и показать, что ваш продукт имеет два вот таких классных преимущества.
&nbsp;
14. 3D-графика
&nbsp;
Особенно актуально, если продвигается товар для детей &ndash; введите в лендинг дополненную реальность или трехмерную модель продукта. Если вы хотите, чтобы пользователь как бы ощутил модель в руках &ndash; трехмерная проекция самое то. Подходит, конечно, не для всех товаров.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/ca561150-384d-4ff1-b619-4a1b8b364361.png" alt="" width="725" height="378" />
&nbsp;
15. Интерактивнее, интерактивнее!
&nbsp;
Превратите лендинг в игру &ndash; например, добавьте возможность интерактивно выбрать цвет товара. Продаете пуховики &ndash; пусть пользователь не листает карусель с пятью цветами, а сам нажмет кнопку &laquo;Выбрать цвет&raquo; или ткнет в красивенькую палитру. Самостоятельные действия клиента на странице привлекают его, дают возможность немного задержать и усилить внимание.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/a7370649-a55a-46ca-8211-6bd93645fff5.png" alt="" width="725" height="458" />
&nbsp;
И еще одна интерактивная &laquo;фишечка&raquo; - попробуйте реализовать уже на лендинге какую-то возможность для клиента. Например, если продаете велосипеды, пусть пользователь прямо из лендинга сможет посмотреть красивые модели и перейти потом на страницу товара с возможностью его купить.
&nbsp;
16.&nbsp; Не грузите меня!
&nbsp;
Речь о загрузке лендинга и прелоадерах (спиннерах). Знак, который видит пользователь, пока страница загружается, может быть разным. Он может отражать особенности бренда и привлекать внимание &ndash; разработка собственного прелоадера станет фирменной фишкой.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/05a7ce0d-01f3-4105-af08-aa1af24207e1.png" alt="" width="725" height="297" />

Лендинги, у которых стоит поучиться