В то время, когда маркетолог думает об оптимизации конверсии лендинг пейдж, что в первую очередь приходит ему на ум? Макет посадочной страницы в целом, кнопка призыва к действию (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 правил типографики на веб-сайтах
Подборка похожих статей:
-
Как типографика влияет на коэффициент конверсии и юзабилити?
Типографика в один момент имеется и подробность повествования, и метод поведать эту историю. Типографика передает воздух либо историческую обстановку, но…
-
6 Хладнокровных убийц конверсии лендинг пейдж
Источник изображения В случае если забрать коэффициент конверсии любой целевой либо товарной страницы как абстрактное значение, равное 100%, и разложить…
-
Что такое лендинг пейдж? руководство для начинающих
Что такое лендинг пейдж (посадочная страница)? Это независимая интернет-страница, на которую потенциальный клиент попадает по окончании клика по…
-
Копирайтинг лендинг пейдж: каким он будет в 2014 году?
Копирайтинг лендинг пейдж имеет во множестве случаев важное значение для успешной конвертации трафика в лиды: SaaS-оффер, высокотехнологичная новинка…