F-образная модель чтения в Интернете: неправильно понято, но все еще актуально (даже для мобильных устройств)

  1. F-образный рисунок
  2. F-образный шаблон - не единственный шаблон сканирования
  3. Почему люди сканируют в форме буквы F
  4. F-Shape плохо для пользователей и предприятий
  5. Лучшие противоядия от F-образного рисунка
  6. Резюме

Среди вкладов NN / g в мир UX, пожалуй, одним из наиболее упоминаемых является F-образный шаблон чтения для веб-контента, который мы определили в 2006 году. На протяжении многих лет многие ссылались на это исследование, иногда правильно, а во многих других случаях его неправильно истолковывали. В этой статье мы стремимся сообщить о недавних исследованиях, а также прояснить некоторые неправильные представления, связанные с F-образцом. Особенно:

  1. Сканирование в Интернете не всегда принимает форму F. Также существуют и другие распространенные шаблоны сканирования.
  2. F-шаблон негативен для пользователей и предприятий.
  3. Хороший дизайн может предотвратить сканирование F-формы.
Среди вкладов NN / g в мир UX, пожалуй, одним из наиболее упоминаемых является   F-образный шаблон чтения   для веб-контента, который мы определили в 2006 годуЭто один из первых примеров F-паттерна из наших исследований в начале 2000-х годов.Эта тепловая карта объединяет взгляды более чем 45 человек, пытающихся узнать, что произошло в Галвестоне, штат Техас, в 1900 году. Верхний, наиболее читаемый раздел тепловой карты (обозначенный красным цветом) напоминает заглавную букву «F».

F-образный рисунок

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

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

Последствия этого шаблона:

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

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

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

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

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

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

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

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

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

F-образный шаблон - не единственный шаблон сканирования

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

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

Почему люди сканируют в форме буквы F

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

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

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

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

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

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

F-Shape плохо для пользователей и предприятий

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

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

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

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

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

Лучшие противоядия от F-образного рисунка

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

  1. Включить наиболее важные моменты в первых двух абзацах на странице.
  2. использование заголовки и подзаголовки. Убедитесь, что они выглядят более важными и более заметными, чем обычный текст, чтобы пользователи могли быстро их различить.
  3. Начните заголовки и подзаголовки со слов, несущих большую часть информации : если пользователи видят только первые 2 слова, они все равно должны получить суть следующего раздела.
  4. Визуально группируйте небольшие объемы связанного контента - например, окружая их рамкой или используя другой фон.
  5. Смелые важные слова и фразы.
  6. Воспользуйтесь преимуществами различных форматирование ссылок и убедитесь, что ссылки включать в себя несущие информацию слова (вместо общего «go», «click here» или «more»). Эта техника также улучшает доступность для пользователей, которые слышат ссылки, читают вслух, а не сканируют контент визуально.
  7. Используйте маркеры и цифры, чтобы вызывать предметы в список или процесс.
  8. Резать ненужный контент ,

Резюме

Сканирование в Интернете продиктовано:

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

Для получения дополнительной информации о шаблоне F-Shaped и других шаблонах сканирования см. Наш:

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