/ 10 продающих приемов для дизайна лендингов

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

Правильное изображение – основа веб-дизайна

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

Какие средства дизайна можно использовать:

• выделение кнопки СТА (например, цветом, который не используется больше нигде и поэтому выделяется особенно четко;
• текст от первого лица, призывающий к действию (создается ощущение лично связи пользователя с оффером- «мы вместе, мы –такие же, как вы, вы – один из нас»);
• указатели-подсказки, помогающие пользователю определить порядок действий;
• иконки, привлекающие внимание к выгодам, получаемым пользователем;
• знаки доверия (счетчики like в социальных сетях, награды, отзывы), дающие ощущение доверия – если столько человек оценили достоинства товара и услуги, следовательно, они хороши;
• заметный номер телефона и доступная обратная связь: «Заинтересовались? Звоните» или «Мы вам перезвоним».

Маркированные списки

Любой современный пользователь веб-объекта вначале пробегает глазами текст, и только в случае особой заинтересованности будет читать длинные описания. Маркированные списки коротко и емко содержат всю необходимую для пользователя информацию. Стрелочки, буллеты и иконки должны дать такую возможность посетителям лендинга – быстро просмотреть всю информацию и найти необходимую.

Какие средства дизайна можно использовать:

• заголовки и подзаголовки, говорящие о том, какую пользу принесет пользователю оффер;
• емкие краткие описания;
• выделение текста курсивом, правильно подобранный шрифт, притягивающий внимание;
• персонализированные призывы к действию (например, не «запросить каталог», а «Я хочу получить каталог»).

F-паттерн

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

Нам удобно читать сверху вниз, слева направо, поэтому информацию на лендинге лучше размещать в виде буквы F – все самое важное должно находиться в ключевых точках:

• слева вверху;
• справа вверху;
• слева внизу.

Конечный пункт – яркий СТА.

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

Какие средства веб-дизайна можно использовать:

• «цепляющий» заголовок – верхняя часть буквы «F» - он должен отражать основное содержание;
• все важное должно быть размещено в верхней части;
• менее важную информацию лучше оформить в виде маркированного списка (продольная ось буквы «F»).

Z-паттерн

Еще один хороший вариант размещения контента – размещение его в виде буквы Z, когда взгляд посетителя сайта двигается слева направо, затем снова влево и в правой конечной точке увидят самую главную точку СТА.

Какие средства дизайна можно использовать:

• Условно страницу можно разделить на четыре зоны, из которых левая верхняя зона – начальная точка просмотра лендинга – является приоритетной. Поэтому сюда размещают самую важную информацию – логотип и слоган.
• После просмотра заголовка взгляд пользователя перемещается в правую верхнюю часть. Эта зона также хорошо просматривается, поэтому здесь можно разместить иную важную информацию, например, контакты, адрес, оффер. Здесь же размещается форма обратного звонка.
• Левая нижняя зона – на ней взгляд посетителя сайта практически не останавливается, информация, размещенная здесь, «не работает».
• Зона выхода – правая нижняя. Дойдя до нее, пользователь примет решение – продолжить действие или уйти с сайта. Здесь нужно разместить призыв к действию, кнопку заказа.

Пустое пространство

Хочется использовать и без того ограниченное пространство одностраничника максимально? В результате – низкая конверсия, отсутствие продаж, интереса к сайту и товару. Почему? Потому что взгляд не цепляется за главное.

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

Какие средства можно использовать:

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

Анкорные ссылки

Якорь (анкорная ссылка) направляет посетителя лендинга на определенное поле страницы, где она находится. Одно движение – и пользователь сайта попадает в нужное место на нем. Это повышает конверсию, улучшает пользовательский опыт.

Анкорные ссылки необходимы для удобного перехода из рекламных объявлений - контекстная реклама и пассивное сео продвижение сайта.

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

GIF-анимация

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

Визуальные подсказки

Один из главных элементов современного дизайна landing page, который привлекает внимание посетителя к главным, ключевым элементам. Основные типы визуальных подсказок:

• стрелки;
• направление взгляда;
• размещение визуальных объектов в нужных местах.

Стрелки

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

Направление взгляда

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

Какие современные средства дизайна можно использовать:

• разместить фото человека, направив его взгляд на главные элементы целевой страницы;
• направить его взгляд на кнопку СТА;
• разместить «негативные» элементы посадочной страницы вне зоны зрения пользователя, «отвернув» от них взгляд изображенных лиц.

Визуальные объекты

Они могут указывать на лидогенерационные формы, тогда взгляд пользователя «цепляется» за них.

Какие средства дизайна можно использовать:

• выноски;
• выделение в рамку;
• выделение элементов;
• иконки;
• графика;
• пустые места между фотографиями.

Визуальная иерархия

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

• размер шрифта и визуальных объектов;
• цвет и цветовые контрасты;
• пустое пространство;
• стиль и текстура;
• плотность.

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

Яркая кнопка СТА

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

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

В заключение: глазами опытного веб-дизайнера

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

Страницу лендинга нельзя перегружать элементами, лаконичность – вот основа дизайна. Цвета и дизайн элементов должны соответствовать по смысловой нагрузке тексту. Готический шрифт, темные цвета на странице по продаже детских товаров не привлекут потенциальных покупателей.

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

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

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

• правильный выбор шрифтов и стиля оформления – часть успеха веб-дизайна лендинга;
• наличие «воздуха», свободного пространства на странице;
• отсутствие избыточной нагрузки на одном экране: только один элемент важен, остальное – второстепенно;
• посетителя нужно вести по странице, чтобы он не «зацикливался» на одном моменте.

И самое главное - не переусердствуйте с выбором средств, увеличивающих конверсию – все хорошо в меру.

Заказать продающий лендинг в ASTY.PRO