Use The F Pattern in Your eCommerce Website Design
May 15, 2018
Website eye-tracking studies show that people predictably follow an F-pattern when they scan over a new website. This pattern creates a map of where you should put the most important content on your eCommerce theme design.
Numerous studies of how eyes travel over websites give us some firm data to work with. And it gets an F.
…pattern, that is.
The data shows that on most websites, eyes pass over the page in a pattern that forms a vertical stripe on the left and two horizontal stripes across the middle. This is indicative of a natural response to text and content on a computer screen. People scan up-and-down the left side of screen, then jet across the top and middle of screen.
These “hot zones” are to ecommerce calls-to-action and product positioning what a strike zone is to a pitcher.
On UXi® eCommerce Themes, we employ the F-pattern to varying extent on all designs. For example:
The vertical stripe holds the logo, main navigation, rotating image, and featured products.
Main offering and most popular featured products are on the top horizontal line.
Calls-to-action and additional featured products fall on the second horizontal line.
The product page design also uses the F pattern:
The vertical line has a large product image.
Price is on the top horizontal line.
Call to action on the bottom horizontal line.
The consistency of the F-pattern with eye tracking is one reason to consider using a premium designed template for your eCommerce website. This is one of a number of known factors in creating an eCommerce website that provides a strong user experience and converts well.
By placing important content that funnels towards conversions where eyes tend to track, you know this content will be seen.
There is no reason to start from the ground-up, designing a completely custom website, when what works is established. Rather, what you want to do is take known conversion elements then make them your own with your store content and products.