Adjust your daily caffeine intake

Copied!

I regularly make half-caf coffee. I think there’s a gap in the market. Why is coffee so binary?

Published 29 Jun 2013

New sketches by email

Learn something new in a sketch each Sunday

Get the book!

Big Ideas Little Pictures

Prefer to listen?

Try the podcast

Sketchplanations is ad-free
thanks to supporters like you.

See more on Patreon

Keep exploring

F-Shaped Reading

Front stage, back stage

Microadventure

Skeuomorph

The 5 Gift Guide for Christmas

What is a nappuccino example and tiredness can kill: Pull over, neck coffee, get 15 min shuteye for the caffeine to work then cruise on

Tiredness can kill. Take a break

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…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

Newer

RRandom

Older