Влияние типографики на конверсию landing page

Когда маркетолог думает об оптимизации конверсии лендинг пейдж, что первым делом приходит ему на ум? Макет посадочной страницы в целом, кнопка призыва к действию (CTA-button), заголовки, буллеты, изображения и смысл текстового контента как такового? Да, все это ключевые элементы лендинга, непосредственно влияющие на коэффициент конверсии. Однако о типографике интернет-маркетологи и дизайнеры задумываются не всегда, а еще меньше об этом есть информации. Что такое типографика? Это совокупность шрифтов на странице, их размерах, разбиении текста на абзацы и т. д.

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

Типографика — это отрасль веб-дизайна, в которой шрифт становится искусством. Это инструмент, создающий стиль вашего текста, персонализирующий его, выделяющий из миллионов веб-страниц.

Напомним, что пользователи вначале смотрят на страницу в целом, затем сканируют текст, оценивая размер шрифта и длину строк. И только потом они — возможно! — прочтут ваш текстовый контент.

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

Почему типографика для сайта так важна? Вот три фактора ее воздействия на пользователя:

• Comprehension (понимание/осмысление). Типографика может упростить процесс понимания или осмысления оффера.
• Focus (концентрация внимания). Хорошо и грамотно сверстанный текст фокусирует внимание пользователя на сущности коммерческого предложения, минимизируя усилия, требующиеся от человека для понимания контента.
• Hierarchy (иерархия). Типографика помогает выделить критически важные элементы лендинга через размер шрифта, цвет букв, их наклон. Отличный способ подчеркнуть выгоды вашего оффера (benefits) — разделить их на короткие абзацы, помеченные буллетами (bullets).

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

Similarity (сходство, подобие) — интуитивно понятный параметр: объекты похожи друг на друга. В веб-дизайне этот принцип используется, скорее, «от обратного»: важный объект (например, CTA-кнопка или лид-форма) делается максимально непохожим на остальные элементы лендинга.

Continuation (непрерывность) — организация пространства страницы таким образом, что глаза посетителя переходят от одного объекта к другому по так называемой конверсионной траектории.

Closure (закрытие) — инкапсуляция важного объекта в некую форму, говорящая о завершенности, самоценности объекта (например, лид-формы), чтобы восприятие визуальной информации требовало меньше умственных усилий.

Proximity (близость) — еще один способ иерархической организации пространства: схожие элементы группируются друг близ друга согласно некоей концепции.

Figure and ground (фигура и фон) — визуальная связь между неким визуальным объектом и ее фоном, важная для восприятия изображения как комбинации контуров.

Как типографика влияет на восприятие информации

Эррол Моррис (Errol Morris), известный американский режиссер-кинодокументалист, провел забавный эксперимент: в сотрудничестве с изданием The New York Times он опросил 40 000 участников, которым было предложено прочесть отрывок из книги и оценить его положительно или отрицательно (вернее, согласиться с неким утверждением или опровергнуть его).

В эксперименте использовались 3 шрифта, которыми поочередно набирались типографически различающиеся варианты одного и того же текста.

Наибольшее количество отрицательных баллов собрал вариант, набранный шрифтом Comic Sans, особых симпатий не собрал и вариант Helvetica, а вот классический Baskerville заставил пользователей согласиться с напечатанным текстом. Вот и попробуйте опровергнуть утверждение, что есть шрифты, повышающие конверсию!

Размер шрифта тоже имеет значение: эксперт по юзабилити Майкл Бернард (Michael Bernard) из агентства Usability News опросил 60 респондентов, предлагая им выбрать самый читаемый шрифт из 8 различных (размеры букв были 10, 12 и 14 типографских пунктов).

Злосчастный Comic Sans был признан самым нечитаемым, охотнее всего респонденты читали тексты набранные шрифтами Arial и Courier (это самые читаемые шрифты в данном кейсе), а быстрее всего читатели усваивали тексты, набранные Times и опять-таки Arial.

Оптимальная величина для каждого шрифта тоже своя: для Tahoma это 10 пунктов, для Courier — 12, Arial —14.

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

Помните, что даже самый заманчивый оффер, изложенный в виде «стены текста», скорее оттолкнет, нежели привлечет посетителей.

Но, повторим, вам никак не обойтись без сплит-теста.