F-образный принцип чтения веб-страниц

f-shaped-pattern-header

Если по взглядам пользователей Интернета составить тепловую карту, можно легко заметить F-образный принцип чтения веб-страниц: две горизонтальных полосы и одна вертикальная.



Наблюдение

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/reading_pattern.html

F — это от английского fast. Именно так, быстро, пользователи просматривают ваши веб-страницы. За несколько секунд их глаза с огромной скоростью успевают «пробежать» по словам на вашем сайте. Такой способ восприятия совсем отличается от привычного способа, который можно наблюдать у человека, читающего книгу.

В исследовании, проведенном на оригинальном сайте, наблюдали за тем, как 232 пользователя просматривали тысячи страниц в Сети. Было обнаружено, что принцип чтения у большинства пользователей в целом повторялся от сайта к сайту, независимо от тематики сайта или задач пользователя. Этот основной принцип чтения, если представить его на теплокарте, напоминает английскую букву F и состоит из трех этапов:

  • Сначала, пользователь читает в горизонтальном направлении, обычно что-нибудь в верхней части контента страницы. Это составляет верхушку буквы F.
  • Далее пользователь опускается взглядом немного ниже и второй раз читает в горизонтальном направлении. На этот раз чтение, обычно, короче. Этот шаг составляет вторую планку буквы F.
  • В конце концов, пользователь просматривает начало абзацев содержимого двигаясь взглядом вертикально вниз. Иногда пользователь делает это довольно тщательно и медленно, что отображается непрерывной полосой на теплокарте. В других случаях, он быстро пробегает контент глазами, оставляя лишь пятна на теплокарте. Этот шаг составляет вертикальную черточку буквы F и завершает ее...

Конечно, схема чтения не всегда состоит именно из трех частей. Иногда, пользователь продолжает горизонтальное чтение и на третьем этапе, что делает теплокарту больше похожей на Е, чем на F. Еще бывает, что пользователь просматривает контент поперек только один раз, из-за чего теплокарта выглядит скорее как Г. Но в целом, принцип чтения обычно выглядит именно как буква F.

f_reading_pattern_eyetracking

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

Теплокарты выше показывают как пользователи читали три веб-страницы разных типов:

  • Статью «О компании» на корпоративном сайте (слева)
  • Страницу с описанием товара на сайте интернет-магазина (по центру)
  • Выдачу результатов поиска на сайте поисковой системы (справа)

Если вы обратите внимание на красные участки, то увидите, что они отображают ожидаемый принцип чтения в виде буквы F. Конечно, есть отличия, но ведь и этот принцип буквы F — скорее грубая, примерная форма, чем полноценная модель.

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

На странице с результатами поиска вторая черточка в букве F длинее первой в основном потому, что второй заголовок сам по себе длинее. В этом случае, оба заголовка оказались в равной степени интересны пользователям, хотя обычно второй строчке уделяется меньше внимания.

Практические выводы

Наблюдения выше довольно четко показывают необходимость написания отдельных текстов для Веба, вместо использования уже существующих печатных. Тексты для Веба должны составляться по специальным правилам, среди которых:

  • Пользователи не читают тщательно все слова в вашем тексте. Тщательное чтение — редкое явление, особенно когда пользователь, что-то ищет или выбирает, открывая сразу много сайтов. Некоторые люди читают тщательно, но большинство — нет.
  • Первые два абзаца должны содержать наиболее важную информацию. Тогда есть надежда, что пользователи действительно прочтут эту информацию, хотя все же из первого абзаца они, вероятно, прочтут больше, чем из второго.
  • Начинайте заголовки, абзацы и маркированные списки со слов несущих полезную информацию, на которые пользователи обратят внимание, когда будут вертикально пробегать глазами текст. У первых двух слов в строке шансы быть прочитанными куда выше, чем у остальных.

Цены и другие цифры чаще привлекают к себе внимание пользователей. А вот на рекламе в выдаче результатов поисковых систем взгляд задерживается лишь мельком.

P.S.

От меня. Важно понимать основную идею того, как пользователь ведет себя в сети, просматривая сайты. На типичного юзеры с каждой страничкой сваливаются тонны информации: куча текста, разных картинок, ярких баннеров, ссылок и всего, всего, всего. А таких сайтов типичный серфер просматривает очень много.

Неудивительно, что восприятие информации в этом случае происходит по несколько необычному принципу: за короткое время просмотреть страницу и найти самое важное. Читать только самое важное, самое интересное.

Если в течении довольно незначительного времени, ничего интересного не найдено, страница закрывается и только. Пользователь будет читать длинющие пространные вступления к статьям, только если он действительно заинтересован в теме этой статьи. Типичные маркетинговые тексты в Вебе — вобще гиблое дело.

Я собираюсь перевести еще несколько статей на эту же тему — они будут доступны в разделе Куда смотрит пользователь? Если вам понравилась статья, оставьте комментарий или поделитесь ссылкой на эту статью.




Также посмотрите:

blog comments powered by Disqus