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

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

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

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

Коллеги из 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-тест, и вы получите достоверную информацию о том, какой подход сработает в вашем случае.

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

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

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

Сравните:

И серьезный сайт:

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

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

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

Закажи юзабилити-тестирование прямо сейчас

Заказать