The F-pattern design considers the way users begin reading in the upper left corner of the page and scan across horizontally. They then skip down the left side and read across in the middle and on down the page. There are both pros and cons to F-pattern design.
Nielsen Norman Group claims to be the first place to identify the pattern related to web pages and phone screens back in 2006. They point out there are far more patterns than just the F-pattern design, and it may not be the most desirable one.
That said, knowing the reading hierarchy on your site and how your particular audience responds allows you to hit the high notes where you need and increase conversions.
Knowing how the human eye scans across the top of the page, drops down and scans across again allows you to put the highlights where people are most likely to look for them. If your heat maps show your readers use an F-pattern, here are some ways to tap into the knowledge and make a lasting impact.
1. Place Your Logo
Since most English-speaking readers start their journey on your page in the upper left corner, this is the ideal location for your logo. Your logo brands your page and shows the user what your business is about.
You can also use the symbol as a home page link. No matter where the person lands on your site, they can click the logo and go back home. Even if they aren’t reading in an F-pattern design, they will likely start in the upper left.
Grand + Nash adds their logo in the upper left corner. When you hover over the logo, it turns into a circle with a home symbol to indicate you can click on it as a navigational tool. The logo placement and interactive design set the tone of the rest of the page’s design.
2. Stick to Good UX
About 80% of people who feel dissatisfied with your site will turn to a competitor’s page. The laws of user experience (UX) state you should create a user-centered design that meets expectations. People read in specific patterns, so being aware of them while making your site means your page will be more usable.
Knowing how the eye moves in F-pattern design allows you to place the most vital info where users can access it easily. Think about the goal of the page. Why are people most likely to visit you? How can you make it almost effortless to perform an action that converts them from browsers to leads?
3. Establish a Navigation Hierarchy
There is a reason the majority of websites have a top horizontal navigation bar. Not only do users expect your menu to appear near the location, but it matches the way they read through a page in an F-pattern design.
The navigational hierarchy establishes what information is most important on your website and where to find it. Limit the options to four or five. Think about the categories users click on most frequently and reduce the choices to a handful. Anything else becomes a subcategory.
Don’t forget that many of your users will access your site via mobile devices. Are there too many menu items to fit across a smaller screen?
4. Go Left
Do you always have to put your menu across the top and logo in the upper left corner? Of course not. Simply knowing user expectations and the pattern they read allows you to think outside the box a bit.
It’s okay to add a pop of color where the eye doesn’t naturally travel to grab attention, for example. F-pattern design doesn’t dictate everything is in the shape of an “F.” Instead, it gives you a blueprint for where vital elements should go and an idea of how to grab attention away from those areas when needed.
Langara College places their men on the left and keeps their logo and a search feature across the top. It’s clear they are using an F-pattern, but they haven’t limited themselves to only placing a horizontal nav bar on the page. The orange background draws the eye and shows where the nav bar is.
5. Give Attention to Footers
If you’re using an F-pattern design, should you ignore the footers? The reason people read in an F-pattern is to save time. Users scroll across the page, skip down, scroll across and skip down.
At first glance, you might think they won’t bother looking at other material, but this isn’t the case. People often go back and read things more carefully if you’ve engaged them fully. Your footer is an opportunity to share details you didn’t have room for in the F.
There may be details not vital to decision-making but are still important such as how to contact you or the history of your company. Think about what you’d like to share in your footer and what information is of secondary importance to users deciding to buy from you.
6. Include a CTA
The call to action (CTA) is one of the essential elements of a high-converting landing page. It tells the user what movement to take and how to enter the buyer’s journey. Since you understand the way your visitors glance across and down your page, you’ll understand the key locations a button might work best.
Place your CTA to the left middle or center of the page, for example. Study heatmaps to see where people spend the most time on your page and put your CTA in a hot location.
Vimeo places their call to action buttons across the second line of the F. This makes them both pop and draws the eye to their location. It’s clear you have options across the first line for navigation, but the next thing the user sees is the CTA.
Test Your Theories
While an F-pattern design works well for many different industries, you may find your users read in a Z-pattern or some other method. Spend time studying heat maps and trying different placements. Conduct split tests to see which locations work best for logos, CTAs and other high-value elements on your page.