Размер лендинга | ЗЕКСЛЕР
Размер первого экрана
Первый экран – это то, что видит пользователь при открытии страницы. Здесь стоит задача – заинтересовать потенциального клиента. Первый экран соответствует высоте экранов устройств пользователей. Экраны бывают совершенно разных размеров, но чаще встречается высота в 700-1000 пикселей. Поэтому первый экран лендинга следует разрабатывать в соответствии со среднестатистическим разрешением. Отметим, что сегодня большинство людей пользуются мобильными устройствами, поэтому лучше сделать лендинг, подстраивающийся под любое разрешение экрана.
Разработка первого экрана лендинга считается самой важной частью работы веб-дизайнера. Открывая несколько ссылок одновременно, пользователь тратит 3-6 секунд на оценку каждой из них, если страница изначально посетителю не интересна, то более вероятно, что он ее просто закроет и начнет искать дальше. Первый экран должен вызвать желание остаться и пролистнуть вниз для дальнейшего изучения страницы.
Шрифты для лендинга
Правильное восприятие информации лендинга зависит от подобранного шрифта. Для основного текста наиболее подходят шрифты с засечками или рубленные шрифты. Размер должен быть не менее 12 пунктов, лучшим вариантом является – 14 и 16 пунктов. Заголовки можно увеличить от 18 и до 32 пунктов. Посетитель лучше воспринимает крупные буквы, мелкие и непонятные шрифты вызывают раздражение.
Оптимальная структура лендинг-пейдж
Структура успешного лендинга выглядит следующим образом:
- первый экран;
- «тело» лендинга или основные экраны;
- последний экран.
Внутри предыдущих блоков лендинги должны иметь следующие элементы:
- Дескриптор.
- Контакты.
- Уникальное торговое предложение.
- Визуальное представление товара.
- Форма для отправки контактных данных посетителей сайта.
- Преимущества.
Также в лендинг могут добавляться следующие элементы:
- принципы работы компании;
- акции с обратным отсчетом и формой отправки контактов;
- полный блок с контактами фирмы;
- портфолио с примерами выполненных работ;
- награды, сертификаты, грамоты.
Настройка элементов лендинга
Дескриптор – служит для описания сути всего лендинга. Работает в паре с заголовком и логотипом. Посетитель, который зашел на сайт, должен сразу понять, что предлагает сайт.
Контактные данные – обычно номер телефона для связи и адрес. Если посетителя заинтересовал предыдущий блок, дальше он захочет узнать, как это получить. Здесь также можно добавить кнопку – «заказать обратный звонок».
УТП – такое описание услуги и товара, которое поможет пользователю понять, почему он должен остановить выбор на вашем продукте.
Визуализация товара – демонстрация товара/услуги с использованием фото- или видеоматериалов. Здесь стоит задача позволить будущему клиенту прочувствовать продукт, представить его в личном пользовании.
Контакты посетителя – посетитель оставляет имя, телефон и при необходимости адрес электронной почты. В данном блоке можно заинтересовать пользователя преимуществами за оставленные контакты, например, скидкой при заказе продукта.
Преимущества – описываются достоинства компании и основные отличия от конкурентов.
Необходимо уделить внимание следующим деталям лендинга, расположенным чаще всего на первом экране:
- заголовок – краткий и четкий, отображает суть предложения страницы;
- логотип компании в виде изображения;
- описание продукта и его свойств;
- отзывы клиентов – помогают повысить уровень доверия новых посетителей;
- при наличии аккаунтов в социальных сетях – иконки, нажав на которые, можно взаимодействовать с продуктов в других Интернет-ресурсах.
Создание дизайна Landing Page / Habr
Landing Page – (далее по тексту
При разработке целевых страниц можно столкнуться с двумя главными проблемами, которые могут привести разработчика в ступор или серьезно повлиять на конечный результат не в лучшую сторону. Первая проблема – тупой «продающий» контент. Вторая проблема – отстойное оформление. Крайне редко встречаются целевые страницы, которые имеют хорошее содержание и выглядят достойно. Чаще всего целевые страницы представляют собой унылый шлак.
Так научимся же создавать качественные и красивые целевые страницы. Разобьём урок на 3 части.
Хронология изложения материала будет идти ОТ НАЧАЛА ДО КОНЦА, так что вы можете смело брать эту статью на вооружение при разработке своего очередного продающего шедевра. Здесь я постараюсь собрать и учесть абсолютно все, что имеет отношение к опыту человечества в разработке целевых страниц и то, что действительно работает, пока такой формат продаж еще актуален.
После теории, в разделе «Практика», мы создадим дизайн, не побоюсь этого слова, «правильной» целевой страницы, с учетом всех рассмотренных правил и рекомендаций.
Часть 1. Содержание Landing Page
1.1 Текст – это всё
В первую очередь, нужно написать текст. Просто написать текст, открыть Word и написать текст. Текст заголовка, текст предложения, текст отзывов. Проблема многих, даже опытных веб-дизайнеров заключается в том, что они начинают свою работу с окна Фотошопа, а не текста. Нужно взять себя в руки, набраться терпения и делать все по порядку, если хотите сделать действительно качественную целевую страницу, а не производить на свет очередное унылое творение, которое мало того, что не выполняет своей функции и не является инструментом в принципе, но еще, как бонусом, отрицательно сказывается на вашем общем самочувствии и вызывает фрустрацию от собственной некомпетентности при сдаче проекта клиенту.
1.2 Заголовок целевой страницы
Первое, что вы должны понять – целевая страница создается не для естественной поисковой выдачи, а для рекламы, для конкретного запроса или запросов, под которые будет куплена соответствующая позиция или место на площадке. И вот здесь множество веб-дизайнеров начинает лажать по-полной. Они начинают выдумывать какие-то непонятные заголовки, типа – «Вы обратились по адресу», «Мы – лучшие в своем деле», «Мы такие крутые, что нам в принципе даже не нужно писать о том, чем мы занимаемся».
Можно усилить заголовок словами «Лучшие, быстрые, самые мощные» и т.д. В результате должно получиться что-то вроде «Умные роботы пылесосы iRobot Roomba в Москве». Не стесняйтесь, это реально работает.
1.3 Меньше воды в тексте
Тут кроется очень заезженная, не всегда очевидная и, в то же время – серьезная ошибка. Вода. Пользователь чувствует воду, он читает текст до тех пор, пока его не начнет очень жестко тошнить от вашего текста. И даже если бы не было текста, а была только яркая картинка пылесоса в заголовке с ценой и кнопкой «Заказать» — то 50 из 100, возможно и купили бы этот пылесос. Но благодаря вашему тексту и потугам в сочинениях, на которые вы убили пол дня – целевая аудитория разбегается во все стороны с тошнотными позывами в сторону горе-страницы и ее автора, в частности.
Избавляйтесь от лишних и ненужных слов. Не нужно бояться, что страница будет пустая, не нужно забивать ее только для того, «чтобы было». При грамотной работе в результате вы получите гармоничную целевую страницу. Главное, не торопитесь.
1.4 Не обманывайте
Если вы дизайнер целевой страницы, на вас ложится серьезная ответственность, вы должны проследить, чтобы вся информация была достоверной. Очень часто клиент и сам не понимает, к каким ужасным последствиям может привести обман и не достоверная информация и с радостью идет на поводу у некомпетентного маркетолога или даже сам предлагает разместить такую информацию на странице. Все тайное становится явным, не забывайте об этом. Найдите преимущества, которые реально существуют, обыграйте и преподнесите их красиво. Не нужно выдумывать то, чего нет и высасывать из пальца репутацию клиента.
1.5 Выгода/Преимущества
Но будьте осторожны. Иногда клиенты, которые заказывали целевую страницу, отправляли мне список выгод, который был, мягко говоря, высосан из пальца. Проанализируйте реальные выгоды, а не только те, которые видит продавец. Его оценка по понятным причинам может быть не объективной и выглядеть довольно глупо в глазах реального покупателя. Хотя такое происходит не часто и прислушиваться к заказчику нужно обязательно, так как он работал с продуктом довольно продолжительное время и может снабдить вас нужной информацией. Анализируйте.
Постарайтесь как можно интереснее оформить выгоды в дизайне. Не стесняйтесь использовать инфографику, персонажей, интересное визуальное оформление, маркеры. Поработайте над этим. В верстке добавьте анимацию.
1.6 Указывайте на то, что товар или услуга являются новинкой
Да, как бы это ни звучало странно, но целевая аудитория очень расположена к подобного рода заявлением. Слова «Новый», «Новинка», «Современный», «Свежий» магическим образом влияют на конверсию целевой страницы весьма положительно. Не стесняйтесь, в общем.
1.7 Обязательно размещайте отзывы
Дополню. Размещайте НАСТОЯЩИЕ отзывы. Представьте себе ситуацию, зашел потенциальный клиент на целевую страницу, ознакомился с условиями, готов уже был приобрести товар, но наткнулся на типовые, сахарные отзывы, да еще и в придачу, на фотографии, которые уже где-то видел – либо на такой-же целевой странице, либо в каком-либо фотобанке, или в результатах поисковой выдачи. После того как пользователь почувствует обман – вы потеряете его навсегда. Покупают у тех, кому доверяют, у тех, кто лжет никогда не купят.
Используйте только настоящие отзывы, с настоящими фотографиями. Напрягите заказчика пообщаться со своими лучшими клиентами, это не так сложно, как кажется, однако в результате вы будете гордиться своей качественной работой.
Каждый отзыв должен начинаться заголовком, которым может служить выдержка из текста самого отзыва с описанием преимущества для клиента, например, «Благодаря пылесосу iRobot Roomba я экономлю около 20 часов на уборке в месяц…». После заголовка идет текст отзыва. Затем, имя того, кто отзыв написал и кем он является – семьянин, ген. директор, бухгалтер, домохозяйка и т.д. Важно, чтобы отзыв был подкреплен не только хорошим заголовком, но и фотографией реального человека. Подчеркивайте важные достижения клиента (благодаря продукту или услуге, естественно) в тексте жирным выделением или цветом, соответственно и в дизайне при оформлении.
1.8 Гарантия возврата денег
Гарантия возврата денег в разы повышает доверие к продавцу и помогает посетителю целевой страницы проще расстаться со своими деньгами. Обязательно сделайте такую микросекцию на целевой странице, подготовьте соответствующий текст для нее в текстовом редакторе для быстрого оформления. Желательно, также использовать печать или визуальный компонент, иконку рядом с гарантийным текстом. Такой элемент усилит эффект восприятия.
Часть 2. Оформление Landing Page
2.1 Продукт в действии
Изображение товара в шапке или на первом экране – это всё. Если вы поняли всё безрассудство написания пустых, не подкрепленных фактами текстов, то уделите это время на создание яркой и красочной картинки товара в шапке. Уделите этому достаточно времени. Экспериментируйте, улучшайте товар или услугу в Фотошопе до тех пор, пока не получите достойный результат.
Очень часто мне приходится наблюдать такой позор, как протухшая на вид пицца в шапке, черно-белая картинка автомобиля, летающий в воздухе непонятный девайс и прочие ошибки. Нужно сделать так, чтобы продукт или услугу захотелось приобрести. Если это пицца, пусть она будет такая аппетитная, с плавленым сырком, яркая, что ее захочется съесть немедля. Добавьте красок продукту, дымка, поджаристую корочку. В пределах разумного, конечно. Покажите продукт в действии. Если это приложение для мобильных устройств – сфотайте пользователя с телефоном и вашей софтиной на борту или, на худой конец, скачайте Mockup PSD с телефоном в руке и разместите скриншот приложения в рабочем состоянии. Еду отображайте яркой, горячей и готовой к употреблению. Это должно быть в шапке. Кроме того, было бы не плохо выложить видео с презентацией продукта. Лаконичный заголовок, кнопка и продукт в действии…
2.2 Кнопка призыва к действию на первом экране
Тут ни чего сложного – размещайте кнопку призыва к действию («Заказать пылесос») на первом экране. Это, конечно, не значит, что не стоит размещать этот элемент ни где более, просто постарайтесь сделать так, чтобы, зашедший на сайт посетитель увидел возможность приобрести товар или заказать услугу сразу.
Не забывайте дублировать кнопку призыва к действию на протяжении всей страницы, но делайте это грамотно. Будет довольно глупо смотреться эта кнопка в каждой секции, после каждого элемента. Не переборщите.
2.3 Забудьте о попандерах
Забудьте о попандерах, которые выскакивают независимо от воли пользователя. Этот пережиток развития индустрии, к сожалению, иногда еще встречается. Если в первые дни вы можете заметить какой-то рост заявок, то спустя время о вас сформируется крайне негативное впечатление у аудитории. Если вы намерены работать на рынке долго и плодотворно – не используйте попандеры.
Здесь не идет речь о всплывающих формах, которые появляются при клике на кнопки призыва к действию, кнопки, нажатие на которые пользователь производит сам. Подконтрольные всплывающие формы работают довольно неплохо и не раздражают посетителя.
2.4 Не делайте много полей в формах
Все, для чего нужна целевая страница – это собрать контакт и отправить его на обработку менеджеру. Не добавляйте в формы обратной связи лишние поля. Имя, телефон. Возможно, E-mail, по ситуации. Но не более.
2.5 Не стесняйтесь показывать лица, адреса и телефоны
Банально, но человек, если видит на целевой странице – карту, телефон или фотографии сотрудников, то подсознательно он уже доверяет проекту. Мне очень часто приходится убеждать клиентов не стесняться показать лица организации, адреса и телефоны. Видимо, отголоски 90-х дают о себе знать и привычка прятаться, лишь бы только купили и отвязались, берет свое начало именно в этот период, после распада Союза, когда были тяжелые времена и «Мы выживали, как могли».
На целевой странице обязательно должны быть фотографии менеджеров, телефоны и реальные контакты. Карта обязательна, если у фирмы есть постоянный адрес.
2.6 Размещайте логотипы известных брендов
Если компания, для которой вы разрабатываете целевую страницу, каким-то образом работала с известными брендами, пользовалась услугами, техникой – обязательно внизу страницы сделайте их перечисление. Обычно такая секция называется «Наши партнеры».
Итак, мы рассмотрели ключевые моменты, которые необходимо учитывать при разработке Landing Page. Давайте объединим все вышесказанное в следующем разделе, напишем текст и создадим дизайн целевой страницы в Фотошопе.
Разрабатывать Landing Page, волею судьбы, будем для Пылесоса iRobot Roomba. Пример абсолютно рандомный и пришел в голову в процессе написания данного мануала.
Для прохождения урока нам понадобятся исходные данные, которые вы можете взять с GitHub.
Часть 3. Практика
3.1 Текст Landing Page
Итак, после изучения 1 и 2 части у нас уже есть некоторое представление о том, какой должна быть «правильная» целевая страница. Этого вполне достаточно для того, чтобы написать текст. Обратите внимание, выше были приведены основные рекомендации, но в зависимости от продукта или услуги, могут добавляться свои пункты, секции и функционал – нужно изучить объект и немного подумать.
Кроме того, наш товар имеет некоторый модельный ряд, который было бы странно не представить потенциальному покупателю.
Текст.
- Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.
- Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.
- Секция Модельный ряд (Фото – Цена – Старая цена — Купить):
- Roomba 630
- Roomba 870
- Roomba 880
- Scooba 450
- Гарантия. Текст гарантии возврата денег под моделями.
- Секция преимущества:
- Заголовок: «Преимущества перед обычным пылесосом»
- Подзаголовок: «Это исключительно «умная» техника, которая самостоятельно производит уборку помещения и после завершения работы возвращается на станцию для подзарядки»
- #1. Экономит время. Вы экономите свои силы и время, тратя его на более приятные занятия.
- #2. Не нуждается в управлении. Пылесос сам составляет для себя оптимальный маршрут, благодаря интеллектуальной системе AWARE.
- #3. Компактный. Техника не займет много места и работает без подключения к электросети.
- #4. Самозаряжаемый. Зарядки аккумулятора хватает на 2 часа, после чего робот самостоятельно возвращается на платформу для подзарядки.
- Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.
- Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).
- Секция Контакты. Адрес и карта с меткой.
3.2 Дизайн
Конечный результат всех потуг можно посмотреть здесь.
Прежде, чем начнем делать дизайн, давайте определим, что нужно учитывать при создании дизайна (общие рекомендации):
- Всегда учитывайте бренд, стиль продукта, айдентику, если таковые имеются, старайтесь рисовать сайт в одном стиле;
- Старайтесь использовать не более 3-х цветов в дизайне и несколько производных оттенков;
- Выберите приятные сочетания шрифтов для дизайна;
- Не лепите элементы близко друг к другу – это признак дурного вкуса;
- Соблюдайте вертикальный ритм при расположении элементов, дайте воздуха дизайну;
- Не делайте слишком маленький интерлиньяж (line-height) между строками в текстовых блоках;
- Не используйте картинки плохого качества в дизайне;
- Сжимайте всю графику с помощью TinyPng или подобных инструментов.
- Перед ресайзом изображения обязательно конвертируйте его в смарт объект в Photoshop, на случай, если вдруг придется увеличить картинку без потери качества.
- В данном примере максимальная ширина контента равна 1170px (сетка Bootstrap, чистый файл в архиве references/bootstrap-1170.psd).
Теперь нарисуем дизайн по составленному в п 3.1 тексту. Углубляться в основы работы с Photoshop не будем, рассмотрим ключевые моменты при создании дизайна Landing Page. Все секции будут на всю ширину макета, а контент в пределах сетки Bootstrap. Установим шрифты Raleway из папки Fonts. Размеры и цвета вы можете посмотреть в готовом макете references/ready_design.psd.
Итак, по тексту.
- Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.
Сверху разместим логотип, справа – телефон и адрес. Разместим фоновое изображение таким образом, чтобы пылесос находился слева (первые 6 колонок сетки), а заголовок целевой страницы – справа. Кроме того, разместим кнопку заявки и псевдоссылку на просмотр видео.
- Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.
У секции имеется заголовок и подзаголовок, не забываем.
- Секция Модельный ряд (Фото – Цена – Старая цена – Купить).
В следующей секции «Модельный ряд» отобразим 4 девайса. Новая цена, старая цена и кнопка заказать. Старая цена говорит посетителю о том, что работает система скидок и у него есть возможность купить аппарат дешевле. Каждый айтем размещаем в 3 колонки сетки.
- Гарантия. Текст гарантии возврата денег под моделями. Данная секция крайне желательна, но, если у продавца нет такой опции в продажах, можно не выдумывать.
- Секция преимущества:
Данную секцию реализуем также в сетке, как модельный ряд, но не используем отступы в сетке Bootstrap. При наведении курсора айтемы меняют свой вид, фотография плавно увеличивается (в верстке).
- Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.
Реализуем следующим образом, без особых наворотов, в пределах 10-ти колонок, две из которых занимает фотография и имя, и 8 колонок отведено под сам отзыв. Отзывы должны быть с заголовками:
- Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).
Обязательный атрибут целевой страницы. Не поленитесь раздобыть настоящие фотографии поддержки продукта или услуги. В сетке размещаем следующим образом:
- Секция Контакты. Адрес и карта с меткой.
Более подробную информацию об элементах дизайна, приемах работы, вы можете получить, скачав с GitHub исходник PSD с готовым дизайном.
Пост был подготовлен с целью сделать этот мир немножечко лучше.
Спасибо за внимание. Пока.
Создание Landing Page в Adobe Photoshop — пошаговая инструкция — SkillsUp
Что такое лэндинг пэйдж и с чем его едят?
Landing Page (она же лэндинг или продающая страница) — ни что иное как страница, созданная по определенным правилам для максимизации конверсий. В качестве этих самых конверсий может быть подписка на рассылку, покупка товара, загрузка демо-версии программы или любое другое действие, которое вы ожидаете от пользователя на странице.
Зачем нужны Landing page?
Потребность в так называемых «продающих страницах» возникла с бурным ростом интернет индустрии и усиливающейся конкуренцией. Благодаря грамотно продуманной логике страницы можно значительно повысить продажи не увеличивая при этом рекламных бюджетов. Лэндинги также помогают с большей эффективностью работать с привлеченным через разные каналы трафиком. К примеру, если вы используете контекстную рекламу, медийные сети и баннерную рекламу на разных площадках, то использование в качестве целевой страницы специально подготовленного лэндинга значительно увеличит ROI (возврат на инвестиции) ваших рекламных каналов. Как добавить к вашему сайту лэндинг пейдж? Вам нужно либо самостоятельно сделать эту страницу либо заказать разработку landing page у специализирующихся на этом компаний, например компании e-art. С заказом всё просто, заплатил денег — получил готовую сверстанную страницу. А вот с тем чтобы самому сделать подобную страницу дела обстоят немного сложнее. Предлагаем разобраться в создании пошагово:
Шаг 1: Подготовка
В создании лендинга мы будем полагаться на популярный инструмент 960 Grid System, который в поможет нам правильно расположить графику на рабочем пространстве чтобы потом насадить её на уже готовую схему блоков от 960 Grid System. В работе были использованы следующие шрифты: Source Sans Pro, Nevis и Bebas Neue, но вы можете использовать шрифты на ваше усмотрение. В качестве иконок использовался набор Impressionist Icons, который на данный момент является платным.
Для работы нам понадобятся скачать 960 Grid System. После скачивания разархивируйте его в папку и откройте PSD файл с 12 колонками под названием 960_grid_12_col.psd, он находится в папке templates\photoshop. Сперва нам нужно добавить немного рабочего места, поэтому перейдите в меню Image > Canvas Size и установите Width (Ширина) 1200px and Height (Высота) 1330px.
Оставьте 245px сверху для нашей главной картинки в шапке страницы. Остальному пространству задайте серый цвет (#f0f0f0) с помощью инструмента Rectangle Tool. Просто выберите этот инструмент и нарисуйте прямоугольную область, покрывающую всё пространство ниже наших заветных 245px, отведенных под шапку. Обратите внимание, что при создании прямоугольника вы должны задать ему нужный цвет (#f0f0f0) в палитре.
Результат должен выглядеть примерно вот так:
Шаг 2: Изображение в шапке
Для изображения в хедере рекомендуем вам подобрать тематическую картинку достаточного разрешения — 1200 на 245 пикселей будет в самый раз. Расположите картинку на свободном пространстве, которое мы оставили на предыдущем шаге, после чего размойте картинку любым известным вам способом. Например вы можете применить размытие по Гауссу перейдя в меню Filter > Blur > Gaussian Filter и поставьте радиус равным 4px.
Шаг 3: Панель навигации
С помощью Rectangle tool создайте прямоугольную область высотой 20px и шириной на всю рабочую область, после чего придайте полученному слою Opacity в 25% — таким образом мы добьёмся полупрозрачности слоя как это показано на картинке снизу.
Переключитесь на Horizontal Type Tool (T). В дальнейшем мы будем использовать шрифт Source Sans Pro — совершенно бесплатный шрифт, который можно без проблем сказать с серверов Гугла.
В опциях выставьте следующие параметры стиля:
- font family: Source Sans Pro
- font style: Bold
- font size: 16px
- text color: #aed572
После этого используйте Horizontal Type Tool чтобы написать выдуманный или реальный имейл и номер телефона. Справились? Переходим к иконкам. Как мы уже говорили выше, в данной работе использовался платный набор иконок, но вы можете вполне обойтись и бесплатным по этой ссылке — designinstruct.com/articles/resources/25-free-high-quality-minimalist-icon-sets/. Рекомендуем присвоить иконкам белый цвет (#ffffff). После того как надписи и иконки уже на своих местах — придайте им Drop Shadow эффект как это показано на рисунке.
В результате у вас должно получиться вот это:
Шаг 4: Лого-ленточка
В качестве логотипа вы можете использовать любое растровое или векторное изображение, либо же нарисовать фигуру средствами Adobe Photoshop. Перейдите в меню View > Show > Guides, таким образом вы включите предустановленные в 960 Grid System линии разметки. Если хотите получить подобную ленточку — используйте инструмент Pen Tool и попросту обведите нужный вам контур по линиям разметки, после чего придайте элементу зеленый (#79b02f) цвет.
Теперь давайте придадим нашей ленте несколько дополнительных стилей, чтобы она стала выглядеть как полноценный лого. Начнем с Inner Shadow с Opacity на уровне 35%.
… и добавим Bevel and Emboss. Для параметра Highlight Mode установите Opacity на уровне 0% (нам ведь совсем не нужен хайлайт эффект), в то время как для Shading Mode ставим Opacity в 15%. Обратите внимание как это выглядит на рисунке:
После этого добавим Gradient Overlay к элементу. Параметр Blend Mode оставьте в позиции Soft Light, а Opacity на уровне 50%. Вот так должно выглядеть окно настройки эффектов:
Далее иcпользуем Pattern Overlay чтобы приаттачить к нашей стрелочке какой-нибудь интересный паттерн. По умолчанию установлено довольно небольшое количество паттернов, поэтому рекомендуем вам поискать интересные варианты на subtlepatterns.com. После того как выберете понравившийся вам паттерн, установите Opacity на уровне 5% чтобы у вас получилось нечто такое:
Теперь можно нанести какой-нибудь текст поверх нашего логотипа. Используйте Horizontal Type Tool и напишите нужные вам символы или текст. В нашем случае это буквы «DM» в шрифте Nevis (Bold 36px) + Drop Shadow эффект.
Шаг 5: Заголовки
Для оформления заголовков был использован шрифт Source Sans Pro, заботливо выделенный Bold‘ом. Больший заголовок выполнен шрифтом с размером 24pt, меньший — 18pt.
Вот так заголовки выглядят после придания им эффекта Drop Shadow:
Шаг 6: Круги
Теперь нам с вами предстоит добавить на наш лендинг пейдж 3 круга: 2 круга одинакового размера + один побольше и соединить их линией в 5px. Чтобы сделать круги воспользуемся инструментом Ellipse Tool, а для линии подойдет Line Tool с толщиной линии в 5 px.
Далее используйте рандомный дефолтный свой любимый шрифт и напишите несколько надписей с ключевыми аспектами лэндинга. В самом большом круге добавьте +10pt к размеру шрифта.
Шаг 7: Кнопка призыва к действию (Call to action)
Итак, мы наконец-то добрались до call-to-action кнопки. Сделаем её с помощью инструмента Rounded Rectangle Tool. Выставьте радиус 3px + цвет #96c64f и нарисуйте элемент шириной 7px и высотой 35px, после чего добавьте к элементу Drop Shadow эффект:
Далее добавим Inner Shadow c Distance в 1px и Opacity на уровне 30%. Получим следующее:
И снова Bevel and Emboss для call to action кнопки. Этот эффект отлично справляется с задачей придания объёма элементам, именно поэтому мы его здесь и используем. Но с ним тоже не стоит особо перегибать, чтобы сделать эффект едва заметным, выставьте для опции Highlight Mode оставьте Opacity на уровне 0% а для Shadow Mode — на уровне 7%.
Далее добавляем к элементу эффект Gradient Overlay в режиме смешивания Soft Light с Opacity на уровне 60%:
Теперь нам с вами предстоит добавить немного шума нашей кнопке. Существует множество разных техник, но мы продолжаем использовать паттерны. Как сделать свой собственный кастомный паттерн?
- Создайте новый документ любого размера
- Создайте новый слой и удалите дефолтный бэкграунд
- Перейдите в меню Select > All
- Выберите Edit > Fill чтобы заполнить всё рабочее пространство
- Далее снимаем выделение Select > Deselect
- Добавляем достаточно заметный шум следующими действиями Filter > Noise > Add Noise
- Снова выделяем всё рабочее пространство: Select > All
- Переходим в меню Edit > Define Pattern
Поздравляем, вы создали собственный новый паттерн с шумом, который мы сейчас и добавим к кнопке. Добавляем Pattern Overlay и выбираем только что созданный паттерн.
Теперь придадим нашей многострадальной кнопке Stroke ээфект и выберем для этого один из оттенков зеленого. Сверху кнопки эффект будет едва заметным из-за цвета бэкграунда, но усиливаться к центру и нижним частям.
Далее нам нужно создать небольшой элемент, который будет служить разделителем между иконкой и текстом на кнопке. Для этого создаём вертикальную линию высотой в 10px с помощью инструмента Line Tool. Добавляем к линии эффект Gradient Overlay со следующими параметрами:
Используем тот же шрифт, который мы использовали для заголовков и пишем призыв к действию, например надпись Download it Now. Придаём тексту тёмно зеленый цвет (#4d7500) и присваиваем эффект Drop Shadow с белым (#ffffff) цветом тени и Opacity на уровне 30%.
Далее добавляем любую понравившуюся вам иконку или рисуем свою. В нашем случае это будет иконка облака.
Шаг 8: Ленточка рядом с кнопкой
Используйте ту же технику, с помощью которой мы рисовали ленточку для логотипа и дополнительно уменьшите Opacity чтобы сквозь ленточку была видна фоновая картинка. Это важно также чтобы не отвлекать посетителя от главного call-to-action. После того как ленточка будет готова, напишите на ней что-нибудь, например «100% free».
Шаг 9: Секция основного контента
Можно сказать что мы закончили с шапкой. Теперь нам предстоит проработать секцию основного контента, в которой чаще всего представлены основные характеристики и преимущества продукта.
Используйте Rectangle Tool чтобы создать элемент шириной 220px и высотой 214px. Ниже полученного прямоугольника нарисуйте еще один маленький прямоугольник 5px высотой и светло-зеленым (#91c04c) цветом. Используйте подготовленные сэты иконок и расположите выбранную иконку в центре верхней трети прямоугольника. Далее используйте Horizontal Type Tool и Source Sans Pro выбранный вами шрифт серого цвета (#262626) для заголовка и более светлый оттенок серого цвета для остального текста (#9c9c9c). Дублируйте полученный элемент три раза чтобы в итоге у вас получилось 4 подобных элемента, замените иконки и заголовки на копиях. У вас должно получиться вот так:
Используйте Nevis или любой понравившийся вам шрифт в Bold размером 18pt и напишите какое-нибудь предложение. Цвет текста тот же самый, который мы использовали для Заголовков на предыдущем этапе, а зеленый цвет — это цвет зеленых прямоугольников, которые мы тоже делали на предыдущем этапе. Сделайте ударение на словосочетании «Contact Us» — оно будет ссылкой, поэтому сделайте его подчеркнутым.
Используя такой же серый цвет, напишите несколько строчек текста и расположите его под только что созданным заголовком. Возьмите выбранную вами иконку (в нашем случае — это иконка кошелька) и придайте ей тот же зеленый цвет, что мы использовали для других зеленых иконок. После чего присвойте Drop Shadow эффект с зеленым цветом и параметрами как это показано на рисунке ниже:
Шаг 10: Футер, подвал … или как там его?
Используем Rectangle Tool чтобы создать элемент 1200px в ширину и 280px в высоту. Покрасьте его в серый цвет (#d0d0d0) — это и будет наш бекграунд для футера.
Используем Horizontal Type Tool и тот же шрифт что и раньше чтобы написать очередной Заголовок как на следующей картинке. Мы разделим наш футер на 3 секции и каждая из них будет иметь собственный заголовок. Как вы можете видеть на картинке, заголовок первого блока гласит «More About Us«. Добавим к нему Drop Shadow эффект с параметром Opacity на уровне 50% и Distance в 1px.
Используйте тот же шрифт чтобы написать текст-рыбу и придайте ему более светлый оттенок (#7a7a7a).
Используйте Line Tool чтобы создать простую серую линию, которая и будет служить разделителем между секциями.
Следующая секция будет называть «Newsletter«. Создайте поле для ввода имейла с помощью Rounded Rectangle Tool с радиусом в 3px. Придайте бекграунде очень светлый серый цвет (#f5f5f5). Give it a subtle Drop Shadow effect. Give the shape a really subtle 1px Stroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Добавьте пару эффектов по вкусу: например Drop Shadow и 1px Stroke. Напишите текст-рыбу для поля ввода.
Последняя секция носит название «Contact Us«. Она простая как двери и вряд ли отнимет у вас многов времени. Все шаги похожи на предыдущие, за исключением разве что более тёмных цветов для поля e-mail, location и phone number. Поэтому не будем особо на ней останавливаться.
Шаг 11: Finita la comedia
Поздравляем, дизайн вашего лендинга закончен. Теперь вы владеете основными приёмами для их создания и ограничены только вашей фантазией. Рекомендуем потренироваться и сделать 2-3 лендинга для себя или друзей для закрепления материала. В итоге у вас должно получить что-то хорошо напоминающее это:
Источник: designinstruct.com/
Получи доступ к мастер-классам топовых спикеров и базе полезных материалов
Насколько длинным должен быть эффективный лендинг?
Если вы работаете в сфере оптимизации конверсии, то почти наверняка сталкивались со спором об эффективности длинных и коротких лендингов. Кто-то говорит, что длинные страницы смотрятся ужасно и вынуждают пользователей тратить больше времени на поиск нужной информации. А кому-то кажется, что такие лендинги работают лучше, ведь они позволяют рассказать посетителям всю историю продукта.
Обе точки зрения сопровождаются весомыми аргументами, поэтому выяснить, кто прав, бывает довольно сложно.
«Если длинные целевые страницы все еще не считаются пережитком прошлого, то должны рассматриваться именно так. Совершенно очевидно, что люди обладают краткой продолжительностью концентрации внимания, поэтому их нужно конвертировать за счет максимально быстрой продажи продукта», — пишет фриланс-автор Кристи Хайнс (Kristi Hines).
Выступая в поддержку длинных лендингов, Брайан Мэйси (Bryan Massey) из Conversion Science сказал: «…продающее письмо должно поддерживать несколько разных режимов восприятия, включая сканирование, частичное внимание и вовлеченное чтение… методичного читателя нужно проводить через страницу в более традиционной манере.»
Защитники длинного копирайтинга в качестве главного козыря обычно приводят слова Дэвида Огилви (David Ogilvy), основателя Ogilvy & Mather:
«Рекламодатели знают, что короткие тексты не продают. Сплит-тесты показывают, что длинный копирайтинг всегда работает лучше, чем короткий. Но я должен предупредить вас — если вы хотите, чтобы вашу писанину прочитали, вам стоит написать ее как можно лучше. В частности, ваш первый абзац должен захватывать внимание…
Длинный копирайтинг продает лучше, чем короткий, особенно когда вы просите читателя потратить много денег. Только любители используют краткие тексты».
Что говорят ученые?
Принимая во внимание тот факт, что споры о длинном и коротком копирайтинге начались в далеком 1923 году, когда Клод Хопкинс опубликовал книгу «Научная реклама» (Scientific advertising), вы могли бы подумать, что ученые считают эту область весьма интересной для изучения. Но увы, нет. Быть может, они просто не заинтересованы в рассмотрении данного вопроса, или же слишком заняты решением более важных задач, скажем, выявлением гравитационных волн или поисками бозона Хиггса.
Разумеется, это не значит, что данной темой никто не занимается. Одна команда исследователей обнаружила, что длинные тексты на баннерах обладают более высоким показателем CTR (click through rate). Но дело в том, что даже самое развернутое сообщение на баннере едва ли потянет даже на короткий продающий текст.
В ходе другого исследования, опубликованного в Journal of Interactive Marketing, ученые рассматривали два продающих письма и определили, что двухстраничные письма работали не лучше, чем одностраничные. Но опять-таки, большинство маркетологов сказали бы, что даже двухстраничное письмо не длиннее короткого лендинга.
Таким образом, хотя наука не может предложить здесь вразумительного решения, маркетологам все равно есть, на что ориентироваться.
Интернет-маркетологи тестируют эти вещи на протяжении многих лет
Самое лучшее, что может предложить Интернет — это данные. Возможность отслеживать все — от скроллинга и кликов до конверсий и прибыли — изменила правила игры. Это значит, что вы можете с легкостью увидеть, насколько эффективны короткие страницы по сравнению с длинными.
Вот что показали несколько тестов.
Пример 1. Crazy Egg достигают желаемого при помощи длинного копирайтинга
В попытке увеличить уровень конверсии сайта Crazy Egg основатели платформы Нил Патель и Хитен Шах (Hiten Shah) обратились за помощью к Conversion Rate Experts. CRE рассмотрели существующую страницу и определили несколько областей для улучшения. Они обнаружили, что посетители не всегда понимали, чем занимается этот ресурс или как работают тепловые карты (heat maps). Потенциальные клиенты также не могли сказать, стоят ли данные, которые они должны получить, затраченных денег. Помимо этого, у них возникали вопросы по поводу различных функций и того, чем Crazy Egg отличается от бесплатных инструментов.
Для решениях этих проблем CRE предположили, что пользователи нуждаются в дополнительной информации — они сделали страницу длиннее, заполнили ее подробными описаниями, а затем провели сплит-тест, чтобы увидеть, какая версия лендинга работает лучше:
Результат? Новая длинная страница превзошла контрольную версию на 30%.
Пример 2. Crazy Egg получают еще лучшие результаты с коротким текстом
Как бы там ни было, Нил и Хитен продолжили работать и принялись улучшать результаты своей уже оптимизированной и весьма эффективной продающей страницы. Команда провела множество дополнительных исследований, чтобы выяснить, какие сообщения были важны для конверсии, а какие попросту мешали.
Было принято решение использовать аналогичный дизайн, ведь в проверке нуждался только текст. Также был применен тест на исключение определенных элементов, дабы увидеть, как это отражается на конверсии. Новые заголовки строились на основе ключевых фраз, которые покупатели повторяли во время опросов.
В итоге, было подготовлено четыре варианта новой страницы — все короче, чем контрольный лендинг — и проведен тест:
Результат? Версия D (самая правая страница на скриншоте), показала конверсию на 13% лучше, чем длинный контрольный лендинг. И хотя победитель оказался не таким коротким, как оригинал в примере №1 — он намного короче, чем новая контрольная страница.
Пример 3. Highrise оказались в выигрыше из-за длинного копирайтинга
Команде Highrise нравился дизайн их лендинга — он работал относительно хорошо. Но в какой-то момент они осознали, что некоторые потенциальные клиенты не конвертируются, так как не понимают, чем занимается их компания и кому это нужно. После нескольких дискуссий на тему того, какую информацию стоит добавить на страницу, команда проработала три варианта дизайна и определила победителя.
Новый лендинг был значительно длиннее, поскольку теперь здесь размещались подробные описания каждой функции продукта и свидетельства о том, как реальные покупатели использовали эти возможности. Страница также содержала перечень целей, которых клиентам удалось достичь вместе с Highrise, а также отзывы и идеи касательно развития программного обеспечения.
Как только лендинг был готов, был проведен сплит-тест с участием 42 000 посетителей:
Результат? Более длинная страница обеспечила на 37,5% больше бесплатных подписок, чем контрольная. Это подтверждает эффективность длинного копирайтинга.
Пример 4. Highrise получили еще больше, сократив копирайтинг
Команда Highrise не желала останавливаться на достигнутом, поэтому вернулась к чертежной доске. Они хотели протестировать что-то лучшее, что-то радикально другое. Дизайнеры предложили новый макет, включающий в себя большую фотографию пользователя и заголовок в формате отзыва. Новая страница была намного короче, чем контрольная:
Результат? Короткая страница повысила количество платных подписок на 102,5%. Затем команда провела еще один тест, добавив к новому дизайну львиную долю контента с длинной страницы. В итоге число регистраций снизилось на 22,72%. В данном случае короткий копирайтинг оказался более эффективным.
Пример 5. 911 Restoration урезали текстовую часть лендинга и повысили конверсию
Компания 911 Restoration привлекает трафик на сайт преимущественно за счет SEO и PPC. Этот трафик ответственен за 90% их потенциальных клиентов. Целевая страница была относительно длинной, так как она содержала важные ключевые слова, которыми клиенты пользуются при поиске.
911 Restoration решили сравнить короткую, более сфокусированную лендинг пейдж с контрольной после того как осознали, что звонящие им люди, оказавшиеся в чрезвычайном положении, не хотят изучать подробный контент об услугах на их сайте. Клиентам просто была нужна базовая информация и телефонный номер, по которому они могли бы обратиться за помощью.
Команда протестировала укороченный лендинг и сравнила его с оригинальной, более длинной страницей.
Результат? Более краткая вариация генерировала 35 звонков на 133 клика ($4 982 рекламного бюджета), в то время как длинная — 34 звонка на 177 кликов ($7 177). Таким образом, конверсия повысилась на 37%, а затраты на конвертацию снизились на 33% — большая победа для короткого копирайтинга.
Пример 6. Moz делают свою страницу большей и повышают конверсию
Компания Moz успешно улучшала свои лендинги на протяжении многих лет, но они знали, что для достижения назначенных целей роста им нужно работать еще усерднее.
Сотрудничая с Conversion Rate Experts, Moz опросили покупателей на всех стадиях воронки продаж (sales funnel), включая free-trial подписчиков. Используя итеративный процесс юзабилити-теста, модификации страницы и повторного теста, Moz создали новый лендинг, который включал информацию об услуге и объяснял пользователям, что конкретно они получат при покупке инструментов. Новая страница была в 7 раз длиннее, чем контрольная.
Затем они провели сплит-тест с более чем 5 000 посетителей сайта, чтобы сравнить эффективность обоих лендингов:
Результат? Длинный лендинг повысил продажи Moz Pro на 51,83% и тем самым привлек более $1 000 000 прибыли. Это отличный результат для длинного контента.
Пример 7. Qi Networks повышает конверсию на 70,1% за счет короткого копирайтинга
Qi Networks — это бразильский реселлер Google Apps, чья оригинальная страница содержала массу информации об их услугах. Побеседовав с покупателями, компания осознала, что большинство клиентов попадают на сайт в «драматический» момент, когда их почта не работает (так как они пользовались дешевым неэффективным решением), и хотят исправить эту проблему как можно быстрее.
В связи с этим команда предложила более короткую страницу, которая не описывала Google приложения так детально, но содержала простое сообщение: в Google Apps используется лучшая электронная почта в мире. Она решит вашу проблему незамедлительно:
Результат? Более лаконичная страница повысила конверсию на 70,1%. Поклонники короткого копирайтинга обожают использовать этот пример как аргумент в пользу эффективности кратких текстов.
Пример 8. Длинный контент Quality Training сработал не хуже
Quality Training предоставляет услуги по повышению квалификации для профессионалов, которые ищут новые карьерные возможности. Компанию не впечатляла эффективность их ресурса, поэтому они хотели попробовать что-нибудь другое. Пользовательские исследования показали, что у клиентов нет никаких претензий к контенту ресурса.
Тем не менее, данные по тепловым картам свидетельствовали о том, что посетители кликали на слова в тексте так, словно они были ссылками, пытаясь отыскать дополнительную информацию. Заметив это, Quality Training решили протестировать более длинную страницу, которая давала пользователям гораздо больше подробностей. Такой подход должен был помочь компании позиционировать себя как эксперта в области повышения квалификации.
Команда создала новый лендинг, который был в три раза длиннее оригинала, опустив всю важную информацию ниже «линии сгиба». Затем они провели сплит-тест, чтобы выяснить, какая страница окажется эффективнее.
Результат? Длинная страница повысила конверсию на 662% в сравнении с оригинальной и повлекла за собой рекордные продажи.
Закономерность или ее отсутствие?
Так когда же следует использовать длинные и короткие тексты? Боб Кемпер (Bob Kemper), научный руководитель в MECLABS, проанализировал сотни неопубликованных A/B тестов длинного и короткого копирайтинга, чтобы понять, какие факторы влияют на этот выбор. Он обнаружил три аспекта:
1. Природа мотивации посетителя
Посетители сайта знакомы с вашим продуктом и готовы к покупке или просто ищут информацию о том, как решить общую проблему? Иными словами, они «холодные» или «горячие»? Как правило, потенциальным клиентам, которые хотят заполучить ваше решение сейчас, или тем, кто уже используют ваш продукт, не нужно много информации (или длинного копирайтинга), чтобы конвертироваться.
2. Изначальный уровень беспокойства о продукте или компании
Слышал ли покупатель о вашем продукте и доверяет ли он вашему бренду? Посетители, знакомые с вашим оффером, с большей вероятностью откликнутся на короткую страницу, в то время как неосведомленным пользователям потребуется больше контента, чтобы узнать о вас и построить доверие.
3. Стоимость или обязательства, связанные с конверсией
Ваш продукт дорогой или дешевый? Он требует от клиентов определенных интеллектуальных усилий или нет? Дорогие или сложные продукты часто нуждаются в дополнительной информации, которая бы доносила до покупателей ценность того, что вы предлагаете, в то время как дешевые и простые решения требуют меньше текста.
Кемпер предложил матрицу, отражающую то, как конверсионные решения согласуются с эмоциональными потребностями и соображениями о расходах. Она поможет вам понять, насколько длинным или коротким должен быть ваш контент:
Длинный копирайтинг против короткого. Ось Y: внизу — эмоциональные желания, вверху — рациональные, аналитические потребности. Ось X: слева — низкая стоимость/незначительные обязательства, справа — высокая стоимость/серьезные обязательства
Эмоциональные конверсии, или те, что имеют низкую стоимость, чаще всего требуют меньше подробностей и более краткий контент. Что же касается решений, которые принимаются рационально, то они нуждаются в максимально развернутой информации и длинном копирайтинге.
Сравните матрицу Кемпера со шкалой состояния осведомленности, которой Джоанна Вибе (Joanna Wiebe) поделилась на сайте Copy Hackers, и вы получите еще более полную картину в плане того, когда в стоит использовать длинный или короткий контент:
Ось Y — как много вы должны рассказать? Ось X — низкая осведомленность > высокая осведомленность
Потенциальные клиенты с низкой осведомленностью о вашем продукте или бренде ожидают гораздо больше пояснений, чем те, кто уже понял, как ваш продукт решает их проблему.
«Утверждать, что «длинный копирайтинг всегда побеждает короткий» или что «длинные тексты не работают в моем случае», абсолютно бессмысленно. Скорее всего, ваша страница должна быть достаточно длинной, чтобы вы могли выдвинуть аргумент, который заденет потенциальных клиентов на их уровне осведомленности. Выясните его прежде, чем сформировать свои доводы», — пишет Джоанна.
На что обратить внимание?
Итак, насколько длинным или коротким должен быть ваш копирайтинг, зависит от посетителей вашего сайта и уровня их осведомленности. Чтобы определить потребности потенциальных клиентов, вам следует провести исследование и узнать, каким элементами лендинга они уделяют больше внимания.
Иными словами, вам вовсе не нужно тестировать длину копирайтинга. Вместо этого, поразмыслите над следующим:
1. Где и почему покупатели покидают вашу страницу?
2. Каков их уровень осведомленности?
3. Интересует ли их что-то, чего нет на вашей странице?
4. Что из сказанного вами их совершенно не волнует?
5. Какие элементы страницы ни на что не влияют?
6. Какие возможности и преимущества должны упоминаться в первую очередь?
7. Как вы можете выразить свою мысль эффективнее?
8. Можете ли вы изъясняться более сжато?
9. Какие слова использует ваша целевая аудитория, чтобы описать ваш продукт и стоит ли вам задействовать их?
Изучайте ваши тепловые карты и карты кликов. Проводите пользовательские тесты с участием реальных покупателей и опрашивайте клиентов при любой удобной возможности. Выясните, что конкуренты делают лучше, чем вы, и подумайте, как устранить эти недочеты.
Дорабатывайте и тестируйте ваше уникальное торговое предложение (УТП), лид-формы, визуальные элементы, заголовки, отзывы, сторонние валидации и т. д.
Длинный лендинг содержит больше подробностей — но и борется с большим количеством потребительских возражений.
Вместо заключения
Более короткие лендинги практически всегда воспринимаются лучше, чем длинные. Сосредоточенные на одной цели, их легче читать и запоминать. Попробуйте вместо тестирования сокращенной версии страницы провести тест на исключение, чтобы посмотреть, что произойдет, когда вы уберете определенные элементы, которые могут отвлекать посетителей от CTA-кнопки. Упростите и проясните свое сообщение. Сократите заголовки. Сосредоточьтесь на одной конверсионной цели.
Помните, что подходить к работе над лендингом нужно не с претензиями к длине копирайтинга, а с желанием улучшить страницу в целом.
Создали лендинг пейдж и задумываетесь об оптимизации конверсии? Ознакомьтесь с нашей технологией по увеличению бизнес-показателей >>>
Высоких вам конверсий!
По материалам: blog.crazyegg.com
18-05-2016
как размер картинок влияет на пользовательский опыт?
Известное высказывание «одна картинка стоит тысячи слов» хорошо подходит для описания эффективности изображений (как маркетинговых инструментов) на лендингах.
Визуальный контент привлекает внимание и качественно доносит маркетинговое сообщение, так как обрабатывается мозгом в 60 000 быстрее, чем текст, и вызывает эмоциональный отклик.
Дисплеи современных девайсов качественно отображают картинки большого размера, поэтому на сайтах и особенно посадочных страницах стали довольно часто использоваться масштабные изображения и слайдеры: некоторые маркетологи просто не могут выбрать всего одно изображение из огромного ассортимента графического контента и размещают карусели.
Ярким примером веб-дизайна, централизованного на изображении, является сайт Southwest Airlines (авиакомпания) — фоном и фокусным центром страницы является фотография семьи, отдыхающей на лыжном курорте.
Содержание
Оптимальный размер фона для сайта на примере Southwest Airlines
В каких случаях дизайн, сфокусированный на изображении, эффективен?
Оптимальное решение — сбалансированный дизайн
Как узнать размер картинки на сайте?
Как убедиться, что вы используете визуальный контент правильного?
Оптимальный размер фона для сайта на примере Southwest Airlines
Яркий пример веб-дизайна, центром которого является изображение, — это сайт Southwest Airlines (авиакомпания): фон и фокусный центр страницы — это фотография семьи, отдыхающей на лыжном курорте.
Эффективность данного подхода к веб-дизайну основана на уникальной способности графического материала вдохновлять и вовлекать в ознакомление с ресурсом.
В своей книге «Эмоциональный дизайн» (Emotional Design) Дон Норман (Don Norman) говорит о том, что картинки, просмотр которых доставляет эстетическое удовольствие, вызывают у людей сильный висцеральный отклик. К изображениям, вызывающим такую реакцию, можно отнести красочные пейзажи, товары с приятным для глаза дизайном и фотографии людей привлекательной внешности.
Однако висцеральный отклик сам по себе не обеспечивает положительный пользовательский опыт: важную роль также играют юзабилити и контент веб-ресурса.
Изображение, использованное на сайте Southwest Airlines, бесспорно, привлекательно и качественно, но такой большой размер изображения для сайта и столь сильный акцент на одном элементе оформления делает другие составляющие, выполняющие важные функции, незаметными:
- ссылки навигационного меню маленькие и не выделены фоновым цветом;
- поисковое поле заменено иконкой лупы;
- CTA-элемент «Заказать (билет) сейчас» (Book now) также слишком мал и сливается с остальными составляющими интерфейса;
- окно для поиска билетов смещено ниже линии сгиба для сохранения целостности отображения картинки, в результате чего посетитель может его не заметить, пока не прокрутит страницу.
Сравнение новой и старой версии ресурса Southwest Airlines поможет понять основные плюсы и минусы централизации оформления на визуальном контенте.
Подобно сайтам большинства авиакомпаний, ресурс Southwest Airlines был переполнен ссылками, баннерами и виджетами, что делало фоновый рисунок практически незаметным. Однако окно для поиска авиабилетов размещалось в привычном для online-потребителей месте — верхнем левом углу.
Изучим мобильную версию Southwest Airlines и обратим внимание на размер фоновой картинки сайта.
Размер картинки для фона сайта для мобильных устройств — тоже большой, но она лаконично вписывается в структуру веб-страницы. CTA-элементы также хорошо выделены и заметны на фоне картинки, а избыточность виджетов и текста устранена.
В итоге можно смело заявить, что именно мобильная версия ресурса Southwest Airlines — хороший пример качественного дизайна, центром которого является оптимального размера изображение для сайта.
В каких случаях дизайн, сфокусированный на изображении, эффективен?
Поскольку одна посадочная страница может быть направлена на разные сегменты целевой аудитории и иметь различные задачи, оптимальный подход к ее оформлению зависит от ваших приоритетов.
Какой должен размер картинки сайта? Масштабные изображения захватывает внимание пользователей и отвлекает от других элементов интерфейса. Следовательно, такой дизайн не всегда целесообразен.
Рассмотрим несколько примеров оптимального размера картинки сайта и правильной фокусировки на графическом контенте.
Фокусный центр домашней страницы Apple — это изображение последних моделей iPhone, которое служит рекламой нового продукта и помогает потенциальным покупателям увидеть разницу размеров iPhone 6 и iPhone 6 Plus невооруженным глазом.
Однако масштабная картинка не вредит юзабилити: в верхней части страницы расположен контрастно выделенный навигационный бар, позволяющий в один клик перейти на любой раздел сайта.
Размеры фонового изображения для сайта Bing (поисковая система Microsoft) велики, и эта страница — хороший пример правильного использования больших изображений.
Ключевым элементом данной страницы является поисковая строка, выделяющаяся на фоне объемной картинки.
Стоит заметить, что домашние страницы поисковых сервисов требуют специфичного оформления, которое не подходит стандартным ресурсам: главный элемент поисковика — это поисковое окно, так что придавать визуальный вес второстепенным составляющим интерфейса не требуется.
Оптимальное решение — сбалансированный дизайн
Картинки, создающие образ бренда, но не влияющие на качество отображения другого контента, — вот оптимальное решение для оформления большинства ресурсов.
На сайте State Farm (страховая компания), например, используется большая фотография владельцев транспортного средства.
Изображение подобрано правильно (страхование автомобилей является одной из основных услуг State Farm) и не вредит юзабилити интерфейса, невзирая на большой размер. Изображение фона сайта уравновешено выделенным меню навигации и окном с основными функциями ресурса, размещенным до линии сгиба.
Как узнать размер картинки на сайте?
Чтобы узнать размер картинки на сайте, кликните по ней правой кнопкой мыши. В зависимости от браузера, которым вы пользуетесь, в появившемся меню будет пункт «Свойства изображения», «Информация об изображении» или просто «Свойства». Кликните по нему, и откроется окно с размерами изображения.
Как убедиться, что вы используете визуальный контент правильного?
Ниже представлен ряд шагов, которые помогут определить оптимальный размер фото для сайта и разработать сбалансированный дизайн с акцентом на графическом контенте.
1. Определите приоритетные функции веб-страницы. Ваша задача: определить, с какой целью на страницу переходят пользователи и какую задачу она выполняет для бизнеса.
2. Проанализируйте, какие элементы интерфейса способствуют достижению ключевых целей конверсии. Изображения обычно используются для брендинга и создания привлекательного дизайна, а навигационное меню и структурированное поисковое окно являются инструментами интеракции пользователей с ресурсом.
3. Определите визуальный вес элементов на основе их приоритетности. Если составляющая интерфейса выполняет одну из ключевых целей, ей следует придать визуальный акцент, а маловажные элементы должны привлекать меньше внимания.
Данная рекомендация может показаться очевидной, однако многие веб-дизайнеры либо забывают о важности выделения ключевых составляющих сайта, либо жертвуют их качественным отображением ради привлекательности оформления.
4. Найдите визуальный контент, усиливающий образ бренда. Помните, что картинки должны использоваться не только в качестве декорации, но и для отображения вашего оффера.
5. Выберите качественные, привлекающие внимание изображения. К выбору картинок стоит приступать только после выполнения предыдущих шагов: в противном случае, графические материалы будут подобраны неправильно, и, соответственно, их внедрение будет неэффективным..
6. Не стремитесь следовать трендам. Основной задачей многих проектов по редизайну является модернизация, что нередко подразумевает внедрение трендов графического дизайна. Но, как мы неоднократно писали в статьях нашего блога, погоня за модой в веб-дизайне — это не всегда хорошо.
Типографика, структура лендинга и брендовые цвета также могут придать ресурсу более современный вид, причем использование таких инструментов дизайна не вредит юзабилити.
Не забывайте все гипотезы проверять сплит-тестированием.
Высоких вам конверсий!
По материалам: nngroup.com
28-10-2014
5 рекомендаций по выбору оптимального объема текста для лендинга
Насколько объемным должен быть текстовый контент на лендинге? Eсть множество советов на эту тему, но все же сложно найти конкретные и однозначные рекомендации.
Многие маркетологи думают примерно так: «Хорошо, чтобы текст был длинным, но не слишком».
В целом это соответствует действительности, но существует ряд причин, по которым дать универсальный ответ на этот вопрос просто невозможно.
У каждого конкретного оффера есть свои собственные критерии относительно оптимальной длины текста, которые зависят от внешних (входящий трафик и характеристики целевой аудитории) и внутренних (графика и дизайн) маркетинговых факторов.
Возможно, вы обогатите свой опыт и усовершенствуете маркетинговую стратегию при помощи следующего материала.
Рекомендация 1: «Когда я смогу увидеть пожарный гидрант?»
Несмотря на многочисленные научные данные, подтверждающие обратное, люди зачастую убеждены в том, что чем больше информации они получат, тем лучшее решение смогут принять.
Вспомним эксперимент с пожарным гидрантом, который Нассим Николас Талеб (Nassim Nicholas Taleb) описывает в своей книге «The Black Swan»:
«Продемонстрируем двум группам людей размытое фото пожарного гидранта, искаженное настолько, чтобы сразу невозможно было распознать изображенный объект. Для одной группы начнем медленно — за 10 шагов — увеличивать разрешение. Для второй группы сделаем это быстрее — за пять.
Остановимся в точке, где обеим группам представлено идентичное изображение и попросим каждого определить что они видят. Члены группы, которые видели меньше промежуточных шагов, скорее всего распознают гидрант гораздо быстрее. Вывод?
Чем больше информации вы кому-то даете, тем больше гипотез он будет выдвигать по ходу и тем меньше они будут соответствовать действительности. Человек, сталкиваясь с информационными помехами, ошибочно будет принимать их за полезный контент».
Два фото ниже передадут вам главную идею этого эксперимента:
Создавая контент для своего лендинга, всегда держите в уме «пожарный гидрант»: еще раз оцените написанное и постарайтесь избавиться от всего, что будет мешать посетителю увидеть главное.
Применяйте этот критерий к любой существенной информации, которую получает потребитель перед приобретением вашего продукта или принятии решения о целевом действии на ресурсе. Например: проблемы клиентов, пути решения этих проблем, преимущества продукта для их решения, конкретные инструкции о последующих шагах покупателей и т. д.
Хорошей иллюстрацией вышесказанному послужит лендинг «Help Scout»:
Чем больше вы пишете, тем лучше будете знать, когда необходима краткость, а когда — объем.
Рекомендация 2: Всегда обращайте внимание на контент выше линии сгиба
Вне зависимости от длины текста, всегда уделяйте внимание пространству выше линии сгиба целевой страницы. Недостаточно просто использовать красивую картинку.
Что имеется в виду? Правильно оформленная верхняя часть лендинга должна содержать в себе призыв к совершению «следующего шага», видимый потенциальными клиентами без необходимости прокрутки страницы.
В хедере посадочной страницы рекомендуется размещать СТА-кнопку, заголовок и четкий оффер. Уже после этого можете добавлять больше текстового контента, который, по вашему, мнению даст потенциальным клиентам лучше разглядеть пресловутый «пожарный гидрант».
В предыдущем примере с «Help Scout» посадочная страница содержит много дополнительной информации, помогающей ответить на вопросы, которые могут появиться у целевой аудитории. Эта полезная информация размещена в нижней части лендинга, но все основные моменты уже отражены выше линии сгиба.
Рекомендация 3: Пусть дизайн работает на вас
Ряд известных маркетологов считает, что «дизайн — это истинный копирайтинг», к чему стоит прислушаться.
Конечно, текст все еще крайне важен, просто целевая страница, дизайн которой сфокусирован на конверсии, имеет хорошие шансы встать на один уровень с лендингом, содержащим первоклассный текст вкупе с очень плохим графическим оформлением.
Объем текста — это больше, чем просто количество знаков. Тут также важно, насколько объемной станет страница после добавления всех остальных элементов дизайна: изображений (которые не менее важны), кнопок, лид-форм, иконок, стрелок и т. п.
Просто помните, что иногда пара удачных дизайнерских решений может сделать больше для конверсии, чем два-три лишних абзаца.
Рекомендация 4: Мы мало что знаем наверняка, поэтому — тестируйте
Хотя проведение тестов отмечено здесь в качестве совета, в действительности же оно представляет из себя нечто большее. Почему? Просто сплит-тестирование само лежит в основе всех рекомендаций.
Именно после тщательной серии тестов вы узнаете о сложившихся тенденциях среди собственной целевой аудитории. Благодаря экспериментам вы сможете понять, какие методы будут работать на вас, а какие — нет.
С помощью тестов вы поймете, как поднять коэффициент конверсии еще выше.
Рекомендация 5: Узнайте свою аудиторию
Забавно наблюдать за тем, как маркетологи копируют чужие лендинги, ожидая получить от рекламной кампании аналогичные результаты. Хочется сразу спросить таких людей:
- Ваш оффер продает тот же продукт?
- Лендинг будет посещать та же аудитория?
- Как посетители были привлечены на исходную страницу? Они пришли с вебинара? После email-рассылок? С рекламы в Facebook? Как их подготовили для этого?
Не стоит рассчитывать на хороший результат, веря в то, что «если у “X” работает так-то и так-то, то это обязательно будет работать и у меня». Люди любят простые истории, поэтому выдумывают их, основываясь на толике информации, а затем строят на этом целую маркетинговую кампанию.
К сожалению, мы пропускаем важный шаг, строя предположения на основе чужих результатов. Спросите себя: «Как я могу применить это конкретно к моей продукции и клиентам?» Вместо того, чтобы подстраивать продукт и аудиторию к чужому маркетингу, адаптируйте маркетинг к вашему продукту и аудитории.
Копирование лидеров рынка не всегда является плохой стратегией. Иногда действительно можно взять похожий шаблон для продающей страницы, воронки продаж или чего угодно еще и увидеть резкое улучшение показателей.
Не стоит принимать решение только на том основании, что кто-то из успешных конкурентов сделал так же. Делайте выводы, опираясь на вкусы своей аудитории, а если в чем-то не уверены — обязательно тестируйте.
Высоких вам конверсий!
По материалам copygrad.com
02-11-2014
11 базовых принципов эффективного лендинга / AstoundCommerce corporate blog / Habr
Итак, вы запустили рекламную кампанию, и трафик пошел на посадочные страницы. Для того, чтобы конвертировать посетителей в покупателей/подписчиков и т.д. (в зависимости от целей), ваша задача — создать посетителю все условия для совершения желаемого действия. Прежде, чем искать секреты и фокусы, которые поднимут конверсию, стоит пройтись по базовым принципам.Базовые элементы лендинг пейдж можно условно сгруппировать как “дизайн” и “копирайтинг” составляющие. Дизайн — это сердце, он будет порождать эмоции, направлять внимание и притягивать к самому главному — к призыву к действию. Копирайтинг — это мозг, текстовая подача аргументов и фактов, описание предложения, которое либо склонит посетителя к выполнению определенного действия, либо заставит закрыть страницу и отвергнуть ваше ценное предложение на веки вечные. C чего начать?
1. Посылайте пользователя на релевантную, таргетированную страницу
Каким типом рекламных сообщений вы привлекаете пользователя?
Как SEO-трафик, так и контекстная, баннерная реклама имеют общую цель — привести таргетированный трафик на конкретную страницу. Используйте простую формулу: одна цель — одно сообщение — одно действие — одна страница.
Вы уже просегментровали своих посетителей и имеете несколько сегментов? Тогда проложите отдельный маршрут для каждого типа аудитории на конкретную лендинг-страницу. Пусть рекламное сообщение соответствует типу аудитории и ожидаемому от посетителя действию. При настройке целей в аналитике также действует правило: одна цель — один лендинг.
2. Без неожиданностей
Жаркий вечер, отпуск, Таиланд. Вы знакомитесь с прекрасной леди, прогуливаетесь в ваш номер. И вдруг, оказывается, что она… это вовсе не она. Испуг, разочарование, фрустрация… Обманутые ожидания не приветствуются нигде.
Предоставьте пользователю единообразие: визуальное, текстовое. К тому моменту, когда человек кликает на ваш баннер или ссылку, вы уже сформировали у него определенное ожидание. Оправдывайте его.
В дизайне как баннера, так и лендинг пейдж, отталкивайтесь от бренда или же определенного предложения/продукта. Фирменные цвета и шрифты в рекламе и на лендинге помогут связать их между собой в голове пользователя.
В случае использования контекстной рекламы, единообразие пользовательского опыта, который вы создаете, будет выражаться в высоком или низком показателе качества ключевых слов (Quality Score). Чем он выше, тем больше рекламные сообщения и ключевые слова соответствуют содержанию страницы с точки зрения поисковой системы.
При создании рекламных кампаний, подборе ключевых слов и привязки к ним посадочных страниц — сегментируйте. Сегментируйте типы клиентов и источники, из которых вы их ведете на конкретные страницы.
3. Сфокусируйтесь на заголовке и подзаголовках
Представьте себя проходящим мимо киоска с прессой. Вы останавливаете взгляд на долю секунды, чтобы просмотреть крупные заголовки. Если какой-то из них привлечет ваше внимание, вы остановитесь на несколько секунд, чтобы вчитаться. А если он окажется достаточно интересным, вы даже купите это издание, не так ли?
Сделайте заголовок понятным, заметным и релевантным, ведь это самый важный текстовый элемент на странице, наряду с призывом к действию. Только пятая часть посетителей, прочитавших заголовок, прочтет что-то еще на странице.
С точки зрения содержания, чаще всего на посадочных страницах используются три типа заголовков:
— Руководство, демонстрирующее положительное следствие, преимущество
— Обращение, апеллирующее к страху потери (или упущенной выгоде)
— Вопрос
На практике, самым сильным оказывается демонстрация преимуществ, а худшим — вопрос. Апелляция к негативным последствиям хорошо работает в том случае, если вы предлагаете решение очень специфичной проблемы, которая беспокоит пользователя. Креатив вообще лучше оставить для других занятий. Креативные заголовки обычно конвертируются намного хуже простых и понятных.
9 признаков хорошего заголовка:
— называет преимущества, а не характеристики
— простой, понятный, целенаправленный
— использует общественное мнение и отзывы
— обещает получение преимуществ в конкретный срок
— правдоподобный и осуществимый результат
— преподносит потенциальное облегчение и удобство пользователю
— апеллирует к “авторитетному мнению”
— создает ощущение ограниченности товара, времени и т.д.
— содержит ключевые слова, оптимизирован под поисковые системы
4. Избавляйтесь от лишнего
Во-первых, на лендинг пейдж не нужна навигация. Во-вторых, как можно меньше внешних ссылок. Работая над дизайном посадочной страницы, важно учитывать как цели бизнеса, так и покупателя. Они могут пересекаться. Если какой-то из элементов не служит ни одной из них, пожалуй, его лучше убрать.
Помните, что вы уже заплатили за то, чтобы посетитель оказался на этой странице? Сфокусируйте его на важной информации и совершении действия. Если посетителя действительно интересует дополнительная информация о вашей компании или месторасположение на карте, он может посетить ваш сайт в другой раз. Не ставьте ссылок, уводящих от совершения действия.
5. Меньше текста?
Мир захватила тенденция к сокращению длины текста повсеместно. Журналисты отказываются от длинных материалов, сайты дробят текстовый контент как могут, сокращать советуют и лендинг пейдж. Якобы посетитель — кретин, не готов обрабатывать больше 500 символов, да и вообще читает с трудом, поэтому нужно сокращать, чтоб было как в Твиттере… Аргумент убедительный, но.
Есть негласное правило — чем ближе к покупке, тем длиннее текст. Если вам нужны подписчики, контакты, то короткого текста будет достаточно. Если же целью конверсии является покупка, к тому же не самая дешевая (и речь не идет о вещах первой необходимости вроде iPhone 6+), то лучше подумать о более длинном и убедительном тексте. Для раскрытия ценности предложения нужно время, которое в данном случае эквивалентно длине лендинга.
Пример того, как “В 6 раз длиннее, на 52% эффективнее” от Рэнда Фишкина
6. The fold — скролл, прокрутка
И наоборот, не создавайте неоправданных сложностей для юзера в поиске информации о вашем бизнесе. Донесите информацию о том, чем вы занимаетесь на первом экране (до необходимости скролла), если это возможно.
Вопреки популярности “портянок” — бесконечно длинных лендингов на 5-8 экранов — исследование тепловых карт показывает, что гораздо больше внимания сосредоточено на первом экране.
Убедительный текстовый контент, заинтересованность в товаре или услуге, эмоциональное вовлечение заставят посетителя прокрутить вниз и найти заветную кнопку в глубине нескольких экранов. Но… На длинных лендингах лучше оставлять фиксированную или повторяющуюся на каждом экране кнопку CTA (Call to action). Не всегда можно предугадать, в какой момент посетитель “готов”. Поэтому призыв к действию должен быть на виду.
Несколько слов о восприятии
Залезая посетителю прямо в мозги, обнаруживаем там стандартные процессы. Общие правила восприятие веб-контента и айтрекинга гласят, что сканирование страницы происходит по модели F-pattern/сетки. Поток важной информации должен располагаться слева, так как там концентрируется больше всего внимания. F-сетка означает, что вначале пользователь просматривает верхнюю строку, затем движется вниз по левой части экрана, делая второе горизонтальное движение в середине, чуть короче, чем первое.
Eye tracking center, Institute for Software ergonomics and usability AG
На e-commerce сайтах второе горизонтальное скольжение чуть ниже, чем обычно, из-за сканирования изображения товара. Пользователи также задерживаются значительное время в верхней правой части страницы, где размещается цена и кнопка «добавить в корзину».
Данные исследований nngroup.com по айтрекингу говорят о том, что внимание распределяется следующим образом:
— Левая часть экрана — 69% пользовательского времени
— Правая часть экрана — 30% времени пользователя
Что касается скроллинга, то ключевые моменты, безусловно, должны выноситься на первый экран, так как время, которое пользователь тратит на просмотр, распределяется следующим образом:
— До скролла 80,3%
— Ниже скролла 19,7%
7. Последовательность и эмоциональность
Все элементы дизайна и текста должны соответствовать ценностям вашего бренда.
Лого — это лицо вашего лендинга.
Посетитель должен как минимум вспомнить его при следующей встрече.
Со вкусом оформленное и размещенное лого — неотъемлемый атрибут абсолютно любой посадочной страницы. Лого должно передавать дух вашего бренда и его индивидуальность — как старым, так и новым клиентам. Лого, само по себе, способно раскрыть суть бизнеса компании… Ну или убить все…
Привычно логотип размещается вверху страницы, это очередное клише, проверенное опытом. Если ваш бренд знают все, даже дети, то что вы тут делаете, то брендингом можно не злоупотреблять. В общем, используй маркетинг с умом!
Изображения
Доносят ли изображения на сайте и стоковые картинки идею вашего бизнеса? На сайте желательно использовать картинки, совпадающие с идеей бизнеса. Как мы уже писали ранее, в тренде e-commerce дизайна — крупные изображения. Вокруг этого крупного изображения и стоит выстраивать свой лендинг пейдж. Крупная графика, крупный текст основного сообщения — вот все, что нужно, чтобы донести свой бизнес-месседж до посетителя. Но не ограничивайтесь только картинками.
8. Экспериментируйте с типами контента (данных, информации)
Согласно эксперименту unbounce.com лучшего эмоционального эффекта и вовлечения поможет добиться видео на лендинге. Опытно доказано, что, как встраиваемые видео, так и видеофон, обладают интенсивным эмоциональным эффектом и дают более глубокое понимание продукта, увеличивая конверсии. Посетитель с большей вероятностью проведет продолжительное время на странице, просматривая видео, чем читая текст.
Далеко не каждый продукт требует видео-демонстрации. Мы писали о том, что нужно соответствовать ожиданиям пользователя, быть последовательными и убирать все лишнее. Не перегружайте страницу видео, если это не нужно. Если не знаете нужно или нет — протестируйте.
Например, видеофон лендинга GoPro не просто захватывает, он еще и идеально передает ценности компании и образ жизни, с которым она себя ассоциирует — быть героем и проживать каждый день на пределе своих возможностей.
Обязательно дайте возможность посетителю поделиться вашим видео и страницей, так же как GoPro дает возможность задокументировать свою захватывающую жизнь и поделиться лучшими моментами онлайн…
9. Возможность распространения
Дайте возможность посетителю опубликовать ваше видео прямо в Facebook-ленту или в Twitter. А еще лучше, чтобы целой страницей можно было легко делиться в социальных сетях. Помимо того, что рекомендации реальных пользователей повышают доверие к вашему бренду, социальные шеры также хорошо влияют на поисковую выдачу страницы.
10. Не делайте умозаключений — тестируйте!
Значение имеет все — цвета, картинки, расположение, тестируйте все, что помогает вовлечь, удержать и сконвертировать посетителя.
A/B тестинг и другие метрики помогают точно определить, что именно влияет на ваш лендинг. Если вам кажется, что изображение розового слона принесет больше конверсий вашему сайту, чем слона серого — протестируйте это предположение.
Исследование dynamicwebsolutions
Интернет-маркетологи, дизайнеры, психологи ищут философский камень, который превратит в золото все вокруг… Но, увы, нет рецепта волшебной большой оранжевой кнопки в правом нижнем углу, c CTR 100%. Большая или маленькая? Зеленая или красная? А текст какого цвета? Со стрелкой или без? Есть только один способ узнать что будет работать — тестирование!
Call to action
Ваш призыв к действию, или CTA, является основной целью конверсии посетителя вашей целевой страницы. Варианты ожидаемых действий на странице: покупка, подписка на рассылку, звонок или заказ обратного звонка, загрузка электронной книги, файла, демо-версии продукта или запрос информации.
CTA советуют размещать в том месте лендинга, где наибольшая концентрация положительных эмоций — после видео, напротив счастливого лица. На базовом уровне кнопка должна быть заметной в любом месте лендинга, и иметь четкий текст призыва. Тестировать нужно как дизайн кнопки, так и сам текст: одно слово или два, с местоимением или без, и т.д. Значение имеет все — от цвета и слов до шрифта и теней.
11. Дайте что-то взамен или поблагодарите
Для того, чтобы что-то получить, нужно что-то отдать, не так ли? Если вы собираете контактные данные, подарите пользователю бесплатный white paper — последний отчет лидера отрасли или ваше исследование, любой ценный контент. Или просто поблагодарите за совершение действия. В общем, оставьте после себя положительные эмоции.
Оптимизация посадочной страницы — это создание совершенной комбинации убедительных текстовых элементов и дизайна, привлекающего и направляющего внимание пользователя. Помните, что лендинг не существует отдельно, сам по себе, а должен вписываться в вашу общую маркетинговую стратегию. Для того, чтобы понять, насколько эффективен ваш лендинг и его отдельные элементы, ставьте конкретные цели и пропишите диджитал-маркетинг стратегию. Высоких вам конверсий!