Кара Пернис, старший вице-президент в Nielsen Norman Group, анализирует, как изменились паттерны чтения текста в Интернете, и приходит к выводу, что открытый компанией F-паттерн все еще актуален. В своей статье она пытается объяснить, как он влияет на пользователя и бизнес, и как с ним бороться.

Резюме: Исследования айтрекинга показывают, что люди сканируют веб-страницы и экраны телефонов в разных паттернах. Один из них — в форме буквы F. Мы снова возвращаемся к нему спустя одиннадцать лет после открытия, чтобы понять, что паттерн значит в современном мире.

Среди вкладов Nielsen Norman Group в мир UX, возможно, одним из наиболее часто упоминаемых является F-образный паттерн чтения веб-контента, которые мы вывели в 2006 году. На протяжении долгих лет многие ссылались на это исследование. Иногда правильно, но часто истолковывая его неверно.  В этой статье мы стремимся донести результаты последних исследований, связанных с пересмотрением паттерна. А также прояснить некоторые заблуждения касательно него.

Среди них:

1. Процесс сканирования в вебе не всегда принимает форму F. Существуют и другие распространенные паттерны.
2. F-паттерн негативно сказывается и на пользователях, и на бизнесе.
3. Хороший дизайн может предотвратить F-сканнирование.

Один из первых примеров F-паттерна из наших исследований в начале 2000-х годов. Эта тепловая карта объединяет взгляды более чем 45 людей, которые пытаются узнать, что произошло в Галвестон-Техасе в 1900 году. Верхний, наиболее читаемый раздел тепловой карты (представленный красным цветом) напоминает большую букву «F».

F-образный паттерн

В F-образном паттерне сканирования характерно множество фиксаций, сосредоточенных в верхней и левой частях страницы. В частности:

Сначала пользователи читают горизонтально, обычно вдоль верхней части области содержимого. Этот начальный элемент образует верхнюю панель F.

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

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

Последствия такого паттерна:

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

F-образный паттерн применим к исследованию процесса чтения в области контента веб-страницы. То есть, он описывает поведение людей, когда они посещают веб-страницу и оценивают ее контент. А не когда они находятся в новом разделе сайта и проверяют навигационные панели (как правило, наверху и / или слева от страницы), чтобы решить, куда идти дальше. Таким образом, в F-паттерне взгляды падают на левую часть области содержимого, а не на крайнюю левую часть всей страницы, если левая колонка занята навигационной панелью.

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

TigersinCrisis.com: Эта тепловая карта из нашего нового исследования объединяет данные о 47 людях, когда они пытались узнать, сколько тигров Суматры живут в дикой природе. Красный цвет на этой карте — пример F-образного паттерна. Так же, как и 11 лет назад.

Это видеовоспроизведения взгляда показывает сканирование пользователем мобильного устройства по F-паттерну, когда он исследует объективы портретной камеры. Красный пустой круг показывает, где фиксируется взгляд.

Еще один пример F-паттерна на мобильной версии из исследования. Его участница использует сайт http://bacnyc.org, чтобы узнать, где Михаил Барышников учился танцу. Текстовые колонки были шире экрана, поэтому во время чтения она свайпила страницы горизонтально.

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

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

F-образный паттерн — не единственная модель сканирования контента

Рядом с ним существует множество других возможных шаблонов сканирования, включая перечисленные ниже:

• Паттерн многослойного торта проявляется, когда глаза просматривают заголовки и подзаголовки, но пропускают основной текст под ними. Диаграмма взгляда или тепловая карта такого поведения отобразит горизонтальные линии, напоминающие торт с чередующимися слоями коржа и глазури.
• Пятнистый паттерн состоит из пропущенных больших фрагментов текста. Он выглядит, будто в тексте ищут что-то конкретное, например ссылку, цифры, конкретное слово или фразу отличительной формы (например, адрес или подпись).
• Паттерн метки: взгляд сосредоточен на одной точке в то время, как страница скроллится с помощью мышки или свайпа пальцем. Так танцоры фокусируются на объект, чтобы поддержать баланс во время поворотов. Маркинг более характерный для мобильной, чем для десктопной версии.
• Паттерн пропуска происходит, когда люди сознательно пропускают первые слова, если несколько строк текста в списке начинаются с одного и того же слова (ов).
• Паттерн обязательности заключается в фиксации взгляда почти на всех страницах. Если люди очень мотивированы и заинтересованы в контенте, они будут читать весь текст в абзаце или даже на всей странице. (Не рассчитывайте, что это будет происходить часто. Предположим, что большинство пользователей все равно будут сканировать.)

Почему люди сканируют по F-образному паттерну

Люди просматривают страницу по F-образоному паттерну, когда присутствуют следующие 3 элемента:

1. Страница или раздел страницы содержит текст практически без форматирования для веба. Например, есть «стена текста», но ничего не выделено жирным, нет списков или подзаголовков.
2. Пользователь пытается быть наиболее эффективным при изучении страницы.
3. Пользователь не настолько вовлечен или заинтересован в предмете, чтобы прочитать каждое слово.

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

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

Люди склонны минимизировать затраты на взаимодействие и максимизировать пользу, получаемую от выполняемой работы. В случае с взглядом на экран это приводит к меньшему количеству фиксаций во время отбора нужной информации. А также в желании быть продуктивным, вовлеченным и получить максимум от информации, которую они успевают освоить из фиксаций взгляда. Экономия во времени подразумевает меньшее количество фиксаций и взгляд на меньшее количество слов.

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

F-форма негативно сказывается и на пользователях, и на бизнесе

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

History.com. Участок F-образного взгляда участника исследования, когда он просматривал страницу, где много текста и очень мало форматирования (каждая синяя точка означает фиксацию. Линии между точками означают скачки взгляда, во время которых пользователь практически ничего не видит. Эти линии помогают следить за фиксацией. Большие точки представляют собой более длительные фиксации, а числа обозначают последовательность.)

В адаптивном дизайне или любом liquid-text лейауте заодно, текст организован по-разному в зависимости от размера окна. Таким образом, пользователь, который сканирует контент в F-форме на телефоне, например, не будет фиксировать взгляд на тех словах, что и на десктопной версии того же текста. Просто потому что контент размещается по-разному на разных размерах экрана.

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

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

Лучшее противодействие  F-образному паттерну

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

1. Включите наиболее важные пункты в первые 2 абзаца на странице.
2. Используйте заголовки и подзаголовки. Убедитесь, что они выглядят более важными и заметными, чем обычный текст, и пользователи могут их быстро отличить.
3. Начните заголовки и подзаголовки со слов, содержащих большую часть важной информации. Если пользователи видят только первые 2 слова, они все равно должны понять суть следующего раздела.
4. Визуально группируйте небольшие части связанного содержимого. Например, взяв их в рамку или используя другой фон.
5. Выделяйте жирным важные слова и фразы.
6. Используйте с выгодой для себя различное форматирование ссылок и убедитесь, что они содержат информативные слова (вместо общих «Перейти» — «Нажмите здесь» или «Узнать больше»). Этот метод также улучшает доступность для пользователей, которые слушают текст вслух, а не визуально сканируют контент.
7. Используйте маркеры и цифры для обозначения элементов в списке или процесса.
8. Уберите ненужную информацию.

Выводы

Причины сканирования в вебе:

• Мотивация пользователей.
• Цели, которые они пытаются достичь.
• Макет страницы и форматирование текста.
• Содержание страницы.

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

За дополнительной информацией о F-образоном паттерне и других шаблонах сканирования смотрите наши другие статьи:

• Оригинальное исследование 2006 года: F-Shaped Pattern For Reading Web Content
• Доклад How People Read on the Web: The Eyetracking Evidence
• Курс Writing Compelling Digital Copy

Больше о проектировании интерфейсов вы сможете узнать на конференции KRUPA. Программа мероприятия и билеты по ссылке.

For an English version go via the link. 

С оригиналом статьи можно ознакомиться по ссылке.

Перевод — Катя Павлевич.