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

I've always been fascinated by how a tiny spider can create a web spanning a gap where climbing and dragging a thread across the floor would be impossible, maybe between trees, from a building to a lamppost, or over a stream. How do they do that? Here's a common technique by many orb weaver spiders — known for building orb-shaped, or circular wheel-shaped webs — for bridging the gap and creating the web.

The spider stands on the edge and lets out a long thread. It waits for the breeze to blow the thread away from them. If the thread catches onto something it can form a bridge thread.

Once it catches, the spider may reinforce the thread and then put down other anchors. These then form the frame of the web into which it will add radial threads from the centre.

The spider may then put down an auxiliary thread that provides a non-sticky frame, together with the radial threads, for it to walk on while it lays down the final sticky capture spiral. It's then set to lie in wait.

Some spiders will eat their webs at the end of the night but leave a bridge thread in place — perhaps for you to walk into in the morning — ready to rebuild the next night.

There is a vast diversity of spiders and webs. This is a fairly common example, but even within orb spider webs, there are a ton of different strategies for capturing prey. But perhaps, the next time you spot a bridge thread spanning a seemingly impossible gap this will give you a thought as to how it might have been done.

Here's a common orb spider web as a static sketch

You can watch darwin's bark spider on the BBC creating a web spanning a remarkable 25 metres

A common orb spider web

Happy talk is fluff and often self-congratulatory promotional talk, usually intended to be friendly but generally just getting in the way of people trying to get a job done.

On the web, and to be honest, in most places, happy talk must die.

Brenda Ueland, in her book If you Want to Write, put it perhaps the best I have seen:

'Oh, this over-explaining! It is the secret of all boredom. It is like this: You, the writer, go slowly and laboriously with many words, while the reader gropes through it, saying impatiently: “Yes, yes, hurry, hurry up! I see it—I get it! Go on to the next."'

Happy Talk Must Die is a gem from Steve Krug's legendary book on usability, Don't Make Me Think. Here's an excerpt on Happy Talk.

Also from Don't make me think: Omit needless words

Happy talk must die

I find myself linking to this article about why your links should never say click here for links on the web that I thought I should just get it down for easy reference. The solution, generally, is to rewrite your sentence. For more about writing for the web, click here. Only joking, check out more tips about writing for the web.

Also see: Omit unnecessary words, use styling instead of colons, cognitive overhead and the best writing is rewriting. 

Rewrite to avoid click here

The time to a target depends on the ratio of distance to the target over it’s size. So clicking on a small target close by might take a similar time to clicking on a large target further away. It’s a simple model and there are a few little games out there to bring it home in practice.

I’m reminded however, of an observation from a mentor of mine, Darrell Mann, that just because people call it a law doesn’t mean you have to treat it like one. The example of Apple’s standard program icons at the base of the screen that expand when you mouse near them, are a simple technique that help to overcome the limitations of Fitt’s law. There are plenty more. Don’t be sucked in to laziness by a name.

Fitts’ Law

A shift in the way we develop for digital devices. The mantra used to be ‘graceful degradation’ - design for what you expect people to use, then let your application gracefully degrade for older browsers, and smaller screens. Generally speaking the richest application, and the first to design for, was on the desktop.

A more recent approach is mobile first. Start with core content, design for the smallest screens and least capable browsers, then progressively enhance the experience onto larger more capable devices, browsers and screens. My intro from Mobile First by Luke Wroblewski.

Progressive enhancement

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.

Design for a Glance, a Look and a Read

Sam Moreau, User Experience Director at Microsoft. Just one small example.

Had a few questions about this so thought I’d add another simple example. Imagine you want to change your phone number on a service. Rather than display the phone number and have an option in a menu to edit and then a separate edit screen, the phone number itself can be the route to editing. You simply display the current number - clean, no junk. Mousing over it or clicking on it allows you to edit it directly. You remove the need for additional menus, text, instructions, and chrome. The content itself becomes the interface.

The content is the interface

I still find somewhat remarkable the complexity in a simple button on the web. These are just 6 common states that may each have their own appearance and behaviour.

Web design sketches