Часто дизайнеру передается техническое задание на лендинг со словами: «Сделай, чтобы было красиво». При этом ни сам дизайнер, ни его руководитель могут не до конца понимать, что такое лендинг, как он работает и чем отличается от обычного сайта.
Лендинг настолько хрупкий механизм, что при малейших неисправностях он начинает серьезно барахлить или вообще не работать. Выжать максимум из оффера можно только тогда, когда дизайн будет не просто красивой оберткой, а помощником текста в конвертации лидов. Проще говоря, дизайн на лендинге является одной из главных составляющих итоговой конверсии.
Неправильное понимание сути дизайна для лендинга – это нераскрытый потенциал вашего оффера для посетителя. Чтобы «добрать» в конверсии, разберем 5 распространенных дизайнерских ошибок.
1. Расхождение картинки и текста
Конверсионная роль изображений на лендинге – привлечь внимание посетителя, показать ему визуальный образ для лучшего восприятия текста и усиления эффекта от него. Что происходит при подходе «чтобы было красиво»? Рассмотрим пример:
Это скриншот главного экрана лендинга, на котором предлагается вступить в СРО. Допуск СРО нужен строителям, проектировщикам и изыскателям для легальных работ в России. На фоновой картинке под текстом мы видим шикарную панораму на Манхэттен в Нью-Йорке. Внимание вопрос: как связаны между собой строительные работы в нашей стране и американские небоскребы?
Другой пример:
Проектная компания предлагает ознакомиться со своими услугами. Под 3-й картинкой написано: «Проектирование инженерных сетей». Инженерные сети – это водоснабжение, газ, свет и т.д. На самой картинке молодой человек, похожий на банковского служащего, судя по-всему, находится в серверной комнате и что-то делает с компьютерным оборудованием.
Почему такие казусы влияют на конверсию? Потому что часть целевой аудитории хорошо разбирается в том, что хочет получить. И эта часть не сконвертируется именно из-за таких вот несуразностей. Допуск СРО или проектную компанию может искать как директор, так и его секретарша. И если вторая возможно и оставит заявку, то первый скажет: «Что это за школьники делали сайт?» и уйдет к конкурентам.
Вывод: картинка должна быть не просто красивой, но и абсолютно точно и недвусмысленно сочетаться с текстом.
2. Изысканные шрифты и неотформатированный текст
Лендинг – не то место, где дизайнер должен показать свою оригинальность и изощренность. Если шрифт читается труднее, чем банальный Arial, то его использовать категорически не рекомендуется.
Что не так на лендинге (скриншот выше), предлагающего доставку грузов из Китая? Ключевая выгода – это срок доставки: «от 5 дней». Цифра 5 стилизована под китайский иероглиф. Красиво? Да! Понятно? Да, но не сразу. Иногда кажется, что это буква S. В данном примере понимание принесено на алтарь красоты. Т.е. ключевая выгода из оффера может восприниматься не мгновенно, да еще и двусмысленно. Как следствие, конверсия тоже будет двусмысленной.
Вывод: пусть будет проще, зато понятнее.
Когда дизайнеру нужно разместить текстовый блок, перед нами может возникнуть вот такая картина:
На первом скриншоте текст читать неудобно, потому что он слишком широкий. На втором текст наоборот слишком узкий и как следствие с большим количеством строк. Выглядит некрасиво, читать не хочется.
Вывод: если нужно разместить большой массив текста (например, отзыв, блок с вопросами и ответами или описание выгод), то лучше разбить большой текст на несколько маленьких с помощью абзацев и отбивок. Абзацы желательно делать через каждые 3-5 строк. При этом строки не должны быть слишком широкие (более половины ширины экрана) или слишком узкие. Основные мысли в тексте лучше выделить полужирным или цветом.
3. Визуальная перегруженность страницы
Картинка выше – это главный экран лендинга, где предлагаются услуги бухгалтерского и юридического аутсорсинга. Выглядит он ярко, стильно, современно. Казалось бы, классный дизайн? Однако, посмотрите сколько здесь насыщенных красных элементов: это и логотип, и 3 выделенных цветом слова, аж 2 кнопки призыва к действию (лучше бы сразу 7 – говорят, это магическое число), да еще и 3 триггера ниже влезло. Ну и вишенка на торте – это глаза девушки. А как известно из психологии, глаза – первое на что смотрит человек.
Пользователь просто не понимает, куда ему смотреть, что делать, как все это связано между собой. Его внимание разорвано, потому что его перегрузили. Ощущение точно такое же, как на Черкизовском рынке в 90-е: со всех сторон тебе кричат: «Купи!» «Заходи!» «Попробуй!». Мало кто остается. Большинству скорее хочется уйти.
Вывод: самым ярким элементом должна быть кнопка призыва к действию, так как именно она является курком на пистолете. Остальные части страницы рекомендуется делать в более приглушенных тонах. Что касается картинки, то если бы на примере выше взгляд девушки был направлен не на посетителя, а в сторону кнопки, то мы получили бы отличный невербальный триггер!
4. Бесплатные изображения с фотобанков
Покупатели в интернете могут практически одновременно просматривать множество сайтов. Когда они видят одних и тех же одетых с иголочки молодых западных мужчин и женщин с улыбающимися, одухотворенными лицами, это не только раздражает, но и снижает доверие к вашему офферу.
На скриншоте выше девушка на 3-й картинке не будет персональным менеджером клиента. Потому что она есть на 1000 других сайтов. Проверить это легко – достаточно запустить поиск по картинкам в Google.
Вывод: будьте сразу честны со своими клиентами, размещайте реальные фотографии своих сотрудников, офиса, склада, производства и т.д. Если такой возможности нет, то хотя бы найдите платное изображение, которое не мелькает на каждом втором сайте.
5. Незаметная кнопка призыва к действию
Частенько дизайнер забывает (или не знает), что двумя главными атрибутами лендинга являются оффер и кнопка призыва к действию. И если заголовок «случайно» не замаскируешь, то небольшая кнопка призыва к действию то сольется с фоном, то очень бледная, то вообще расположена там, куда и смотрят редко. В результате посетитель не будет мотивирован на конверсию. Он заинтересовался оффером, но что ему дальше делать видит не сразу.
На примере выше кнопка призыва к действию сделана белым цветом на белом фоне и обведена тонкой рамкой. Учитывая, что на экране достаточно много информации (заголовок, подзаголовок, 4 триггера с иконками, логотип, дескриптор, якоря, телефон), часть посетителей может и вовсе не обратить внимание на такой малозаметный элемент.
На следующем скриншоте кнопки очень маленькие и не контрастные. К тому же, кнопка «Вызвать сметчика бесплатно» расположена не на месте. Посетитель рассматривает страницу сверху вниз и слева направо. Именно поэтому кнопку призыва к действию (которая является следующей пунктом конверсионного маршрута после оффера) размещают ниже оффера или справа от него. В нашем примере она сверху и слева. Т.е. взгляд пользователя должен возвращаться в непривычном направлении. Это примерно тоже самое, что установить дверную ручку не на уровне рук, а где-то вверху выше головы.
Вывод: как уже было сказано выше, кнопка призыва к действию – самый яркий элемент на лендинге, ее должно быть видно всегда, даже на приличном расстоянии от монитора. Иначе с конверсией можно распрощаться.
Заключение
Для корпоративного сайта или интернет-магазина перечисленные выше ляпы не так критичны, как для лендинга. Лендинг изначально создается под конвертацию посетителей в лидов и дизайн как и контент призван решать эту задачу, а не вызывать дополнительные вопросы или мешать пребыванию на странице.
