F Layout Your Website

Website designers must first understand their visitors’ reading tendencies and then create appropriate visual hierarchies, allowing them to place their CTAs in the best locations and convert as many visitors as possible. 

This trend is backed up by over a decade of extensive research and studies of the reading behaviors of web users. And although the studies have identified half a dozen scanning patterns, one stands out from the rest.

In 2006, the Nielsen Norman Group conducted an eye-tracking study that went on to become the most cited of such studies to date. By showing thousands of different web pages to 232 web users and examining how they viewed the pages, the study found that users mainly read in a consistent pattern across different sites and tasks. This was coined the F-shaped pattern, mainly because the participant’s reading behavior resembled the letter F.

Since 2006, multiple eye-tracking studies have supported the claim put forth by the Nelsen Norman study.  As such, many websites today try to implement the F-layout in their pages to maximise their conversion rate.

The F-Layout

The F-Layout holds that web users focus more on the top left section of the screen, followed by the left side and the occasional glances at the right side of the screen. It assumes that most visitors will follow the following behavioral pattern when reading content on a web page;

- Start at the top left section and read horizontally across the upper part of the page. They will also scan the top of the page for a glimpse of the menu. This forms the top bar of the F.

- They then move down to the next row(s) of content and read in a similar horizontal movement, albeit covering a shorter area than before. This forms the lower bar of the F.

- The last element of the pattern involves scanning the left side of the remaining content in a vertical movement. This movement forms the F’s stem.

The F-Pattern is actually a lot more instinctive than it is logical. It is rooted in the way we’ve been reading since we became literate-  from left to right. Therefore, we spend more time on the left side than we do on the right side of a page because that’s where newer, more interesting content is likely to begin. This is probably why the scanning pattern is rarely a perfect F. A more interesting paragraph further down the page may cause the reader to break the scanning pattern and read more towards the right, resulting in a pattern that resembles an E.

This instinctive behavior also holds for languages that move right to the left, like Arabic. Eye-tracking research shows that Arabic readers follow in a flipped F-shaped pattern.

Note that this behavior applies when reading the content area of a web page. Meaning that the visitor’s gaze on the left part may not necessarily translate to the leftmost part of the full page.

Study conducted by BAM Studio in 2021 on a high traffic client home-page (after desktop UX/UI optimisation).

Why people follow the F-Shaped Pattern

The following factors generally contribute to a web user reading in an F-shaped pattern.

- The web surfer is reading a page displaying a “wall of text” with little or no formatting of the content. There are no images, bullets, subheadings, or bold words, so they instinctively scan in an F-shaped pattern.

- They are not interested in the subject matter and thus, are unwilling to read every word of the content. They are probably just looking for a quick answer and will scan the rest of the text once they find it.

- People tend to try to be as efficient as possible, i.e., minimise interaction cost while maximising the benefit. Therefore, readers try to economise on time (the interaction cost) by looking at fewer words while still trying to take in as much useful information (the benefit) as they can. 

Is this good for business?

On its own, the F-shaped scanning pattern is bad for the business. This is because users will miss big chunks of content when skimming, most of which was probably generated to convert. They will also miss any important content that appears on the right side of the page, negatively impacting your conversion rates. 

Applying the F-Layout

While a web user’s tendency to read in the F-pattern may be bad for business, it can still be used to your advantage. Enter the F-Layout in web design.

Since visitors will pay the bulk of their attention to the left section of the screen, the F-Layout in web design involves placing crucial elements like the branding, CTA, and navigation buttons on the left side of the page. Here are some tips on how to apply it effectively;

- If you have an important point to make, do it at the top, preferably in the first two paragraphs of the content.

- Use headings and subheadings to divide the content. Make them more visible since they serve to disrupt the reader’s F-shaped reading pattern. The headings should also be catchy to attract the interest of the surfer.

- Another way to disrupt the pattern is by bolding important words and phrases, using numbers and bullets to list items, and employing images.

- Divide your page into groups of related content. These can be separated using different backgrounds or a visible border between them.

- Eliminate unnecessary content to keep your reader engaged for as long as possible.

A lot of websites employ these methods to create an effective F-Layout web design. But even as you focus on the content column, don’t forget the sidebar column. You can use it to host the search bar, widgets, a category listing, or an advertisement. Although the 'F' type layout is increasingly important today, some industry scpecific designs contribute to more than just the standard schematic when it comes to Conversion Rate Optimisation. 

Takeaway

The F-Pattern is a scanning tendency that many site visitors practice even to date. It’s an instinctive behavior backed up by scientific research, and thus, many websites try to adopt a layout that takes advantage of this. However, website designs based on this pattern must watch out not to seem too repetitive and predictable as many F-Layout designs tend to be.