Is The F-Pattern Still Relevant in Web Design?

Wdd Logo.
December 11, 2019
Is The F-Pattern Still Relevant in Web Design?.
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. NNG Eye-tracking Study F-pattern 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.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…