It’s always good to have a set of guidelines to follow when designing a website — especially if you have little to no user data to go on.
Over the years, we’ve been introduced to tons of these guidelines and design trends; some of which have fallen out of favor while others have persisted over the years. One of those web design guidelines that’s persisted is the F-pattern.
But is it still relevant today, what with mobile-first design practices?
What Is The F-Pattern?
When we refer to patterns like the F-pattern, Gutenberg layout, or layer-cake pattern in web design, what we’re talking about is how readers scan the content on a page. And thanks to heat mapping technology and research from organizations like Nielsen Norman Group (going back to 2006), we have proof of its existence.
As you can see from these eye-tracking studies from NNG, the F-pattern isn’t always an explicit “F” shape.
Instead, it refers to a general reading pattern whereby certain parts of the page are read in full — usually at the top and somewhere in the middle. In some cases, readers may stop to peruse additional sections of the page, making the pattern look more like the letter “E”. The rest of the page, for the most part, gets lightly scanned along the left-hand margin.
This principle actually applies to both desktop and mobile screens.
Although mobile devices have a smaller horizontal space, readers still have a tendency to focus on the top section, scan down the page a bit, read a bit more, and then scan down to the end. Again, it won’t look like a traditional “F” shape, but the concept is the same.
Is the F-pattern Still Relevant?
Essentially, this is the message the F-pattern has taught web designers and copywriters: “No one’s going to look at everything you’ve done, so just put the good stuff at the top.”
It seems like a pessimistic way to approach web design, doesn’t it?
The fact of the matter is, it is a pessimistic approach. At the time it was devised, however, we didn’t know any better. We were looking at the data and thinking, “Okay, this is how our users behave. We must create websites to suit that behavior.”
But the best web designers don’t just kick back and let visitors take the reins. They take control of the experience from start to finish, so that visitors don’t have to figure out where to go or what to do next. Designers carefully craft a design and lay out content in a way that draws visitors into a website and takes them on a journey.
When NNG revisited its report on the F-shaped pattern in 2017, this is the conclusion it came to:
“When writers and designers have not taken any steps to direct the user to the most relevant, interesting, or helpful information, users will then find their own path. In the absence of any signals to guide the eye, they will choose the path of minimum effort and will spend most of their fixations close to where they start reading (which is usually the top left most word on a page of text).”
Basically, our visitors are only resort to reading a page using the F-pattern when we’ve provided a subpar experience.
So, to answer the question above: No, the F-pattern isn’t still relevant.
What Should Web Designers Do Instead?
It’s important to recognize that visitors are bound to scan your website. Everyone’s so short on time and patience these days that it’s become a natural way of engaging with the web.
That said, there’s a difference between scanning a web page to see if it’s worth reading and scanning a web page simply to get it over and done with (which is essentially what the F-pattern encourages).
Knowing this, web designers should create pages that encourage scanning — to start, anyway. Pages that contain:
- Short sentences and paragraphs;
- Headers and subheaders to give a quick and informative tease of what’s to come;
- Elements that create natural pauses, like bulletpoints, images, bolded text, hyperlinks, bountiful spacing, etc.
If you can keep visitors from encountering intimidating walls of text, they’ll be more likely to go from scanning the page to reading it… instead of scanning it and closing out the browser.
I’d also recommend not focusing so much on reading patterns. Unless you’re spending a lot of time designing text-heavy pages, they’re not going to apply as much.
Instead, focus on designing an experience that’s welcoming and encouraging, and makes it easy for your visitors to go from Point A to Point B. If you direct them to the most valuable bits of your website, they’ll follow you.
Featured image via Unsplash.
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
