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

Давайте сразу разберемся с терминологией. Типографика — это оформление текста на странице.

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

Почему оформление текста — это важно

Пользователи не читают, а просматривают страницы, и происходит это по определенным паттернам — сформировавшимся и устоявшимся моделям.

• Хорошая типографика помогает пользователю быстро найти на странице нужную информацию. Как следствие — вероятность того, что посетитель останется на сайте и сделает заказ, повышается.
• Плохая типографика вызывает отторжение, иногда на подсознательном уровне, и вызывает единственное желание — закрыть сайт и перейти к другим вкладкам. Это если опустить тот факт, что найти нужную информацию в плохо сверстанном и оформленном тексте гораздо сложнее.

Коллеги из Click Laboratory провели интересный эксперимент, который показал, как простое изменение размеров шрифта и отступов между строками позволило увеличить конверсию на 133%.

Эксперимент

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

Но после того, как размер шрифта увеличили до 13 пунктов, а между строками добавили отступ — коммерческие показатели просто взлетели. Отказы сократились на 10%, количество страниц за один визит выросло на 24%, а количество лидов, которые выполняли целевое действие — заполняли форму на сайте — выросло на 133%, как мы уже отмечали выше.

При этом новый вид текста существенно повлиял на дизайн страницы — более крупные и «светлые» текстовые блоки изменили баланс всех элементов. Что еще раз подтверждает тот факт, что на текст нужно смотреть не просто как на еще один графический элемент на странице. Проектирование текстовых блоков должно начинаться с подбора комфортных читабельных шрифтов — а далее уже вписываться в общий баланс страницы.

Немного про шрифты

Есть еще одна интересная особенность: одну и ту же информацию, написанную разными шрифтами, люди и воспринимают по-разному. Посмотрите, как меняется восприятие фразы. Все одинаковое, отличаются только шрифты. Первые два варианта выглядят гармонично, в то время как третий — настолько неуместно и несерьезно, что может быть воспринят даже как насмешка.

Переведем в курсив:

Arial хорошо читается и гармонирует с содержанием сообщений. Times New Roman при переводе в курсив потерял читабельность, а Comic Sans выглядит все так же неуместно и комично.

Тед Хант из CrazzyEgg поделился интересной инфографикой, которая показывает, как пользователи воспринимают разные гарнитуры. Эти подходы применимы не только в дизайне логотипов, но и при оформлении любого текста.


Интересный факт: в Google Docs — одном из самых популярных офисных приложений в мире — по умолчанию используется шрифт Arial как для основного текста, так и для подзаголовков.

Типографика и структура страницы

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

Обратите внимание, как шрифтом выделены важные смысловые элементы: предложение и телефон. А цвет подчеркивает кнопку.
Упорядоченная информация воспринимается быстрее и проще. Более того, выглядит визуально более привлекательной и понятной. Так работает наш мозг, и ничего с этим не поделаешь.

А вот пример, где нет контраста ни в шрифтах, ни в элементах на странице. Попробуйте выделить тут главное:

Несколько советов, которые помогут вам улучшить читабельность текста

1. Добавляйте отступы между абзацами.

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



2. Задайте правильную длину строки.

   Слишком длинная строка — когда при ее просмотре от начала до конца нужно повернуть голову — создает дискомфорт на уровне подсознания. При чтении банально забывается начало строчки. Блоки с текстом должны быть не слишком узкими (не менее 35-40 символов с пробелами) и не слишком широкими (до 80 символов). Можно задать также ограничение на контейнер — не более 600 рх.



3. Не смешивайте разные шрифты на одной странице.

   Оптимальное количество — 1-2 шрифта на одной странице. Этого более чем достаточно для решения любых задач. Разнообразие завитушек и начертаний только отвлекает и не добавляет тексту полезности.



4. Используйте подзаголовки для разделения логических блоков.

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



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

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



6. Придерживайтесь принципов визуальной иерархии.

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



7. Тестируйте и проверяйте.

   Можно теоретизировать сколько угодно: на каждый успешный кейс обязательно найдется антикейс. Правда в том, что понять, что именно нужно вашим пользователям, можно только по результатам тестирования. Проведите A/B-тест — и вы получите достоверную информацию о том, какой подход сработает в вашем случае.

Подводя итоги

Веб меняется слишком быстро, чтобы можно было давать четкие, выверенные и конкретные советы вроде: «Используйте шрифт Arial размером 12 пунктов — и будет вам счастье и конверсия». Все гораздо сложнее и интереснее.

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

Сравните:

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

Форматы взаимодействия с контентом меняются со временем. С этим ничего нельзя поделать: то, что выглядело свежо и привлекало внимание 2-3 года назад, сегодня уже не актуально. Это относится как к дизайну, так и к типографике.

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