Как читают люди
По мнению Лауры Франц, шрифт на странице должен быть такого размера, чтобы его было комфортно читать. Однако понять, что в конкретном случае будет удобно, а что нет, можно только предварительно разобравшись с тем, как вообще пользователи читают текст в интернете.
Существует три основных способа прочтения текста в интернете. В 2006 году исследовательская организация Nielsen Norman Group опубликовала изображения «тепловых карт», полученных в ходе изучений того, как пользователи смотрят на веб-страницы (eye-tracking). На этих изображениях зоны веб-страницы, на которые испытуемые обращали больше всего внимания, обозначены красным цветом, менее востребованные зоны отображены желтым, а наименее востребованные участки — фиолетовым.
Сочетание красных и желтых зон часто формирует различные вариации символа F — это подтверждает тот факт, что пользователи читают текст в сети, выборочно сканируя страницу для получения понимания ее контента, но не более того.
Кроме того, посетители изучают страницу для того, чтобы решить свою задачу — они «перепрыгивают» взглядом с элемента на элемент, пытаясь найти нужную информацию. Часто они читают лишь одно слово или даже пару символов на строке. На тепловой карте ниже изображены движения глаз пользователя, изучающего поисковую выдачу Google — первые два результата человек читал медленнее, а затем начинал сканировать страницу, не задерживаясь надолго ни на одной строке. Поэтому в левой части изображения нет четкой вертикальной «линии взгляда»:
Также пользователи могут читать текст увлеченно — это происходит, когда они находят интересную статью или запись в блоге. В таком случае человек читает медленнее и внимательнее. На изображении ниже изображена тепловая карта подобного взаимодействия с контентом — цвета на изображении распределены равномернее, чем в двух предыдущих случаях. При этом к низу тепловой карты цветовая интенсивность падает — очевидно человек потерял интерес к тексту, «проскользил» взглядом по левой стороне странице и завершил работу с ней.
Чтение — сложный процесс
Существует три основных сценария чтения текста в интернете, однако этим особенности чтения в сети не ограничиваются. Исследователи выяснили, что пользователи не читают все слова на странице, вместо этого они используют свое центральное зрение для того, чтобы сфокусироваться на конкретном слове, а периферическим зрением воспринимают сопутствующую информацию:
Пользователи не читают все слова на странице
При чтении используется периферическое зрение
Кроме того, известно, что посетители не фиксируют взгляд на одном слове, а осматривают сразу несколько (глаза описывают небольшие круги, называемые «саккадами»). Чаще всего так поступают пользователи, которые просматривают страницу в поисках нужной информации или просматривают ее для того, чтобы понять, интересен ли контент.
Читатели обращают внимание сразу на несколько слов
Кроме того, во время чтения одной строки текста пользователи обычно охватывают взглядом и следующую строку. Поэтому взгляд не только перемещается горизонтально, но и немного «подергивается» по вертикали. Из-за этой борьбы вертикального и горизонтального движения и возникают F-образные фигуры на тепловых картах.
Постоянная борьба горизонтального и вертикального просмотров приводит к появлению F-образных паттернов
Длина строки и чтение
Типографы обсуждают связи вертикальных и гоизонтальных движений глаз уже почти столетие. Еще в 1928 году Ян Чихолд (Jan Tschichold) заявил о минусах текста, выровненного по центру, и рекомендовал выравнивание по левому краю. Он считал, что это поможет читателям в восприятии информации — появление четкой вертикальной линии по левому краю страницы, которую человек может использовать после прочтения горизонтальной строки для перехода к следующей.
Идеальные цифры: от 45 до 75 символов
Существует множество «правил» относительно того, какой должна быть горизонтальная строка текста. Лаура Франц цитирует Джеймса Крейга, который в 1971 году написал в своей книге «Дизайн с типографикой» (Designing with type):
Чтение длинной строки вызывает усталость: читатель вынужден поворачивать голову к концу строки, а затем искать глазами начало следующей. Слишком короткие строки способствуют разбитию на части слов или фраз, которые обычно воспринимаются в качестве общей текстовой единицы.
Если усталость настигнет читателя, который ищет на странице нужную информацию, то он просто станет сканировать ее по левому краю. Если пользователь, увлеченно изучающий текст, устанет, то он может случайно начать читать одну и ту же строку по второму разу (феномен, названный «дублированием»).
Часто в качестве идеальной длины строки называют цифру 65 символов. Считается, что в интернете хорошо работают тексты, строки в которых насчитывают от 45 до 75 символов. Лаура Франц, однако, говорит, что согласно ее опыту, верхнюю планку можно раздвинуть до 85 символов на строку (включая пробелы и знаки препинания).
Размер шрифта и чтение
Для хорошей читабельности текста важна не только длина строк, но и размер самого шрифта. Это хорошо известный факт, однако при использовании адаптивного дизайна, когда страница с одним и тем же контентом, может быть представлена в различных вариантах, шрифт часто получается или слишком большим или слишком маленьким.
Статические веб-страницы и размер шрифта
Главный плюс адаптивного дизайна, относящийся к чтению текста, заключается в том, что пользователям мобильных устройств не нужно использовать зум и передвигать видимую зону экрана для чтения.
Если структура страницы статичная (например, две колонки текста, как на изображении ниже), то при использовании рекомендованной длины строки, текст может получаться слишком мелким — на устройствах с небольшими экранами прочитать его можно будет только с помощью «зума».
Слева: Главная колонка текста имеет рекомендованную длину, однако без адаптивной структуры, он слишком мал для устройств с небольшими экранами. Справа: Размер шрифта (Verdana 13 пикселей для левой колонки, Georgia 18 пикселей для введения и 16-пиксельная Georgia для основного контента) хорошо подходит для чтения на ноутбуке.
Небольшие устройства и размер шрифта
На устройствах с маленькими экранами шрифт изначально выглядит меньшим по сравнению с его отображением на компьютере. Франц говорит о том, что это нормально, поскольку пользователи в процессе чтения подносят мобильные устройства ближе к глазам. В настоящее время распространен подход, при котором в адаптивной верстке используются шрифты меньшего размера, но достаточного для сохранения «читабельности». При этом сохранение идеальной длины строки не обязательно — идеальный с точки зрения размера, но слишком мелкий текст делает адаптивный сайт бесполезным, поскольку провоцирует пользователей на прокрутку и «зум» страницы.
Слева: для сохранения длины строки размер шрифта уменьшен до 12 пикселей Verdana и 14-пиксельной Georgia, что усложняет чтение. Справа: 13-пиксельная Verdana и Georgia 17 пикселей позволяют улучшить «читабельность», хотя длина строки теперь и не является идеальной.
Большие устройства и размер шрифта
При разработке адаптивных сайтов следует помнить о том, что размер шрифта и длина строки текста важны не только в случае мобильных устройств. Большинство пользователей все еще открывает сайты с ноутбуков и настольных компьютеров. Часто адаптивная верстка подразумевает наличие одной колонки, которая расширяется с увеличением экрана устройства.
Это решение может быть элегантным и эффективным, но также может провоцировать возникновение проблемы с шрифтами — в какой-то момент символы могут стать слишком большими. Воспринимать информацию, представленную подобным образом, не очень удобно — крупный шрифт занимает больше пространства по горизонтали, что усложняет привычный паттерн чтения, при котором пользователи воспринимают часть текста периферическим зрением.
Слишком крупный текст заставляет пользователей замедлять чтение и прилагать большей усилий к усвоению информации — горизонтальное чтение становится неудобным, что провоцирует человека на то, чтобы начать бегло просматривать страницу, взглядом придерживаясь ее левого края.
Когда шрифт становится слишком крупным, читатель все равно пытается использовать привычный ему «горизонтальный ритм». Это вынуждает человека читать слова частями, а не целиком, снижая скорость чтения и прилагая к этому больше усилий.
Лаура Франц говорит, что создателям сайтов не следует гнаться за идеальной длиной строки текста на странице — сохранение идеальных величин будет провоцировать увеличение шрифта для более крупных экранов, а это может сделать контент нечитабельным.
На практике гораздо более эффективным методом является сохранение общей «читабельности» текста с простым выравниванием по ширине. Если же этого не делать и увеличивать шрифт с сохранением идеальной длины строки, то читать такой текст на большом экране не очень удобно. Пример подобной ошибки — сайт проекта A List Apart, текст на котором хорошо считывается на маленьком экране мобильного устройства, но становится слишком большим на экране ноутбука.
Межстрочный интервал и чтение
На то, как люди читают текст, влияет не только зависимость между размером шрифта и длиной строки в адаптивных структурах сайтов, но и межстрочный интервал текста.
Межстрочный интервал влияет на горизонтальное движение глаз
Поскольку пользователи сканируют контент горизонтально и вертикально, то строки должны восприниматься глазом в качестве одной линии, а не вызывать ощущения «волны». Слишком «плотно сбитый» текст может усложнить горизонтальное движение и вынуждать читателя переводить взгляд ниже по левому краю страницы. Кроме того, это усложняет понимание информации и может заставить пользователя перечитывать ее.
С другой стороны, при чтении слишком свободно расположенного текста с большим межстрочным интервалом может возникать впечатление «разъезжающихся строк». Строки в таком случае не воспринимаются в качестве единого элемента, что усложняет вертикальное сканирование контента. Франц говорит, что не существует общепринятых стандартов идеального межстрочного интервала, но советует устанавливать его в размере, равном примерно 150% размера шрифта.
Межстрочный интервал и размер шрифта
Франц убеждена, что для установки верного межстрочного интервала необходимо учитывать несколько параметров (семейство шрифтов, длина строки в адаптивной верстке, размер шрифта, используемый язык). При этом наиболее важным параметром является как раз размер шрифта. Более мелкий шрифт требует большего межстрочного интервала, а не наоборот, как могло бы показаться. Больший межстрочный интервал облегчает распознавание слов и способствует горизонтальному движению взгляда, когда человек устает читать маленький текст.
Слева: межстрочный интервал составляет 150% от размера шрифта, но на iPhone текст читать сложно. Справа: тот же самый контент с немного увеличенным межстрочным интервалом читается гораздо легче.
Правила можно нарушать
При разработке адаптивной версии сайта ее тестирование только на больших размерах экранов не позволяет точно определить, как текст будет выглядеть на маленьких устройствах. Для обнаружения ошибок в дизайне Франц рекомендует использовать длину строки и ее идеальные пропорции, однако призывает не забывать о том, что правила создаются, чтобы их нарушать.
Даже упомянутый Ян Чичолд нарушал собственное правило и использовать центрированный текст на протяжении большей части своей карьеры. Если выбор стоит между удобством пользователя и сохранением идеальных пропорций — удобству должен быть отдан приоритет. Контент, который удобно читать, позволяет пользователям найти то, зачем они пришли на сайт — а в этом и состоит его главная задача.
