В предыдущих главах мы наметили достаточно широкий фронт работ. Когда вы завершите этап анализа и оставите всю подготовительную работу позади, настанет черед проектирования посадочной страницы.
В этой главе мы поработаем над правильной подачей информации.
Самый простой пример проектирования представлен в следующей таблице.
Если театр начинается с вешалки, то любая посадочная страница – неважно, короткая или длинная, направленная на подписку или регистрацию, звонок или покупку, – начинается с первого экрана (части сайта, которую пользователь видит сразу после загрузки страницы без прокрутки).
Основная задача первого экрана – актуализировать ту информацию, которая будет на посадочной странице. Проще говоря, он должен привлечь внимание и вызвать интерес аудитории.
Задача всех остальных блоков – поддержать интерес, закрыть возражения и мотивировать совершить целевое действие. Обратите внимание на пример проектирования выше: в каждом пункте есть призыв к действию (CTA – Call To Action).
Рассмотрим подробнее путь пользователя на посадочной странице. Потенциальный клиент видит первый экран, на нем есть предложение оставить заявку, зарегистрироваться или совершить другое целевое действие.
Далее идет список товаров, если это товарный лендинг, или список услуг и их описание, если речь идет о предоставлении услуг. При этом любой товар и услугу можно заказать. На каждой кнопке есть заметный призыв к действию.
Клиенту, который пока не готов совершить покупку или не нашел нужный товар, предлагается альтернативный призыв к действию. Это может быть заявка на получение бесплатной консультации специалиста или скачивание полезного файла в обмен на контакты.
Далее идут отзывы, а после отзывов снова размещаем вариант альтернативного призыва к действию. Уточним еще раз: это не призыв «Купи!», а что-то менее стрессовое: оставить заявку на консультацию, записаться на чашечку чая с педагогом и т. д.
Затем включаются дополнительные элементы. Это могут быть кейсы, результаты учеников или фотографии «до и после». Многие маркетологи добавляют блок ответов на часто задаваемые вопросы (FAQ), таблицу сравнения с конкурентами, описание комплектации продукта. Выбор зависит от возражений ваших клиентов и того, каким способом вы собираетесь их закрывать.
Лендинг должен завершаться формой заявки. Это может быть повторение предыдущих форм (одинаковый призыв к действию) либо альтернативный вариант: заказать обратный звонок, задать вопрос (нужно предусмотреть дополнительное поле для ввода вопроса), получить коммерческое предложение.
Главное правило проектирования посадочных страниц – любое ваше предложение должно завершаться призывом к действию.
Пользователь не должен пролистывать лендинг в поисках формы регистрации. Вы должны дать ему возможность оставить заявку здесь и сейчас.
В то же время клиент не хочет чувствовать себя как на рынке, где его вынуждают купить товар. У него всегда должна быть альтернатива:
• совершить прямое действие, которое для вас является приоритетом;
• совершить действие с отступом, если он не готов совершать прямое действие (то есть купить) прямо сейчас.
Рассмотрим примеры.
1. Если прямое действие – «получить консультацию дизайнера», то действие с отступом – «получить 10 секретных дизайнерских приемов» в обмен на имя и адрес электронной почты (e-mail) клиента.
2. Если прямое действие – «покупка товара», то действием с отступом может быть «бесплатная консультация менеджера».
Вы уже наверняка сталкивались с действием этого приема на практике.
Помните, что всегда должен быть основной и альтернативный призыв к действию.
Прототипирование проекта: мокап
1. Прототип лендинга проще всего разработать в формате mockup. Речь в первую очередь идет о последовательности блоков.
2. Помните, что пользователь, который находится по ту сторону экрана, – живой человек, а не безликий трафик в сети. А значит, ничто человеческое ему не чуждо. У него есть глаза, руки и мозг.
3. Вся визуализация строится с учетом того, что вы знаете принципы работы органов чувств человека и психологию его поведения на сайте.
4. Советуем внимательно просмотреть американские сайты. Обратите внимание на то, что, хотя визуализация выполнена достаточно скупо, само проектирование, в том числе расположение ссылок, баннеров, товарных единиц, кнопок, продумано до мелочей. За каждым элементом дизайна, смысловым блоком, за каждой точкой контакта лежит тонкое понимание психологии. Поэтому важно знать, что, зачем и в какой последовательности делать. Этим мы и займемся.
Основные принципы дизайна
Рассмотрим основные принципы дизайна и остановимся на тех местах, где есть наибольший риск совершить ошибку. Эти принципы базируются на особенностях работы органов чувств человека.
Зрение
Легкость и простота. Дизайн должен восприниматься легко и просто. Чем ненавязчивее выглядят элементы дизайна, тем проще считывается информация.
Знаменитый маркетолог Джозеф Шугерман писал: «Основная задача любого графического элемента (на странице) – заставить человека прочитать первое предложение рекламного послания».
Возьмем для сравнения два сайта.
• На одном сайте информация плохо структурирована, на странице мало свободного места, доминируют кислотный розовый и зеленый цвета.
• На другом сайте то же самое содержание, но все удобно расположено, много свободного пространства, цвета подобраны с учетом цветовых схем, поэтому дизайн воспринимается легче.
Не нужно делать по 40 кнопок «заказать» на одном экране. Это неудобно, некрасиво и усложняет восприятие.
Функциональность. Дизайн должен быть функциональным, в нем не должно быть никаких лишних элементов. Не бойтесь делать лендинг простым.
Минимализм отлично зарекомендовал себя в качестве проводника информации до клиента. Чем меньше «шума», тем легче считывается послание.
Наглядность. Каждый элемент лендинга нужно подтвердить чем-либо: картинкой, фоном, фотографией. Если вы даете гарантию, то она может быть оформлена в виде сертификата. Если вы цитируете газету, то вставьте на сайт логотип этого СМИ. Иллюстрации служат для пользователя дополнительным источником информации.
Логика и удобство восприятия. Элементы лендинга должны быть расположены логически верно. Нельзя сначала потребовать у клиента его телефон или электронную почту и только потом объяснить причину, по которой они вам нужны.
На рис. 5.1 представлен пример посадочной страницы. Определить с первого взгляда, чем занимается эта компания и что они хотят от посетителя, не представляется возможным.
Рис. 5.1. Что продает этот сайт?
Раскроем интригу: это крупная компания по продаже мебели. Здесь, как любят у нас в России, все очень красиво и богато, но ни один принцип дизайна – легкость, простота, функциональность, наглядность, удобство восприятия – не соблюдается.
Особое удивление вызывает золотой значок слева под логотипом. Он похож на огромный крест, которые носят рэперы в черном квартале Нью-Йорка, а здесь этот значок приглашает скачать прайс-лист в Excel. Возможно, это «тонкий» намек на высокие цены.
В правом верхнем углу изображена фигура менеджера, с которым вы можете поговорить, но при этом номер прочитать практически невозможно. Кроме того, отсутствует восьмерка и с мобильного телефона по такому номеру не позвонить.
Единственная конверсионная форма – «Подписаться на новостную рассылку», что явно не способствует увеличению входящих звонков.
Второй пример – обратный (рис. 5.2). Google AdWords – легкий для восприятия сайт, мало текста, выгода сразу ясна, есть заголовок. Пользователю понятно, что делать, какую кнопку нажимать, каждый элемент находится на своем месте. Пользователь вводит запрос и видит в объявлении ключевое слово.
Рис. 5.2. Google AdWords
Здесь соблюдены все принципы дизайна. Но даже Google добился такого эффекта не сразу. Это далеко не первая версия, которую Google тестирует для регистрации AdWords, но именно она победила во всех сплит-тестах и дает очень неплохой результат.
Казалось бы, у сайта неприметный серый дизайн. Но это тот дизайн, который работает, и неважно, насколько он нравится или не нравится лично вам.
Память
Элементы разбиты на группы. Наша память имеет некоторые особенности. Человеку проще запомнить структурированную информацию. Дизайн посадочной страницы следует разрабатывать, используя последовательную группировку элементов. Это позволяет проще воспринимать и запоминать информацию.
Для группировки элементов используются фон, заголовок, подзаголовок, визуальные элементы (фото, иллюстрации, графика и т. д.).
В каждой группе не более четырех элементов. В одной группе рекомендуется использовать не более четырех элементов, то есть в одном блоке должно быть не более четырех пунктов, или буллитов. Пять элементов человеческая память воспринимает и запоминает на 35 % хуже, чем четыре.
Чтобы показать выгоды в заголовке, по максимуму задействуйте подзаголовки. Например, в заголовке вы пишете одну выгоду и в подзаголовке еще три.
Принцип четырех элементов действует для всех блоков посадочной страницы. Хотите сделать пакетные предложения продукта, разные варианты комплектаций товаров? Сделайте 3–4 варианта комплектаций, больше не нужно, иначе клиент в них запутается.
Важная информация повторяется несколько раз в различных формулировках. Человек часто забывает, зачем он пришел на сайт. Самая сложная борьба, которая происходит у дизайнера с клиентом, состоит не в том, как привести клиента и увести его у конкурента.
Самая сложная борьба – это заставить человека вообще что-то сделать. Поэтому нужно постоянно просить человека с вами связаться и оставить свой контакт.
Обратите внимание на одностраничник (рис. 5.3). Это сайт, продающий услуги разработки дизайна интерьеров. Выгоды представлены триггерами с правильным количеством элементов.
Рис. 5.3. Пример дизайна одностраничника
Всегда соблюдайте принцип четырех элементов. Не используйте больше четырех выгод или больше четырех отзывов. Это важный момент, который улучшит восприятие посадочной страницы.
Русскоязычная аудитория воспринимает информацию и читает слева направо, сверху вниз. Это так называемый F-образный шаблон восприятия (рис. 5.4).
Если вы будете изучать китайские сайты, то заметите, что у них информация ориентирована на другой принцип восприятия.
Рис. 5.4. F-образный шаблон
На рисунке представлена тепловая карта, на которой видно, где пользователь щелкает на странице с выдачей поисковика Google. Человек, читая, воспринимает информацию по контуру, напоминающему букву F. Поэтому необходимо располагать и выравнивать текст по левому краю. По центру допускается выравнивать заголовок на первом экране.
Избегайте лесенок с текстом. Посетителю сайта будет сложно перепрыгивать взглядом со строки на строку.
Обратите внимание на этот скриншот. Человек лучше воспринимает то, что находится в левой колонке, а то, что в правой, – вне зоны его внимания.
Конечно, вы хотите, чтобы у формы заказа была максимальная конверсия. Расположите всю форму в одну строку или в один столбик. Это поможет увеличить число заявок.
Рассмотрим рисунок, на котором изображена поисковая выдача «Яндекса» (рис. 5.5).
Рис. 5.5. Поисковая выдача «Яндекса»
Везде информация представлена в виде буквы F: заголовок, текст объявления, домен. Это скриншот старый, сейчас объявления в «Яндекс.Директ» выглядят немного по-другому, так как разработчики компании постоянно тестируют сайт. Зайдите на него, возможно, вы найдете для себя пару интересных решений.
В следующий раз также обратите внимание, как спроектированы сайты, которые вы часто просматриваете. Вы увидите, что практически все построено по F-образному шаблону.
Внимание
Одна группа элементов на одном экране. Чтобы акцентировать внимание пользователя на важных для вас вещах, следует располагать элементы таким образом, чтобы на одном экране находилась только одна группа элементов, один смысловой блок.
Важные элементы выделены. Важные элементы нужно выделять. Человеческое внимание концентрируется на чем-то одном. Обычно на том, что выделено из общего. Но будьте осторожнее…
Если вы напишете два текста, один текст выделите курсивом, другой – жирным и поместите их рядом, то ваше внимание привлечет лишь один из них. Хотя формально оба текста выделены.
Всегда учитывайте, что существует два типа пользователей:
• пользователи-логики, которые дотошно и внимательно просматривают весь сайт и читают все тексты, записывают, анализируют и составляют итоговую Excel-табличку;
• пользователи-торопыги, которые быстро принимают решения и читают только заголовки, подзаголовки и то, что выделено жирным.
Выделяйте основные элементы стрелками, жирным текстом, картинками и значками. Не забывайте про «воздух» между элементами, не лепите одно на другое.
Обратите внимание на рис. 5.6. Понятно, что это карточка товара, и ясно, что продается книга. Единственное, что не вошло в скриншот, – это кнопка заказа. Все элементы сгруппированы, выделена категория, подкатегория, картинка, цена.
На самом деле человек воспринимает элементы в следующем порядке: заголовок, картинка, цена, кнопка. Только потом он распознает дополнительную информацию о товаре и т. д. Поэтому нужно делать большую, заметную кнопку, четкое изображение и крупный заголовок.
Рис. 5.6. Пример карточки товара
Рис. 5.7. Пример посадочной страницы
Одна группа элементов находится на одном экране (рис. 5.7). Это просто идеальный пример посадочной страницы от компании Optimizely. Разработчики пошли еще дальше и сократили даже основные элементы до минимума.
Причина в том, что Optimizely – известная компания по оптимизации сайтов. Они оставили только заголовок, поле для ввода ссылки и кнопку «начать тест».
На сайте реализована адаптивная верстка для планшетов, компьютеров, смартфонов. Сайт корректно отображается на любых устройствах. К этому нужно стремиться, ведь сейчас большинство пользователей сидят в Сети именно с мобильных устройств.
Слух
Человек воспринимает сайт как книгу. Человек взаимодействует с любым предметом на основе предыдущего опыта. Например, люди неосознанно воспринимают сайты как книги.
Звук – это сигнал опасности. Не используйте звуки. Почему многие пользователи не любят звонить? Почему они заказывают обратные звонки или отправляют заявки? Ведь позвонить гораздо проще?
Любой звонок – это выход из зоны комфорта. Когда человек ищет нужную информацию, у него в крови вырабатываются определенные гормоны, и резкий выход из этого состояния – стресс.
Когда мы находимся в процессе взаимодействия с книгой или сайтом, нас сильно раздражают резкие звуки. Для увлеченного человека любой звук – сигнал опасности.
Есть небольшая группа исключений, когда внезапный звук не вызывает отторжения. Например, мягкий звук сообщения из социальной сети или СМС, тикающих часов.
Приведем пример немного из другой плоскости.
Любой резкий звук – это сигнал опасности. По этой причине все видео, которые загружаются на «автоплей» (когда происходит автозапуск видео на сайте) или когда вы закрываете сайт и на экране компьютера появляется форма stop exit: «Подождите, я хочу подарить вам подарок!», – нас очень пугают. Эти часто применяемые в последнее время «фишки», как правило, только снижают конверсию в дальней перспективе, а не увеличивают ее. Ведь мы вряд ли захотим возвращаться в место, где нас ждет опасность.
Социальные соглашения
Рассмотрим социальные соглашения.
Просите минимум информации о человеке. Представьте ситуацию: вы заходите в ресторан и видите у окна сидящего человека, вы к нему подходите, вспоминаете, что это ваш старый знакомый, и заводите непринужденную беседу.
Но, если среди разговора ваш знакомый начнет задавать слишком личные вопросы или внезапно без причины попросит одолжить ему крупную сумму денег, вы почувствуете себя некомфортно.
Приведем еще один пример: вы выходите из подъезда, видите соседку.
Вы привыкли перебрасываться с ней короткими фразами:
– Привет.
– Привет.
– Как дела?
– Все нормально.
– Пока.
– Пока.
Очередным утром вы выходите из подъезда, а соседка ни с того ни с сего начинает рассказывать вам про несчастную жизнь, как ей изменил муж, как сын остался на второй год, и на вас накатывает чувство неловкости.
Причина в том, что у вас установлен «лимит на транзакции» в общении с соседкой. Вы привыкли к определенному числу фраз. Вы говорите соседке (любому малознакомому человеку) три слова и ждете от этого человека три слова в ответ.
Данный принцип социального соглашения нужно использовать и при проектировании посадочной страницы. Самое главное правило: просите человека предоставить минимум информации о себе.
Человек не готов вам ничего рассказывать. Он вообще вас не знает. Вы для него даже не сосед, вы «продавец в электричке». Если вы хотите, чтобы человек для получения, допустим, 15 бесплатных советов от гуру маркетинга предоставил какую-то информацию, – обоснуйте, зачем она вам нужна.
Максимально открыто делитесь информацией о себе: юридические данные, личные фотографии, адреса офисов. Видео докажет пользователю, что вы и ваш товар реально существуете. Человеку приятнее общаться с теми людьми, которых он знает.
Бэкграунд
Можно выделить несколько важных особенностей, касающихся оформления общего фона сайта и текста.
Исходя из теории социальных соглашений фон сайта должен быть светлым и однотонным (вспомните аналогию с книгами). Отзывы принято выделять желтым или бежевым фоном.
Посмотрите крупные сайты: Amazon – светлая гамма, Wildberries – светлый фон, Lamoda – белый цвет.
С точки зрения удобства восприятия информации это не совсем правильно.
Монитор компьютера излучает свет, как фонарик, поэтому белые буквы на черном фоне должны восприниматься лучше. Если вспомнить старые программы, например MS DOS, там так и было.
Почему же тенденция изменилась? Снова виноваты книги. Нам привычнее видеть черный текст на белом фоне, несмотря на то что с точки зрения физиологии буквы должны быть белыми, а фон – темным.
Бэкграунд – это отличный способ группировки элементов по смыслу. Форма заказа должна быть на контрастном фоне. Для обозначения прямой речи в отзывах используется желтый фон.
Фон должен быть однотонным. Ни в коем случае нельзя добавлять цветочки или фотографии облаков в качестве фоновой картинки.
Основная функция периферического зрения – это охрана от опасности. Если в зоне ответственности периферического зрения находится отвлекающий элемент, то потенциальный покупатель вашего товара или услуги будет все время забывать про цель визита и не сможет сфокусироваться на вашем коммерческом предложении.
Откройте любой сайт с подобным бэкграундом и почувствуйте, как тяжело воспринимать информацию и читать текст.
По этой же причине нельзя использовать слайдеры, параллакс-эффекты и т. д. Любое движение на сайте уводит пользователя от совершения целевого действия. Если вы хотите создать иллюзию движения, можно применить так называемое псевдодвижение: стрелки, наклон текста, скобки.
На рис. 5.8 представлен сайт. Иллюзия движения создается стрелочками и заставляет человека читать текст несмотря на то, что он стоит вразнобой.
Рис. 5.8. Пример дизайна сайта
Обратите внимание на отдельный бэкграунд для первого экрана и отдельный бэкграунд для отзывов. Отзывы четко обособлены, в их оформлении применяется много разных «фишек»: кавычки, оформление прямой речи.
Но самое главное – выделение смысловых групп элементов: первого экрана и отзывов.
Оформление текста
В медийном пространстве существуют свои правила оформления текста.
В техническом оформлении не рекомендуется красный шрифт.
Не следует также выделять текст с помощью Caps Lock – это воспринимается как крик на посетителя.
Человек легче воспринимает короткие строки. Чем короче строка, тем с большей охотой человек будет читать текст. Именно поэтому в газетах делают колонки.
На самом деле короткие строки сложнее для восприятия информации, но пользователю кажется, что короткий текст легче прочесть, так как массивы текста кажутся меньше.
То, на чем в тексте необходимо акцентировать внимание, выделяют полужирным шрифтом, но не более трех слов подряд.
Более того, выделенные слова должны быть легкочитаемы и иметь отдельную смысловую нагрузку, а информация структурирована для быстрого и легкого восприятия с помощью маркированных списков или буллитов.
Размер от 12 до 18 px. Размер шрифта на сайте должен быть не менее 12 пикселов.
Читать текст с экрана труднее, чем с бумаги. К тому же у многих пользователей плохое зрение и получается, им нужно идти за очками, чтобы разобрать рекламный текст. Тут уже не до покупки. Любые сложности и неудобства ведут к потере клиентов.
Прямая речь – курсив. Прямую речь и какие-то важные моменты лучше выделить курсивом. Можно использовать курсив для выделения прямой речи при оформлении отзывов покупателей чтобы показать, что эти слова принадлежат не авторам сайта, а их клиентам.
Текст контрастный (черный текст на белом фоне). Вопрос применения черного текста на белом фоне уже затрагивался. Поговорим о сером тексте на сером фоне. Это тот случай, когда эстетикой стоит пожертвовать ради юзабилити. И ради продаж.
Использовать синий текст только в ссылках. Многие создатели одностраничников любят использовать синий цвет в заголовках и подзаголовках. Если ориентироваться на социальное соглашение, у книги и сайта есть одно явное отличие – это гиперссылки.
Мы знаем, что можем проходить сайты не от страницы к странице, а двигаться вглубь с помощью ссылок.
Пользователи привыкли к тому, что у ссылок есть две характеристики: ссылки выделяют либо синим цветом, либо подчеркивают специальной линией.
Поэтому, если в тексте что-то подчеркнуто или выделено синим цветом, это автоматически воспринимается как ссылка. Правило простое: никогда не используйте синий цвет в тексте, за исключением выделения ссылок.
На картинке представлены страницы сайтов для сравнения (рис. 5.9). Есть страница с более мелкими шрифтами и более крупными.
Какой проще воспринимается? Естественно, левая страница воспринимается проще, чем правая.
Ниже на картинке вы увидите два примера использования фона. Сравните применение белого и серого фона. Белый фон для восприятия проще, чем серый. Легче понять, что написано, и хочется продолжить чтение.
Для ссылки применяется уникальный цвет: если посмотреть на картинку, можно точно сказать, что ссылка находится на второй строке текста, потому что она подчеркнута и выделена цветом.
Используйте русские кавычки и буллиты. К сожалению, сейчас многие пользователи разучились грамотно писать, доверяя исправление ошибок в тексте компьютерным редакторам.
Рис. 5.9. Структура страниц сайтов для сравнения
Но клиента этим простым объяснением не взять. Он очень быстро отличит грамотный текст от текста с ошибками. А для пользователя ошибки в лендинге – это «триггер» недоверия.
Если у вас хорошая грамотность, то доверие пользователя – ваше. Старайтесь избегать «ляпов» и в мелочах. Например, русские кавычки – это кавычки «лапки» или «елочки». Не используйте две «верхние» кавычки «…». Это признак дурного тона.
Применяйте, где необходимо, тире, а не дефис.
Используйте маркированные списки-буллиты.
Как применять все принципы и правила оформления к каждому элементу сайта, отзывам, описанию продуктов, оформлению первого экрана, мы обсудим далее. Начнем с первого экрана.
Первый экран
Перечислим основные элементы первого экрана: логотип, дескриптор, заголовок (выгода), подзаголовок (дополнительная выгода), кнопка действия или форма заказа.
Дескриптор в Америке уже редко используется, потому что там в основном продвигаются известные бренды. Американцы переносят сам дескриптор в заголовок. В России дескриптором пока пользуются, но наметился тренд на вымирание.
Рассмотрим подробно, как создаются все элементы.
Заголовок
Большой размер (от 30 рх). Заголовок должен быть большого размера, от 30 пикселов и более. Заголовок – это та часть первого экрана, на которую мы обращаем максимальное внимание. Восемь пользователей из десяти читают заголовок.
В центре экрана. Заголовок должен быть по центру экрана либо выровнен по левому краю, в зависимости от того, какая композиция выбрана.
Не больше 8–10 слов. Заголовок должен быть коротким, не более 10 слов. Все остальное будет сложно восприниматься аудиторией.
Обратите внимание на рис. 5.10 – это сервис по созданию меню для ресторана.
Рис. 5.10. Страницы сайтов для сравнения
Здесь большой заголовок, под ним подзаголовок и кнопка заказа. На русском фраза звучит так: «Создайте свое меню онлайн за минуту».
Заголовок читается даже на маленькой картинке и действует убеждающе.
Картинка
Картинки бывают нескольких видов.
Картинка-идентификация
Если мы хотим использовать женское лицо, нужно не просто взять первую попавшуюся женщину и вставить ее фото. Пользователь должен ассоциировать себя с этой картинкой и узнавать в ней себя (по возрасту, роду занятий, внешности и т. д.).
Фотография лица компании
В данном случае речь идет о лице-бренде, если такое в компании имеется. Обычно им выступает человек, которого хорошо знает аудитория, к кому относится лояльно, но самый важный фактор – персонаж должен ассоциироваться с компанией.
Фотография клиента
Речь идет о применении фото клиента, к примеру оставившего отзыв. В подобных случаях использование лица человека оправдано. Соответственно форма заказа размещается слева или справа экрана.
Рассмотрим один пример (рис. 5.11). Это одностраничник обучающих программ Convert Monster. На картинке лицо компании – Евгений Новиков. Пользователь ассоциирует его с агентством, так как Евгений присутствует во всех рекламных кампаниях и участвует в конференциях от лица компании.
Рис. 5.11. Лицо компании
Было проведено огромное количество тестов. У сайтов с фотографией Евгения очень высокая конверсия. И это не просто так – наши клиенты идентифицируют себя с Евгением.
Тесты и отклики аудитории показали, что он действительно располагает к себе, вызывает доверие, являясь при этом лицом компании и ведущим тренингов. Здесь происходит слияние двух понятий: пользователь узнает в лице Евгения себя и в то же время Женя – официальное лицо агентства.
Второй вариант – сайт «Бэйскамп» (рис. 5.12). В качестве картинки использована фотография пользователя. Кстати, это один из лучших лендингов, существующих в мире.
Рис. 5.12. Лицо компании
Заголовок посадочной страницы говорит нам: «Присоединяйтесь к 6700 компаниям, которые уже используют “Бэйскамп”». И, как подтверждение этим словам, приводится отзыв клиента.
Клиент выбран не случайно. Именно так, по мнению компании, выглядит их целевая аудитория, то есть «молодые успешные люди». Отзыв и фото призваны вызвать доверие у клиентов такого типа.
Вы можете смело использовать фотографии клиентов (конечно, с их разрешения). Этой «фишкой» пользуются многие. Проект «Бизнес Молодость» применил в свое время такой же точно подход.
Фото лучше разместить слева или справа от формы, но предпочтительнее слева, так пользователю будет легче вписать свои данные в форму заказа. Опять же месторасположение формы вы можете протестировать.
Фото обязательно должно нести в себе смысл, не надо использовать картинки с первыми попавшимися девушками. Хотя триггер «женщина» сам по себе работает неплохо.
Судите сами: для сайта Convert Monster мы подготовили серию фотографий модели, которая долгое время работала у нас секретарем. Фотографии достаточно откровенные, но через них легко провести аналогию с работой лендинга (захватить внимание – удержать интерес – продать). Смена фото показала сногсшибательный результат по конверсии – мы явно попали в целевую аудиторию.
Использовать фото с просто красивой девушкой имеет смысл только в том случае, если вы передаете через него интересную и понятную идею.
Скриншот
Рассмотрим еще один вариант картинки – это скриншот. Его стоит использовать, если вы хотите дать пользователю неопровержимые доказательства.
Например, вы хотите показать результат, который получит клиент, работая с вашей компанией. Или другой вариант: вставить в картинку первого экрана скриншот программы, которую вы рекламируете. Тогда лучше всего располагать картинку со скриншотом по центру и сразу под заголовком.
Пример применения скриншота – первый экран сайта конструктора сайтов (рис. 5.13). Здесь представлены скриншоты сайтов, статистики управления – то, что находится внутри сервиса LPGenerator, системы, с помощью которой можно создавать посадочные страницы.
Рис. 5.13. Использование скриншота
Процесс или результат
Если с помощью картинки вы хотите показать процесс получения услуги или ее результат, то в таком случае поставьте ее как фоновое изображение. Плюсы такого подхода – нет навязчивости, но желаемое действие четко считывается пользователем.
На картинке представлен пример такого сайта от компании «Фрэнк энд Оак», которая продает одежду для игры в теннис (рис. 5.14).
Рис. 5.14. Изображения с процессом или результатом
Все сделано согласно последним тенденциям: процесс и результат показаны фоном. Однако здесь нашлось место комбинации нескольких вариантов. Человек, расположенный справа от формы заказа, – это уже картинка-идентификация.
С другой стороны – это одновременно и результат: человек одет в одежду бренда и явно играет в теннис.
Оформление формы
Поля формы отличаются по цвету от фона формы. Фон необходим для того, чтобы выделять важные для вас блоки лендинга.
Внутренние поля формы заказа должны отличаться по цвету от бэкграунда. Допустим, если весь бэкграунд формы коричневый, то поля для ввода текста нужно делать белыми.
Стрелки к кнопке действия. Чтобы привлечь дополнительное внимание к форме регистрации, можно использовать стрелку, указывающую на кнопку действия. Стрелку может символизировать человек, показывающий на форму рукой или направлением взгляда. В вашем распоряжении любые визуальные сигналы, которые направляют внимание клиента на форму заказа.
Контур с закругленными краями. Если вы будете использовать форму с контуром, то поля лучше делать закругленными. Острые поля ухудшают восприятие.
Да и кнопку часто можно встретить именно с закругленными углами, нередко этим приемом пользуются инфобизнесмены – где надо и где не надо.
Текст в форме. В первую очередь подумайте, какие поля формы действительно нужны. Какую информацию от клиента получить приоритетнее? Чаще всего достаточно имени и почты.
Телефон и e-mail одновременно запрашивают редко. Будьте внимательны, рекламируясь в соцсетях, например в сети «ВКонтакте». Лендинги, запрашивающие телефон, могут иметь сложности с модерацией.
Чтобы отсеять неадекватных посетителей, можно добавить адрес сайта в том случае, если компания занимается SЕО-продвижением сайтов.
Еще одно важное наблюдение: клиенты очень неохотно оставляют и имя, и фамилию одновременно. Если по какой-то причине вам нужна эта информация, ее всегда может спросить менеджер по телефону.
Везде используйте активный призыв к действию. Употребляйте глагол в повелительном наклонении: «Введите ваше имя. Введите ваш телефон».
Подсказки для сложных полей. Если вы берете у клиента какую-то информацию, которую нужно внести в нестандартное поле, то обязательно давайте подсказки.
Например, при оформлении платежа с кредитной карточки всегда требуется внести номер карты и три цифры cv2. В этом случае клиенту следует напомнить, что нужный номер написан на обратной стороне карты.
Если вы запрашиваете СНИЛС или что-то еще, нужно указать, где человек может взять эту информацию.
Любую нестандартную информацию, то есть все, кроме имени, телефона, адреса сайта, можно запрашивать у клиента только с объяснением целей запроса.
Одна строка – одно поле для ввода. Никогда не делайте два поля ввода на одной строке. Например, «имя» и «фамилию» не располагайте на одной строке, если форма регистрации вертикальная. Одна строка – это одно поле для ввода.
Маска для телефона (+7 903 333 44 55). Если вы запрашиваете у человека телефон, то подскажите, в каком виде хотите его взять. Для России можете использовать маску ввода номера с +7, клиенту остается лишь ввести все остальные цифры после кода.
Таким образом вы создаете определенный формат сбора номеров в свою CRM. Делайте маску поля, чтобы человек сразу видел, сколько цифр вводить, – это спасет вас от получения некорректных номеров телефонов.
Однако будьте внимательны, если рекламируетесь и в других странах: маска ввода +7 может сделать ввод номера невозможным для иностранцев.
Валидация полей (проверка на правильность заполнения). Обязательно осуществляйте валидацию полей, чтобы человек не мог отправить некорректную информацию. Если собираете e-mail, то включите проверку на английский алфавит и наличие значка @. Если номер телефона, то нужно включить проверку на корректное количество цифр.
Рассмотрим несколько картинок с изображением различных форм обратной связи и опишем недостатки и достоинства этих форм.
• Форма 1. Достоинства формы 1 (рис. 5.15): простота, легкость; одно поле в строку; присутствует уникальный цвет кнопки; объединены поля ФИО; не нужно оставлять телефон.
Рис. 5.15. Форма 1
Недостатки: короткое поле для ФИО; нет активного диалога с пользователем; слишком большое поле для сообщения; нет объяснения, зачем нужно связаться с владельцами сайта. Например, можно было написать так: «Задайте вопрос, и мы ответим вам в течение 15 минут». Заголовок и кнопка отправки не связаны между собой.
• Форма 2. Достоинства формы 2 (рис. 5.16): все коротко и понятно; минимум информации; внутри есть подсказка к кнопке; форма расположена справа.
Недостатки: нет маски поля; непонятно, почему такое большое поле для заказа, и непонятно, что заказывать; неконтрастная кнопка; когда подсказка находится внутри поля, можно забыть, что это поле нужно заполнять; острые края формы заказа смотрятся некрасиво. Фраза «Мы свяжемся с Вами в самое ближайшее время» звучит неопределенно.
Рис. 5.16. Форма 2
• Форма 3. Достоинства формы 3 (рис. 5.17): очень хороший и контрастный фон у формы заказа.
Недостатки: значок здесь не нужен; кнопка плохо читается; сомнительные подтверждения конфиденциальности; непонятно, зачем замок рядом с кнопкой Отправить; нет призыва к действию; текст выровнен по центру; внутри полей написаны подсказки; используется синий шрифт; «E-mail» пишется через дефис.
Рис. 5.17. Форма 3
• Форма 4. Достоинства формы 4 (рис. 5.18): звездочка обозначает поля, обязательные к заполнению; над формой заказа на картинке изображен конечный результат, то, что пользователь получит после заполнения полей; стрелка указывает на форму заказа. Это очень удачная форма заказа, обратите на нее особое внимание.
Рис. 5.18. Форма 4
• Форма 5. Достоинства формы 5 (рис. 5.19): название формы понятное – «Заявка на лизинг»; есть подсказки; заголовок яркий; форма заказа закруглена; форма выделена с помощью бэкграунда на общем фоне сайта; выделены обязательные поля.
Рис. 5.19. Форма 5
Недостатки:
• поля расположены в две строки, полей в целом очень много, у них нет масок, запрашивают слишком много данных, все поля обязательны к заполнению;
• есть поля (предмет лизинга, стоимость лизинга), которые непонятно, как заполнять;
• кнопка заказа неактивная, нужно поставить галочку внизу под кнопкой, так как надо еще с чем-то согласиться, прежде чем отправить заявку. Текст на кнопке не читается, а новости сайта, расположенные слева, отвлекают от формы.
На самом деле для этой формы достаточно двух полей ввода данных. В противном случае конверсия таких форм будет очень низкой, не более 0,5 %.
• Форма 6. Достоинства формы 6 (рис. 5.20): понятно, зачем заполнять эту форму; контрастный текст; все поля в одну строку; очень привлекательное предложение; много полезной информации; поля формы контрастного белого цвета на фоне темного бэкграунда.
Недостатки:
• очень много полей (зачем нужен «Вид деятельности»?), разная длина полей, текст выровнен по правому краю;
• нет конкретики в предложении, непонятно, что предлагают дегустировать, не видны обязательные поля, синяя кнопка на синем фоне;
• кнопка Далее и поле Комментарий здесь неуместны. Текст на кнопке заказа Далее не несет призыва к действию. Какие могут быть комментарии после заполнения всех полей формы? Для дегустации здесь запрашивают слишком много лишней информации;
• мотивация продегустировать продукт должна быть очень сильной, чтобы заполнить все поля и ждать звонка менеджера, который станет задавать дополнительные вопросы, например номер страховки.
Понятно, что это пример, как не нужно делать форму обратной связи.
Рис. 5.20. Форма 6
• Форма 7. У формы 7 нет недостатков (рис. 5.21). Так должна выглядеть и ваша форма.
Здесь есть призыв к действию: Отправьте заявку и получите оптовые цены на все чехлы. Поля для введения номера телефона и адреса электронной почты имеют маску.
Соблюдена последовательность действий: Оставьте заявку и получите оптовые цены на все чехлы, и далее на кнопке заказа написано: Получить оптовые цены. Все логично, просто и понятно.
Рис. 5.21. Форма 7
Конверсия этого лендинга говорит сама за себя – 21 %.
Самая главная кнопка
Оформление. Рассмотрим основные характеристики самой главной кнопки заказа.
• Кнопка должна быть яркого уникального цвета, большого размера, чтобы ее было видно на расстоянии двух метров от экрана. Клиент должен сразу понимать, чего от него хотят, его взгляд должен задерживаться на кнопке.
• Желательно, чтобы кнопка была выпуклая. Мимо этого сигнала трудно пройти: любую кнопку чисто психологически хочется нажать.
Текст. Текст на кнопке должен быть контрастным и легко читаться.
Например:
• на черном фоне белый текст;
• на красном фоне белый текст.
Если ваша посадочная страница состоит из двух экранов и более и там есть какая-то дополнительная информация, нужно использовать символы движения. Как правило, это стрелки или кавычки. Рассмотрим на примерах.
На рис. 5.22 изображены три кнопки. Какие у них недостатки?
Рис. 5.22. Недостатки кнопок
• Левая кнопка. Текст расположен слишком близко к краям кнопки, поэтому его сложно прочитать. К тому же текст написан в режиме Caps Lock. Сама кнопка небольшого размера и похожа на таблетку, изображение размыто.
• Центральная кнопка. На кнопке изображен значок корзины и написано «Купить».
Что делает пользователь на самом деле? Он выбирает товар и кладет его в корзину. Поэтому на кнопке должно быть написано «Добавить в корзину». Рядом со словами «Добавить в корзину» значок корзины смотрится уместно.
• Правая кнопка. В оформлении этой кнопки тоже нарушена логика. Здесь надо написать «Добавить в корзину», а не «Купить». Если вы пишете «Купить», то имеет смысл поставить значок денег. Размер шрифта использован правильно.
Недостатки кнопок, изображенных на рис. 5.23, таковы.
Рис. 5.23. Недостатки кнопок
• Левая кнопка. Рассмотрим плюсы и минусы данной кнопки. Обратите внимание на шрифт. Так называемые засечки над буквами (домики) усложняют чтение. Запомните: шрифт с засечками с экрана читается сложнее, чем шрифт без засечек.
Используйте шрифты без засечек, например Arial. Часто применяется Times New Roman – это шрифт с засечками. Он хорош для газет, но для верстки сайтов его лучше не использовать.
• Центральная кнопка. Центральная кнопка КУПИТЬ имеет несколько недостатков: она выглядит плоской, углы не закруглены, для написания текста использована клавиша Caps Lock.
• Правая кнопка.
• Плюсы: кнопка яркая и контрастная, понятно, что нужно сделать, но символ плохо считывается.
• Минусы: кнопка невыпуклая, больше похожа на дорожный знак. Картинка сбивает с толку, что это за магазин, почему люди так радуются покупке? Здесь присутствует смысловая ошибка. Add to Shopping Cart – «Добавить в корзину для покупок» – слишком длинный текст, его нужно сделать гораздо короче: Add to Cart.
На рис. 5.24 изображена одна из самых удачных кнопок – кнопка системы PayPal. Да, здесь использован Caps Lock, но он сглажен курсивом, кнопка сама по себе очень агрессивная. Посмотрите, какие прекрасные стрелки к центру. На эту кнопку так и хочется нажать. Наклон шрифта показывает, что дальше что-то будет.
Плюсы: большой размер, кнопка выпуклая, яркие края. Под кнопкой есть логотипы сайтов, с помощью которых можно совершить покупку, то есть описан следующий шаг.
Рис. 5.24. Удачная кнопка
Вы узнали все правила создания одностраничника и изучили все его элементы. Теперь настало время создать свою посадочную страницу и сделать ее, например, такой (рис. 5.25).
Рис. 5.25. Пример страницы
Что не так в этом примере?
На первый взгляд все правильно, все формальные требования соблюдены.
Но непонятно, что делает этот человек на фото. Кстати, какие предположения, что предлагает эта компания? Да все что угодно! Начиная с планшетов и заканчивая прогнозом погоды.
Как можно трактовать картинку без подписи?
Приложения и облака, которые вылетают из планшета, не дают пользователю сосредоточиться на главном. А главное здесь – призыв к действию внизу экрана, его практически не видно, он не несет смысловой нагрузки.
Ладно, раскроем карты. На самом деле это профессиональная команда верстальщиков, которая предлагает свои услуги. Но понять это не так-то просто. Поэтому, используя «правильные» элементы лендинга, не нужно уходить от главного – сути вашего предложения.
Заголовок + кнопка
Рассмотрим варианты оформления.
Первый вариант. Заголовок + кнопка (рис. 5.26).
Рис. 5.26. Пример заголовка и кнопки
Зеленая кнопка скачать Firefox, заголовок и картинка-скриншот по центру как один из жизнеспособных вариантов. Обратите внимание, что в примере нет ничего лишнего.
Заголовок + форма + кнопка
Второй вариант. Здесь используются только заголовок, форма и кнопка (рис. 5.27). На картинке изображен один из лучших примеров сайта от компании Optimizely, и ему даже не нужен подзаголовок. С помощью градиента и фона внимание пользователя концентрируется на строке для ввода электронного адреса.
Рис. 5.27. Пример заголовка, формы и кнопки
Заголовок + подзаголовок + форма + кнопка
Третий вариант. Третий вариант отличается от второго наличием подзаголовка (рис. 5.28).
Заголовок: Shop Frank & Oak Today – «Покупайте товары Frank & Oak сегодня».
Подзаголовок: в нем краткое описание выгод от регистрации на сайте.
Рис. 5.28. Пример заголовка, подзаголовка, формы и кнопки
Форма: здесь предусмотрена возможность войти на сайт через Facebook или ввести в специальное поле свой e-mail.
Кнопка: нажав кнопку Get Started, можно попасть на сайт магазина.
Заголовок + подзаголовок + кнопка + + триггеры
Четвертый вариант. Заголовок + подзаголовок + кнопка, и на первый экран выводятся триггеры (рис. 5.29). Триггеры являются теми выгодами, которые получает клиент.
Заголовок + подзаголовок + кнопка + + отзывы
Пятый вариант. Заголовок + подзаголовок + кнопка + отзывы. На рисунке представлен подобный сайт (рис. 5.30). Отзывы на этой странице – это готовые кейсы, по сути, здесь перечислены выгоды, которые получили пользователи.
Рис. 5.29. Пример заголовка, подзаголовка, кнопки и триггеров
Рис. 5.30. Пример заголовка, подзаголовка, кнопки и отзывов
Например: «Вложил 49 долларов, заработал 1127 долларов».
Состав триггера. Что такое триггеры? Триггер в переводе с английского – «крючок». Фактически это спусковой крючок для пользователя, чтобы он обратил внимание на ваше предложение и захотел решить свои проблемы с вашей помощью. Триггеры – это клиентские выгоды, оформленные визуально.
Триггер состоит из заголовка, текста и значка. Визуальное оформление делают с помощью текста или значков. Все зависит от выбранной концепции дизайна. В триггере всегда есть значок. Его может заменить галочка либо знак маркированного списка.
Как оформлять триггеры? Триггеры можно оформлять либо буллитами, либо галочками.
Важный текст выделяется жирным шрифтом – он играет роль заголовка, и, соответственно, выгода выделена за счет свойства и пишется справа.
Если человек торопится, он остановит взгляд на галочках и полужирном тексте: «Вы можете расслабиться, не беспокойтесь о качестве, вы точно не ошибетесь». Триггер подействует безотказно.
Для оформления триггеров часто используют динамические заголовки. Для этого берут выгоду и пишут ее вместо заголовка триггера.
Человек, который торопится (а в Сети все торопятся), не будет читать подтверждение, он просто удостоверится, что оно есть, обратит внимание на цифры и прочитает заголовки. Эффект можно усилить значками, и реакция потенциальных клиентов не заставит себя ждать.
Триггеров должно быть не более четырех, так достигается оптимальная степень воздействия на аудиторию, а дизайн лендинга не теряет в легкости и простоте восприятия.
Все вместе. На рис. 5.31 изображен прекрасный пример триггеров.
Рис. 5.31. Пример триггеров
Easy for user, easy for all ages, easy for sharing.
Здесь применена такая «фишка», как тройное повторение, тройная гарантия, когда берут гарантию и раскладывают ее на три составляющие (в данном случае «легко, легко, легко»).
Это маркетинговый прием, когда одна выгода «легкость» повторяется три раза, усиливается картинками, динамическим заголовком и описанием выгоды.
Оформление продукта
Опишем сложный вариант оформления продукта, когда на сайте одновременно продают много товаров.
При продаже прицепов, навигаторов и любых других товаров, когда пользователю предлагается широкий выбор, в оформлении обязательно должны присутствовать следующие элементы: заголовок, краткая характеристика модели, фотография продукта и кнопка Заказать.
Можно использовать разные вариации для оформления продукта, делать открытую форму для заявки, но обязательные элементы должны быть всегда.
Если у вас сложный продукт с большим количеством характеристик, можно использовать вот такой формат (подробнее см. по ссылке: ) (рис. 5.32).
Рис. 5.32. Описание продукта на сайте
На этом сайте есть каталог, из него можно перейти в подкаталог и выбрать нужный товар.
Отзывы
Оформление текста
Рассмотрим элементы посадочной страницы, в которых задействован текст. В первую очередь речь пойдет об отзывах.
Каким образом нужно оформлять отзывы на посадочной странице? Ведь отзывы и кейсы – это большой объем текста.
Мы протестировали массу вариантов размещения отзывов и рекомендуем следующее.
• Заголовок. Можно использовать яркую и короткую цитату из отзыва либо обозначить его краткое содержание. Главное, чтобы в заголовке отражался основной эмоциональный посыл.
• Важное выделено. Фразы, которые заостряют внимание на выгодах предложения, выделяйте жирным шрифтом.
• Ссылка на соцсеть или контакты. В отзыве обязательно должно быть доказательство, что его оставил реальный человек, например ссылка на профайл в соцсетях, телефон, любые контактные данные, адрес компании.
• Прямая речь – курсив. Использование курсива допускается при оформлении прямой речи. Таким образом отзыв выделяется среди других текстовых блоков, и нет необходимости подчеркивать его специальным фоном.
• Должность или социальный статус. Обязательно указывайте должность или социальный статус того, кто дает отзыв. Например, если речь идет о похудении, то отзыв может быть от лица некой Ирины Васильевой, 38 лет, мамы двоих детей, затем адрес электронной почты, телефон или ссылка на профайл, чтобы с ней можно было связаться.
Потенциальные клиенты, как правило, этим людям не пишут, но указанным данным доверяют. Дизайн отзывов должен быть функциональным, и в нем не должно быть ничего лишнего.
Оформление раздела
Для визуального оформления раздела с отзывами применяют несколько способов.
• Стилизация под социальную сеть. Очень распространенный способ – стилизация отзывов, например, под Facebook или «ВКонтакте».
• Внешний фон. В этом случае отзывы выделяются уникальным фоном.
• Кавычки. Текст отзыва выделяют кавычками, чтобы передать прямую речь. Показать, что повествование ведется уже не от автора, а от клиента. Кавычки можно делать стилизованными, крупными, чтобы привлечь внимание пользователя.
• Возможность оставить отзыв. Иногда на сайт добавляют возможность оставить отзыв как дополнительный призыв к действию. Если отзывы оставлять не будут или будут писать что-то некорректное, можно просто убрать эту опцию. Никто не мешает вам экспериментировать.
Оформление автора
Для оформления автора отзыва есть три «фишки».
• Фото из соцсети. Фото автора лучше взять не постановочное, а реальное, живое, из социальной сети.
• Логотип. Если фото автора нет, но есть компания и отзыв написан от лица компании, то можно вставить логотип этой компании.
• Фото на проявке. Для трастовости можно сделать один отзыв, у которого нет фотографии, и написать, что фото на проявке.
Подтверждение реальности
Для подтверждения реальности важны следующие аспекты.
• Скриншот статистики. В идеале в отзыве должны присутствовать любые подтверждения реальности автора, это может быть, к примеру, скриншот статистики его результатов.
• Фото процесса предоставления услуги по шагам. Фотографируют весь процесс предоставления услуги по шагам и используют как подтверждение реальности существования компании.
Например, если компания устанавливает натяжные потолки, то последовательность фото будет выглядеть так: мы пришли в квартиру, мы разобрали потолок, мы установили потолок, вот результат нашей работы.
• Отзыв компании. Если это отзыв от лица крупной компании, то желательно, чтобы он был сделан на фирменном бланке. Его можно отсканировать и разместить на посадочной странице. Если у компании нет фирменного бланка, попросите дизайнера нарисовать его.
• Письменная благодарность. Письменная благодарность – это отзыв, написанный от руки. Можно попросить кого-нибудь переписать отзыв от руки, отсканировать и разместить на лендинге.
Примеры
Рассмотрим примеры оформления отзывов. На рис. 5.33 пример оформления отзывов в стиле социальной сети, в данном случае это социальная сеть Facebook.
Рис. 5.33. Примеры оформления отзывов
Для этого на сайт или на одностраничник ставят плагин Facebook, есть такой же плагин «ВКонтакте». Пользователи соцсетей в режиме реального времени могут оставлять отзывы.
На рис. 5.34 на странице с отзывами есть два призыва к действию.
• Основная кнопка зеленого цвета …SIGNING UP TODAY – «присоединяйся к нашему обществу».
• Дополнительная оранжевая кнопка REQUEST A DEMO TODAY – это альтернативный призыв к действию, «попросите бесплатную демоверсию».
Рис. 5.34. Оформление отзывов
Все это находится в окружении отзывов, которые объединены в группу из четырех элементов. Оформление отзыва: фото, имя, фамилия, социальный статус автора отзыва и сам отзыв в кавычках. После отзывов пользователю предлагается более легкий призыв к действию.
Рисунок 5.35 мы уже рассматривали. Отзыв размещен на первом экране, выделен отдельным фоном, есть кавычки и подпись автора.
Человек, оставивший отзыв, работает в очень известной компании «Форбс». Страница выглядит лаконично и имеет хорошую конверсию за счет высокого статуса человека, оставившего отзыв.
Один из самых эффективных методов представления отзывов можно увидеть на рис. 5.36 – это отзывы в формате кейса.
Подзаголовок: «Познакомьтесь с первыми нашими счастливыми покупателями по всему миру». Всего на этом сайте шесть отзывов. На картинке видно три отзыва.
Рис. 5.35. Отзывы в стиле кейса
Рис. 5.36. Отзывы в стиле кейса
• Первый отзыв от Stephen Voss – фотограф, живет в США, в Вашингтоне, ссылка на место работы выделена голубым цветом. Он работает сам на себя.
• Второй отзыв от Jon Dokulil – живет в Линкольне, работает менеджером в хоккейной команде. Дополнительный посыл отзыва в том, что она не привязана к рабочему месту и путешествует по всей стране.
• Третий отзыв от Mari Laungrath – живет в Чикаго, печет булочки. Чикаго – это не столица, но достаточно крупный город. Также мы узнаем, что она работает в команде.
Эти отзывы несут в себе очень много дополнительной информации. Главный их посыл в том, что продукт компании подойдет для любого человека, где бы он ни жил и кем бы ни работал.
В отзывах присутствуют выгоды для всех: и человека-одиночки, и «командного игрока», и столичного жителя, и обитателя маленького городка.
Все примеры страниц функциональны, в них нет лишних элементов, все продумано до мелочей.
Комплектация продукта и сравнение с конкурентами
Комплектация продукта и сравнение с конкурентами – это один из самых эффективных приемов рекламы.
Последовательность действий на практике: продумывается несколько комплектаций продукта в разных ценовых категориях, в результате у клиента создается иллюзия выбора и увеличивается средний чек.
Далее обзваниваются конкуренты, их спрашивают о наличии или отсутствии подобных предложений и стоимости продукции. На основе опроса создается общая таблица.
Добавьте в комплектацию выгоды, которых нет у конкурентов. Всю эту информацию разместите на сайте и наглядно покажите ваши преимущества.
Как в этом случае оформить текст?
Заголовок – название продукта
Заголовок должен быть очень крупным и заметным. Если идет сравнение с другими компаниями, то крупным шрифтом указывается название компании.
Одна строка – это одно преимущество. Каждое преимущество пишется в строку. Каждая строка таблицы должна хорошо читаться.
Цена. В конце описания товара обязательно указывается цена, но иногда ее можно опустить.
Когда нужно указывать цену? Когда человек сразу после нажатия кнопки может оплатить товар, например если продается софт или инфопродукт. В противном случае можно просто ставить кнопку Заказать, без цены.
Кнопка Заказать. После цены или вместо цены используется кнопка Заказать. Соблюдаем все правила касательно кнопок: уникальный цвет, трехмерность, закругленные края, короткий и понятный текст.
Дизайн
От дорогого к дешевому. Продукты следует располагать слева направо от дорогого к дешевому, тогда именно средняя цена покажется оптимальной.
Другой вариант – концепция «золотого унитаза». Например, предлагают две комплектации продукта – за 200 000 рублей и 14 000 рублей. На фоне 200 000 рублей сумма 14 000 выглядит вполне доступной.
Выделить выгодный тариф. Выделение выгодного тарифа – подсказка покупателю, на чем остановить свой выбор. Это можно сделать с помощью визуальных эффектов: выделить цветом, фоном, приближением.
Отметить то, что входит в комплект, зеленой галочкой. То, что входит в комплект, обычно отмечают зеленой галочкой. Что не входит – красными минусами. Однако это создает лишнюю рябь в глазах, поэтому лучше просто проставить серые прочерки.
В конце добавить FAQ. В конце комплекта добавляют блок с ответами на часто задаваемые вопросы. У продукта могут быть специфические названия, непонятные широкому кругу пользователей, или кто-то захочет в процессе использования продукта перейти с одного комплекта на другой. Поэтому этот блок вставляют сразу после отзывов или после комплектации продуктов.
На рис. 5.37 показан пример формирования продуктов. Название продукта подчеркнуто заголовком «комплекты премиум, плюс и базовый», в конце указана стоимость каждого комплекта.
Рис. 5.37. Пример формирования продуктов
Указано, для кого подойдет каждый комплект. «Премиум» – комплект для продвинутых пользователей, «плюс» – это самый популярный план, «базовый» – для начинающих.
После этого описаны выгоды и есть кнопка «Выбрать план». Визуально выделена самая оптимальная комплектация.
Рассмотрим еще один вариант перехода от дорогого к дешевому (рис. 5.38).
Рис. 5.38. Пример оформления перехода от дорогого к дешевому
Базовый тариф самый невыгодный, в его комплектацию практически ничего не входит.
Красных минусов нет; то, что входит в пакет, выделено зеленой галочкой. У такого представления есть недостаток: лучше убрать разбиение на ячейки и оставить только вертикальную границу – так информация будет лучше восприниматься.
Внизу блок FAQ – ответы на часто задаваемые вопросы: что значит 30 дней бесплатно, что такое активный проект, есть ли возможность выбрать план и т. д.
Недостаток сайта: тарифных планов предлагается слишком много, желательно давать не более четырех.
На рис. 5.39 можно увидеть пример сравнения себя и конкурентов.
Рис. 5.39. Пример сравнения себя и конкурентов
Все выгоды отмечены зеленой галочкой. С помощью этой таблицы можно показать свое УТП.
В таблице создание посадочной страницы сравнивается с другими популярными конструкторами. Таблица показывает, что тариф чуть дороже, но сайт дает выгоды, которых нет у конкурентов. Понятно, что у конкурентов есть другие преимущества, но они здесь не указаны.
Как составляют такие таблицы?
Возьмем, к примеру, студию звукозаписи. Для проектирования таблицы подготавливается список вопросов.
• Какова стоимость аранжировки?
• Сколько времени уходит на изготовление аранжировки?
• Сколько людей работает над проектом?
Далее мы звоним во все популярные студии, узнаем ответы на эти вопросы и заносим их в таблицу. После того как мы добавили готовую таблицу на лендинг, на студии произошел скачок по количеству звонков.
На рис. 5.40 изображен пример оформления блока с ответами на часто задаваемые вопросы.
Рис. 5.40. Пример оформления блока с ответами на часто задаваемые вопросы
Для оформления FAQ часто используется значок привлечения внимания. Применять значок целесообразно для того, чтобы закрыть какие-то возражения с помощью ответов на вопросы или привлечь внимание к важным аспектам тарифных планов.
Ответы на вопросы лучше оформлять по принципу «одна строка – один вопрос, одна строка – один ответ».
Обратите внимание, что в примере есть и отзывы. Эти блоки выделены различными оттенками фона, и визуально вы сразу можете определить, что относится к отзывам, а что – к FAQ.
Недостатком этой страницы можно назвать мелкий и не самый удачный шрифт.
Оформление гарантии
При оформлении гарантий очень важна грамотная визуализация. Она может быть двух видов.
• Сертификат. Гарантия оформляется в виде гарантийного сертификата, который выдается покупателю, например, после окончания курса обучения, купленного на сайте.
• Бланк с личной подписью руководителя. Такой бланк можно заказать у дизайнера. В него входят сам бланк 100 %-ной гарантии, 2–4 строки текста, фотография руководителя и личная подпись.
Гарантии – это то, на что люди всегда обращают внимание. Они могут пролистать текст, но на сертификате или бланке их взгляд обязательно задержится.
На рис. 5.41 показан пример, как правильно оформлять гарантию. Она должна выглядеть как подлинный сертификат.
Человек должен воспринять вашу гарантию как документ, который закрепляет договор. «Что написано пером…», как говорится.
Рис. 5.41. Пример оформления гарантии
На самом деле любая гарантия – это лишь воздух, но должное оформление придает ей вес в глазах клиента.
Дополнительные графические элементы
Обводка текста
Рассмотрим дополнительные графические элементы, которые можно использовать на посадочной странице.
Обводка текста – прием, о котором часто забывают (рис. 5.42). Обводка, как будто выполненная маркером, часто применяется для привлечения внимания, если нет желания и возможности использовать жирный шрифт.
Рис. 5.42. Обводка текста
На рисунке выше вы видите сайт сервиса трекинга телефонных звонков.
Написано от руки «Новая низкая цена 49,95 доллара» и обведено желтым маркером. Невольно веришь, что это действительно новая низкая цена, которой грех не воспользоваться.
Стрелки
Стрелки – это визуальный сигнал, который используется для усиления призыва к действию (рис. 5.43). В зависимости от задачи стрелки могут привлекать внимание к разным элементам:
• к форме;
• кнопке действия;
• важным элементам.
Рис. 5.43. Стрелки
Отзывы клиентов на бланках и от руки
Отсканированный фирменный бланк или сертификат всегда усиливают доверие (рис. 5.44).
Рис. 5.44. Отзыв клиентов на бланках и от руки
Текст, написанный от руки, выглядит необычно: официальное обращение, личная подпись от руководителя, личная подпись клиента. Эти элементы повышают доверие и эффектно смотрятся на посадочной странице.
Использование логотипов
Если ваши клиенты – крупные компании, то найдите возможность использовать их логотипы на лендинге (рис. 5.45). Логотип – это хороший триггер, и если компания-клиент очень известна в своей нише, то ее логотип имеет смысл поставить на первый экран. Это даст вам конкурентное преимущество.
Не ставьте некачественные логотипы известных фирм на сайт. Не используйте логотипы крупных компаний: если на сайте заявлены очень низкие цены за услуги, пользователь просто вам не поверит.
Рис. 5.45. Использование логотипов
Визуализация ограничений
Визуализация ограничений – это счетчики (рис. 5.46).
Рис. 5.46. Визуализация ограничений
Если ваше УТП оформлено в виде акции и у вас по акции есть какое-то ограничение, то в таких случаях применяется счетчик.
Не рекомендуем использовать счетчик постоянно. Имеет смысл повторять такую «фишку» периодически, например раз в 2–3 недели перезапускать акцию на 2–3 дня. Чем ближе к концу срока акции, тем больше вероятность покупок.
Визуализация гарантий
Как мы уже говорили, визуализация гарантий осуществляется с помощью сертификата или бланка с личной подписью руководителя (рис. 5.47).
Рис. 5.47. Визуализация гарантий
Гарантии можно также оформлять различными значками или флажком технической поддержки. Обратите внимание: на рисунке изображены примеры значков и справа флажок технической поддержки с надписью WE OFFER SUPPORT FOR FREE.
Как усилить взглядом оффер
Пользователи смотрят туда, куда направлен взгляд персонажа на фото (рис. 5.48). Обратите внимание, куда смотрит Милла. Ее взгляд выделяет текст «Как усилить взглядом оффер». Это дополнительный указатель, который заостряет внимание человека.
Рис. 5.48. Куда смотрят глаза?
Все просто: для повышения доверия человек на картинке должен смотреть на пользователя, для привлечения внимания к форме он должен смотреть на форму. Простой лайфхак: направление взгляда легко меняется в «Фотошопе».
Как выбрать изображение, чтобы на 100 % попасть в цель?
Воспринимая любой объект, человек подсознательно пропускает его через фильтр, сложившийся тысячелетия назад: можно ли это съесть, может ли это съесть меня и можно ли с этим заняться сексом (продлить род).
Например, сайт знакомств, где в оформлении использовано множество фотографий красивых женщин. У мужчины сразу срабатывает древний инстинкт, который отвечает за питание, сон и размножение. Сопротивляться этому триггеру очень сложно. Все знают, что sex sells.
Может быть, вы обращали внимание на то, какой бешеной популярностью пользуются кулинарные сайты?
Еда привлекает людей на инстинктивном уровне. Если вы совсем запутались и не знаете, какое оформление сайта выбрать, то преподнесите свое УТП как вишенку на торте.
Показать суть
При тестировании этих двух форм регистрации на игровом сайте (рис. 5.49) правый показал конверсию на 36 % выше, чем левый. Молодые люди, геймеры, очень хотели увидеть, что там будет дальше, поэтому оставляли заявку с большей охотой и подключались к этой онлайн-игре.
Рис. 5.49. Показать суть
Самое важное из главы 5
• Для визуализации лендинга используйте прототипирование.
Удобнее всего создавать прототип в программе Balsamiq. Обратите пристальное внимание на юзабилити еще на этапе макета.
• Учитывайте основные принципы дизайна.
К ним относятся: легкость и простота восприятия, удобство, функциональность, наглядность и логика. Следите, чтобы ваш дизайн не противоречил этим принципам.
• В дизайне действуют законы социального соглашения.
Используйте этот факт при выборе цветовых сочетаний. И помните, что черный текст на белом фоне усваивается лучше, чем любой другой.
• Размер шрифта – не менее 12 пикселов.
Всегда выделяйте прямую речь курсивом, избегайте красного цвета в заголовках и включенного режима Caps Lock, синий цвет и подчеркивание – только для ссылок. Не запутывайте посетителей.
• Первый экран – то, что обязательно увидят ваши клиенты.
Обязательные элементы первого экрана: логотип, дескриптор, заголовок (выгода), подзаголовок (дополнительная выгода), кнопка или форма заказа, тематическая фотография.
• Критерии идеальной формы регистрации.
Кнопка должна быть уникального цвета (заметна на расстоянии двух метров от монитора), к заполнению предлагайте не более 2–3 полей, все поля – с валидацией и маской ввода.
• Триггеры – выгоды клиента, оформленные визуально.
Триггер можно оформить как в виде текста, так и значками. Это зависит от выбранной вами концепции дизайна. Используйте не более четырех элементов.
• Оформляйте отзывы и кейсы правильно.
Обязательные элементы: заголовок, несущий выгоду, важное выделено жирным шрифтом, прямая речь написана курсивом, есть ссылка на соцсеть или контакты персонажа, обозначены его статус и/или должность.
• Оформление продукта.
Блок с описанием продукта легко оформить по схеме: заголовок, фотография продукта, краткая характеристика, кнопка Заказать.
• Комплектации продукта и сравнение с конкурентами.
Комплекты и сравнение с конкурентами лучше всего оформлять в виде таблицы. Соблюдайте последовательность от дорогого к дешевому, визуально выделите выгодное предложение (рамка другого цвета).
Домашнее задание
Создать прототип лендинга в программе Balsamiq.
Дополнительные материалы к главе 5
Шаблоны технического задания дизайнеру в формате Balsamiq и PNG, из которых вы легко создадите свою посадочную страницу.
Скачайте сейчас по ссылке .