Website conversions are always a hot topic for any business with an online presence. The more conversions your site generates, often equals more profit, and who doesn’t want that? As an experienced website design company, we wanted to share how with the F pattern you get an A for your website conversions.
What is the F pattern ?
The F-pattern is a term that describes how an average person’s eyes move while reading content online. This is different from how we read magazines, books or other hard-print documents that generally have different layouts and styles.
First, you need to understand that our eyes can scan content in seconds. We have learned that website scanning allows us to find information faster. Second, you need to understand how we trained or trained to scan that content.
The typical user scans at the top of a page, which often contains headlines and important data. Then the eyes scan along the left side of the page and look for bullets, subheadings, menu options, etc. Finally, the eyes scan more across the page in the middle to see what important aspects should be.
Heat maps have been used in numerous studies to track eye movements that support this commonly used method that we as humans use to absorb website data. Of course we call it an “F-pattern” because it is the most recognizable shape of the pattern, but the shape is not always exact.
In the Western world, we learn to read from left to right, so the top line of the F pattern makes perfect sense. Since websites are often segmented in their layout, the rest of the pattern also makes sense when the eyes start a scan to find the information they want. Again, when we learned to read from left to right, it makes sense to scan for information on the left; we will of course spend more time on the left side of the page. If anything is found, it is examined with a pattern resembling the shape of a capital “F” as the end result.
How do you convert a pattern into conversions ?
A company can choose to implement the F pattern in its design as a strategy for increasing conversions. Not every website does this, but it makes sense to provide a layout that matches the natural inclination of how we read.
This layout style can be particularly effective on pages with a lot of text or critical information points that need to stand out through a visual hierarchy.
To get the most out of the F pattern, you need to
Determine the most important actions – What is the most important thing or things you want people to do or see on your site? Is it a newsletter subscription? Shopping in the store? Or maybe you want them to click on your call to action.
Focus placement based on the pattern – Take those important elements and focus on placement within the F pattern so that they are accentuated with the design and displayed prominently based on how we read a website.
Repeat the process on every page – It is important to use this method consistently across your site, as it shows consistency reliability, which in turn reinforces the intuitive decision-making process that takes place in online conversions.
Keep it short – Because you work within a fixed space, it is important to keep everything short and concise.
Use style to highlight – There are tons of methods that can be used to make items further down the page stand out within the F pattern, such as bold, italic, bullets points and the like.
Optimize for both mobile and desktop: The F pattern works on both desktop and mobile devices because the reading patterns do not change based on the screen size. However, one a smaller screen does mean you have to focus on brightness.
Test your layouts – Testing is an essential step in the design process. This should be used with regard to the placement of items in the pattern to ensure that you are using the most value for money.
Here are a few examples of sites that don’t use the concept F-pattern
Plague Exterminator – This site seems to avoid every pattern altogether, making it difficult to decide what to draw your attention to.
Dyson – This is a streamlined approach to a site that focuses on centering information. It is still noticeable that even with the primary text in the center, the eyes still draw left looking for information.
While these sites successfully use the F pattern concept
Langara College – You can literally see the F pattern over the background image. The rotating center element fits well within the basic concept of the F-pattern by keeping it Primary information within the pattern.
CNN – The news site uses a hybrid F-pattern that leads with headlines and navigation at the top, then uses images to help focus the top stories in the top-left corner corner of the F.
Dynamic Yield – This is a smaller F pattern, but it shows the important information first, especially the CTA button. You can quickly see the difference when you compare the sites and how your eyes are drawn to specific elements on the last pages, while visually more lost on the other sites.
It comes down to
While it’s important that important elements are on your website for conversion, it ensures viewers actually see them. Using the F pattern gets you an A on your website conversions because the intentional flow you create allows visitors to focus first on the key, specific elements you want see them. This will make them bounce less quickly and more likely to get involved, which is exactly what you want to help increase your profit.
