Типограф, автор образовательных проектов по типографике Мэттью Баттерик определяет типографику, как визуальную составляющую напечатанного текста. Хорошая, емкая формулировка с большим пространством для маневра. Именно из-за этого под термином часто понимают достаточно разные вещи.
То, что относится к UX, большей частью касается макротипографики — расположения текста на странице. Микротипографика — это тонкая настройка, работа на уровне символов.
Важна ли типографика пользователям и бизнесу? Конечно. Есть исследования, которые объясняют, как параметры шрифта приносят существенные конверсии, как управлять эмоциями пользователя и дают понять, что несоблюдение достаточного контраста в вебе будет дорого стоить. Подобные вещи действительно влияют на восприятие. Ключевой момент, с которым нужно разобраться, — как люди читают.
Классические книги, статьи, в основном не останавливаются на физиологии. Чаще речь о диаграмме Гутенберга и различных паттернах чтения.
Диаграмма Гутенберга рассказывает о том, что при большом объеме контакт с текстом начинается с левого верхнего угла и ослабевает по определенным законам. На основе этих данных строятся известные паттерны чтения: z-паттерн, f-паттерн… Это здорово, этим можно пользоваться, но ответа на вопрос, почему так происходит, — здесь нет.
Немецкий типограф Ян Чихольд еще в 1928 году пришел к выводу, что современный человек не хочет читать объемные тексты. «Сканирует» полотно, находит что-то полезное и только тогда останавливается и начинает читать. Вряд ли Чихольд интересовался исследованиями по физиологии, но, тем не менее, понимал, как все происходит.
А происходит следующее: на сетчатке глаза есть маленькая впадина, которая отвечает за распознавание предметов. Она очень маленькая. То есть каждый момент времени четко мы видим очень маленький фрагмент картинки — всего пару градусов обзора. Вся остальная картинка размыта. Но мозг картинку дорисовывает и кажется, что четко видим мы гораздо больше. Очень продуманное инженерное решение.
Чтобы «обновлять» картинку глаз постоянно совершает микродвижения, которые ученые называют саккадами (в переводе с французского — «хлопок паруса»). Взгляд идет, останавливается в одной точке — фиксация, передвигается к следующей. За счет этого картинка постоянно поддерживается в актуальном состоянии.
Поэтому важно, чтобы глаз успешно распознавал формы букв. Отсюда и правило: ряд из прописных плохо различается, потому что он монотонен. В случае со строчными, за счет выносных элементов глазу легче понять, что за слово перед нами находится. Эксперименты показывают, что достаточно и верхней части букв — если убрать нижнюю половину, человек все равно сможет прочитать текст, разве что понадобиться чуть больше времени.
Еще важно понимать, что сам по себе процесс чтения — сложный. Приходится постоянно концентрировать силу воли. Ученые сходятся на том, что префронтальная кора мозга, которая отвечает за концентрацию, быстро утомляется. Если заставлять человека слишком сильно напрягаться в тексте, то ему скоро станет неинтересно, он переключится на другое занятие. Отсюда правила про длину строки, межстрочное расстояние, трекинг в прописных — для того, чтобы префронтальная кора не уставала сверх того, что требует концентрация на тексте.
После Чихольда, на 80 лет позже, известный специалист в области юзабилити Якоб Нильсен сказал примерно то же: «Люди не читают, они сканируют». Но пришел он к этому выводу с других позиций.
Нильсен проводил исследование. Давали людям разного размера тексты и замеряли разными способами, сколько на самом деле люди читают. По результатам даже удалось построить график и вывести формулу. Выяснилось, что примерно 20% текста люди читают, остальные 80% — сканируют.
Писать короткие тексты? Нет. Сотрудники SEO форума решили выяснить, как часто пользователи делятся ссылками на их страницы. Обнаружили, что достаточное количество людей любит большие тексты. Важно учитывать эту часть аудитории и сделать так, чтобы процесс чтения был легким и комфортным.
Хорошая цель. Для этого нужно задать проекту правильный процесс — выбрать хороший шрифт, определить иерархию текстовых элементов на странице, поработать над их расположением, отполировать решения микротипографскими штучками.
По шести основным параметрам:
Не обойтись и без правил:
Да, шрифты с засечками привычны. Но.
Интересный эксперимент провела компания «Psychophysics of Readings». Замерили показатели скорости чтения и понимания текста. Позже опросили пользователей — как они сами воспринимают эти показатели, после чтения фрагментов текста со шрифтами с засечками и без? Люди говорили, что с засечками нравится больше, читается быстрее, понимается отлично. Хотя результаты исследования показали, что шрифты без засечек дают лучший результат. Так что, это всего лишь иллюзия.
Пару лет назад Smashing Magazine провели исследование на ту же тему. Решили проверить те сайты, куда люди действительно приходят почитать — новостные порталы, блоги. Отобрали 50 самых популярных.
Оказалось, шрифты с засечками побеждают в основном шрифте, при этом чуть-чуть отстают в заголовках. А в целом, до сих пор достаточно уверенно себя чувствуют в интернете.
На страницах New York Times вышел интересный текст. Вкратце: если с Землей столкнется астероид, то умрет много людей, но это не так страшно, потому что астероиды с нашей планетой сталкиваются редко, последний пролетал пару тысяч лет назад, в запасе еще 250 тысяч лет. После прочтения предлагалось ответить, согласны ли вы с этим утверждением, насколько оно уверено звучит.
Ребята, которые проводили эксперимент, использовали разные шрифты. Из этой пятерки: Georgia, Helvetica, Trebuchet MS, Comic Sans, Baskerville. Неожиданно наидостойнейшим доверия оказался Baskerville. Правда, победил с небольшим отрывом.
Это говорит о том, что люди все же обращают внимание на характеристики шрифта.
Интересный тест провели немецкие исследователи из университета им. Гумбольдта. Показывали испытуемым слова в разных размерах с негативной, нейтральной, позитивной оценкой и замеряли активность мозга.
И вот, что получилось: когда шрифт маленький — эмоционального вовлечения нет, но чем больше становится шрифт, тем оно больше и держится дольше. Раньше считалось, что подобная реакция касается только физических объектов: чем больше хищник, тем страшнее. Оказывается, на символьном уровне тоже работает.
Ребята из желтой прессы знают, что делают.
К компании, которая предоставляет услуги по консультированию в сфере UX, Click Laboratory, обратились Numara Software с просьбой улучшить конверсию на сайте.
Ребята просто увеличили шрифт на странице, но увеличили радикально — с 10 пунктов до 13. После этого количество страниц за визит увеличилось на 24%, а конверсии поднялись на 133%.
В другом тесте сравнивали размер ссылок на сайте Who accepts amex. Размер контрольных линков — 14 пикселей. Консультативная компания предложила провести несколько А/В тестов — значение от 12 до 18 с шагом в 1 пиксель. Оказалось, что ссылки размером в 18 пикселей лучше работают — кликов на 32% больше. Но самое интересное, что комбинация в 17 пикселей, всего на один пиксель меньше победившей, показала на 16% меньше кликов, чем контрольная.
Существует гипотеза, что важен не столько размер, сколько еще и пропорции в которых шрифт работает.
Кевин Ларсон, психолог по чтению в Microsoft, много внимания уделяет контрасту шрифта. Мы, дизайнеры, работаем с классными мониторами, у пользователя может быть другая история. Часть текстов может быть вообще незаметна или хуже читаться.
Bing специально тестировали 41 оттенок синего. Менеджер проекта сказал, что в итоге это им принесло 80 млн долларов годового дохода.
Когда работаете с текстом проверяйте, насколько он контрастен к вашему фону.
Еще один эксперимент Кевина Ларсона. Людей просили читать два фрагмента текста — «Bad design» и «Good design», и проверяли, насколько люди быстро читают, насколько понимают, о чем написано. Потом опрашивали — нравится или нет?
Результаты удивительные: скорость чтения примерно одинаковая, предпочтений к какому-то из фрагментов испытуемые тоже не выявили.
После провели ряд тестов, чтобы оценить внутреннее психологическое состояние людей, после эксперимента. Оказывается, люди, которые читали «плохой» текст чувствовали себя хуже, а те, что читали «хороший» текст, чувствовали себя лучше.
Такое могло произойти еще и потому, что читающим плохо оформленный текст людям приходилось чаще хмуриться. В мозге есть область, что связывает лицевые мышцы с эмоциями, которые мы испытываем. Будем ходить и хмуриться — почувствуем себя хуже, и наоборот.
Так что, плохая типографика действительно делает ваших читателей несчастными.
Як здобути клієнтів з мільйонними бюджетами на Dribbble
Кінець тернистого шляху Internet Explorer. Згадуємо головне
Резюме, портфоліо та співбесіда: поради HR-менеджерки для кандидатів-дизайнерів
11 несподіваних лайфхаків для After Effects (Public)
Вебдизайнер: з чого почати. Beginner friendly поради про пошуки знань та роботи
Чат-бот для українців-переселенців HandyFriendsBot