Первое впечатление в интернете так же важно, как и в реальной жизни. Поскольку мы даем пользователям много вариантов выбора, то их внимание, проходя сквозь плохо проработанные лендинги, только убывает.
Согласно совместному исследованию Google и Базельского университета (University of Basel), пользователи оценивают эстетическую привлекательность и воспринимаемую функциональность сайта примерно за 1/20-1/50 долю секунды. Это меньше, чем нужно на щелчок пальцами. И за это время посетитель решает, дать вам шанс или уйти к конкурентам.
Так что же владельцам бизнеса предпринять, чтобы выделиться из толпы соперников? Мы обсудили этот вопрос с тремя лучшими разработчиками лендинг пейдж, чтобы понять психологию, стратегию и секреты создания красивого и высоко конверсионного дизайна посадочных страниц.
Лендинг пейдж должна преследовать одну цель (да, только одну)
«Лучшие посадочные страницы просты и сфокусированы на одной цели», объясняет Шар Биггерс (Shar Biggers), основатель нью-йоркской дизайн-студии PROVOKE, работавшей над проектами для Хиллари Клинтон (Hillary Clinton), Sephora, Squarespace и Clinique.
Прежде, чем начать работу над текстом или дизайном, сформулируйте цель лендинга.
«Это звучит просто, но часто существуют элементы, о которых клиент не задумывался», объясняет Симон Смит (Simone Smyth), основатель дублинской студии HyperBrow Studio.
«Вы стремитесь повысить конверсию в продажи, получить данные пользователей, укрепить бренд или достигнуть всего вышеперечисленного? Тогда подойдите к каждой цели отдельно, с точки зрения дизайна и девелопмента».
«Иерархия лендинга определяет его успех. Поэтому важно определиться с конечной целью страницы при ее разработке».
Разные цели — разные страницы.Основная цель направит процесс разработки и гарантирует, что после запуска вы сразу оцените эффективность лендинга.
В редакторе посадочных страниц LPgenerator вы можете выстроить иерархию лендинга из готовых структурных блоков. Они разделены по категориям: «Шапка», «Выгоды», «Этапы работы», «Лид-форма», «Футер» и пр. Вот как выглядит наш конструктор секций:
Запишите все, что знаете о клиентах
Итак, разрабатывая посадочную страницу, сперва необходимо задуматься об ее цели. А во-вторых? Понять аудиторию.
Поставьте себя на место клиентов и подумайте, чего они хотят от страницы? Зачем им оставаться и совершать целевое действие? Чем больше вы знаете об аудитории, тем вероятнее дизайнер создаст нечто, релевантное ей.
«Для начала я знакомлюсь с бизнесом клиентов, их отраслью и тем, что делают их конкуренты», объясняет Шар.
«Я объясняю им их же бизнес-процессы, их клиентов и цели конверсии/продаж, а также преимущества их бренда. Независимо от потребностей, эта информация всегда релевантна проекту».
Шар разработал конкретные дизайн-решения для нового лендинга Everwise — службы знакомств для менторов. Дизайн Шара сфокусирован на социальном доказательстве (кто использует услугу) и успехе клиентов (96% верных соответствий). Это мотивирует на регистрацию и получение дополнительной информации.
Дизайн лендинга EverwiseЧасто посадочные страницы уникальны для определенного сегмента аудитории или конкретных клиентов. Это означает, что вы уже должны знать о них достаточно, чтобы дать дизайнеру четкое представление о том, на кого нацелены лендинги.
Выделяйтесь дизайном
Выше упоминалось, что у вас есть считанные миллисекунды, чтобы привлечь внимание пользователя. Даже самый профессиональный текст не будет прочитан за это время. Остается уповать на дизайн.
Хармут Эсслинген (Harmut Esslingen), немецкий дизайнер, который помог сформировать образ продуктов Apple в 80-х годах, придерживался руководящего принципа, согласно которому «форма следует за эмоциями».
При первом посещении сайта вы оцениваете его из определенных дизайн-паттернов. Рассчитываете увидеть панель навигации сверху или сбоку, или выпадающее меню в верхнем правом углу на сайте eCommerce. Если ресурс не соответствует этим ожиданиям, нашему мозгу сложнее считывать информацию с него и мы автоматически воспринимаем его как неудобный.
Однако, если речь идет о лендинге с одной четко определенной целью, следование стандартам дизайна может повлечь неприятные последствия.
«Многие наши клиенты запускали MVP или стартапы, и главная их забота заключалась в том, чтобы все сделать правильно. Но “правильно” для них — то, что принято считать обычным и правильном в их среде», объясняет Симон Смит.
«Думаю, у каждого есть заданное представление о том, как выглядит посадочная страница, но это представление не обязательно верное».
«Мы — цифровое креативное агентство. Мы сфокусированы на дизайне, консалтинге и технологиях». Увы, но лендинг слишком пространный. Он не привлечет внимания пользователей«Дизайн имеет решающее значение в конкурентной гонке. Вы можете вырваться вперед с помощью иллюстраций, видео или типографики — единых формул нет».
«По моему мнению, ни один элемент не должен быть шаблонным. Потому что каждый бизнес индивидуален, и, что важнее, каждая аудитория индивидуальна. Apple не подойдет та же формула, что и маленькой кофейне» .
«Чистота и минимализм, как правило, лучший выбор, но часто мы недооцениваем остальные инновационные возможности», добавляет Шар.
«Все это актуально не только для основного сайта, но и для лендингов, баннеров, всплывающих окон и прочих инструментов цифровой рекламы. Моя любимая страница захвата email — от бренда Lenny».
«Ленни в вашем ящике дважды в неделю»Настроить дизайн лендинга можно в редакторе посадочных страниц LPgenerator. Так выглядит наша панель виджетов:
А это — панель инструментов редактирования лендинга.
Фокусируйтесь на пользовательском опыте, чтобы превратить посетителей в клиентов
Захватили внимание пользователя и убедили его остаться? Теперь начинается настоящая работа.
«При разработке выдающихся посадочных страниц, мы пытаемся минимизировать пользовательский дискомфорт. Для этого мы задаемся вопросами: “Улучшает ли это опыт?” и “Повышает ли это ценность бренда?”», объясняет Йеспер Бальцер (Jesper Balzer), управляющий директор ajukreizi, агентства в Копенгагене, работающего с такими клиентами, как Universal Music и Roskilde Festival.
Когда Йеспер с командой были привлечены Foodscene для создания лендинга своего сложного кулинарного приложения, было решено укрепить эмоциональный посыл бренда через полноэкранное видео — чтобы мотивировать пользователей на загрузку приложения.
«Лучшие рестораны Копенгагена. Презентация от шефов».В результате, треть посетителей лендинга начала конвертироваться в платежеспособных клиентов.
Аналогично, когда Симона попросили создать посадочную страницу для Научной галереи Дублина (Science Gallery Dublin), заказчики не сформировали четкого «запроса», кроме привлечения посетителей. Поэтому разработчики сосредоточились на создании уникального пользовательского интерфейса.
«Кому-то это покажется странным, но дублинская галерея знала свою аудиторию. Эти люди молоды, любопытны и считают, что отличаются от сверстников. Таким образом, задачей стало создание лендинга, резонирующего с этой конкретной аудиторией».
«Наша работа, как дизайнеров и девелоперов, заключалась в разработке лендинга, который станет воротами микросайта выставки. Если работа будет сделана хорошо, пользователь вовлечется в лендинг и захочет продолжить опыт на сайте, исследуя выставку онлайн перед посещением галереи в реальности».
Выше — два варианта макета. В обоих случаях дизайнер создал страницу, расширяющую возможности уже заинтересованных клиентов.
Для Шар использование сильных сторон бренда (связанные с ним эмоции и пр.) — основной компонент успеха лендинга.
«Брендинг на сегодняшний день — самая важная SEO-стратегия, включающая хорошо написанную историю и высококлассный визуальный опыт, релевантный всем цифровым платформам. Связи бренда с историей поиска и запросами людей напрямую влияют на то, кто увидит его контент и посадочные страницы».
Создавать. Измерять. Учиться. Повторять.
Успешный лендинг — живой организм. Не получится создать его и забыть, надеясь, что он сам выполнит поставленные цели. Измерение и изучение данных — путь к извлечению максимальных выгод из вашей кампании. И хотя вы уже знаете, что ключевая метрика успеха основана на первом пункте статьи (один лендинг — одна цель), можете отслеживать и другие показатели, чтобы понять, помогает или препятствует дизайн целевому действию.
«Важнейшая дизайн-метрика — это сравнительный показатель отказов на десктопных и мобильных устройствах. Если вы обнаружите, что пользователи оставляют мобильные лендинги быстрее, чем десктопные, то вероятно, у вашей мобильной версии проблемы с UX», объясняет Шар.
«Если у вашего лендинга низкая конверсия, причин может быть множество. Но скорее всего, вы не даете пользователям нужную информацию или не выделяете ценность. Иногда ошибки кроются в мелочах: например, слишком длинная форма захвата или чересчур много информации на лендинге».
Подведем итог. Хороший дизайн лендинга состоит из пяти аспектов:
- Понимание важнейшей цели страницы;
- Понимание идеального клиента;
- Уникальный дизайн, привлекающий внимание;
- Восхитительный опыт, побуждающий на конверсию;
- Возможность отслеживать и измерять действия пользователей.
Помните, что посадочные страницы не стоит создавать по шаблонам. Каждая из них должна балансировать между целями бизнеса и потребностями аудитории.
Высоких вам конверсий!
По материалам: crew.co Image source: Sketchy-G
