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

Why is the save icon in your software a floppy disk that no one has used for over 20 years? And that phone icon looks nothing like your mobile phone when making a call. These are both skeuomorphs.

A skeuomorph is when a new design borrows practical elements from a former design and repurposes them in a functional or ornamental way.

Skeuomorphs are practical because they make new systems more intuitive. Their comfort and familiarity can help bridge old and new ways. For example, some electric cars are designed to look like they have air intake vents like traditional combustion cars.

More poetically, a skeuomorph can offset the loss of physical reality when interacting with our digital devices.

The save icon is a floppy disk from the 1980s and '90s

The shopping cart in an online shopping site

Sliders and knobs, or even connecting wires, are made to look like analogue mixing desks and gear in music software (music software is awash with skeuomorphs)

A link icon represented by a link of a physical chain

Dials and levers or a funnel representing filters

Shadows under boxes on a webpage simulate light falling on a surface to show depth

Grab bars are indications of friction points where you can change the order of a list

I once read that when designing, if you can't think of an icon for your feature in about five seconds, you probably need to write the word, as not everyone will understand it.

Not all digital icons are skeuomorphs: the printer as the print icon and the folded page for a page layout still map to their physical counterparts.

Slot machine levers that change the state of a circuit rather than spin any wheels.

Fake wood grain is used on floors or interiors.

Haptic feedback—a simulated click when pressing on a touchscreen.

Speed camera signs in the UK use a stylised visual of a classic Kodak Brownie camera.

Rivets on jeans are from when fixing denim together required more than just stitching.

Electric cars sometimes include imitation air vents at the front that cool traditional combustion engines.

Car hub caps with spoke designs from early wheels.

Textured wallpaper, such as Anaglypta, echoes leather wall hangings with scored patterns.

There's even a design for an early car with a fake horse head on the front—though the inventor designed it to avoid scaring other horses on the road.

A smartwatch isn't just a watch; it's a computer you wear on your wrist.

The imitation shutter sound of taking a photo on your phone

Simulated engine noise on an electric car

Skeumorphs in Software and User Interfaces

Software and the digital domain are ripe places for spotting skeuomorphs, as they don't have physical characteristics—it's all 1s and 0s that we can't see or interact with.

Apple's early iPhone interfaces were famous for skeuomorphic elements, such as a Contacts app that resembled a contacts book complete with tabs—tabs are also skeuomorphic— and fake leather or paper effects in note apps.

Skeuomorphs, like metaphors in design, are helpful. In a magic box that can do anything—a mobile phone—a visual connection to a physical object with a defined purpose helps immediately tell you what something might be or do.

As the digital world gradually becomes the first interaction for so many uses, skeuomorphs may become less common. But we'll see them around for decades yet.

Skeuomorph is not a recent term. It was coined by archaeologist Henry Colley March by combining the Greek skeuos (σκεῦος) for container or tool and morphe (μορφή) for shape.

Skeuomorphs have been used in art and architecture since ancient times. For example, they are decorative features of stone buildings that mimic structural elements from older wooden ones, such as protruding rafters. Ancient pottery sometimes includes decorative rope patterns on the surface.

The BBC has a lovely radio piece on Skeuomorphs, Design, and Modern Craft with novelist Will Self. The piece discusses their subtler side and some great examples, some of which I've included here. In the same episode, they also mention the zombie walk with faces lit by the glowing screen from a phone.

"The content is the interface"—Sam Moreau

Skeuomorph

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

When writing for the web every word counts. We scan pages, instructions, and emails, sometimes skipping reading completely. So it's key to make sure that every word is doing a job. Over the years I find there are words that I routinely trim from web copy to save space and keep focus while preserving intent. While context always matters and these can't be cut everywhere, here are a handy few that regularly get the cut from web copy:

Obviously, clearly, of course and the like — if it's obvious then don't write it, if it's not, then it's not relevant. If it's obvious to you and not to me then no need to make me feel stupid reading it

Note, please note, note that, notice — we're noting it by writing it so trim the noise by leaving out reminders for readers to note things. If you really want someone to notice you can use the extra space from removing it by making it bigger or bolder

That — can often be trimmed without changing the meaning of a sentence

Exact — very often makes no difference to a sentence

Famous — if it's famous then maybe I've heard of it. If I haven't, then perhaps it's not so famous

Current — if someone asks for my age or job then it's normal to assume they're not asking for what it used to be

Successfully — it's always nice to trim a long word that doesn't add a lot

Have — like 'that', it can often be removed without changing the meaning of a sentence

All, total — when I take these out I often find it's the default assumption anyway

Interestingly, surprisingly and the like — it may be interesting or surprising to you, but I think it's polite, and briefer, to let the reader decide if it's interesting or surprising for them

If you're writing for the web, try removing some and see if it still works.

Micro-editing redundant words

I love this diagram by Henrik Kniberg for determining what to release to your customers and when.

The idea is that a standard approach of having your grand plan of what you think people want at the start and then working on each bit at a time until finally, after months of work, you have something that works is not so smart. Each piece, in the car example, doesn’t help the customer at all until it’s all put together.

Instead, you can focus on providing the next piece of functionality that helps someone get their job done a little better than before. In the beginning, they’ll probably have to put up with a lot if they want to use it, but with each successive release, they find they can get their job done a little better than before and get value out of what you’re building. A side-effect is the feedback you get along the way will likely help you learn and build something that is better than what you had in mind at the beginning, and all along the way, the customer had some value instead of waiting for months.

Providing usable functionality at every step is not always easy, and it requires rework as you move from one step to the other. But it’s generally a price worth paying to give your customers value sooner and start learning as soon as you can.

This diagram is explained in the brilliant product management book User Story Mapping by Jeff Patton.

A release strategy for happier customers, sooner

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.

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

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

Metaphors for interface design from Rachel Hinman via Mobile First.

Mobile is snorkelling. Desktop is diving

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.

Common button states

Classic rule of thumb from Jakob Nielsen. Probably the most useful corollary is if you can afford 15 tests, tests 5 users 3 times each and iterate the design in between.

5 user tests finds 85% problems

Two and a half words of wisdom from Steve Krug. Still worth reading Don’t Make Me Think.

Omit unnecessary words

Some sensible interaction design principles:

Remove or disable submit buttons on clicking to avoid double submissions

On transitions should be fast (to feel zippy). Out transitions can be slow

Keep essential information out of tooltips

Ux sketches