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

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…