A Guide to the F Pattern Layout for Text-Heavy Websites
Are you tired of people coming to your site and leaving after just a few seconds? Are your conversions disappointingly low? Perhaps you need to design your site in a way that reflects how their eyes work. Users to a webpage only scan over the content to see if anything pops out at them – they do not read every single word.
For text-heavy websites such as blogs or news sites, this can be a problem if not done correctly. For such sites, the F-pattern is the ideal layout.
Understanding the F Pattern
The most common way for users to eye-scan a pattern is to first scan the top of the screen horizontally, and then the left side of the screen vertically. When they find something that catches their attention, they begin to read normally.
According to a readability study conducted by Jakob Nielson (Nielson Norman Group), users only read about 20% of overall text on average, and the first two sections of content are the most important. Only one idea should be covered for each paragraph, and bullet points are highly recommended.
F Pattern Tips
If there is one spot that is guaranteed to get noticed, it’s at the upper-left corner of a page. This is where you will want to put your best content. Designers tend to place the navigation bar along the top leading to the upper-right corner to make it easy for users who are searching for a link to a specific page, such as “Contact” or “Help”.
The best place to put the call to action or advertisement is at the end of each row. This will give the visitor momentary pause before they begin looking at the next row. For example, if your goal is to increase phone conversions, you will want to put the phone number in the best location to get noticed, which is at the end of the first row (upper right corner).
If there is any element that is relevant, yet not related organically with the main content, you can place it at the right-hand side bar. This could be links to other posts, ads, buttons, or even a search bar. An example would be to place a few widgets vertically at around the 1,000 pixel mark.
After the first couple of rows, add something a bit different to break up the monotony. You might even want to add a bit of awkwardness on the page to keep the user from getting bored. The standard practice is to disrupt the standard routine every 1,000 pixels or so beneath the fold. The reason for this strategy is that the F pattern can get boring after a while – it needs a break here and there.
Importance of the F Pattern Design
Most visitors to a text-heavy website in English are used to reading from left to right, top to bottom. Ignoring the F pattern for these visitors creates unnecessary annoyances as it forces the visitors to readjust the eye movement they are most used to.
Since site layout and design affect conversions, it’s in your best interest to make your layout as user-friendly as possible.