Как создать продающий лендинг пейдж: правила разработки и типичные ошибки. Идеальная структура landing page по версии LPgenerator
Лендинг – специальная страница, которая нужна для того, чтобы подтолкнуть посетителя купить товар или услугу или оставить заявку. Для того, чтобы создать качественный лендинг не нужно быть маркетологом. Это под силу обычному человеку. Сегодня мы расскажем как это сделать.
Коротко: что такое лендинг и для чего он нужен
В отличие от многостраничного сайта, лендинг не имеет сложной навигации, больших пластов текста, баннеров и лишних меню для перехода на другие страницы. Навигация по такому сайту осуществляется либо путем прокрутки, либо посредством специального меню, с помощью которого легко попасть на интересующий пункт на странице.
Синонимы: одностраничный сайт, одностраничник, лендинг пейдж, посадочная страница, landing page, целевая страница.
Посадочная страница используется для продвижения товара или услуги, она призвана «направить» посетителя на совершение определенного действия:
- обращение за бесплатной консультацией;
- заявка на покупку товара;
- бронирование мест;
- подписка на рассылку;
Делать самостоятельно или заказать работу «под ключ»?
Итак, мы разобрались с основами. Следующий вопрос, который обязательно возникнет у вас: стоит ли сделать лендинг самостоятельно или заказать у фрилансера или в студии веб/дизайна.
Распространенный миф: разработать качественный, высококонверсионный лендинг очень сложно, этим занимаются только профессионалы, и это недоступно для обычного человека.
Реальность: сделать хороший, рабочий лендинг не сложнее чем создать страничку в социальной сети.
Разумеется, лендинг, разработанный профессиональным маркетологом, скорее всего, будет показывать большую конверсию. Однако разница в конверсии существенно скажется на доходе только при больших оборотах.
Как лучше поступить, если вы:
- вы новичок в бизнесе;
- хотите протестировать новую нишу;
- у вас небольшой стартовый капитал.
Если вы попали в одну из трех категорий , то вам следует подумать о том, чтобы запустить лендинг самостоятельно. Это будет значительно быстрее и дешевле.
В дальнейшем, когда дела пойдут в гору, вы получите первые заказы, оборотный капитал и, самое главное, статистику. Тогда можно задуматься о том, чтобы «дожать» конверсию на всех этапах воронки продаж, в том числе и на лендинге. Вы можете обратиться к профессионалам и сделать еще одни лендинг (или даже несколько) и протестировать их конверсию по сравнению с первым, чтобы выбрать лучший.
Единственное, что вам действительно необходимо — это знание своего продукта: его достоинств, недостатков и целевой аудитории.
С другой стороны, если у вас есть хороший капитал для старта и нет желания тратить лишнее время на создание посадочных страниц, вы всегда можете обратиться к специалистам. Со своей стороны могу порекомендовать веб-студию Divly . У них довольно демократичные цены и хорошие отзывы.
Помните, что если вы решили заказать лендинг «под ключ», вам нужно составить как можно более точное ТЗ и согласовать все детали с разработчиками.
Итак, если вы решились делать все самостоятельно, то ваш следующий наш шаг это выбор качественной платформы. Я подобрал 4 самых и удобных и функциональных сервиса для создания landing page, и сделал короткие обзоры, которые помогут вам выбрать.
LPMotor — самый лучший конструктор одностраничников
Отличная платформа, как для начинающих пользователей, так и продвинутых веб-мастеров. Выделяется простым и интуитивно понятным интерфейсом, доступными расценками на услуги, набором необходимых функций для создания одностраничного сайта, выбором уже готовых шаблонов.
Что касается шаблонов, то сайт предлагает пользователям 90 готовых вариантов оформления. Для удобства поиска все шаблоны разбиты по категориям (фотограф, красота и здоровье, мероприятия, инфобизнес, праздники). Кроме того, можно сделать страничку с нуля из готовых блоков и секций.
Для каждого шаблона можно дополнительно подключить мобильную версию, которую можно редактировать отдельно.
Еще одна отличительная черта — наличие качественный обучающих материалов. По каждому этапу работы (создание и запуск сайта, работа с дизайном, подключение домена, оптимизация и продвижение, управление продажами, повышение конверсии) есть пошаговые обучающие видео ролики.
На сайте отсутствует бесплатный тариф. Есть возможность подключить четыре платных тарифа (цены при оплате за год):
При оплате за год вы получите скидку 40%.
Оплатить услуги и тарифы платформы можно с помощью банковской карты, через Сбербанк Онлайн, Альфа-клик, посредством перевода через Связной, Евросеть, МТС, Теле2 и Билайн. Поддерживаются электронные кошельки: Яндекс.Деньги, QIWI, Webmoney.
Достоинства
- Доступные цены на услуги
- Огромный выбор готовых шаблонов в разных категориях
- Есть все необходимые функции для создания одностраничного сайта
- Возможность интегрировать готовый проект с другими сервисами
Недостатки
- Отсутствие бесплатного тарифа
Bloxy — стильный и современный
Bloxy – конструктор для создания одностраничных сайтов, который не так давно пришел на рынок, однако уже успел заслужить популярность среди веб-мастеров.
Главная особенность сервиса – отсутствие готовых шаблонов, вместо этого пользователю предлагается специальный конструктор, который дает возможность создать собственный одностраничный сайт из различных секций (шапка, основной контент, подвал). Для каждой секции предлагается сотни вариантов, из которых вы можете выбрать то, что наиболее подходит для вашей тематики.
Пользователю предлагается три тарифных плана:
Кроме того, каждому пользователю дается бесплатный тестовый период 7 дней.
Сервис позволяет интегрировать ваш одностраничник с популярными сервисами: amoCRM, Битрикс 24, Робокасса, Яндекс Касса, Google Analytics, Яндекс Метрика, Mail Chimp и др.
Достоинства
- Понятный интерфейс
- Интеграции со всеми необходимыми ресурсами для ведение бизнеса в интернете
- Удобный конструктор для создания собственного одностраничника
Недостатки
- Нет готовых шаблонов
- Стоит дороже конкурентов
LPgenerator — самый функциональный конструктор
LPgenerator имеет все необходимые инструменты для создания одностраничного сайта. В основном данный ресурс рассчитан на профессионалов, которые имеют опыт работы с подобными платформами. Наверно, это самый «мощный» и многофукнциональный конструктор из всех представленных на рынке.
На сайте представлено более 300 шаблонов (все адаптированы под мобильные платформы), из которых всегда можно выбрать что-то под свои потребности. При необходимости можно воспользоваться встроенным конструктором, который позволяет создавать свой сайт из различных блоков абсолютно с нуля. Компания также предлагает пользователям уже готовые одностраничники за дополнительную плату.
На сайте собраны необходимые инструменты для создания и управления лендингом: управление каналами трафика, подробная аналитика и статистика, удобное сплит-тестирование, построение воронки продаж, собственная CRM и LP Телефония и т.д.
Кроме того, вы можете интегрировать lpgenerator с различными онлайн-сервисами: Robokassa, Битрикс 24, AmoCRM, Мегаплан, Dropbox, SmartResponder и др.
Для начинающих пользователей разработана специальная система обучения – собраны материалы, которые помогут разобраться в сложных терминах и организовать процесс создания одностраничника от выбора дизайна до привлечения целевой аудитории и завершения сделки.
Бесплатный тариф отсутствует, оценить все преимущества и недостатки сервиса можно с помощью семидневного бесплатного пробного периода. Далее подключается один из платных тарифов (цены в месяц): «Базовый» (799 рублей), «Продвинутый» (2375 рублей), «Безлимитный» (3999 рублей), «Корпоративный» (15730 рублей).
При оплате за год, вы получаете 30% скидку:
Оплатить тарифы можно следующими способами: безналичный расчет, Web Money, карты Visa, Maestro и MasterCard, Сбербанк Онлайн, «Мир», «Альфа-Банк», «Яндекс.Деньги», Qiwi Wallet, Tele2, Beeline, «Мегафон», МТС, «Евросеть».
Достоинства
- Огромный выбор готовых шаблонов, которые адаптированы под мобильные платформы
- Есть инструменты для создания собственного одностраничника с нуля
- Детальная аналитика сайта
- Доступная телефония для связи клиентов
Недостатки
- Высокие расценки на услуги
- Нет бесплатного тарифа (бесплатный пробный период в течение 7 дней)
- Начинающему пользователю интерфейс может показаться сложным
Ucraft — бесплатный конструктор посадочных страниц
Сервис подойдет и для начинающих пользователей, и для профессиональных веб-мастеров. С помощью платформы можно не только создать одностраничный сайт, но и визитку, а также интернет-магазин. Пользователю доступно 19 готовых шаблонов, все они адаптированы под мобильные устройства.
Каждый шаблон строится на основе блоков, которые простым перетаскиванием мышки можно менять местами и убирать в случае ненадобности.
К готовому лендингу можно подключить следующие сервисы: Google Analytics, Mail Chimp, Google Maps, Twitter, Instagram, You Tube, Disqus.
Отличается от конкурентов тем, что здесь есть полноценный бесплатный тариф:
Платные тарифы можно оплатить с помощью Visa, Mastercard, Pay Pal.
Достоинства
- Удобный редактор для создания собственного одностраничного сайта
- Бесплатный тариф с хостингом и доменом 3-го уровня
- Есть инструменты для совместной работы над проектом
- Возможность интегрировать одностраничник с популярными сервисами
Недостатки
- Мало готовых шаблонов
Примерная структура одностраничного сайта
Теперь, когда мы выбрали платформу для нашей целевой страницы, самое время ненадолго окунуться в теорию. Давайте немного поговорим о структуре лендинга.
1. Заголовок
В заголовке должна отображаться информация, обозначающая уникальные характеристики предлагаемого товара или услуги. Желательно очертить все характеристики, которые выделяют ваш продукт среди конкурентов.
Допускается использование подзаголовка для того, чтобы разъяснить пользователям информацию, предоставленную в заголовке.
2. Логотип, название фирмы и контактная информация
Логотип позволяет пользователям идентифицировать вашу компанию и повысить уровень доверия.
Второй немаловажный элемент одностраничного сайта – наличие контактов. Желательно разместить не только рабочий телефон, но и адрес компании. Именно контакты являются главным инструментом доверия, пользователь подсознательно понимает, что если у проекта есть физический адрес, значит над ним работают профессионалы.
3. Данные о предоставляемом продукте или услуге
Для того, чтобы у пользователя создалось впечатление, что он лично тестирует продукт, на целевой странице желательно разместить:
- Реальные фотографии продукта;
- Видеозапись (данному контенту потенциальные потребители доверяют больше всего).
4. Преимущества бренда
Преимущества бренда желательно разместить в блоке, который будет выделяться цепляющим и захватывающим заголовком. Далее составляем подробный список выгоды для клиентов от сотрудничества с вашей компанией. Все преимущества должны отвечать на вопрос посетителя «Зачем мне это нужно».
5. Описание услуг
В данном блоке до пользователя доносится реальная ценность сотрудничества в виде перечня услуг.
6. Обратная связь с клиентами
Форма для обратной связи с помощью которой клиент сможет связаться с вами и оставить заявку.
Пример создания лендинга своими руками помощью сервиса LPmotor
Давайте попробуем для примера создать простую целевую страницу в конструкторе LPmotor.
Первое, что нам нужно сделать это зарегистрироваться в LPmotor .
В личном кабинете кликаем на зеленую кнопку «Создать сайт».
Теперь вам предложат 3 варианта на выбор: создать сайт из готовых блоков, из шаблона или с нуля. Самый простой и быстрый вариант — создать сайт на основе готового шаблона, поэтому мы выбираем именно этот вариант.
Теперь нам нужно выбрать шаблон, который лучшей всего подойдет для вашей ниши. Для удобства все шаблоны разбиты на категории: товары, услуги, инфобизнес, красота и здоровье и т.д.
Для примера я выбрал лэндинг, который подойдет для свадебного фотографа. Сразу после того, как вы выберете подходящий шаблон система попросит оставить номер телефона на который будут приходить уведомления о заявках.
Если вы не нашли подходящего шаблона, не расстраивайтесь. Просто вернитесь на шаг назад и попробуйте создать сайт из готовых блоков или с нуля. Возможно вам придется потратить больше времени, но зато вы получите качественную и уникальную посадочную страницу, которая на 100% подойдет к вашему товару или услуге.
Теперь вы можете отредактировать шаблон под себя: поменять фотографии, написать подходящий текст, контактную информацию, перечень услуг, преимущества и т.д. Для того, чтобы отредактировать элемент, нужно просто щелкнуть на нем мышкой. Здесь все достаточно просто и понятно, поэтому вопросов возникнуть не должно.
В нижнем левом углу есть кнопка «Добавить элемент». Ей можно воспользоваться чтобы добавить в шаблон дополнительный блок, секцию или корзину.
В верхнем правом углу вы увидите зеленую кнопку «Посмотреть сайт». По ней вы можете посмотреть как будет выглядеть ваша посадочная страница.
Слева вверху вы можете выбрать вариант отображения лендинга: компьютеры, мобильные устройства, и отредактировать каждый вариант в отдельности.
В правом верхнем углу есть пиктограмма с шестеренкой. Если вы щелкните по ней, появиться выпадающее меню. Здесь можно выбрать «Управление» и вы попадете в административную часть вашего сайта.
Отсюда вы сможете управлять всеми функциями лендинг пейдж.
Самое первое, что нужно сделать, это изменить домен.
Вы можете выбрать любой домен третьего уровня (sitename.lpmotortest.com) или купить домен второго уровня (sitename.com). Если у вас уже есть доменное имя, зарегистрированное у стороннего регистратора, вы можете подключить этот домен к вашему сайту.
Следующий шаг — подключение счетчиков посещаемости Яндекс Метрика или Google Analytics.
Для этого нужно в иметь аккаунты в Яндекс и Google. Счетчики создаются в один клик и не требуют никаких специальных знаний.
В разделе оповещения вы можете настроить оповещения о поступивших заявках по SMS, электронной почте, в Телеграм или ВК.
В разделе «Аналитика» вы можете посмотреть посещаемость сайта по разным каналам трафика и воронку конверсии.
В разделе «Расширения» вы сможете подключить к сайту необходимы дополнительные сервисы и виджеты: корзину товаров, геотаргетинг, CRM, Яндекс касса и т.д.
Самый последний шаг — публикация сайта.
Для этого нужно перейти на вкладку «Рабочий стол» и нажать кнопку «Опубликовать». С этого момента ваш сайт будет доступен пользователям по всему миру.
Я рассказал только о самых важных функциях конструктора. Наверняка, у вас еще возникнут вопросы: что такое A/B тесты, для чего нужны SEO настройки, как настроить анти-спам фильтр и т.д. На этот случай предусмотрены обучающие видео. Посмотреть их вы можете по ссылке «Обучение» в верхнем правом углу экрана. Если возникнут какие-нибудь вопросы, смело пишите в службу поддержки. Кроме того, можете также написать в комментариях к этой статье. Обязательно отвечу всем.
Заключение
Сегодня мы рассмотрели наиболее оптимальные площадки для создания собственного одностраничного сайта для продвижения товаров и услуг. Помните о том, что эффективность проекта будет зависеть не только от платформы, но и от правильности расположения блоков, а также размещенной информации.
Успешная посадочная страница - это уже 90% успеха бизнеса. В век цифровых технологий хорошо сделанный лендинг, состоящий из одной страницы, может обеспечить множество клиентов, в то время как крупные сайты с десятками страниц могут стоять без заказов. В чем секрет успеха лендинга? В этой статье попробуем разобраться.
Что такое лендинг?
Лендинг (или landing) - это посадочная страница, которая должна мотивировать посетителя купить товар или услугу.
Технически это просто сайт, состоящий из одной страницы с необходимым минимум информации. Задача лендинга - побыстрее завлечь и убедить, склонить зашедшего на страницу человека к покупке или заказу услуг.
Как люди попадают на лендинги? Обычно с другого сайта - из поисковика, какого-то партнерского сайта или другого сайта с рекламой. На лендинг может вести рекламный баннер или ссылка из социальной сети (скажем, твиттера, инстаграма).
Обычно лендинг не рассчитан на широкий ассортимент - доказано, что чем шире выбор, тем сложнее человеку принять решение, поэтому на лендинге обычно представлена пара-тройка возможных вариаций (а то и вообще один вариант).
Лендинг - это собрание всей необходимой для продажи информации, ее концентрация, и в то же время лендинг - это яркая обертка, в которую вам нужно завернуть ваш продукт, чтобы он стал привлекательным для конечного пользователя.
Итак, чтобы лендинг был успешным, вам нужно обратить внимание на следующие пункты.
1. Призыв к действию
Цель посетителя - совершить действие. Например, совершить покупку, заказать услугу или подписаться на рассылку. Для того, чтобы ваш призыв к действию работал, вам нужно:
- четко и понять дать понять, какова конечная цель вашего лендинга ; что должен сделать посетитель. Поэтому пишите четко и понятно;
- использовать один призыв к действию - не надо размещать множество кнопок, ссылок или различных форм, сделайте один заметный призыв, на котором пользователь сможет сконцентироваться;
- сделать кнопку. Кнопка привлекает гораздо больше внимания, чем просто надпись. Поэтому призыв к действию в виде кнопки будет более заметен и эффективен;
- добавить причину сделать действие именно сейчас. К примеру, если пользователь зарегистрируется сейчас, то он получит доставку бесплатно (или скидку 10%, или что-то еще). Предложение надо расположить рядом с призывом к действию, чтобы оно могло влиять на принятие решения покупателем.
2. Эффективный заголовок
Хороший заголовок - важная составляющая успеха вашей лендинг-страницы. Тут важно иметь в виду два момента: пользователь должен понять, куда он попал (и правильно ли он попал), а также то, что эта страница может ему предложить.
Заголовок должен заинтересовать и заставить пользователя провести на странице как можно больше времени (и выполнить целевое действие).
Ключевой момент - достаточно ли заголовок интересен для того, чтобы дальше просматривать страницу? Если ответ «да», то заголовок придуман удачно; если «нет», то имеет смысл поменять его.
Несколько правил эффективного заголовка:
- краткость и простота: чем проще и короче заголовок, тем быстрее пользователь сможет уловить и заинтересоваться тем, что ему предлагает лендинг;
- заголовок должен быть расположен вверху страницы и иметь привлекательный дизайн;
- заголовок лучше оптимизировать для SEO, если вы хотите, что посетители к вам шли в том числе из поисковых систем.
3. Простая структура
Так как лендинг это в общем понимании даже не сайт, а просто одна страница, то лучше его делать максимально простым и понятным. Если вы перегрузите лендинг, то пользователь может запутаться и не совершить желаемое действие. При создании лендинга ориентируйтесь на широкую аудиторию - ваша страница должна быть понятна всем, поэтому будет лучше, если вы разместите только нужные, необходимые элементы.
Чтобы создать эффектную структуру, основывайтесь на следующих принципах:
- лендинг должен мотивировать посетителя совершить целевое действие. Все, что этому не способствует, следует убрать;
- лендинг должен давать пользователю совершить одно основное действие. Если действий будет несколько, это может запутать посетителя, и он уйдет с сайта;
- лендинг должен иметь свободное пространство. Не мельчите и не пытайтесь вместить слишком много информации, кнопок, картинок;
- зрительная информация считывается быстрее буквенной: используйте иллюстрации и инфографику, это также благоприятно отразиться на дизайне.
4. Контроль взгляда
Следите за взглядом посетителя. Прикиньте, как посетитель окажется на вашей странице, куда он посмотрит и что захочет сделать. Главный вопрос на этом этапе: ведет ли все к выполнению целевого действия?
Траектория взгляда пришедшего пользователя должна вести его к выполнению целевого действия. Если вы правильно и логично расположите все элементы страницы, то это сможет гарантировать успех вашего лендинга.
Что можно использовать?
- Графические элементы : стрелки, иконки, контрастные оттенки, emoji. Все, что может переключать взгляд пользователя от одного элемента к другому.
- Последовательность элементов . Не только зрительная, но и логическая: представьте, что вы рассказываете историю - логично ли идут блоки, правильно ли раскрывается информация?
Если вы сомневаетесь в своей объективности, привлеките к исследованию друзей и знакомых. Пусть они расскажут обо всех своих ощущениях: что они видят вначале, что видит потом, на что обращают наибольшее внимание, что их смутило, что понравилось, а что огорчило. Даже такой простой тест с несколькими людьми может помочь вам значительно улучшить свой лендинг.
5. Соответствие рекламе
Если на лендинг ведет реклама, то ее содержание должно полностью совпадать с тем, что вы предлагаете в итоге: стоимость, скидка, вид товара и т.д. Если что-то будет не совпадать, это приведет к обману ожиданий и негативной реакции в целом.
Не забывайте, что вы можете, во-первых, создать отдельный лендинг для каждой рекламной кампании, а во-вторых, сама страница может меняться в зависимости от источника трафика.
6. Доверие
Выполнит ли посетитель целевое действие или нет - это может также зависеть от доверия, которое у него вызовет лендинг. Подумайте, какие вопросы крутились бы у вас в голове, окажись вы на таком сайте. Какие сомнения может вызвать материал, и как можно эти сомнения рассеять.
Обычно это могут быть такие способы:
- гарантия на товар;
- тестовый период (если речь об услуге);
Которые создаются, чтобы продавать один товар и услугу.
Для этого важно преподнести информацию так, чтобы превратить простых посетителей сайта в покупателей. Но перед этим следует понимать, что представляют собой базовые элементы лендинг пейджа. Дизайн сайта и, собственно, статьи, направлены на привлечение внимания и конвертирования посетителей в будущих клиентов. При создании лендинга нужно учитывать, что правильно подобранная картинка и хорошо написанный текст .
|
Перед началом создавания, следует хорошо продумать концепцию сайта. Не только представление вашего продукта, но и как будет происходить его подача, почему это должно быть интересно людям.
Где сделать прототип лендинга? Можно обратиться к специалистам, которые давно занимаются подобными делами, а можно придумать всё самому. Вначале попробуйте представить всё на черновике и лишь потом переходите на создание сайта лендинг пейдж. И со временем вы сами начнёте понимать, что эффективно, а что следует изменить или убрать. Правила продающего лендинга гласят, что должно быть создано чёткое предложение товара. , чтобы посетитель хотел сам приобрести продукцию, и чтобы у него не оставалось вопросов, что конкретно ему предлагается. То есть данный оффер должен быть чётко сформулирован и предельно ясен.
Это поможет потенциальному покупателю сориентироваться на сайте, не только в плане цен, но и актуальности товара. В основном, лендинг существует за счёт смешивания копирайтинга и инфографики. Лендинг страница, можно сказать, должна заменять менеджера, чтобы в итоге при заказе или связи с сотрудником, человек уже знал нужную ему информацию и лишь уточнял незначительные детали или просто подтверждал свои действия. Такая подача сайта очень ценится. К примеру, людьми, которые предпочитают систематизацию и простоту обработки заказов общению. Создание сайта лендинг пейджЧто нужно учесть при создании лендинга ещё?
Не стоит, конечно, забывать про заголовок - одну из важных вещей при создании лендинг пейджа. От заголовка зависит, пойдёт ли человек дальше. И если название его привлекло, то он заинтересуется и продолжит просмотр вашей страницы. А там и до покупки недалеко. Так получается, что вначале привлекает фантик, и лишь потом мы узнаем начинку.
|
Например, у вас уже есть идея бизнеса, но вы ещё не предприняли попытки продвижения. Для начала просмотрите сайты конкурентов, чтобы понимать, как именно вам придётся представлять свой товар, чтобы он выглядит лучше по сравнению с ними. Сами проанализируйте их информацию и выделите для себя то, что происходит в вашем деле, черпните новых идей. Так вы поймёте, как сделать макет сайта лендинг.
Лучше воспринимается 80% того, что человек видит, и 20% того, что читает. Так что следует также правильно подбирать оформление и делать небольшие по объёму тексты. Просмотрите примеры других страниц, чтобы знать, . Очень помогают сравнительные таблицы.Позволяющие сегментировать трафик по конкретным целевым запросам и таким образом повышающие общую конверсию сайта, - сегодня являются популярным инструментом интернет-маркетинга. Их главное преимущество в том, что они дают возможность конвертировать пользователя в клиента здесь и сейчас - на этой же посадочной странице. Сегодня мы поговорим о том, что важно держать в голове при создании лендинга.
- Помните главное: эффективность лендинга зависит от вашего умения выстраивать гипотезы (что может понравиться пользователям?) и проверять их А/В-тестированиями .
- Вначале займитесь созданием прототипа лендинга: продумайте его концепцию (что вы предлагаете? как вы предлагаете? почему ваше предложение выгодно потенциальному клиенту?), поразмыслите над формой подачи информации, выстроите «на бумаге» структуру вашего лендинга, набросайте черновые текстовки - и только после этого начинайте делать лендинг «начисто». Правьте тексты в процессе работы над страницей.
- Создавайте предельно четкий оффер - у посетителя не должно возникать вопросов, что именно вы предлагаете: отличные зеленые ковры или все-таки два ковра по цене одного до конца текущего месяца.
- Грамотно продумайте размещение на странице основных элементов лендинга: оффер, призыв к действию (Call To Action, СTA), форма заказа, блок с преимуществами, продающие триггеры, социальные доказательства (отзывы, например), визуализация вашего предложения (картинка).
- «Обычные» тексты (в стилистике статьи), как правило, не работают в лендингах.
- Текст лендинга - предельно лаконичен, предельно информативен, предельно плотен.
- А главное - он небольшой по объему.
- Ближе всего к правде будет высказывание: в лендинге используются не тексты, а «текстовки».
- Но! Не смотря на сказанное в предыдущих трех пунктах, не стоит недооценивать возможности текста. Текст - одна из самых эффективных форм выражения вашего коммерческого месседжа. Что еще для людей более важно, чем язык?
- Работайте над текстовками лендинга долго и тщательно, выверяя каждое слово.
- Не допускайте ошибок - это «смазывает» впечатление от вашего, может быть (не будь ошибок), превосходно работающего лендинга.
- «Не кричите» в лендинге. Кто-то думает иначе: чем креативнее и побудительнее текстовки, чем больше в них «рекламных» выражений и «кричащих» фраз (купите прямо сейчас, другой такой возможности у вас не будет, на всех не хватит, спешите, бегите, отдайте скорее нам ваши деньги!), тем эффективнее лендинг. Да, есть такая точка зрения: вся сила рекламы в яркости, экспрессивности и побудительности. Я же лично считаю, что кричат слабые, сильные - убеждают. Экспрессия и навязчивость традиционной рекламы надоела людям. Их нельзя заставить купить, их можно только убедить. Единственный путь - дать максимум полезной для совершения выбора в пользу вашего продукта информцаии, но не навязывать: все равно не подействует.
- Не нужно «заманивать» и «интриговать» - пишите по-человечески, чтобы можно было составить абсолютно точное представление о вашем продукте. Колбасу с каким названием вы предпочтете купить для семейного ужина: «Пикантная Снежана» или «Телячья»? Я лично - последнюю.
- Человек хорошо запоминает 80 % из того, что видит, и только 20 % - из того, что читает. Именно поэтому так важна визуальная составляющая в лендинге.
- Не пытайтесь дать всю инфорацию в текстовом виде. Такой лендинг вряд ли не сконвертит вам клиентов. Активно используйте потенциал вашего дизайнера.
- Используйте для передачи информации не только текст, но и графические элементы (знаки, символы, простые таблицы и т.д)
- В дизайне главное - не красота, а его функциональность: все части целого должны работать на общую задачу.
- Лендинг существует на стыке копирайтинга,
Эффективная посадочная страница (landing page) — чудо инженерной мысли, невероятный конструкторский проект, где нет ничего лишнего и все сделано для того, чтобы человек мог быстро получить полезную ему информацию и совершить нужное вам действие. Скажу сразу, что нет универсального ответа, как сделать на 100% успешный лендинг. Вы можете для начала постараться не повторять ошибок других и тестировать, тестировать, тестировать!
Сегодня мы поговорим о следующих вопросах:
- Размер шрифта
- Акценты
- Типы шрифта и их разнообразие
- Длина строк и верстка
- Заголовки
- Размер блоков текста и их компоновка
- Иллюстрации
- Иконки и списки
- Фон и цвет шрифта
- Психология цвета
Мало кто задумывается о том, что успешность посадочной страницы (мы говорим не только о landing page) зависит не только от верного маркетингового предложения, точного попадания в ЦА и правильного контента, но и от грамотного оформления. У вас есть всего несколько секунд, чтобы произвести хорошее впечатление на потенциального покупателя и «зацепить» его. Если точно - 5 секунд.
Какой размер шрифта лучше?
В веб-дизайне размер шрифта имеет значение как нигде. Человек оценивает степень удобства только по своим ощущениям и моментально закрывает страницу, написанную очень мелкими буквами. Он делает это, потому что уверен: он обязательно найдет нужную ему информацию в приемлемой форме. Глупо терять клиента из-за того, что он решил не напрягать глаза.
Размер экранного шрифта измеряется в нескольких вариантах единиц: пикселях (px), процентах (%) и ems (em). Px - самая известная и старая единица измерения, которая, в отличие от % и em, не дает возможности масштабировать текст для чтения на различных экранах, т. е. это абсолютный размер шрифта, и пользователь не сможет его адаптировать под свои вкусы и предпочтения.
Когда-то стандартным для всех сайтов был размер 12 px, но со временем стало понятно, что для экранов он мелковат, и от него отказались в пользу более крупного шрифта. Сегодня в ходу шрифт не меньше 14-16 px или его аналог в em и %.
1 em = 16 px = 100% Times New Roman (serif).
Обратите внимание, что не все шрифты имеют одинаковый размер: 16 px Arial больше, чем например версия 16 px Trebuchet.
16 px - это оптимальный размер, потому что набранный им текст на экране выглядит примерно так же, как текст, напечатанный в качественной книге (мы не берем карманные форматы и т. д.). И он отлично подходит для людей, имеющих проблемы со зрением, или тех, кто старше 40 и видит уже не так хорошо, как в 20. Например, текст, который вы сейчас читаете, - это Arial 16 px. Если вы распечатаете листок бумаги с шрифтом 10 px и поместите рядом с экраном, то увидите, что размеры шрифтов будут одинаковые. Так что мой выбор это 16 px. Отдельные, не значимые куски текста можно делать 14 px. Многие используют в качестве основного шрифта 14 px, это допустимый вариант, но если ваша ЦА старше 40 лет, то я бы точно выбрал 16 px.
Кроме того, имеет смысл специально увеличить шрифт, если предлагаете читателю «простыню» - это снизит нагрузку на глаза и не позволит человеку сдаться на середине текста. Вы могли заметить, что большинство «читалок» предлагают более крупный шрифт, чем сайты.
Как привлечь внимание к заголовкам?
Заголовки и подзаголовки должны четко отличаться по размеру и сразу бросаться в глаза: шрифт должен быть контрастным по отношению к остальной массе текста. Это нужно для того, чтобы быстро сориентировать пользователя, показать ему все самое важное, привлечь его внимание, «зацепить» и заставить остаться.
Для контрастности смело выделяйте заголовки другим шрифтом (кстати, в них допустимо использование шрифтов с засечками). Обязательно берите для заголовков больший шрифт - это привлечет к ним дополнительное внимание.
В заголовке также допустимо использование прописных (Caps Lock) букв, если он не слишком длинный, иначе это затруднит его восприятие.
Мы ежедневно встречаем огромное число напечатанных слов - в книгах, на экране компьютера или телефона, в брошюрах, каталогах и т. д. Наш мозг привык обрабатывать этот поток информации, моментально распознавая миллионы слов всего по нескольким буквам.
В повседневной жизни мы редко встречаем ситуацию, когда какие-то предложения в тексте написаны прописными буквами. И как только мы натыкаемся на них, это затрудняет наше восприятие и понимание контента. Мозг начинает разбирать каждую букву отдельно и потом уже складывает их вместе. Я считаю, что правильный заголовок содержит одну прописную букву - в начале!
Пример того, как делать не надо. Заголовок и подзаголовок написаны прописными буквами.
Подчеркивание в заголовках допустимо только в том случае, если это линк.
Например, так:
Можете экспериментировать с цветами и эффектами (инверсия, цветная плашка и т. д.).
Применяйте в заголовках кавычки - они привлекают взгляд.
Но лучше любой типографики заголовок выделит хороший копирайтинг. Почитайте пару книг и дерзайте! Вот несколько советов:
Заголовок или подзаголовок в форме вопроса вызовет интерес у читателя.
Заголовок должен быть не длиннее 140 символов.
Заголовок может быть усилен подзаголовком, раскрывающим некоторые детали.
Какой шрифт выбрать?
Традиционно для веб применяют шрифты, у которых отсутствуют насечки (шрифты семейства sans-serif, или «рубленые»): Tahoma, Arial, Verdana, Trebuchet и аналогичные. Зачем это нужно? Чтобы избавить читателей вашего текста от «лесенок» по краям символов, которые появляются на экранах с низким разрешением.
Вы вольны выбирать любой шрифт, но помните, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. В противном случае будет показан самый похожий из стандартного набора. Рекомендую вам не слишком увлекаться и использовать проверенные шрифты, которые часто встречаются на сайтах.
Что касается разнообразия шрифтов на одной странице, то тут лучше меньше, чем больше. Про то, как лучше расставить акценты, поговорим позже.
Лайфхак: если вы присмотрели какой-то сайт, где вам нравится шрифт, но вы не можете его распознать, зайдите в секретную библиотеку - там есть ссылка на полезное приложение, которое позволит получить всю нужную информацию. (приложение WhatFont для Google Chrome)
Как правильно расставлять акценты
Всегда помните, что пользователь читает не более трети созданного вами контента, поэтому помогите ему сразу найти нужное! Самый простой способ обратить на что-то внимание человека внутри основной массы текста - выделить это с помощью:
-
НАПИСАВ ВЕРХНИМ РЕГИСТРОМ (ПРОПИСНЫМИ),
выделив другим цветом.
полужирного написания (bold),
Полужирное написание
Имеет смысл выделять им не отдельные слова, а целые смысловые конструкции. Как вариант, такой вид выделения можно использовать в списках и подзаголовках, чтобы выделить главную мысль.
Курсив
Курсив в веб - зло. Думаю, вы уже догадались почему. Если нет, вернитесь к разделу про типы шрифта. Курсив создает те самые «лесенки». Если берете курсив, то следите за размером: нет ничего хуже мелкого курсива. Я считаю, что курсив в веб уместен только в оформлении цитат.
Немного о ВЕРХНЕМ РЕГИСТРЕ
Можно, но не злоупотребляйте! Выше я говорил, как наш мозг реагирует на предложения, полностью написанные прописными буквами. Но есть еще один важный аспект. Текст, полностью написанный заглавными буквами, в интернет-среде означает крик. Если в тексте встречается предложение, написанное прописными, - вы его прокричали! Подумайте, уместен ли «повышенный тон» в конкретном случае.
Разряжение
Не пишите слово, используя пробелы между букв. Такое в ы д е л е н и е не будет видно в тексте. Человек просто запнется на слове, что отвлечет его от главной мысли текста.
Подчеркивание и Ссылки
Хотите подчеркнуть? Только ссылку! Если на сайте есть некликабельный подчеркнутый текст, вы облажались. Убирайте! В веб этот вид выделения принадлежит гиперссылкам. Традиционно гиперссылки оформляются как выделенный голубым подчеркнутый текст. Это устоявшийся в интернете стандарт, и я не рекомендую менять его без веских на то причин. Выделенная другим цветом ссылка выглядит странновато и непонятно. Даже Google и «Яндекс» оставили их именно в таком варианте, хотя могли бы позволить себе задать новую моду.
Обратите внимание, что иногда (раньше так было в обязательном порядке) цвет ссылки меняется на фиолетовый, если пользователь уже прошел по ней. Ниже приведен пример того, как может раздражать цветная гиперссылка в фиолетовых тонах: я не кликал по линкам, а они намекают на обратное.
Типичной ошибкой является оформление ссылок в корпоративных цветах компании.
Как правильно оформить Call To Action?
Обратите особое внимание на оформление Call To Action. Если вы призываете кого-то «купить сейчас» или «запустить бесплатную пробную версию», убедитесь, что вы используете цвета, которые будут привлекать внимание людей и мотивировать их к действию. «Кнопка» должна быть яркого и контрастного цвета.
Что касается расположения Call To Action, то он всегда есть на первом экране и в конце страницы и может несколько раз повторяться в тексте (это зависит от длины страницы).
Вот некоторые правила оформления «кнопки»:
Ее цвет должен быть контрастным по отношению к цветовой палитре, чтобы привлечь внимание пользователя. Очень распространенная ошибка - делать кнопку в цвете всего сайта. Она просто теряется.
Она должна использоваться только для ключевых призывов к действию, так что не применяйте ее для других нужд.
Вот показательные примеры. Ниже мы видим, что плашка «Личный кабинет» в правом верхнем углу перетягивает на себя внимание. Она не дает пользователю «узнать цену». Это не удачный вариант.
А тут кнопка «Купить» красного цвета, как и кнопка «Найти», не считая того, что логотип имеет более насыщенный цвет. Это так же не удачный вариант.
А вот правильный пример. Кнопка оранжевая, но все равно сразу бросается в глаза.
Длина строк и верстка: главные правила
Верстка в один столбец считается наилучшей с точки зрения повышения конверсии посадочной страницы. Дело в том, что, заплатив за привлечение человека на сайт, вы не можете себе позволить потерять его!
Забудьте о том, чтобы дать человеку право выбора («что бы еще тут почитать»), - ведите его по нужной вам тропинке, предугадывая и контролируя каждый его шаг. Это возможно только при оформлении контента в одну колонку. Несколько колонок допустимы только тогда, когда вы хотите подчеркнуть разницу предложений.
Ниже приведены два примера. Если абстрагироваться от специфики услуг, то сайт «Собери постель» при прочих равных будет эффективнее, потому что клиент быстро совершит целевое действие. Ему все разложили по полочкам и не дают возможность остаться наедине со своими размышлениями. «Клиника Маршака», наоборот, предоставляет человеку как минимум два текстовых блока, конкурирующих за внимание.
Трехколонная верстка, как в примере с клиникой, - путь в никуда, который уместен только для бескрайних просторов интернет-СМИ, которые «продают» своему читателю пару десятков баннеров на каждой странице.
Верно: Не верно:
Оптимальная длина строки (независимо от типа страницы) - от 50 до 70 знаков. Текстовые колонки, ширина которых превышает это значение, читаются с экрана крайне сложно. С другой стороны, если строки очень короткие (меньше 20 знаков), а текста много, это также будет раздражать читателя - очень часто приходится переводить взгляд.
Проблема длины строк становится еще более актуальной с появлением адаптивной верстки и требует от разработчика аккуратности и внимательности: разбег размера экрана сегодня варьируется от 5’’ до 55’’.
Что касается выравнивания строк, то известно, что колонки текста, которые выравниваются по левому краю, помогают читателю лучше сосредоточиться на содержимом, в результате чего человек прочитывает больше текста. Выравнивание по правому краю используется очень редко.
Выравнивание по центру допустимо только в широких колонках, иначе вы получите разное количество символов в строке и разряженный текст. Подобное выравнивание, выхватывающее человека из привычной зоны комфорта (когда все ровняется по левой стороне), может быть вам на руку: оно привлечет дополнительное внимание к тому, что вы пишете. Но не переусердствуйте: 5 строк в блоке с выравниванием по центру, не больше!
Как оформить текстовый блок?
Структура любой страницы состоит из блоков. Их количество и наполнение зависят от целей сайта.
Правило одно: текстовый блок не должен быть больше экрана - каждая мысль, которую вы хотите донести до человека, должна умещаться на одной странице без скролинга. Размер высоты экрана выбирайте сами, исходя из того, какие экраны в приоритете у вашей ЦА, - смотрите аналитику.
Обратите внимание, что россияне стали заходить в интернет через мобильные устройства чаще (51%), чем через обычные компьютеры. Смартфоны и планшеты - совершенно другой тип экрана, поведения и мышления пользователя! Порой специальная посадочная страница для мобильных устройств дает большую конверсию, чем просто адаптированная верстка.
Что касается компоновки картинки, заголовка и блока, то тут есть много вариантов, но вот три классических.
Картинка слева , блок с заголовком и текстом справа. Очень удачный вариант: картинка привлекает внимание к тексту (eye catch).
Картинка справа , блок с заголовком и текстом слева - тоже популярный вариант, но проигрывает первому, потому что все внимание достается картинке.
Картинка сверху , заголовок и текст внизу - неплохой вариант, когда надо «показать товар лицом».
Мне не очень нравится, когда текстовые блоки верстают в шахматном порядке, потому что это отвлекает читателя - он не понимает, на чем в первую очередь остановить взгляд: на картинке или на тексте. Хотя такой способ компоновки содержания мы можем наблюдать на многих сайтах.
