hide me

Our F Shape Reading Behavior Online

Our F Shape Reading Behavior Online

Co-written and image by Justin Rodriguez

People read websites in an F shaped pattern. Why is this important to know? The more aware you are of how people will be reading or scanning your website the more effectively you can layout the information on your pages. This knowledge can help you place important information and navigation in the obvious “hot spots.” It will help make your site more efficient in helping users find information quickly.  Many studies have been done concerning the way people scan web pages. A particularly helpful eye-tracking study can be found on Jakob Nielson’s alert box on useit.com. In this study, over 200 users looked at thousands of websites. Using advanced eye-tracking technology, they found that the users’ reading behavior was consistent. Their eyes scanned the pages in a way that resembles an F shape.  Obviously this is a GENERAL pattern, but the study found that typically people scan horizontally across the top part, then horizontally a little lower, and finish by scrolling vertically down the left side. If you squint your eyes at the image below, it is easier to see the F pattern in all of the examples.

F shape

Nielson goes on to make three important implications:

1. Users will rarely read text thoroughly and word-for-word. Keep text concise and to the point so that users can find relevant information quickly.

2. The first two paragraphs must include the most important information

3. Start subheads and bullet points with significant and information carrying words

Something to take note of however, is that these web pages are mostly text based.  In websites with a lot of images and graphics the patterns are very different, and vary significantly from each other.  In an article by Jeff Sexton, he further discusses how we can control the scan patterns by the graphics we use and how we place them on the page. Take a look at the image below and you can see how by simply changing the angle of the babies head, the focus of the web page is directed towards the text and product instead of the image. While most web pages contain minimum graphics it is still important to know how images can affect the users scan pattern

Picture 3


At Blueprint, we design all of our websites using this knowledge. Below are a couple examples of past sites that we have designed with the desired Scan patterns.  You’ll notice that the first two implement the F Shape Pattern. However, the third is an example of a graphic based web page.

Will Call Sports Grill

F-Shape-(Ex3)

Patch Landscaping

F-Shape-(Ex2)

The Burback Brothers Inc. Animation Group.

F-Shape-(Ex1)

Related Articles:

The F shape Pattern

12 Eye-tracking Website Tactics

How Graphic Design Layouts Affect Scanning Patterns

  • Theloop
  • The BPDS newsletter