То, что входит в комплект, обычно отмечают зеленой галочкой. Что не входит – красными минусами. Однако это создает лишнюю рябь в глазах, поэтому лучше просто проставить серые прочерки.
В конце добавить 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. Обратите пристальное внимание на юзабилити еще на этапе макета.
• Учитывайте основные принципы дизайна.
К ним относятся: легкость и простота восприятия, удобство, функциональность, наглядность и логика. Следите, чтобы ваш дизайн не противоречил этим принципам.