Как люди читают с экрана

Чтение с экрана — это сканирование: посетитель не читает страницу подряд, а ищет глазами ответ. На сплошном тексте его взгляд рисует букву F.

Человек не читает, а ищет

Представьте, что вы заходите на сайт кофейни, чтобы узнать, открыто ли она в воскресенье. Вы не станете читать историю заведения от первой строки. Глаза побегут по странице в поисках слов «часы работы» или «воскресенье». Нашли и закрыли. Так делает почти каждый посетитель любого сайта: он пришёл с задачей, а не за чтением.

Это подтверждают исследования. Группа Nielsen Norman Group (NN/g), консультанты по удобству интерфейсов, в 1997 году наблюдала за людьми, которые читали страницы в сети: большинство просматривали их глазами, а слово за словом читали немногие. В 2008 году та же группа оценила, сколько текста посетитель в среднем читает за визит. Получилась меньшая часть слов на странице: чем длиннее страница, тем меньшая доля. Числа в таких исследованиях зависят от сайтов и задач, поэтому запомните не цифру, а картину: текст в сети просматривают, а не читают.

Из этого следует главное правило урока. Страница похожа не на эссе, а на вывеску со справочником: на вывеске видно, что здесь и зачем; в справочнике можно найти нужное. Подробный текст нужен, но он стоит за вывеской, а не вместо неё.

Проверьте себя: почему страницу пишут для просмотра глазами, а не для чтения подряд?

Потому что посетитель пришёл с вопросом и ищет ответ. Если он не находит его за несколько секунд, он уходит. Читать подряд он начинает тогда, когда убедился, что нашёл своё.

Как движется взгляд: F, слоёный пирог и пятна

В 2006 году NN/g записала движения глаз 232 человек, читавших страницы, и сложила записи в «тепловые карты»: чем дольше задержался взгляд, тем теплее цвет. Чаще всего карта напоминала букву F:

1. взгляд идёт по верхней строке слева направо;
2. опускается немного ниже и проходит вторую, более короткую строку;
3. потом медленно скользит вниз по левому краю.

Выводы тогда были такие. Первые два абзаца важнее остальных. Начала строк, заголовков и абзацев замечают чаще, чем их концы. Значит, смысл нужно ставить в самое начало.

Теперь о том, где это легко понять неправильно. Буква F не цель, а симптом. Позже NN/g пояснила, что такой рисунок возникает, когда текст идёт сплошным полотном без разметки: у глаза нет за что зацепиться, и он съезжает по левому краю. Если же на странице есть информативные подзаголовки, взгляд прыгает от одного к другому, и получается другой рисунок, который NN/g назвала «слоёным пирогом»: человек пробегает заголовки, как слои, и останавливается там, где нашёл своё. Бывает и «рисунок пятен»: когда ищут конкретное слово, число или ссылку, глаз перескакивает от одного заметного места к другому. Это хорошие картины. F среди них самая плохая.

И ещё одна честная оговорка. Исследования NN/g проводили на англоязычных страницах с глазами, читающими слева направо. Для русских страниц мы не знаем отдельных масштабных данных. Направление чтения у нас то же, и выводы о заголовках и началах строк обычно переносят на русский без изменений, но это предположение, а не измерение.

Поэкспериментируйте на схеме. Она не измеряет настоящий взгляд: это учебная модель, в которой порядок «что замечают раньше» взят из исследований, а секунды условные. Но разница между двумя вариантами одной и той же страницы видна сразу.

Стена текста Страница для сканирования

Посетитель смотрит, секунд: 5

Добро пожаловать на сайт нашей мастерской!

Мы рады приветствовать вас и предлагаем вам ознакомиться с

нашими услугами. Наша компания уже много лет

работает на рынке и стремится предоставлять

высококачественный сервис по доступным ценам

для каждого клиента. Мы используем только лучшие

запчасти и индивидуальный подход к каждому. Звоните

нам, и мы будем рады вам помочь.

Замечено слов: 16 из 54. По увиденному можно ответить на вопросы:

• · Что здесь делают?
• · Кто и где?
• · Сколько это стоит?
• · Что мне сделать?

Проверьте себя: что такое F-образный паттерн и как к нему относиться?

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

Приёмы страницы, которую можно просканировать

Ни один из приёмов ниже не волшебный. Вместе они делают то, что исследования называют «сканируемостью»: глаз находит нужное, а мозг не тратит силы на разбор полотна.

1. Первый экран отвечает на четыре вопроса. Первый экран это то, что видно без прокрутки. Посетитель должен понять, что это такое, для кого, сколько или как, и что ему сделать. В брифе этим вопросам соответствуют поля «кто и что», «для кого» и «главное действие». Если на первом экране есть только слова «Добро пожаловать!», он пропал зря.

2. Подзаголовок называет содержимое. «Услуги и цены» лучше, чем «Что мы можем вам предложить». «Как проходит приём» лучше, чем «Наш подход». Проверка простая: прочитайте подряд только заголовки. Если по ним можно пересказать страницу, они сделаны хорошо. Остроумные заголовки красивы в журнале, а на странице услуг лучше быть понятным.

3. Один абзац, одна мысль. Короткий абзац, обычно из двух-четырёх строк, легче окинуть взглядом и легче пропустить, если он не нужен. Главную мысль ставят в первое предложение: тот, кто прочитает только его, всё равно её получит. Помните и про телефон: пять строк на компьютере занимают на узком экране десять.

4. Список там, где пункты равноправны. Услуги, шаги, документы, условия: всё, что можно пересчитать, оформляют списком. Если важен порядок (инструкция), список нумерованный. Если вы рассказываете историю, список не нужен: она должна течь.

5. Смысл в начале строки. Глаз цепляется за первые слова. «Цена: от 3 000 ₽» работает лучше, чем «Если вам интересно узнать, сколько это стоит, то…». Это называют «ставить главное вперёд». Числа и названия действий в начале заметнее всего.

6. Выделяйте мало. Жирным выделяют одно-два ключевых слова в абзаце, и не целые предложения. Ссылке нужен текст, который называет действие или место: «Записаться на консультацию», «Документы и аттестаты». Ссылка «здесь» или «нажмите» ничего не сообщает ни глазу, ни программе для чтения с экрана, которой пользуются незрячие.

И ещё один пункт вдогонку, про длину строки. Слишком длинные строки трудно читать: глаз теряет, на какую строку переходить. Типографы советуют держаться примерно в пределах 45–75 знаков в строке. Как ограничить её на странице, вы видели в уроке о типографике (свойство max-width в единицах ch); здесь важно другое: узкая колонка читается лучше широкой.

Проверьте себя: какие четыре вопроса должен закрывать первый экран?

Что это такое, для кого, сколько или как, и что мне сделать. В брифе эти ответы живут в полях «кто и что», «для кого» и «главное действие».

Проверка пятью секундами

Как узнать, получился ли первый экран? Есть простая проверка, и она всем по силам. Откройте страницу и смотрите на неё ровно пять секунд. Закройте. На листке запишите, что вы успели понять: что это, для кого, что делать. Потом сравните записанное с брифом.

Лучше всего, если на страницу посмотрит человек, который про ваш проект ничего не знает: друг, сосед, коллега. Вы-то уже знаете, что хотели сказать, и ваш мозг достроит смысл за страницу. Чужой взгляд честнее. Если он не нашёл того, что вы считаете главным, значит, на первом экране этого нет, как бы много вы ни написали ниже.

Не думайте, что просмотр заменяет чтение. Он только открывает дверь. Человек, который выбирает эксперта для серьёзного дела, прочтёт и длинный текст, но сначала убедится за секунды, что страница о нужном. Поэтому подробности не выбрасывают, а кладут ниже или на отдельные страницы, а на первом экране оставляют вывеску.

Проверьте себя: для чего нужна проверка пятью секундами?

Она показывает, что реально понимает посетитель, который ещё ничего не знает о проекте. Чего он не записал, того нет на первом экране.

Практика

В предпросмотре страница вашего проекта, написанная так, как писали в худшие годы: один сплошной абзац с «Добро пожаловать!» и словами «нажмите здесь». Разберите её на части.

1. Соберите первый экран в элементе header с идентификатором first-screen: заголовок h1, фраза о том, кто вы, фраза о том, для кого проект, и ссылка с главным действием.
2. Остальное положите в элемент main. Для каждого раздела из брифа сделайте заголовок h2 и один-два коротких абзаца, каждый p на отдельной строке файла.
3. Услуги или товары оформите списком ul.
4. Посмотрите на страницу ровно пять секунд, закройте её и заполните заметку внизу: что поняли и чего не нашли.

Тексты внутри абзацев сейчас могут быть любыми, главное чтобы форма была верной. Вы разобрали страницу на части и знаете, что именно глаз ищет первым. Следующий шаг: наполнить эти части словами, в которых есть смысл. Этим мы займёмся в следующем уроке, он про «информационный стиль».