Что включает хороший продуктовый лендинг
Отправить статью или инфоповод
6 декабря 2021
2110
© Hal Gatewood
Как сделать лендинг информативным, завлекающим, лаконичным и побуждающим одновременно? Рецептом идеального лендинга делится веб-дизайнер WIM.Agency Юлия Козловская.
Юлия Козловская
Web-дизайнер WIM.Agency
Искусство создания лендингов заключается в рациональном использовании каждого кусочка страницы. При этом нужно познакомить пользователя с продуктом, стимулировать на совершение целевого действия и не перегрузить информацией. Чтобы вы не запутались в хитросплетениях этого тонкого дела — расскажем рецепт хорошего лендинга.
Что включает в себя хороший лендинг?
Структура
Любой лендинг начинается со структуры. Необходимо продумать логику страницы, решить, как разбить всю информацию по экранам и структурировать ее. Это позволит пользователю легче ориентироваться по странице и считывать информацию, а грамотная подача увеличит конверсию.
Примеры лендингов с хорошей структурой:
Скаски
Создатели сайта хорошо продумали логику и путь пользователя. На странице мы постепенно находим ответы на все интересующие путешественника вопросы: чем заняться на территории комплекса и за ее пределами, как добраться и так далее.
Justfood
Разработчики позаботились о самом главном — познакомили пользователя с меню и ценами в интерактивном формате, а также оставили удобную форму для заказа.
Визуал
То, что лендинг должен быть ярким и динамичным, знает каждый. Однако не стоит перегружать его, визуал не должен стать помехой к интуитивному восприятию информации. Старайтесь минимизировать количество элементов на одном экране, акцентируйте важные блоки с помощью якорных объектов и правильной шрифтовой иерархии.
Примеры лендингов с не перегруженным визуалом:
Remote Moscow
Все акценты в тексте лендинга аккуратно выделены шрифтом и цветными подложками — без лишних отвлекающих элементов. Так пользователь легко может найти важную информацию о туре.
Smart diet
Лаконичный лендинг-визитка. Чтобы немного разнообразить графику, были добавлены яркие эмодзи.
Тренды в дизайне
Использование трендовых решений в дизайне — большой плюс. Сейчас на волне популярности 3D-рендеры, глассморфизм, брутализм, сложные градиенты, нестандартные иллюстрации и нестареющий минимализм. Важно знать, с какой аудиторией вы выстраиваете коммуникацию, чтобы понимать, как грамотно внедрить тренды в дизайн. Некоторые из них могут быть совсем неуместны для конкретной аудитории.
Примеры лендингов с использованием трендовых решений:
Альфа Банк
За счет цветного градиента лендинг выглядит очень ярко и сочно — то, что нужно для летнего кэмпа.
Кухня на районе
3D-рендеры на лендинге Кухни цепляют взгляд и придают графике глубину. Такие объемные изображения хорошо сочетаются с простым минималистичным шрифтом.
CTA
Call to action — важный элемент любого лендинга.
Примеры лендингов с доступным CTA:
Кинопоиск
Кинопоиску пришлось сделать довольно много экранов, чтобы уместить всю информацию о вакансии. Но кнопка «Хочу к вам» сопровождает пользователя в течение всего пребывания на странице, чтобы возможность совершить целевое действие была всегда.
Cpeople
Другой пример HR-лендинга — здесь разные CTA расставлены через каждые несколько экранов и ведут к разным целевым действиям.
Удобство
Постарайтесь максимально облегчить жизнь пользователю: избавьте его от лишней информации, сократите количество шагов для совершения целевого действия. Добавьте статичную навигацию, если лендинг получился слишком длинным (но лучше всего — постараться сократить его до 5–6 экранов).
Примеры удобных лендингов:
Smetana
Основные цели лендинга креативного агентства — познакомить потенциального клиента с работами и предоставить способ связи с менеджером. Smetana уместила обе цели в один экран! Пользователю достаточно вставить недостающую информацию в бланк и нажать кнопку «Отправить».
Глобус
Здесь благодаря продуманной навигации разработчику удалось очень эффективно (и довольно эффектно) разместить каталог продукции.
Анимация
Это еще один тренд в веб-дизайне, только набирающий популярность из года в год. Кроме анимированных иллюстраций и блоков с видео, «оживить» лендинг можно с помощью анимации при скроллинге, интерактивных блоков, слайдеров, параллакса и hover-эффектов. Не забывайте отрисовывать дефолтные и активные состояния объектов перед передачей макета в верстку.
Примеры лендингов с трендовой анимацией:
Stag
Анимация плывущих облаков помогает оживить минималистичную композицию этого лендинга.
Найс!
А это хороший пример анимации при скроллинге. Ты буквально чувствуешь каждое движение мышкой при пролистывании страницы.
А теперь закрепим материал…
Идеальный лендинг — какой он? Чек-лист
Оптимальный по длине
Имеет около 5–7 экранов. Пользователь может прочитать и осознать информацию за 7–15 минут.
Структурированный
Вся информация распределена по экранам в соответствии с заранее продуманной логикой.
Удобный
CTA расположены на нескольких экранах лендинга, что позволяет пользователю совершить целевое действие в любой момент, не скролля к началу или концу страницы. В случае, если лендинг все-таки получился слишком длинным, добавлены элементы навигации для удобного перемещения между экранами.
Яркий
Просмотр страницы не вызывает скуку: она яркая и динамичная. Такой она может стать за счет сочных фотографий, красивых цветовых контрастов, эффектной типографики.
Контрастный
Фон и текст контрастны друг другу, благодаря чему информация легко считывается. Изображения не сливаются с остальным контентом, а выступают в роли якорных объектов.
Выполнен с учетом правила близости
Внутренние расстояния и отступы — меньше внешних. Кроме того, в лендинге достаточно воздуха, информация не слипается «в кашу».
Имеет продуманную типографику
Соблюдена шрифтовая иерархия: есть заголовки нескольких уровней, основной текст и дисклеймер. Интерлиньяж рассчитан по формуле кегль × 1,5 (или 150%). Выключка подобрана в соответствии с длиной текстовых блоков (выравнивание по левому краю — прекрасно, по центру — нормально, по правому — редко допустимо, по ширине — недопустимо).
Трендовый
Выполнен в лаконичном минималистичном стиле и/или содержит в себе элементы: глассморфизма, брутализма, сложные градиенты, 3D-рендеры или нестандартные иллюстрации, которые сейчас очень популярны.
«Живой»
Предусмотрена анимация, интерактивные блоки, а также hover-эффекты: у элементов интерфейса есть дефолтные и активные состояния.
При создании страницы просто пройдитесь по пунктам этого чек-листа. Если все правила соблюдены, то перед вами именно он — эффективный и стильный лендинг.
Если вы заметили опечатку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Подписывайтесь на наш
Подписывайтесь на наш
Закрыть
Автоматизация бухгалтерии
для любого бизнеса
Попробовать бесплатно
Хороший лендинг. Как собрать больше лидов?
Когда вы слышите слово «лендинг», что рисует ваше воображение? Длинную страницу с большими буквами, красивыми рисунками, анимацией и формами для заполнения, да? Это верно, но лишь отчасти. Лендинг, landing page, посадочная страница — всё это одно и тоже. Страница, на которую первым делом попадает пользователь, независимо от её размера и внешнего вида: это может быть главная страница, карточка товара, статья в блоге и т. п. Для любой из этих страниц работают 3 аксиомы, которые помогают правильно ставить цели и добиваться отличных результатов в лидогенерации.
Если вы согласны с этими аксиомами и испытываете проблемы с привлечением лидов, свяжитесь с нами. Мы с радостью поможем.
Три аксиомы лидогенерации
Аксиома №1. Лиды делает не лендинг
Возможно, странно звучит, но это правда. Лендинг является лишь частью рекламной кампании, наряду с рекламными объявлениями или баннерами. И на процесс лидогенерации и количество лидов влияет вся рекламная кампания в целом. При этом роль одной из составляющих рекламной кампании здесь около 50%. Т. е. странно полагать, что на конвертацию трафика в лиды полностью повлияет дизайн или расположение кнопки.
Поскольку определить уровень работоспособности всей кампании заранее нельзя, нужно всё тестировать: от заголовков объявлений до CTA на посадочной странице. Только череда сплит-тестирований поможет создать эффективную рекламную кампанию.
Аксиома №2. Лиды — не покупатели
Лиды — это та часть аудитории, которая заинтересовалась вашим предложением и захотела подробностей. Кому-то подробностей нужно меньше (такие пользователи почти готовы что-то купить или заказать), кому-то больше. Поэтому, если не заниматься выращиванием лидов (lead nurturing) и ко всем лидам относиться одинаково, толку не будет.
Не нужно пытаться пользователю что-то сходу продать. Заполучите лид и раскручивайте его.
Аксиома №3. Конверсия не так важна
Конверсия — это очень образная и относительная метрика. Поэтому зачастую она не показывает эффективность лидогенерации. Гораздо полнее картину эффективности рисуют такие показатели как ROI, CPL и т. д.
А теперь давайте через призму этих трёх аксиом посмотрим на то, каким же должен быть хороший лендинг, чтобы было много лидов.
Хороший лендинг и 5 моментов, которые нужно учитывать при лидогенерации
Блинк-тест
Независимо от того, на какую страницу пришёл пользователь, у вас есть от 3 до 5 секунд, чтобы заинтересовать его. Ведь по своей сути интернет-маркетинг — это психология восприятия и точность соответствия ожиданиями целевой аудитории. Если вы хотите превратить посетителей сайта в покупателей, необходимо привлечь их внимание с первого раза и подогреть интерес для конверсии.
Блинк-тест работает во время тех самых 3–5 секунд, когда посетитель переходит на сайт, оценивает его и решает: либо он останется здесь, либо уйдёт. Что делать? Протестируйте, как долго загружается страница и, если необходимо, внесите корректировки. Низкая скорость загрузки приводит к потере потенциальных лидов. Протестировать можно с помощью инструмента PageSpeed Insights.
Заголовок
Этот важный элемент также следует из блинк-теста. Согласно Copyblogger, 8 из 10 посетителей читают заголовок посадочной страницы и только 2 из 10 знакомятся с первым абзацем. Таким образом, заголовок является самой важной частью лендинга, и он должен максимально полно отражать суть предложения, изложенного на странице.
Хороший пример — главная страница Treehouse. Слева от формы с CTA указано, что получит пользователь после отправки своих данных через форму и какие навыки даст ему усвоенный материал:
Форма (поля)
Достоверно известно (и этим уже никого не удивить), что чем больше полей в форме лидогенерации, тем качественнее полученные лиды и тем ниже конверсия самой формы — и наоборот. А если форма расположена на первом экране, это ещё не означает успешную конвертацию трафика. Оптимальное местоположение нужно выявить чередой сплит-тестирований.
Формы на мобильных устройствах следует уменьшать и сокращать, ведь их заполнение может стать затруднительным из-за размера экрана. В HubSpot, например, поэкспериментировали с сокращением форм для пользователей мобильных устройств и увидели, что уровень «мобильных» лидов вырос в 5 раз за две недели.
CTA
Призыв к действию нужно выделять визуально. Это привлечёт внимание посетителей, которые «сканируют» страницу. Для привлечения взгляда лучше всего использовать контрастные цвета и пустое пространство (это сыграет позитивную роль и на мобильных устройствах). В примере ниже — главная страница сайта Dropbox. Здесь можно отметить правильное использование свободного пространства и простоту дизайна. На этом фоне CTA «Зарегистрироваться» заметно выделяется. CTA и лого Dropbox вверху страницы одинакового цвета. Так посетителю легче воспринимать важную информацию.
Согласно исследованиям Eyetracking, в первую очередь глаз посетителей падает на верхний левый угол, оттуда взгляд идёт вниз по F-образному рисунку. Чтение идёт слева направо два раза по двум горизонтальным полоскам, затем по вертикали.
Источник: blog.kissmetrics.com
Говоря о персонализации, можно посоветовать использовать разумные CTA, которые изменяются в зависимости от посетителя. Таким образом, представитель каждого сегмента аудитории увидит на странице изображения, кнопки, продукты — именно те, которые подходят его интересам. Персонализированные СTA приносят на 42% больше лидов.
Контент
Поскольку большинство пользователей не готовы совершить покупку, их нужно «подогреть». Правильный контент поможет провести их по воронке и превратить в покупателей. И хотя создание нового интересного предложения или акции может потребовать много времени, результат обычно оправдывает любые затраты.
Например, компания Aquaspresso добавила всплывающее окно с CTA на главную страницу блога. Подписка дополнена мотивацией и объясняет, что пользователь будет получать:
Ещё один пример от Eastern International College. Они создали викторину о важности выбора колледжа. Pop-up добавили на самую популярную страницу веб-сайта, которая стала хорошим лендингом.
Викторина помогла собрать дополнительные лиды с личными данными о подписчиках: имя, номер телефона и емейл.
Существует ещё множество других способов собирать лиды. Например, если на лендинге есть товарная сетка, можно создать познавательный контент о том, как пользоваться этим продуктом.
Это были не все, но ключевые факторы, которые стоит учитывать, приступая к лидогенерации и созданию рекламной кампании. Если мы о чём-то забыли упомянуть, то будем рады, если вы напишите про это в комментариях 🙂
Good Landing Recovery — Центр лечения наркозависимости в Атланте, основанный верой
ИСТОРИЯ ВАШЕГО ВОЗВРАЩЕНИЯ НАЧИНАЕТСЯ ЗДЕСЬ
МЫ СОЗДАЕМ ЧЕМПИОНОВ
Воспроизвести видео
ПОЛУЧИТЬ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ
ПОЛУЧИТЬ НЕМЕДЛЕННУЮ ПОМОЩЬ
Наша цель
Good Landing Recovery существует, чтобы разрушить силу зависимости, создавая атмосферу, в которой Бог может восстанавливать семьи и жизни через тело, дух и душу. Наш уникальный комплексный подход к выздоровлению каждого человека делает упор на исцеление и рост во всех сферах его жизни. Мы понимаем, что никакая зависимость не является просто физической или умственной битвой, и она не влияет только на жизнь одного человека. Наша цель — полная трансформация каждого человека внутри и снаружи, чтобы мы могли вернуть его в здоровую, безопасную и исцеляющую семейную среду.
Столпы выздоровления, основанные на вере
Путь к выздоровлению от наркотической и алкогольной зависимости — это путь, по которому человек идет всю оставшуюся жизнь. При поддержке программы избавления от зависимости, основанной на вере, этот путь можно пройти радостно в среде, основанной на прощении и восстановительном исцелении, которое может дать только Христос.
Успех Good Landing в содействии и поддержке вашего пути к выздоровлению основан на четырех столпах:
1. Создание
Атмосфера веры
«Ибо для Бога нет ничего невозможного».
Луки 1:37
Зависимость и выздоровление — это духовные проблемы, и именно через веру люди переживают настоящую и продолжительную трансформацию. Живительная, насыщенная атмосфера веры в нашей программе предназначена для продвижения и поддержки изменений.
2. Развитие
Побеждающий дух
«Все могу в укрепляющем меня Христе».
Филиппийцам 4:13
Наркомания и алкогольная зависимость отягощают жизнь. Так часто люди, страдающие от зависимости, избиваются до такой степени, что сдаются, думая, что их состояние необратимо. Вместе мужчины, служившие в Good Landing, развивают побеждающий дух. Восстанавливающая сила воскрешения — это то, что нужно, чтобы победить зависимость и получить возможность жить успешной жизнью.
3. Строительство
Крепкое тело
«Или не знаете, что тела ваши суть храм живущего в вас Святого Духа, Которого имеете вы от Бога, и вы не свои?»
1 Коринфянам 6:19 NKJV
Наши тела даны Богом для Его славы, и с ними нужно обращаться бережно. Зависимость может иметь длительные последствия для организма, поэтому его необходимо подготовить и укрепить для процесса выздоровления. Сосредоточив внимание на физической подготовке, мы позаботимся о том, чтобы вы были в отличной форме после выхода из нашей программы.
4. Доверие
Процесс
«Не сообразуйся с этим миром, но преобразуйся обновлением ума твоего, дабы ты через испытание познал, что есть воля Божия, что есть добро, и угодно, и совершенно ».
Римлянам 12:2 ESV
Системы ложных убеждений подпитывают зависимость. Определив, что они есть в вашей жизни, мы можем их уничтожить. Эти вещи не происходят в одночасье — путь к выздоровлению требует времени. Мы проработаем любые ядовитые убеждения и поведение, которые держат вас в рабстве, давая вам прочное выздоровление, основанное на духовной стойкости.
ПОДРОБНЕЕ О НАС
Как мы помогаем
В GLR, , мы лечим разум с помощью стратегий консультирования по вопросам наркомании и алкоголизма, которые напрямую противодействуют зависимости и связанному с ней поведению.
Мы лечим тело правильным питанием и физическими упражнениями, чтобы заменить нездоровые привычки и восстановить крепкое здоровье в нашем реабилитационном центре для наркозависимых.
Мы относимся к душе и духу с молитвой и пастырской заботой, проходя через каждую борьбу с нашими клиентами и празднуя с ними каждую победу.
СДЕЛАЙТЕ ПЕРВЫЙ ШАГ СЕЙЧАС!
ДЕЙСТВУЙТЕ СЕЙЧАС!
Процедура приема
Наша простая и понятная процедура приема разработана таким образом, чтобы упростить процесс получения людьми необходимой им помощи.
Член семьи или многие другие лица, нуждающиеся в лечении от зависимости, могут
СВЯЗАТЬСЯ С НАМИ КРУГЛОСУТОЧНО
, чтобы сделать первый шаг в процессе выздоровления.
УЗНАТЬ БОЛЬШЕ
МЫ ПРИНИМАЕМ ВСЕ ОСНОВНЫЕ СТРАХОВЫЕ ПОСТАВЩИКИ
Частное платное лечение
Мы являемся одним из самых доступных частных медицинских учреждений в стране.
УЗНАТЬ БОЛЬШЕ
Что взять с собой
После того, как вы сделали первый шаг к трезвости, вам может быть интересно, что разрешено и что запрещено в Good Landing Recovery.
УЗНАТЬ БОЛЬШЕ
Свяжитесь с нами
ПОЗВОНИТЕ НАМ СЕЙЧАС!
Приемная: (770) 624-2728
Главный офис: (770) 450-6120
Наш адрес
Good Landing Recovery — Центр лечения наркозависимости в Атланте, основанный верой
ВАША ИСТОРИЯ ВОЗВРАЩЕНИЯ НАЧИНАЕТСЯ ЗДЕСЬ
МЫ СТРОИМ ЧЕМПИОНОВ
Воспроизвести видео
ПОЛУЧИТЬ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ
ПОЛУЧИТЬ НЕМЕДЛЕННУЮ ПОМОЩЬ
Наша цель
Good Landing Recovery существует, чтобы разрушить силу зависимости, создавая атмосферу, в которой Бог может восстанавливать семьи и жизни через тело, дух и душу. Наш уникальный комплексный подход к выздоровлению каждого человека делает упор на исцеление и рост во всех сферах его жизни. Мы понимаем, что никакая зависимость не является просто физической или умственной битвой, и она не влияет только на жизнь одного человека. Наша цель — полная трансформация каждого человека внутри и снаружи, чтобы мы могли вернуть его в здоровую, безопасную и исцеляющую семейную среду.
Столпы выздоровления, основанные на вере
Путь к выздоровлению от наркотической и алкогольной зависимости — это путь, по которому человек идет всю оставшуюся жизнь. При поддержке программы избавления от зависимости, основанной на вере, этот путь можно пройти радостно в среде, основанной на прощении и восстановительном исцелении, которое может дать только Христос.
Успех Good Landing в содействии и поддержке вашего пути к выздоровлению основан на четырех столпах:
1. Создание
Атмосфера веры
«Ибо для Бога нет ничего невозможного».
Луки 1:37
Зависимость и выздоровление — это духовные проблемы, и именно через веру люди переживают настоящую и продолжительную трансформацию. Живительная, насыщенная атмосфера веры в нашей программе предназначена для продвижения и поддержки изменений.
2. Развитие
Побеждающий дух
«Все могу в укрепляющем меня Христе».
Филиппийцам 4:13
Наркомания и алкогольная зависимость отягощают жизнь. Так часто люди, страдающие от зависимости, избиваются до такой степени, что сдаются, думая, что их состояние необратимо. Вместе мужчины, служившие в Good Landing, развивают побеждающий дух. Восстанавливающая сила воскрешения — это то, что нужно, чтобы победить зависимость и получить возможность жить успешной жизнью.
3. Строительство
Крепкое тело
«Или не знаете, что тела ваши суть храм живущего в вас Святого Духа, Которого имеете вы от Бога, и вы не свои?»
1 Коринфянам 6:19 NKJV
Наши тела даны Богом для Его славы, и с ними нужно обращаться бережно. Зависимость может иметь длительные последствия для организма, поэтому его необходимо подготовить и укрепить для процесса выздоровления. Сосредоточив внимание на физической подготовке, мы позаботимся о том, чтобы вы были в отличной форме после выхода из нашей программы.
4. Доверие
Процесс
«Не сообразуйся с этим миром, но преобразуйся обновлением ума твоего, дабы ты через испытание познал, что есть воля Божия, что есть добро, и угодно, и совершенно ».
Римлянам 12:2 ESV
Системы ложных убеждений подпитывают зависимость. Определив, что они есть в вашей жизни, мы можем их уничтожить. Эти вещи не происходят в одночасье — путь к выздоровлению требует времени. Мы проработаем любые ядовитые убеждения и поведение, которые держат вас в рабстве, давая вам прочное выздоровление, основанное на духовной стойкости.
ПОДРОБНЕЕ О НАС
Как мы помогаем
В GLR, , мы лечим разум с помощью стратегий консультирования по вопросам наркомании и алкоголизма, которые напрямую противодействуют зависимости и связанному с ней поведению.
Мы лечим тело правильным питанием и физическими упражнениями, чтобы заменить нездоровые привычки и восстановить крепкое здоровье в нашем реабилитационном центре для наркозависимых.
Мы относимся к душе и духу с молитвой и пастырской заботой, проходя через каждую борьбу с нашими клиентами и празднуя с ними каждую победу.
СДЕЛАЙТЕ ПЕРВЫЙ ШАГ СЕЙЧАС!
ДЕЙСТВУЙТЕ СЕЙЧАС!
Процедура приема
Наша простая и понятная процедура приема разработана таким образом, чтобы упростить процесс получения людьми необходимой им помощи.
Член семьи или многие другие лица, нуждающиеся в лечении от зависимости, могут
СВЯЗАТЬСЯ С НАМИ КРУГЛОСУТОЧНО
, чтобы сделать первый шаг в процессе выздоровления.
УЗНАТЬ БОЛЬШЕ
МЫ ПРИНИМАЕМ ВСЕ ОСНОВНЫЕ СТРАХОВЫЕ ПОСТАВЩИКИ
Частное платное лечение
Мы являемся одним из самых доступных частных медицинских учреждений в стране.