F-Shaped Pattern for Reading Content

by Nick Babich

This article will walk you through the principles of the F-Layout, why it works, and how you can create your own.

What is the F-Pattern and how it works?

The F-Pattern describes the most common user eye-scanning patterns when it comes to blocks of content. ‘F’ means fast. That’s how users read your content on the web. In a few seconds, users eyes move at amazing speeds across a’ page.

The pattern was popularized by NNGroup eyetracking study which recorded more than 200 users looked at thousands of web pages and found that users’ main reading behavior was fairly consistent across many different sites and tasks. This reading pattern looked somewhat like an F and has the following three components:

• Users first read in a horizontal movement, usually across the upper part of the content area. This eye movement forms the top part of the ‘F.’
• Next, they scan a vertical line down the left side of the screen, looking for points of interest in the paragraph’s initial sentences. When they found something interesting they read a line and this eye movement forms a second horizontal line of the ‘F.’ The second line is typically covers a shorter area than the previous movement.
• Finally, users scan the content’s left side in a vertical movement.

Our eyes are trained to start at the top-left corner of the content block, scan horizontally, then drop down to the next line and do the same until we find something of interest.

The NNGroup demonstrates how eye-tracking studies revealed that users (in left-to-right reading cultures) typically scan heavy blocks of content in a pattern that looks like the letter F or E. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

Obviously, users’ scan patterns are not always contains exactly three parts. When users are engaged in reading (i.e. finds something they like), they begin reading normally, forming horizontal lines.

Why should I use it?

F-shaped pattern will help you create a design with good visual hierarchy, a design that people can scan easily. F-shaped layout feels comfortable for the most western readers, because they have been reading top to bottom, left to right for their entire lives.

When should I use it?

The F-pattern is the go-to layout for text-heavy websites like blogs and news sites. If there is a lot of content — especially text — users will respond better with the layout that designed according to the natural scanning format.

CNN uses the F-Shapen pattern

How to use F-Shapen pattern

F-Layout literally gives the designer more control over what gets seen.

Prioritize your content

Prioritize the most and least important content on a page according to the order you want visitors to follow. Once you know what you want your users to see, you can place the most important content at the top to engage your visitors in the process of scanning/reading.

The first two paragraphs in a content block are the most important. If the paragraph won’t capture visitor’s attention, you will loose them. That’s why place the most important content near to the top of the page as possible in an attempt to communicate the content block purpose.

The most important content on this page can be seen in a few seconds. Image credits: tutsplus

Design for scanning, not reading

When applying the pattern think scanners and place content these scanners would most likely be interested in along the F:

• Start new paragraphs with enticing keywords.
• Play with visual weight of text. People will first look at the most dominant element (the element or area that has a significant contrast) on the page. Thus, give more visual weight to things that matter: use typography to indicate the importance of text (e.g. try highlighting keywords within text), and certain colors to highlight buttons.
• Cover only one key idea per single paragraph
• Use bullet points for lists because bullets will simplify scanning.
• Place the most important content (such as CTAs) at the left and right sides, where the user begins and ends their horizontal scanning. Right side acts as pause for visitors so at the end of the line they have some extra time to think about what they just read.

Avoid boring layouts

The main problem of the F-shapen layout is its buil-in monotony. It’s way too easy to create repetitive and similar blocks of content. And when users get bored they can easily abandon reading your content. Thus, try to break the monotony of text by introducing nice visuals or any other elements that capture user attention and keep them engaged in reading.

Image credit: tutsplus

Conclusion

F-shapen pattern can help you optimize the structure of your layouts. But if you want to use it in your design, always try to make the reading experience engaging.

Thank you!

Learn how to design user interfaces

Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.

Learn UX Design

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz