Як читають люди
Поєднання червоних і жовтих зон часто формує різні варіації символу F - це підтверджує той факт, що користувачі читають текст в мережі, вибірково скануючи сторінку для отримання розуміння її контенту, але не більше того.
Крім того, відвідувачі вивчають сторінку для того, щоб вирішити своє завдання - вони «перестрибують» поглядом з елемента на елемент, намагаючись знайти потрібну інформацію. Часто вони читають лише одне слово або навіть пару символів на рядку. На теплової карті нижче зображені руху очей користувача, який вивчає пошукову видачу Google - перші два результату людина читав повільніше, а потім починав сканувати сторінку, не затримуючись надовго ні на одному рядку. Тому в лівій частині зображення немає чіткої вертикальної «лінії погляду»:
Читання - складний процес
Існує три основні сценарії читання тексту в інтернеті, однак цим особливості читання в мережі не обмежуються. Дослідники з'ясували, що користувачі не читають все слова на сторінці, натомість вони використовують своє центральне зір для того, щоб сфокусуватися на конкретному слові, а периферичним зором сприймають супутню інформацію:
Його користувачі не читають все слова на сторінці
При читанні використовується периферичний зір
Крім того, відомо, що відвідувачі не фіксують погляд на одному слові, а оглядають відразу кілька (очі описують невеликі кола, звані «саккадами»). Найчастіше так чинять користувачі, які переглядають сторінку в пошуках потрібної інформації або переглядають її для того, щоб зрозуміти, чи цікавий контент.
Читачі звертають увагу відразу на кілька слів
Крім того, під час читання одного рядка тексту користувачі зазвичай охоплюють поглядом і наступний рядок. Тому погляд не тільки переміщається горизонтально, але і трохи «сіпається» по вертикалі. Через цю боротьби вертикального і горизонтального руху і виникають 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 пікселів дозволяють поліпшити «читабельність», хоча довжина рядка тепер і не є ідеальною.
Великі пристрої і розмір шрифту
При розробці адаптивних сайтів слід пам'ятати про те, що розмір шрифту і довжина рядка тексту важливі не тільки в разі мобільних пристроїв. Більшість користувачів все ще відкриває сайти з ноутбуків і настільних комп'ютерів. Часто адаптивна верстка має на увазі наявність однієї колонки, яка розширюється зі збільшенням екрану пристрою.
Це рішення може бути елегантним і ефективним, але також може провокувати виникнення проблеми з шрифтами - в якийсь момент символи можуть стати занадто великими. Сприймати інформацію, представлену подібним чином, не дуже зручно - великий шрифт займає більше простору по горизонталі, що ускладнює звичний патерн читання, при якому користувачі сприймають частину тексту периферичним зором.
Занадто великий текст змушує користувачів сповільнювати читання і докладати більшою зусиль до засвоєння інформації - горизонтальне читання стає незручним, що провокує людину на те, щоб почати швидко переглядати сторінки, поглядом дотримуючись її лівого краю.
Лаура Франц каже, що творцям сайтів не слід гнатися за ідеальною довжиною рядка тексту на сторінці - збереження ідеальних величин буде провокувати збільшення шрифту для більших екранів, а це може зробити контент нечитабельним.
Міжрядковий інтервал і читання
На те, як люди читають текст, впливає не тільки залежність між розміром шрифту і довжиною рядка в адаптивних структурах сайтів, але і міжрядковий інтервал тексту.
Міжрядковий інтервал впливає на горизонтальне рух очей
Оскільки користувачі сканують контент горизонтально і вертикально, то рядки повинні сприйматися оком в якості однієї лінії, а не викликати відчуття «хвилі». Занадто «щільно збитий» текст може ускладнити горизонтальне рух і змушувати читача переводити погляд нижче по лівому краю сторінки. Крім того, це ускладнює розуміння інформації та може змусити користувача перечитувати її.
З іншого боку, при читанні занадто вільно розташованого тексту з великим міжрядковим інтервалом може виникати враження «роз'їжджаються рядків». Рядки в такому випадку не сприймаються як єдиного елемента, що ускладнює вертикальне сканування контенту. Франц каже, що не існує загальноприйнятих стандартів ідеального міжрядкового інтервалу, але радить встановлювати його в розмірі, що дорівнює приблизно 150% розміру шрифту.
Міжрядковий інтервал і розмір шрифту
Правила можна порушувати
При розробці адаптивної версії сайту її тестування тільки на великих розмірах екранів не дозволяє точно визначити, як текст буде виглядати на маленьких пристроях. Для виявлення помилок в дизайні Франц рекомендує використовувати довжину рядка і її ідеальні пропорції, проте закликає не забувати про те, що правила створюються, щоб їх порушувати.