Дизайн Landing Page
Благодаря сайтам электронной коммерции сегодня пользователи могут легко получить практически любой товар из любой точки планеты. Интернет открыл небывалые возможности для ведения бизнеса по всему миру, а онлайн магазины помогают культивировать новые способы для продажи товаров онлайн.
К сожалению для пользователя ориентироваться в огромном количестве предложений становиться крайне сложной задачей, а выбрать правильный и надежный магазин для совершения конечной покупки еще сложнее.
Для владельцев бизнеса создание успешной и коммерчески выгодной онлайн площадки становится правильной, но очень не тривиальной задачей, ведь нужно учесть риски связанные с техническими и человеческими факторами, проблемы логистики, а также многие другие, которые могут серьезно осложнить или даже парализовать торговлю.
Стартапы и малый бизнес не могут позволить себе делать ошибки в начале своего пути — как правило бюджет строго ограничен, поэтому вкладываться в создание сложных систем торговли может позволить себе далеко не каждый. В таком случае на начальном этапе функцию площадки для онлайн продаж сможет взять на себя Landing Page.
Мы регулярно слышим о посадочных страницах, постоянно попадаем на такие страницы случайно, нажав на баннер в углу, иногда задерживаемся надолго чтобы изучить содержимое, когда та привлекла наш интерес. Но все же, чем посадочные страницы являются на самом деле? Чем они отличаются от онлайн магазинов и других страниц? В чем их преимущества, для чего лучше всего подойдет такая страница и какие инструменты лучше использовать для ее создания? На все эти вопросы я постараюсь как можно детальней ответить далее.
Я попробую дать достаточно точное описание того, что представляет из себя посадочная страница(LP) и разобрать ее основные элементы — по крайней мере те из них, которые обязана включать в себя любая эффективная посадочная страниц.
Если не следовать определенным принципам хорошо зарекомендовавшим себя в последние годы активного развития индустрии, есть большая вероятность того, что такой ресурс не будет «продавать», даже если вы напишете безупречный текст, разработаете привлекательный дизайн и выполните идеальную адаптивную верстку.
Материал полезен тем кто хочет определить стоит ли тратить ресурсы на запуск собственной посадочной страницы, и к тому времени, как вы ознакомитесь с материалом, у вас должно сложиться четкое понимание целевых страниц и того, как их использовать для улучшения интернет-маркетинга.
Давайте рассуждать вместе.
Все же что такое посадочная страница? Лендинг, как правило, это любая страница которая призывает пользователя выполнить действие и, в отличии от сайта, лендинг предлагает пользователю сделать что-то одно. Такие страницы эффективно используются в рекламе и предназначены для узкой аудитории. LP является самостоятельной домашней страницей в которую по рекламным компаниям стекается трафик предназначенный для повышение конверсии использования. Конверсия подразумевает соотношение посетителей к тем людям которые стали клиентами (Например вашу страниц посетило 1000 человек, при этом товар приобрели 100 из них — соответсвенно конверсия такой посадочной страницы будет составлять 10%).
Но не стоит путать посадочные и домашние страницы. Любую посадочную страницу легко отделить от домашней по ряду элементов и блоков которые как правило всегда присутствуют на посадочных страницах. Эти блоки назначены выполнят определенный ограниченный набор действий, такой как совершение покупок,
отправка форм, просьба “перезвонить мне”, связаться через чат,
подписаться на рассылку новостей, зарегистрироваться на событие.
Все эти действия нужны для того, чтобы пользователь стал полноценный платящим клиентом. Это их главная задача, остается решить как правильно подать информацию и сделать так чтобы пользователь смог понять структуру сайта и найти то самое, целевое действие.
Следующие советы применимы к дизайну в общем и к отдельным элементам в частности.
Итак, главный образом нужно понять как располагать контент чтобы читатель задержался на вашей странице подольше, а не ушел с нее сразу?
Любой сайт и особенно лендинг это по большой части презентация. При его создании вы можете мыслить о нем как он наборе последовательных слайдов.
Переходя от экрана к экрану пользователь увлекается процессом, а в конце как правило с помощью формы захвата (Lead Capture Form) ему предлагают совершить так называемое CTA “целевое действие”
Любой процесс создания веб-страницы начинается с проектирования прототипа (wireframe).
Представим что мы имеем массив необработанных данных которые нам нужно разделить на отдельные смысловые части и распределить их по отдельным экранам, задача в том чтобы расположить их логически и возможно даже удалить часть информации чтобы пользователю осталось самое нужное.
Последовательность истории о предлагаемом вами продукте крайне важна!
Если вы начнете предложения с конца как Йода в звездных войнах вас могут не понять. Так или иначе, в веб-дизайне как и в любом другом творческом процессе существуют исключения, всегда можно чем то пожертвовать и выделить наиболее важные элементы, например поднять контакты наверх или показать список товаров на первом экране — если это будет решать задачу бизнеса значит это оправдано.
В целом если ваши блоки составлены последовательно и воспринимаются как единая законченная история — уже неплохо.
Любой текст разделенный на абзацы будет лучше воспринят пользователем чем огромные полотна SEO текста (контента специально созданного для поисковых машин который невозможно читать), в них легко выявить суть и управлять интересом и вниманием пользователя.
Вы можете направить пользователя по нужному вам пути расставляя акценты. Варианты могут быть разные: цветовые, композиционные, акценты формой или размером. Вы можете использовать иллюстрации и инфографику для того чтобы пользователю было легче и приятней изучать информацию о вашем продукте. Любая реальная статистика, если она обоснована и интересно подана, является хорошим примером применения наглядности в дизайне посадочных страниц. Сухие факты оформленные текстовыми блоками, сегодня никому не нужны.
Благодаря визуализации вы преобразовываете и подаете материал в виде, котором он будет интересен в первую очередь пользователю, никто не будет читать стену текста, люди просто закрою страницу — и это проблема не только для тех, кто использует сайт, это также отразиться на выдаче, ведь поисковые сети будут учитывать эти факторы при ранжировании и те страницы которые оказались не интересны пользователям будут наименее популярны в будущем.
Лучше подавать информацию кратко, если нужно более детальное описание следует скрыть его под раскрывающимся элементом. Если ваше общение с клиентом (пусть и через посадочную страницу) будет простым это большой плюс как для вашего бизнеса так и для пользователей которые вынуждены постоянно сталкиваться с огромным количеством повседневных рутинных задач, а просмотр очередного посредственного сайта не добавит им очков настроения. Они будут крайне признательны если вы сохраните их время.
Элементы посадочных страниц
Неплохо было бы понимать из чего строится посадочная страница и что необходимо учитывать при ее создании. Мы подготовили для вас небольшой пример типичной посадочной страницы и описали наиболее распространенные элементы в дизайне, давайте взглянем на инфографику ниже.
Естественно невозможно описать все паттерны экранов посадочной страницы, но эта инфографика даст нам хорошую основу для обсуждения того, что должно присутствовать в эффективной посадочной странице.
Главный экран
Главный экран сайта — важнейшая часть всей страницы создающая первое впечатление о компании. Правильно спроектированный главный экран задержит пользователя, плохой же наоборот отпугнет потенциальных клиентов и создаст плохие ассоциации с вашим брендом. Давайте подробнее разберем из чего состоит главный экран.
Main Headline and Supporting Headline
Этот текст информирует пользователя о том куда он попал и чем занимается компания, указывает на ее специализацию и демонстрировать выгоду от приобретения товара на этом конкретной сайте.
Главный заголовок обычно строится по правилам 4U ( Usefulness, Urgency, Uniqueness, Ultra-specificity) Ваше предложение должно быть очевидно полезным для потенциальных клиентов.
Большинству горячих клиентов из рекламного трафика товар необходим прямо сейчас поэтому важно чтобы оно было актуально.
Клиенты просматривают множество страниц поэтому нужно чтобы ваш товар отличался от остальных. Если заголовок похож на тот, который они уже где-то видели, вы теряете клиента и снижаете конверсию. Выделите полезные отличия вашего товара от остальных, покажите как ваш продут решит проблему пользователя.
Придерживаясь этих правил вы сможете построить реальный “продающий текст”.
Hero Shot
Ваш заголовок может многое, он предложит клиенту продукт, расскажет о нем, и его уникальности, но все таки это всего лишь текст!
Как говорится лучше один раз увидеть, чем сто раз услышать и графика лучше всего подойдет для этой задачи.
Изображения работают на эмоции и иллюстрируют предложение. Всегда следите за разрешением изображений, это важный критерий на который пользователь всегда обратит внимание. Еще лучше будет работать видео, но такой подход намного сложнее и дороже. Качественное видео всегда привлекает внимание пользователей, подробно в деталях рассказывает о предлагаемом продукте и заставляет задержаться для просмотра.
Lead Capture Forms
Отдельный модуль, с помощью которого пользователь вносит нужные вам данные. Форма состоит из следующих элементов:
- заголовок;
- подзаголовок;
- поля для ввода;
- кнопка;
- подпись;
- CTA + выгода.
Часто пользователю некогда или просто нет желания заполнять такие формы поэтому старайтесь сокращать в них количество обязательных к заполнению полей. Помните, это очень важный элемент. Не повторяйте в заголовке предложение Main Headline но сделайте его таким же вдохновляющим. Проанализируйте что может заставить пользователя заполнить данные на форме. Иногда можно просто объяснить что произойдет после нажатия (Например: наш специалист свяжется с вами и проведет бесплатную консультацию). И обязательно поблагодарите клиента после отправки формы. Далее я подробнее опишу работу с формами.
Benefits
Преимущества делают продукт или услугу желанной и уникальной и как правило описываются короткими текстами (одно-два предложения), сопровождаются иконками, фотографиями или иллюстрациями. Их основная цель захватывать внимание пользователя при быстрой прокрутке страницы, иллюстрация привлекает взгляд, а описание позволит расшифровать преимущество если пользователь остановится на нем.
Stages or how it works
Иногда нужно объяснить пользователю как работает та или иная услуга — например как быстро и удобно для него будет осуществляться доставка товара, или рассказать какие технологии используются для производства, в любом случае скорее всего это будут вертикальные или горизонтальные нумерованные списки или колонки в зависимости от количества информации.
Frequently Asked Questions
Чтобы развеять сомнения пользователей и помочь определится с покупкой FAQ — отличный способ рассказать пользователю больше о продукте. Часто клиенты игнорируют чаты с живыми людьми и боятся выглядеть некомпетентно задав глупый вопрос, поэтому простой способ помочь таким клиентам это объяснить все возможные нюансы в этом блоке.
Our Team
Покупка товаров в интернете это вопрос доверия, и люди доверяют тем, кто не боится показать свое лицо. Фотографии реальных сотрудников всегда положительно сказываются на конверсии страницы. Как правило такой блок включает в себя фото человека, его имя должность в компании и иногда цитату сотрудника.
Closing arguments statement
В конечном итоге после просмотра презентации вашего товара у пользователя должно сложиться свое мнение о нем. Скорее всего на этом этапе он уже решит для себя стоит ли покупать ваш товар.
Последний экран должен привести его к выводу что покупка вашего товара в его интересе. Вы должны точно знать по какому сценарию отправить пользователя, предложить ли ему заказать обратный звонок и консультацию либо сразу предоставить возможность оформить заказ.
В этом заключительном блоке вам нужно подытожить все, о чем вы рассказали до этого, а затем добавить еще несколько утверждений, которые, по вашему мнению, могут превратить пользователя в клиента.
Зачем вам может понадобится посадочная страница?
Посадочная страница генерирует заявки, собирает информацию о потенциальных покупателях и конвертирует пользователей в лидов с помощью форм захвата(AKA a conversion form).
Если этого вам мало и вы все еще не уверены, что целевые страницы помогут сделать ваши маркетинговые усилия и усилия по привлечению потенциальных клиентов более эффективными, тогда вот еще несколько веских причин:
1)Привлекать новых клиентов очень просто
При создании маркетинговой компании в интернете запуск посадочной страницы должен стать одной из первых вещей которой вы обязаны уделить достаточное внимание. Многие компании отправляют трафик из социальных сетей и поисковой трафик на свои домашние страницы и получают мгновенный результат. Целевые страницы обеспечивают очень простой способ привлечения потенциальных клиентов для вашей команды по продажам, которые затем можно легко сегментировать, и перераспределять.
2) Место для вашего уникального торгового предложения
Маркетинговые предложения и целевые страницы неразрывно связны между собой. В любом случае, информация о вашем продукте должна где-то находится. Вы сможете рассказать о вашем продукте и получить информацию от заинтересованных пользователей. Ваша посадочная страница расскажет пользователям историю, а они в ответ “заплатят” вам личной информацией.
3) Сбор демографической информации
Каждый раз, когда лид заполняет форму захвата на целевой странице, ваша команда по маркетингу и продажам получает ценную информацию о ваших потенциальных клиентах. Ваша команда сможет затем использовать эту информацию, чтобы понять, какие типы посетителей превращаются в клиентов и сделать упор на определенных свойствах продукта предназначенных специально для таких покупателей.
4) Создание контента для других маркетинговых каналов
Успешная маркетинговая стратегия для входящего трафика зависит от контента — и его большого количества. Целевые страницы являются отличным дополнением к арсеналу любого маркетолога, поскольку ими можно делиться в социальных сетях, использовать для специальных рассылок по электронной почте и в ведущих рекламных кампаниях, связывать их с рекламой PPC ( Pay per click ads) и находить в обычном поиске.
5) Получение точной статистики об успехе вашей маркетинговой компании
При создании посадочной страницы вы каждый раз создаете еще один актив данных для своей маркетинговой программы. Отслеживая и анализируя показатели, связанные с вашими целевыми страницами, вы можете получить много информации об эффективности маркетинга, узнать, как пользователи оценивают ваши предложения, как посетители ваших страниц и потенциальные клиенты конвертируются в полноценных клиентов. Все это дает информацию, которая может помочь вам оптимизировать и улучшить вашу маркетинговую стратегию.
Какие типы посадочных страниц наиболее востребованы?
Как мы уже знаем любая целевая страница предназначена для получения каких либо данных от пользователя для дальнейшей продажи ему товара или услуги, но один тип целевой страницы не может одинаково хорошо справится со всеми задачами, рассказать о товаре, убедить пользователя сделать заказ и перейти к оплате. В зависимости от того на каком этапе воронки продаж находится пользователь он должен получать строго ограниченный набор информации и форм чтобы быть достаточно заинтересованным перейти на уровень ниже.
На начальном этапе пользователь сам не знает чего хочет, да и вы не уверены приведут ли ваши усилия к желаемому результату. В таком случае наиболее подходящей окажется короткая CTR-целевая страница (Click Though rate) — это самый распространенный тип посадочной страницы, достаточно простой по структуре и целям. Его главная задача — заставить пользователя действовать прямо сейчас (купить, подписаться, загрузить что-то и т.д.).
Короткие страницы особенно ценны в верхней части воронки, потому что они созданы для захвата адреса электронной почты потенциального клиента, который вы можете использовать, чтобы начать превратить его в полноценного покупателя.
Если вы уже получили имя и адрес электронной почты, позже вы сможете использовать более длинные формы захвата которые помогут вам узнать больше о своих потенциальных клиентах, чтобы определить, действительно ли они заинтересованы в вашем продукте или услуге, как это делает Adobe:
Страницы захвата лидов предназначены для молниеносного получения информацию о потенциальном клиенте, они могут быть дополнительным средством. Такие лендинги позволяют собрать информацию о целевой аудитории с помощью небольших анкет и набрать клиентскую базу для e-mail рассылки. Как правило основной мотивацией к заполнению форм на таких страницах является получение быстрой выгоды, подарков или других вещей необходимых пользователям прямо сейчас.
Микросайты — лендинг формата полноценный сайтов, состоящих из нескольких страниц (но не более 10). Чаще всего микросайты используются в рекламных кампаниях известных брендов. Такие сайты хотят как можно больше рассказать пользователю о продукте и используют для этого качественный фото контент, дорогие видео-ролики и захватывающие внимание пользователей интерактивные элементы.
Например: Посадочные страницы после клика являются наиболее ценными в нижней части вашей воронки продаж когда ваш клиент уже готов ответить на ваше предложении взаимностью. Их можно использовать на всех этапах, но чаще всего они предшествуют страницам, на которых происходит уже непосредственно оплата вашей услуги или товара. Если пользователь будет не достаточно подготовлен к этой процедуре, он будет искать любые причины не доверять вам. Ваша задача убедить его в обратном.
Примеры UX/UI дизайна некоторых элементов посадочных страниц
Теперь мне хотелось немного рассказать про визуальный дизайн отдельных элементов посадочных страниц. Главным визуально значимым элементом посадочной страницы является первый экран, он должен максимально точно передать настроение вашего бренда и рассказать с помощью заголовка и подзаголовка о том что пользователь сможет найти на вашей странице. Ниже я привел несколько примеров хорошо выполненных экранов чтобы на их примере описать удачные решения для Hero image:
Spotify
Попадая на посадочную страницу Spotify мы видим красочный экран с главным целевым действием, направленным на приобретение платной подписки, но оно скрыто и сервис не говорит пользователю откровенно о том что сейчас придется заплатить, он мягко подводит к регистрации через предложение воспользоваться бесплатным пробным периодом, таким образом пользователь видит очевидную выгоду, а сервис собирает данные о потенциальных клиентах.
Squarespace
Squarespace — это частная американская компания, которая предоставляет услуги создания веб-сайтов и хостинга. С помощью анимации сервис рассказывает и показывает пользователю как легко можно создать отличный дизайн веб-страницы используя всего один инструмент. Ничего лишнего, минималистичный дизайн в купе с единственной CTA кнопкой позволяет выполнить одиночный сценарий и как мы видим также как и Spotify предоставляет бесплатный пробный период.
Shopify
Одна из ведущих платформ в электронной коммерции, позволяющая предпринимателям создавать собственные интернет-магазины.
Shopify проста в использовании, и это отражено в главном экране. Здесь пользователю предлагается посмотреть короткое видео, которое рассказывает о преимуществах платформы, а остальные экраны ниже приводят более детальную статистику на основе приведенных тезисов.
Как видно во всех этих примерах они имеют общую концепцию — заставить клиентов проявлять эмоции, погрузиться в изучение предлагаемых услуг и начать выполнение сценария посадочной страницы. Захватывающий Hero Image как никто другой помогают привлечь внимание посетителей, а значит это верный способ получить больше конверсий.
Опыт взаимодействия (using experience) также крайне важен. Как мы уже знаем каждый отдельный вид посадочной страницы соответствует определенной задаче, стоит выделять несколько интерактивных элементов с которыми пользователям чаще всего приходится взаимодействовать в контексте сценария типовой посадочной страницы. Такие элементы как CTA кнопки, формы ввода, всплывающие окна, формы захвата, и другие вспомогательные интерактивные элементы крайне важны и требуют к себе максимум внимания с точки зрения удобства их использования, а самым главным из них являются элементы непосредственно выполняющих основную функцию посадочной страницы — сбор информации о потенциальных клиентах.
Посадочная страница собирающая информацию должна предоставлять пользователю наиболее простой способ для передачи этих данных, но единственным шагом к достижению этой цели является заполнение определенной формы. Да, они по прежнему являются одним из важнейших видов взаимодействия пользователей в сети. Поэтому нужно дать пользователю возможность завершать их быстро и без путаницы.
Большинство современных веб форм строится с учетом следующих параметров: структуры формы — компонента который включает в себя порядок полей, внешнего вид формы и логических связей между несколькими полями, полей ввода — всех текстовых полей, поля пароля, флажков, радиокнопок, ползунков и любые других полей, предназначенные для того, чтобы пользователь осуществлял ввод информации, строк меток — содержащих в себе обозначение поля ввода, кнопок действий — выполняющих определенные функции типа отправки формы, обратной связи — как правило текста для уведомления пользователя о результате его действий.
Следуйте принципам минимализма и просите пользователя ввести только то, что вам действительно нужно. Каждое дополнительное поле, добавленное в форму, будет влиять на ее конверсию. Всегда думайте о том, почему вы запрашиваете определенную информацию от пользователя и как затем вы будете ее использовать.
Группируйте поля
Группировка связанных полей поможет пользователям быстрее разобраться в информации, которую они должны предоставить.
Избавьте пользователей от дополнительной когнитивной нагрузки и предоставьте ему простой путь к заполнению вашей формы
Старайтесь избегать необязательных полей в формах.
Используйте маски для сложных пунктов и автозаполнение для длинных полей
Используя метки помните что нужно употреблять ёмкие, короткие и понятные надписи (слово или два), чтобы пользователи могли быстро прочитать вашу форму.
Воспользуйтесь плавающими подсказками, встроенная подсказки будет отображаться по умолчанию, но как только поле ввода будет активизировано, встроенная подсказки исчезает, а метка сверху поля появляется.
Если у вас несколько кнопок на одном экране, предусмотрите разделение на главное и вторичное действие
Правильно давайте название своим кнопкам
Используйте микровзаимодействия
Пользователи могут не захотеть заполнять формы, поэтому делайте этот процесс как можно проще. Незначительные изменения, такие как группировка связанных полей и указание типа информации, которую нужно ввести в каждое поле, может значительно повысить удобство использования.
Подпишитесь на канал в telegram, я репощу свою писанину туда + действительно полезный контент от других авторов.
