Understanding the F-Layout in Web Design

Today we’re going to examine the “F Pattern Layout”. Rather than trying to force the viewer’s visual flow, the F-Layout gives in to the natural behaviors of most web surfers and it uses scientific studies to back it up. This tutorial will walk you through the principles of the F-Layout, why it works, and how you can create your own.

Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.

This post marks the second in a series where we’ll be examining the wide variety of layout paradigms that exist in the world of web design. The goal: to better understand why you might choose one layout concept over another. In this series, we’ll also be looking at the “Z” shaped layout, the open layout, and some out of the box layouts that are sure to give you some great ideas. Attaining a better grasp of how different layouts can change user behavior is one of the central principles of the creating an effective user experience.

Introducing the F-Layout

The F-Layout relies upon various eyetracking studies for it’s foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern – seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eyetracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.

Let’s take a peek at a heatmap using Webdesigntuts+ as the example:

This heatmap shows the abstract F shape that user’s general gravitate towards. Hot spots (red/orange/yellow) represent where user’s attention lingers the longest.

Allow me to walk you through the general behavior pattern:

• Visitors start at the top left of the page.
• Then they scan the top of the site (navigation, subscription, search, etc.)
• Next they move down, reading the next full row of content… all the way to the sidebar.
• Last, surfers enter a “scanning pattern” once they hit the bulk of the site content.

Let’s take a moment to turn this pattern into a barebones wireframe:

Take a moment to notice a few key behavioral patterns; Reading is largely done the same way that a book is read: top to bottom, left to right; Sidebar content is often dismissed below the “fold”, and usually is only scanned briefly. The bulk of the attention stays within the main content column where, in this case, the article listing is located.

A close inspection reveals a visual hierarchy that you might logically expect:

• The brand-mark and navigation occupy the visitor’s attention first and foremost.
• Within the contest structure, images receive the greatest level of attention.
• Headlines come next.
• Text appears to be scanned, not read thoroughly.

Applying The F-Layout to a Design

As an exercise, let’s walk through the creation of a design using the F-Layout. First, let’s sketch out the rough placement of our main content elements using a wireframe method:

Notice that we’re trying to make our primary “mission statement” as near to the top of the page as possible in an attempt to communicate the site’s purpose quickly. We’re also giving in to the visitors desire to “scan” content by breaking our design into two main columns… one for our primary content, the other for ancillary information (the sidebar).

Next, let’s add some actual content to the design to see how it looks:

It’s rough, but the key ingredients are there. You’ll notice that the main intent of the site is now communicated within a few seconds… the top row of content is now fulfilling it’s duty to “orient” the visitor; If your navigation is here, they also know where they can go.

Below the top row, we’re using images and “catchy” headlines to grab a surfer’s attention… even if they are only interested in scanning the content, there’s a good chance they’ll be able to find something of interest.

We’re also trying to capitalize on the second-row of the “F” by placing an advertisement or “call to action” here (#4).

Now, let’s overlay the original F-layout to see how we match up:

Not bad right? We might want to tinker with the details (styling, phrasing of the headlines, etc.), but for the most part we’re allowing the F-pattern scanning behavior to dictate our design.

One thing to note here is that the height of each of the two rows on top of the “F” can be variable. Some designers might opt to leave them as thin as possible to encourage users to begin scanning right away; others might choose to make it a much more dominant part of the design.

What happens when you want to break the surfer out of the “scanning pattern” though? You certainly don’t benefit from a bored user if they begin to dull everything out, so let’s add one “awkward” element within the scanning area to keep the user interested.

This technique of “breaking the expectations” of the layout can be useful when you have really long vertical spans of content that feel dull or boring once you scroll past the first couple headlines. By throwing the viewer a curveball, you can keep the users moving around your site by providing visually interesting elements 1000, 2000, even 3000 pixels below the fold.

Why it Works

The F-Layout works because it allows web-surfers to scan content naturally. The layout feels comfortable because people have been reading top to bottom, left to right for their entire lives. The implications of this behavioral pattern are something of a double-edged sword though:

• If you need to say something, you absolutely must say it at the top, because…
• Users aren’t going to read each and every word on the page. In fact, most readers won’t really even bother reading the excerpt of an article. Anything past a headline is probably only going to be there for SEO purposes.
• Images and Headlines are only reliable if they are interesting and engaging.

If this all sounds like you’re designing a site more like an advertiser would than a designer, you’d be right. Most sites that rely heavily on the F-Layout also rely on advertising or other “call to action” pitches in the sidebar to drive revenue or some other sort of user-engagement. This isn’t necessarily a bad thing (hey, are those advertisements over there on our sidebar?!), but it does underline the relationship between the content and the sidebar… the content is king, the sidebar is usually there to get you involved in something that will take you to another level.

So what does this mean for a sidebar? An effective relationship between content column and sidebar column in a design will utilize the sidebar in one of two ways:

1. To feature “relevant” content. This could be an advertisement, a listing of “related articles”, a Social Media widget, etc.
2. As a tool for users to find specific content. The obvious example is a searchbar, but it would also be a category listing, a tag cloud, a “popular posts” widget, etc.

The Chicken or the Egg?

So which came first? Was the F-Layout designed in response to people scanning sites in the F-Pattern, or did web-surfers begin scanning pages in the F-Pattern as a response to so many sites being designed that way… My personal guess is that it’s a little bit of both. Yes, people have always been reading top-to-bottom, left-to-right; but the prevalence of the 2-column site layout certainly encourages website visitors to scan the way that they do.

The simple fact is that the F-Pattern is supported by research, so whether or not you want your layout to adhere closely to it, it’s worth at least considering how visitors will react to your site if they do prefer to “F-scan” the web.

Examples of the F-Layout in Action

Ok, so before I actually list these, it’s worth saying that just about any website setup on the traditional 2-column blog layout is using a “F-Pattern” layout, so it’s almost too predictable to show you more sites that use the standard F-pattern.

What we are going to look at in these examples is how each of these designs excels at manipulating the F-pattern eye-flow… notice that the most effective designs are those that anticipate the F-pattern scanning behavior, and then use it to their advantage.

DesignSnack.com not only tells you what they are all about at the top of the “F”, they actually get you involved before you even start scrolling.

The LAtimes.com site is one of my favorite newspaper sites. You’ll want to notice just how heavily they “break the layout expectations” once you start scrolling down.

Kickstarter is delivers an effective mission statement at the top, but they break from the mold by ditching the sidebar completely in favor for pure scan-alicious goodness below the fold.

Phototuts (or any of the sites on the Tuts+ network) relies strongly on the F-pattern eye flow. Take note of that sidebar over there. Is it boring? Nope… each sidebar widget includes a bit of custom design that keeps it interesting and relevant. Oh, and note how scannable the headlines are… sometimes a simple, straight forward design pattern is the best approach.

CollegeHumor might be the last place you think of for a formal design lesson, but take a good hard look at their front page. They lay it on THICK in the top of the F portion… so much so that you might call this the FFFFF layout. The reasoning of this is simple: If you can’t beat a user’s desire to quickly skim over your content in search of something tantalizing, you may as well join them.

GigaOm is another site that excels at “breaking the layout expectations”. As you visit the site, scroll down to see how they deliver interesting content all the way down to the footer.

SquareSpace’s Product Tour shows that you don’t need to have the sidebar on the right side… in fact, you can leverage the fact that users will gravitate towards the stem of the F by placing a sub-navigation there.

I’ve saved CreativeSessions for last because they are doing something completely different. They essentially use the top portion of the F as a huge teaser (notice that there is no branding or message up there). By doing this, they encourage you to actually read what’s below the fold.

Caveats Worth Mentioning

There are drawbacks to relying too heavily on the “F-Pattern” as your design foundation. For one, designs that stick too closely to the F-layout can feel boring and predictable… to combat this, you as a designer will have to bring a certain level of innovation to the table. Well designed sidebar widgets, catchy headlines, and engaging images are all useful tricks, but you’ll likely want to take it a step further.

Once you dip below the top two rows of the “F”, it often becomes a challenge to a designer to keep things interesting. I’ve found that lots of designers sell the top 600px of a site to their clients… this is all fine and well (it is what visitors see first), but the lessons of the F-layout are that it’s also important to keep things interesting as you begin to scroll down.

Just like a song that has one-steady beat might give you a headache, a page can often become dull and repetitive if you don’t bother to throw in an interesting element now and again. Breaking the rhythm of a design by limiting repetitious elements is a crucial technique that you’ll want to design into your sites to bring your work to the next level.

Be sure to check out the “Z-Layout” post as well!

Have your own thoughts or comments? Share them down below!