I have to admit if a week ago someone told me that I’d be captivated by a heat map, I’d say to you that you’d be crazy.  However, after reading an articled titled “F-Shaped Pattern For Reading Web Content” by the Nielsen Norman Group I was hooked.

Wikipedia defines a heat map as:

A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.

As it turns out, people read web pages in a F shaped pattern.  That’s how users read your on-line content. In a few seconds, a users eyes move at amazing speeds across your web page words in a pattern that’s very different from what you learned in school.

In their eyetracking study, they recorded how users looked at thousands of web pages using eye tracking. They 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 has the following components:

  • 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.

F Reading Pattern Eyetracking

Now what you do with this information when you design web sites and layout web content is up to you.  But remember:

  • Users won’t read your text thoroughly in a word-by-word manner.
  • The first two paragraphs must state the most important information.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content.

Some reading: