Идеальный Landing Page. Создаем продающие веб-страницы - Е. Новиков

Прямая речь – курсив. Прямую речь и какие-то важные моменты лучше выделить курсивом. Можно использовать курсив для выделения прямой речи при оформлении отзывов покупателей чтобы показать, что эти слова принадлежат не авторам сайта, а их клиентам.

Текст контрастный (черный текст на белом фоне). Вопрос применения черного текста на белом фоне уже затрагивался. Поговорим о сером тексте на сером фоне. Это тот случай, когда эстетикой стоит пожертвовать ради юзабилити. И ради продаж.

Использовать синий текст только в ссылках. Многие создатели одностраничников любят использовать синий цвет в заголовках и подзаголовках. Если ориентироваться на социальное соглашение, у книги и сайта есть одно явное отличие – это гиперссылки.

Мы знаем, что можем проходить сайты не от страницы к странице, а двигаться вглубь с помощью ссылок.

Пользователи привыкли к тому, что у ссылок есть две характеристики: ссылки выделяют либо синим цветом, либо подчеркивают специальной линией.

Поэтому, если в тексте что-то подчеркнуто или выделено синим цветом, это автоматически воспринимается как ссылка. Правило простое: никогда не используйте синий цвет в тексте, за исключением выделения ссылок.

На картинке представлены страницы сайтов для сравнения (рис. 5.9). Есть страница с более мелкими шрифтами и более крупными.

Какой проще воспринимается? Естественно, левая страница воспринимается проще, чем правая.

Ниже на картинке вы увидите два примера использования фона. Сравните применение белого и серого фона. Белый фон для восприятия проще, чем серый. Легче понять, что написано, и хочется продолжить чтение.

Для ссылки применяется уникальный цвет: если посмотреть на картинку, можно точно сказать, что ссылка находится на второй строке текста, потому что она подчеркнута и выделена цветом.

Используйте русские кавычки и буллиты. К сожалению, сейчас многие пользователи разучились грамотно писать, доверяя исправление ошибок в тексте компьютерным редакторам.

Рис. 5.9. Структура страниц сайтов для сравнения

Но клиента этим простым объяснением не взять. Он очень быстро отличит грамотный текст от текста с ошибками. А для пользователя ошибки в лендинге – это «триггер» недоверия.

Если у вас хорошая грамотность, то доверие пользователя – ваше. Старайтесь избегать «ляпов» и в мелочах. Например, русские кавычки – это кавычки «лапки» или «елочки». Не используйте две «верхние» кавычки «…». Это признак дурного тона.

Применяйте, где необходимо, тире, а не дефис.

Используйте маркированные списки-буллиты.

Как применять все принципы и правила оформления к каждому элементу сайта, отзывам, описанию продуктов, оформлению первого экрана, мы обсудим далее. Начнем с первого экрана.

Первый экран

Перечислим основные элементы первого экрана: логотип, дескриптор, заголовок (выгода), подзаголовок (дополнительная выгода), кнопка действия или форма заказа.

Дескриптор в Америке уже редко используется, потому что там в основном продвигаются известные бренды. Американцы переносят сам дескриптор в заголовок. В России дескриптором пока пользуются, но наметился тренд на вымирание.

Рассмотрим подробно, как создаются все элементы.

Заголовок

Большой размер (от 30 рх). Заголовок должен быть большого размера, от 30 пикселов и более. Заголовок – это та часть первого экрана, на которую мы обращаем максимальное внимание. Восемь пользователей из десяти читают заголовок.

В центре экрана. Заголовок должен быть по центру экрана либо выровнен по левому краю, в зависимости от того, какая композиция выбрана.

Не больше 8–10 слов. Заголовок должен быть коротким, не более 10 слов. Все остальное будет сложно восприниматься аудиторией.

Обратите внимание на рис. 5.10 – это сервис по созданию меню для ресторана.

Рис. 5.10. Страницы сайтов для сравнения

Здесь большой заголовок, под ним подзаголовок и кнопка заказа. На русском фраза звучит так: «Создайте свое меню онлайн за минуту».

Заголовок читается даже на маленькой картинке и действует убеждающе.

Картинка

Картинки бывают нескольких видов.

Картинка-идентификация

Если мы хотим использовать женское лицо, нужно не просто взять первую попавшуюся женщину и вставить ее фото. Пользователь должен ассоциировать себя с этой картинкой и узнавать в ней себя (по возрасту, роду занятий, внешности и т. д.).

Фотография лица компании

В данном случае речь идет о лице-бренде, если такое в компании имеется. Обычно им выступает человек, которого хорошо знает аудитория, к кому относится лояльно, но самый важный фактор – персонаж должен ассоциироваться с компанией.

Фотография клиента

Речь идет о применении фото клиента, к примеру оставившего отзыв. В подобных случаях использование лица человека оправдано. Соответственно форма заказа размещается слева или справа экрана.

Рассмотрим один пример (рис. 5.11). Это одностраничник обучающих программ Convert Monster. На картинке лицо компании – Евгений Новиков. Пользователь ассоциирует его с агентством, так как Евгений присутствует во всех рекламных кампаниях и участвует в конференциях от лица компании.

Рис. 5.11. Лицо компании

Было проведено огромное количество тестов. У сайтов с фотографией Евгения очень высокая конверсия. И это не просто так – наши клиенты идентифицируют себя с Евгением.

Тесты и отклики аудитории показали, что он действительно располагает к себе, вызывает доверие, являясь при этом лицом компании и ведущим тренингов. Здесь происходит слияние двух понятий: пользователь узнает в лице Евгения себя и в то же время Женя – официальное лицо агентства.

Второй вариант – сайт «Бэйскамп» (рис. 5.12). В качестве картинки использована фотография пользователя. Кстати, это один из лучших лендингов, существующих в мире.