Skip to main content

F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Ale...

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Bookmark History

Saved by 124 people (-34 private), first by anonymouse user on 2006-06-10


Public Comment

on 2006-08-06 by willrich

How eyes move across the Web page when reading.

on 2006-08-11 by john143

How eyes move across the Web page when reading.

on 2006-08-22 by chefranden

In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users' main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and ha

on 2006-09-14 by apipkorn

Jakob Nielsen

on 2007-02-12 by christyinsdesign

Research in the patterns for how people read content on the web, with suggestions on how to design content to get information to users

on 2008-08-11 by jomcleay

This is great Simon, thanks for sharing

Public Sticky notes

The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
  • Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
  • The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

Highlighted by spower

Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Highlighted by pklausner

Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Highlighted by chanelubrin

Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

Highlighted by komo83

Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Highlighted by komo83

Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.

Highlighted by komo83

Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.

Highlighted by komo83

The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.

Highlighted by komo83

Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors.

Highlighted by komo83

Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.

Highlighted by komo83

Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Highlighted by swanlin128

F for fast. That's how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that's very different from what you learned in school.

Highlighted by mmvcentro

This dominant reading pattern looks somewhat like an F and has the following three components:

Highlighted by mmvcentro

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.
  • Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.

    • Highlighted by chanelubrin

    Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.

    Highlighted by kellie80

    on 2008-05-23 by kellie80

    I wonder, with the exposure kids have to web content, if this impacts how they view a textbook page. If so, will they be "missing" sections because the textbook page is not designed for this type of eye pattern?

    on 2008-12-11 by drcongo

    This is a really interesting question.

    If you squint and focus on the red (most-viewed) areas,

    Highlighted by mmvcentro

    On the SERP (right example), the second crossbar of the F is longer than the top crossbar, mainly because the second headline is longer than the first. In this case, both headlines proved equally interesting to users, though users typically read less of the second area they view on a page

    Highlighted by kellie80

    on 2008-05-23 by kellie80

    This is a Google search page. As blogs & wikis become more & more prevalent, will that change reading patterns? And how much of our eye pattern is due to the limitations of .html?

    Implications of the F Pattern

    The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
    • Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
    • The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
    • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

    Highlighted by discosam

    Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors

    Highlighted by kellie80

    on 2008-05-23 by kellie80

    I know this is about designing a web page that is more conducive to readability, but what are implications for the novel? Do we need to make kids cognizant of how their eyes move while they read? Would that be a cognitive step in learning how to vary pace?

  • Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
  • The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

    • Highlighted by fellrunner32

    The first two paragraphs must state the most important information.

    Highlighted by mmvcentro

    Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior.

    Highlighted by mmvcentro

    For example, users scan in a different, more directed way when they're looking for prices or other numbers, and an interesting hot-potato behavior determines how users look at a list of search engine ads.

    Highlighted by kellie80

    The biggest determinant for content usability is how users read online - and because people read differently, you have to write differently.

    Highlighted by discosam

    because people read differently, you have to write differently.

    Highlighted by kellie80

    on 2008-05-23 by kellie80

    And by extension, will we need to teach reading differently?

  • Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
  • The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

    • Highlighted by chanelubrin