Правила юзабилити

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

Команда AskUsers

Команда AskUsers

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

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

1.png

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

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

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

oformlenie teksta.png

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

Эксперимент

balans jelementov.png

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

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

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

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

2.png

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

shrift2.png

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

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

shrift.png

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

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

kak pol'zovateli vosprinimajut raznye garnitury.png

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

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

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

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

4.png

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

Обратите внимание, как шрифтом выделены важные смысловые элементы, а цвет подчеркивает кнопку.

shriftom vydeleny vazhnye jelementy.png

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

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

otsutstvie kontrasta v shriftah.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.png

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

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

Сравните:

grafika.png

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

oformlenie teksta sajta gos uslug.png

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

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

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

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