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.

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

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:

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

Ensure links have information-bearing words (information scent)—rewrite to avoid "click here"

Avoid big blocks of text and use a sketch instead (Sketchplanation anyone?) =)

Use visuals and captions as gateways to content

Mobile is snorkelling. Desktop is diving (less true these days)

F-Shaped Reading

The blur your eyes test is a way to evaluate the big picture and clarity of communication and designs by squinting to blur your eyes. Good designs give you a sense of the structure, even through a blurry lens. Poor designs leave you no wiser.

The blur your eyes test is a practical first screen for evaluating most communication, even if you don't consider yourself a designer. It works because it's simple and tests whether you're making life easy for the reader.

To try it, head to a well-designed web page and squint until your vision is blurred. Can you still get an idea of the page even without seeing the details?

If I blur my eyes, where do I expect the key message to be, and what are the supporting messages? Where do I expect to click if I want to continue? My team probably got sick of me squinting my eyes, asking them to do the same, and reporting that it wasn't apparent to me what to expect.

Because people naturally skim content, making it as easy as possible to understand your message is essential. Clear hierarchy. Obvious next steps. It's also why Happy Talk Must Die and why wireframes and low-fidelity prototyping are helpful.

I spent a little time with Stanford design Professor Larry Leifer. Like all Professors, people constantly inundated him with requests for his time and expertise—I sometimes wonder how talented academics cope. If you were writing to him—or anyone—you could help him and yourself by being clear.

Clear was not just in the message and the words you wrote but also in the structure of your writing. He told me that he felt you should be able to narrow your eyes to blur your vision and still see the basic structure of an email: greeting, intro or context, ask, sign off. Well-structured emails were more likely to get his attention and response because you'd made it easy for him to deal with.

I've applied that tiny snippet of advice thousands of times since when writing emails, Slack messages, product releases, announcements, invitations, page designs, banners, chats and articles. As I reviewed more and more designs, I would use it to check, "Are we making this easy for the reader?"

And yes, I also use it for Sketchplanations. Try blurring your eyes on past sketches and see if you think they pass—I'm sure I don't always manage it. It's also part of why I love the idea sketch format on which I've based so many sketches.

The blur-your-eyes test works to communicate with busy people—and we're all busy people when we're trying to find what we want on the internet.

As a separate lesson, another Stanford Professor, Bernie Roth, also taught me that a short, polite, timely rejection is much more valuable than a delayed, in-depth rejection.

The Blur Your Eyes Test

The Gestalt principles of visual perception describe how our brains make sense of what we see. For example, they explain how we associate a photo with the text of a newspaper article or understand a series of words as a sentence on a billboard. These principles originated from the field of Gestalt psychology in the early twentieth century.

In laying out sketches, I try to consider how a viewer will understand what connects with what, the order in which the viewer will read the sketch with their eye, and how colour or formatting link related elements—skim through the back catalogue to see it in action. In creating each sketch, consciously and unconsciously, I use many of the standard Gestalt principles of design.

There are many Gestalt principles and some variations in the names. I chose seven common principles to illustrate:

Proximity
Objects that are close together are perceived as a group

Similarity
Similar objects are perceived as a group

Continuity
Elements on a line or curve are related

Closure
Completing missing parts of images to create a whole

Figure-Ground
Identifying what's in the foreground or background

Symmetry & Order
Perceiving symmetrical or orderly elements as a group

Common Fate
Objects moving together are perceived as part of a group

The Gestalt principles are helpful for information design, user interface design, user experience design, graphic design and just about any design. It is also fascinating to spot how you unconsciously use them when interpreting designs you see. For example, look at the signs in an airport, a menu, or a page of your favourite app and see which principles are in play.

The Interaction Design Foundation has a great article on the Gestalt principles that explains their use in design in more depth. You'll also find many others.

Gestalt principles

Dark patterns are when people design interfaces intending to deceive or trick. Sadly we are all familiar with these. They're everywhere. 

It could be the free trial that unexpectedly led to a subscription or the subscription that was easy to sign up for but had to be canceled by mailing in a letter. Or it could be an outward attempt at giving control over privacy but with options so confusing as to do the opposite. Perhaps you tried to adjust cookie preferences on a news website but could only find a button to 'Accept all' after editing your preferences—grrrr! Tricking people like this into sharing more information than intended has come to be known as Privacy Zuckering.

Remember popups that could only be closed once you found a tiny 'x' that moved around the screen?

I recently wanted to pause a subscription only to be told it would invalidate all the accumulated unused credits I'd paid for (I'm still paying). The Pudding published a great analysis of unsubscribing from online services. At times this may be unintentional—there's naturally less incentive to work on great account closing and unsubscribe experiences than on signing up.

The example in the sketch was a real one I experienced (I wish I'd grabbed a screenshot) from an airline website where the designers buried the option not to buy insurance within the country select list.

And they're not just online. Sneaky casinos employ design in the physical world for their gain, such as removing references to time passing, such as clocks or windows, using mazelike navigation and the continual winning sounds of jingling coins. 

"Dark patterns" was coined by Harry Brignull and documented at the Deceptive patterns site and now a book.

Dark patterns

The isolation effect is our tendency to remember an item that stands out in some way from a set of otherwise similar items—you might easily guess, for example, which name we are more likely to remember from a list of Tom, Terry, Angelica, Theo and Tyler.

When presenting information, the isolation effect is practical if you wish to draw attention to specific items. By standardising the presentation of other items in a list, maybe by muting the colours, making them the same size, or removing features that stand out, you can draw people's attention and improve people's memory of your chosen items.

The isolation effect is standard in web design by using distinctiveness: red notification bubbles on a set of otherwise homogenous apps, a "most popular" plan more prominent than the other options, or a Call-To-Action (CTA) button in a contrasting colour.

The isolation effect is also known as the Von Restorff effect after the German psychiatrist Hedwig von Restorff. See, for example, Hunt, R.R. The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review 2, 105–112 (1995) for a summary of Von Restorff's most cited paper on the effect.

The isolation effect

A ghost grid is a guide for organising thoughts, information and sketches, that doesn't compete with content.

Content itself can also be the ghost grid to highlight changes and help draw comparisons — as when you might sketch options for extending a house or designing a garden.

A grid is useful for structure and creation but needs to fade back from content or disappear when no longer needed. Like freeing data from its data prison, a ghost grid emphasises content and information without non-data-ink taking attention.

I learned the term ghost grid from Edward Tufte's Seeing with Fresh Eyes: Meaning, Space, Data, Truth.

I rarely buy other notebooks for work than a dot grid, preferably in a funky colour. Some of my favourites: Leuchtterm dot grid hardcover, Moleskine dot grid softcover, Moo soft cover dotted journals

Ghost grid

The data prison is the default table where the bars of the cells crowd out your data with non-data-ink and lock your data into a prison.

When data is locked into cells, their relationships with other data are harder to see, and the reader has to work harder to learn from your table.

When making a table of data, consider if, by adjusting spacing and alignment, you can make the columns or rows clear enough as they are without the prison bars. And look for opportunities to remove the visual noise to let your data and the relationships between them shine out.

The data prison is a concept from Edward Tufte. Check out the beautiful Envisioning Information

The data prison

There’s a famous photo series by Eadweard Muybridge that shows, unequivocally, that while galloping all four of a horse’s legs leave the ground. I’d always heard that’s what they trying to find out at the time, but from what I’ve read it was more a question of at what points do a horse’s legs leave the ground. The photos show the somewhat surprising state of leaving the ground while the horse’s legs are tucked, not when they are outstretched. It’s a lovely example of what Edward Tufte calls small multiples.

Do horses legs leave the ground at a gallop?

Shares information passively, with the neat effect that having a good one in an office can go a long way to getting people on the same page without explicitly calling meetings or sending out updates to do so. Handy to also have a good space in front of it for talking, discussing and generally collaborating. A common term in agile development, originally I believe from Alistair Cockburn of Thoughtworks. To quote from his article, of many possible:

- Is large and easily visible to the casual, interested observer
- Is understood at a glance
- Changes periodically, so that it is worth visiting
- Is easily kept up to date”

Information radiator

Often, the form of the data is obvious enough for what it is that you might consider simplifying by removing the label.

Let your data speak for itself.

And spend more time and attention on ‘the point’. </rant>

Cut out some fluff

You can design almost any information with this in mind (even an email for example). Probably not ideal for a novel, but if you’re competing for attention, as most things are, it’s not bad to keep in mind.

Information design sketches