Правила юзабилити
Как типографика влияет на конверсию
Давайте сразу разберемся с терминологией. Типографика — это оформление текста на странице.
Сочетание шрифтов и размеров, выделение текста, заголовков и подзаголовков, отступы и интервалы, списки — все это влияет на конверсию. Почему важно строить текст в соответствии с принципами и требованиями типографики?
Почему оформление текста — это важно
Пользователи не читают, а просматривают страницы, и происходит это по определенным паттернам — сформировавшимся и устоявшимся моделям.
- Выбор хорошей типографики помогает пользователю быстро найти на странице нужную информацию. Как следствие — вероятность того, что посетитель останется на сайте и сделает заказ, повышается.
- Плохая типографика вызывает отторжение и единственное желание — закрыть сайт и перейти к другим вкладкам. Это если опустить тот факт, что найти нужную информацию в плохо сверстанном и оформленном тексте гораздо сложнее.
Коллеги из Click Laboratory провели интересный эксперимент, который показал, как простое изменение размеров шрифта и отступов между строками позволило увеличить конверсию на 133%.
Эксперимент
В оригинале был подобран текст на странице величиной 10 пунктов с небольшими межстрочными интервалами. С точки зрения дизайнера, он идеально смотрелся на странице.
Но после того, как размер шрифта увеличили до оптимальных 13-ти пунктов, а между строками добавили отступ — коммерческие показатели просто взлетели. Отказы сократились на 10%, количество страниц за один визит выросло на 24%, а количество лидов, которые выполняли целевое действие — заполняли форму на сайте — выросло на 133%, как мы уже отмечали выше.
При этом новый вид текста существенно повлиял на дизайн страницы — более крупные и светлые текстовые блоки изменили баланс всех элементов. Это еще раз подтвердило тот факт, что на текст нужно смотреть не просто как на еще один графический элемент на странице. Подбирать и проектировать текстовые блоки лучше начинать с подбора комфортных читабельных шрифтов, а далее уже вписываться в общий баланс страницы..
Немного про шрифты
Есть еще одна интересная особенность: одну и ту же информацию, написанную разными шрифтами, люди воспринимают по-разному. Посмотрите, как меняется восприятие фразы.
Все одинаковое, отличаются только шрифты. Первые два варианта выглядят гармонично, в то время как третий — настолько неуместно и несерьезно, что может быть воспринят даже как насмешка.
Переведем в курсив:
Arial хорошо читается и гармонирует с содержанием сообщений. Times New Roman при переводе в курсив потерял читабельность, а Comic Sans выглядит все так же неуместно и комично.
Тед Хант из CrazzyEgg поделился интересной инфографикой, которая показывает, как пользователи воспринимают разные гарнитуры.
Эти подходы применимы не только в дизайне логотипов, но и при оформлении любого текста.
Правильное шрифтовое оформление задает настроение — помогает пользователю еще до начала чтения оценить, информация какого качества его ждет. Восприятие шрифта — еще один паттерн поведения, который нужно учитывать при проектировании взаимодействия с пользователем.
Интересный факт: в Google Docs — одном из самых популярных офисных приложений в мире — по умолчанию используется шрифт Arial, причем как для основного текста, так и для подзаголовков.
Типографика и структура страницы
Типографика позволяет оптимально организовать текст — разбить его на логические блоки, грамотно выделить важные части, правильно оформить заголовки и другие элементы.
Обратите внимание, как шрифтом выделены важные смысловые элементы, а цвет подчеркивает кнопку.
Упорядоченная информация воспринимается быстрее и проще. Более того, она выглядит более привлекательной и понятной. Так работает наш мозг, и ничего с этим не поделаешь.
А вот пример, где нет контраста ни в шрифтах, ни в элементах на странице. Попробуйте выделить тут главное:
Несколько советов, которые помогут вам улучшить читабельность текста
-
Добавляйте отступы между абзацами.
Самая простая и очевидная рекомендация, которой многие до сих пор пренебрегают. Даже небольшой отступ между абзацами улучшает читабельность текста.
-
Задайте правильную длину строки.
Слишком длинная строка — когда при ее просмотре от начала до конца нужно повернуть голову — создает дискомфорт на уровне подсознания. При чтении банально забывается начало строчки. Блоки с текстом должны быть не слишком узкими (не менее 35-40 символов с пробелами) и не слишком широкими (до 80 символов). Можно задать также ограничение на контейнер — не более 600 рх.
-
Не смешивайте разные шрифты на одной странице.
Оптимальное количество — 1-2 шрифта на одной странице. Этого более чем достаточно для решения любых задач. Разнообразие завитушек и начертаний только отвлекает и не добавляет тексту полезности.
-
Используйте подзаголовки для разделения логических блоков.
Если в тексте больше одной подтемы — подзаголовки обязательны. Они нужны для навигации по тексту, позволяя пользователю быстро сориентироваться и найти нужный блок.
-
Используйте маркированные и нумерованные списки.
Перечисления в строку целесообразнее заменить маркированным списком. Это также улучшает читабельность, а переключение с абзаца на список дает позволяет мозгу более качественно обработать поступающую информацию.
-
Придерживайтесь принципов визуальной иерархии.
Мы уже писали об этом, но не лишним будет и повторить. Благодаря визуальной иерархии посетитель сможет сразу выделить на странице главное и понять, что именно ему нужно делать дальше.
-
Тестируйте и проверяйте.
Можно теоретизировать сколько угодно: на каждый успешный кейс обязательно найдется антикейс. Правда в том, что понять, что именно нужно вашим пользователям, можно только по результатам тестирования. Проведите A/B-тест, и вы получите достоверную информацию о том, какой подход сработает в вашем случае.
Подводя итоги
Веб меняется слишком быстро, чтобы можно было давать четкие, выверенные и конкретные советы. Все гораздо сложнее и интереснее.
Предпочтения пользователей в разных нишах и тематиках различаются. Более того, один и тот же пользователь по-разному воспринимает и оценивает типографику в зависимости от того, какой контент он ищет — серьезный или развлекательный.
Сравните:
И серьезный сайт:
Но обратите внимание: серьезность содержания не помешала дизайнерам спроектировать типографику, выбрать шрифты для мобильной версии сайта и скомпоновать все элементы так, чтобы выделить важное и не перегрузить читателя.
Форматы взаимодействия с контентом меняются со временем. С этим ничего нельзя поделать. Что выглядело свежо и привлекало внимание 2-3 года назад, сегодня уже неактуально. Это относится как к дизайну, так и к типографике.
Понять, что именно нужно вашим пользователям, можно по результатам тестов и исследований. Если проводить их с определенной периодичностью, вы можете достаточно точно выявить реальные потребности аудитории и адаптировать ваш сайт под них.
