Лендинг — самый популярный тип сайтов. Главная задача любого лендинга — подтолкнуть пользователей к совершению определенного действия (купить, заказать, скачать, подписаться и т.д.). Как же спроектировать эффективный одностраничный сайт?
В наши дни лендинг — один из самых мощных и гибких инструментов цифрового маркетинга. Он доказывает свою эффективность в совершенно разных ситуациях. Есть ряд особенностей, которые делают дизайн такой страницы удобным для пользователя и эффективным для достижения бизнес-целей. Давайте разберем 5 основополагающих принципов создания успешного лендинга на прекрасных примерах из нашей практики.
1. Четкое предложение с CTA (призывом к действию)
Что отличает лендинг от всех других типов веб-страниц, так это его узкая направленность на выполнение конкретной задачи. Его основная цель — позволить посетителям попасть именно туда, куда им нужно, и получить то, что они хотят — и то, что может дать им бизнес в соответствии с конкретным запросом.
Такой подход предполагает предоставление пользователям четких указаний. Он особенно эффективен для крупных интернет-магазинов, где легко заблудиться среди сотен или даже тысяч товаров. Когда весь трафик направляется на главную страницу, особенно, если лиды поступают через конкретные маркетинговые кампании на внешних ресурсах, это может негативно сказаться на опыте взаимодействия.
Велик риск того, что на главной странице что-то отвлечет внимание посетителя. А чем больше вы отвлекаете человека, тем меньше шансов, что он дойдет до оформления заказа.
Динамичный интерактивный лендинг для бренда напитков
Помимо электронной коммерции существует множество других случаев, когда целевые страницы эффективны. Они могут:
- продвигать мобильные приложения
- презентовать образовательные ресурсы
- продвигать предпродажи и специальные предложения
- рекламировать мероприятия и встречи
- содержать объявления
- представлять сообщества
- предоставлять доступ к документации и т.д.
Дизайн лендинга для приложения Pass-On
Какую бы функцию не выполнял лендинг, вы должны четко и ясно сформулировать задачу, которая должна быть достигнута с его помощью. Когда посетители попадают на эту страницу, им нужно: понять, что вы предлагаете, и узнать, как это получить. Дизайн должен удовлетворить эти потребности.
Дайте четкий и предельно лаконичный ответ на 2 основных вопроса:
Во-первых, что компания, продукт или владелец лендинга предлагает посетителю?
Трансформируйте ответ в короткий слоган и/или изображение, заметное с первых секунд и передающее нужное сообщение.
Во-вторых, что должен сделать посетитель, чтобы получить то, что ему предлагают?
Сформулируйте ответ точным словом или фразой (Скачать, Узнать больше, Купить, Подписаться и т.д.) и разместите на CTA-элементе, который должен сразу же бросаться в глаза.
CTA-элементом может быть кнопка, ссылка, контактная форма, поле для подписки и т. д. Это стратегический элемент взаимодействия, поскольку именно здесь происходит конверсия. Он должен быть заметным, чего можно добиться с помощью контраста цвета или формы, и информативным, что обычно достигается с помощью подписи или иконки, либо того и другого.
Лендинг для приложения доставки Glup
Конечно, и предложение, и CTA должны сразу привлекать внимание пользователей, когда они сканируют страницу.
2. Визуал
Не секрет, что большинство людей лучше воспринимают визуальный контент. Они сканируют веб-страницу в течение пары секунд, распознавая изображения гораздо быстрее, чем текст. А в цифровом мире, где миллионы страниц конкурируют за внимание пользователей, каждая секунда имеет значение. Так что это действительно тот случай, когда картинка стоит тысячи слов, будучи информативной, эмоциональной и впечатляющей одновременно.
Лендинг для сервиса совместного использования автомобилей Vertt с уникальными иллюстрациями
Прежде всего, важно установить сильную визуальную связь с продвигаемым брендом. В каждом конкретном случае специалисты по дизайну и маркетингу вместе с клиентом решают, должен ли лендинг полностью соответствовать остальным страницам сайта и другим каналам коммуникации. Во многих случаях они могут отойти от единой стилистики и оформить целевую страницу как-то иначе — зачастую именно это и является основной причиной ее создания, чтобы конкретная кампания выглядела и звучала по-другому.
Тем не менее, насколько оригинальные решения вы бы ни согласовали, лендинг должен четко демонстрировать, какой бренд, компания или человек общаются с клиентом через него. Айдентика может включать логотип, фирменные цвета и типографику, а также другие элементы, которые устанавливают быструю и прочную связь с брендом.
Лендинг приложения для формирования привычек
Еще один аспект, который необходимо учитывать, — это изображения. Подходящие изображения — хороший способ привлечь внимание пользователей и заинтересовать их. Самостоятельно или в сочетании с теглайном, изображения также выполняют задачу информирования посетителей о характере предложения. Они экономят время пользователей, быстро и интересно доносят до них информацию и, что не менее важно, делают презентацию продукта эстетичнее. Это могут быть:
- тематические иллюстрации или фотографии, создающие атмосферу и настроение
- фотографии предлагаемых товаров
- 3D-графика, обеспечивающая более глубокую визуальную связь с идеей
- кастомные иконки, помогающие отразить основные характеристики или преимущества
- маскот, делающий страницу более веселой и человечной
- мелкие графические элементы, объединяющие разделы в единое целое
Лендинг со стильной абстрактной 3D-графикой
Распространенный подход — использовать заметное изображение на первом экране: оно вызывает сильную эмоциональную ассоциацию с предлагаемым товаром или услугой и становится центральной частью композиции.
На этой веселой и яркой целевой странице для частного детского сада в качестве главного изображения используется большой анимированный маскот, который создает игривую атмосферу и объединяет две части страницы.
Еще одно трендовое решение — использовать видеоконтент. Это могут быть анимированные ролики, рассказывающие о преимуществах и особенностях предложения, короткие видео, позволяющие быстро погрузиться в нужную атмосферу или создать необходимое настроение.
Какой бы тип визуального контента вы ни выбрали, он должен быть релевантным и информативным, а не просто заполнять часть страницы.
Лендинг для нового продукта с модной и запоминающейся 3D-графикой
3. Текст
Текстовый контент — еще один аспект, который необходимо хорошо продумать. Известный гуру рекламы Дэвид Огилви сказал: "Каждое слово должно иметь значение". Это простая, но неизбежная истина, если вы имеете дело с целевой страницей. Объем текста должен стать предметом тщательного исследования и тестирования, поскольку он напрямую влияет на конверсию.
Задача дизайнера — продумать понятную и интересную подачу текста с четкой визуальной иерархией:
- размеры и расположение текстовых блоков,
- мгновенно сканируемые теглайны и заголовки
- короткие эффективные призывы к действию для кнопок
Длина текста на целевых страницах — спорный вопрос. Ошибочно полагать, что узкая направленность лендинга на решение конкретных задач означает, что он должен содержать минимальное количество слов.
Если он представляет продукт или услугу известной компании или информирует о специальных предложениях, короткого и емкого текста может быть достаточно, чтобы заинтересовать пользователей. С другой стороны, если речь идет о презентации нового продукта, стоит предоставить людям больше информации, чтобы убедить их нажать на CTA-кнопку.
В любом случае, текст должен оставаться читабельным и сканируемым.
Лендинг для продвижения конференции с оригинальной типографикой как основным визуальным элементом дизайна и подробными текстами о мероприятии
Лендинг CyberMonday для Designmodo: мы практически отказались от изображений и сфокусировались на типографике с броским глитч-эффектом
Важная рекомендация для дизайнеров лендингов — не использовать так называемый Lorem Ipsum. Это популярный текст-заполнитель, который выглядит как латиница, но на самом деле ничего не означает, и который часто применяется для создания “реалистичного” лейаута.
Как мы уже упоминали в статье о UX-копирайтинге, в процессе проектирования, особенно на ранних этапах творческого поиска концепции, может возникнуть соблазн просто скопировать и вставить в макет бессмысленный текст. Но это не очень хорошая идея, и вот почему.
Во-первых, текст — это часть дизайна. Различные сочетания букв выглядят по-разному. Слова имеют разный объем и структуру. Это особенно верно для теглайна, который представляет собой один из самых броских и запоминающихся элементов визуальной иерархии веб-страницы. То, что радует глаз с Lorem Ipsum, может не сработать с реальным текстовым контентом.
Во-вторых, прототип с реалистичным текстом выглядит настоящим и естественным. Представьте, что вы разрабатываете лендинг для рекламы кухонного оборудования. Вы же не будете использовать в качестве “заглушек” фотографии или иллюстрации тракторов или косметики, даже на самых ранних стадиях процесса проектирования? Почему? Потому что это полностью противоречит поставленным задачам. То же самое происходит и с текстовой частью макета.
Текстовый контент должен эффективно работать в комбинации с остальными элементами лейаута. Вы можете потратить часы, чтобы теглайн, текстовые блоки и подписи выглядели красиво, но все эти усилия окажутся напрасными, когда вы поймете, что реальный текст отличается по длине, структуре и смыслу. Поэтому старайтесь использовать реалистичный и релевантный текстовый контент с самых ранних этапов проектирования.
Еще один важный момент — текст и цифры вызывают доверие. Люди склонны больше доверять тому, что уже было опробовано и рекомендовано другими. Отзывы, награды и сертификаты могут существенно повлиять на коэффициент конверсии. Помимо мнения других людей, факты и цифры также являются существенным фактором повышения доверия, например, сколько проектов было завершено, сколько стран охвачено, в каких крупных приложениях упоминались продукты и т.д.
4. Фокус
Коэффициент внимания — это уровень концентрации на определенной задаче или цели. Очевидно, что в случае с лендингом он должен быть как можно выше. Если элементов взаимодействия слишком много, они отвлекают внимание, снижая шансы на конверсию: чем больше вариантов одновременно имеется у пользователей, тем сложнее им сделать выбор.
Направьте внимание людей на совершение конкретного действия. Избавьтесь от лишних элементов, и выделите детали, непосредственно влияющие на конверсию. Чем меньше дополнительных ссылок вы используете, тем лучше. CTA-элементы должны мгновенно притягивать взгляд. В этом случае пользователю будет проще достичь поставленной цели.
Креативная команда, работающая над лендингом — дизайнеры, копирайтеры, маркетологи и т.д., — должна договориться о приоритетах и определить основные преимущества продукта, о которых необходимо рассказать посетителям. Если вы попытаетесь уместить на странице всю возможную информацию о предложении, вы рискуете перегрузить пользователей, и в результате они начнут сомневаться или даже раздражаться.
Ни один лендинг обычно не обходится без:
- общей информации о предложении (теглайн, заголовок и т.д.)
- краткого и информативного описания преимуществ, решающих проблемы пользователя
- отзывов, убедительных характеристик или знаков доверия
- четкого призыва к действию
Лендинг для инновационного финтех-сервиса Uni
Концепция лендинга для инновационной зарядной станции, вдохновленная 3D-концепцией, созданной дизайнером Rettz Schmettz
Если предложение довольно сложное и кратко описать все его преимущества трудно, хорошим решением может стать разделение страницы на несколько тематических блоков с интерактивными элементами (кнопками, полями, ссылками и т.д.), позволяющими быстро получить дополнительную информацию или помощь, но уже на другой странице.
5. Отзывчивость
Доля взаимодействий с веб-сайтами с мобильных устройств и планшетов неуклонно растет год от года. Для того чтобы все посетители могли без проблем работать с лендингом, крайне важно адаптировать его под разные устройства и продумать лейаут для экранов разных размеров, чтобы в нем было удобно ориентироваться.
Мы не утверждаем, что все лендинги должны включать одни и те же элементы. Каждый конкретный случай требует анализа и своего подхода. Некоторые целевые страницы отлично работают без изображений, другие используют супер-минималистичный текст, третьи не содержат отзывов, поскольку рассказывают о новых продуктах, которые еще не имеют таковых.
Тем не менее, приведенный выше чеклист поможет дизайнерам, разработчикам и компаниям получить общее представление о том, какие инструменты есть в их распоряжении, и определить, что стоит применять в конкретном случае, а что нет.
