F-Shaped Reading

Many of us absorb and sift through huge quantities of information on the web daily. We've trained ourselves to quickly pull out the most important information and decide if the rest is worth our time. When this happens, which is most of the time, people commonly use F-Shaped Reading.

What is F-Shaped Reading?

F-Shaped Reading is a pattern seen in eye-tracking studies of people reading content on the web that seems to follow the shape of an F. That looks like scanning the top words most, maybe making it to the end of a headline. Then moving down the left-hand side and heading right again when we hit another sub-head or line that draws our attention.

In languages that read right-to-left, you can see a reverse F-shape.

We don't always read in an F-shape. There are several other common text-scanning patterns, such as spotted, layer-cake, marking, bypassing or commitment patterns—getting stuck in and reading the whole thing. However, an F-shaped reading, first identified around 2006, is still common and used on mobile devices.

F-Shaped Reading is about reading content. It's not how we might scan a shiny new web page with fancy navigation and CTAs (Calls To Action).

Why an F-Shape?

F-Shaped Reading means that your headline and your first sub-head matter a lot. And also, the content on the left matters more as a way to draw people into your work.

But it doesn't have to be this way. An F-shape arises because we're trying to be efficient and decide if this page is worth more of our time.

It's hard to get that from a block of text, so we improvise—getting an idea of the content areas from the headlines and trying to see which content blocks, if any, are relevant to read by scanning quickly down the page.

I'm not too proud to admit that you may be scanning this.

Improving on F-Shaped Reading and Helping Our Readers

F-Shaped Reading, to my knowledge, is from the NN Group, who also has a comprehensive article on it . They have a useful list of antidotes, which I paraphrase below, together with a few additions of my own:

• Put the most important information first
• Structure with headings and subheadings
• Front-load words in headings and bullets with the most information (check the first word of the titles in this post)
• Group related content visually — see 7 Gestalt principles
• Highlight important content
• Ensure links have information-bearing words (information scent)—rewrite to avoid "click here"
• Use lists
• Cut unnecessary content
• Avoid big blocks of text and use a sketch instead (Sketchplanation anyone?) =)
• Use visuals and captions as gateways to content

Related Ideas to F-Shaped Reading

Also see:

• Happy Talk Must Die
• Gestalt Principles
• The Blur Your Eyes Test
• Front-load names to cue attention
• Skeuomorph
• Micro-editing redundant words
• Let your data speak for itself
• Progressive enhancement—mobile first
• Mobile is snorkelling. Desktop is diving (less true these days)
• Dark patterns: using design to deceive