The âFâ Pattern: We Take Advantage of How People Scan Web Pages
According to eye tracking research by Nielsen Norman Group, people scan web pages and phone screens in an âFâ pattern. They start at the top left then scan right, then down, then to the right again, then to the bottom of the web page. The best way to design the layout of a web page is to follow how the eye tracks.
When designing web page layout, we get navigational elements in the first pass, across the top. This web page layout design gives the visitor a sense that they know where they are.
Seond to that we feature a row of calls to action – one, two, or three options of where we want that visitor to go after that.
Following the F pattern, the visitor will then scan down the page and return to the calls to action in the middle of the web page layout design, and chose one of those options.
Alternativeley, they may head back to the top navigation, since they know where they want to go, and head out there.
It ends up looking something like this on a heatmap:
While the âFâ pattern is not the only way people scan article or webpages, it is the most common.
Here are some real estate website homepage that use âFâ pattern layout:
thebotiquere.com
Here is an example of the âFâ pattern on a blog post. Note where theyâre placing the âWatch Liveâ button.
inman.com
If you have any questions regarding the design and layout of your website, please don’t hesitate to schedule a free consultation, we’d love to take a look over your website with you.
