Как типографика влияет на конверсию лендинг пейдж?

В то время, когда маркетолог думает об оптимизации конверсии лендинг пейдж, что в первую очередь приходит ему на ум? Макет посадочной страницы в целом, кнопка призыва к действию (CTA-button), заголовки, буллеты, изображения и суть текстового контента как такового?

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

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

Шрифт и типографика в дизайне тесно связаны. Гарнитура Baskerville, к примеру, владеет необычным действием. 😉 Оцените сами:

Либо вот еще увлекательный пример:

В случае если вас заботит высокая читабельность контента, вы должны не забывать, что для шрифта Tahoma это значение образовывает 10 пунктов, для Courier — 12, Arial —14.

Дабы показать, как типографика воздействует на конверсию, гуру веб-маркетинга Нил Патель (Neil Patel), основатель SaaS-решения quicksprout, создал инфографику, с которой мы на данный момент подробно и ознакомимся.Как типографика влияет на конверсию лендинг пейдж?

1. Из-за чего типографика так серьёзна?
2. Как люди принимают данные?
3. Как типографика воздействует на восприятие информации?
4. С засечками либо без засечек?
Вместо заключения

1. Из-за чего типографика так ответственна?

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

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

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

Из-за чего типографика для сайта так ответственна? Вот три фактора ее действия на пользователя:

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

2. Как люди принимают данные?

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

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

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

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

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

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

Оптимизация визуального дизайна в соответствии с гештальт-близости и принципам сходства (Часть 1)

3. Как типографика воздействует на восприятие информации?

Эррол Моррис (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.

  • Баланс контента и дизайна: формула высокой конверсии лендинг пейдж

4. С засечками либо без засечек?

На данный вопрос, выполненный практически что шекспировского трагизма, мы можем с уверенностью ответить: главный текст лендинга для простоты восприятия набирается шрифтом без засечек (sans serif), подзаголовок и заголовок — хорошим «типографским» шрифтом с засечками (serif).

Очевидно, из каждого правила имеется исключения, и без сплит-теста ничего совершенно верно установить запрещено, но хороший тон современной веб-типографики сводится как раз к этому: главный текст — sans serif, заголовок — serif.

Вместо заключения

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

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

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

Высоких вам конверсий!

По данным quicksprout.com, image source Francesco Mastrogia and go-team

Случайные статьи:

Типографика в веб-дизайне – ТОП 5 правил типографики на веб-сайтах


Подборка похожих статей:

riasevastopol