Rule number 1 in building an ecommerce website – Follow the F-pattern. Ok, maybe not rule number 1 (that’s probably pick the right domain name), but this is still extremely important.
What is the F pattern
When a user visits your site, their eyes are naturally drawn in particular directions. They scan your website’s content when a page loads within just a couple of seconds. Even if you have several hundred words above the fold (the visible content on the page without scrolling anywhere) and loads of elements, a visitor has already been drawn to certain elements and decided their next action based on where your content is on the page.
This subconscious eye movement happens in an F-shaped pattern. Broken down into stages, a user scans:
- Firstly horizontally across the upper section website, from left to right. This creates the top bar of our “F” pattern.
- Next, they move down slightly and again from left to right. The lateral movement is typically slightly less than the first stage, creating a shorter second bar to our “F”
- Lastly, the user performs vertical movements to create the “pole” of the F. Relatively to points 1 and 2, this movement is slow and typically the user is scanning the first few words of text to understand what the rest of the content next to those words are about.
The F pattern is most prominent on ecommerce websites (and therefore a pattern we keep in mind when building websites or optimising existing sites). On text heavy pages, for example an About Us page, the F is still obvious, but a slightly different overall shape.
This heatmap shows how a user scans a website – Red depicts where their eyes spent the most time, grey being where they haven’t looked at all.
On the left is an About us page. It’s text heavy with no clear definition. The important bit to note here is that what look like call to actions at the very left and very right of this page, the user hasn’t paid any attention.
The middle image is an ecommerce website. This shows the clearest F, although the middle bar is slightly lower than usual due to the image bumping the text down a bit. What’s most interesting here is the tall menu on the very left being looked at towards the bottom, alongside the middle bar to the F.
The last one is Google’s search results. The F is less clear, but still highlights the consistency of eye movement here.
What does the F pattern mean for your content
To highlight what the heatmap tells us:
- Users won’t read all your text
- The positioning of key information is crucial
- Users could completely miss what you may feel are important elements because of bad positioning or overcrowding
How you combat this is easy once you understand the above.
- On text pages, keep the text short and structured. Long paragraphs of text won’t be read. Use important or identifying words at the start of paragraphs. Use bullet points and headings to grab attention.
- Keep the most important text at the top-middle of your page. A vertical menu on the left can be ok if it’s in the same position on all pages, as a user knows it’s there but won’t be distracted with it, although we wouldn’t recommend having one at all based on this F pattern.
- Structure your ecommerce page in a way that it shows the main features (Title, Price, Image, Short Description and Buy Button) within the F shape. Smaller details like dimensions, colour variants, weights etc can be put elsewhere on the page.
- Make sure the important information is above the fold. You don’t want your buy button and product images way down the page.
Psychology is the driving factor behind making any website work and it’s definitely our favourite area to understand and love. The server you put your site on, how you code the site, or similar questions aren’t going to change your world. Understanding where you position your content because of a user’s psychology, or even the colour of your content for the same reason, will change your world.
If you think about it, almost everything you do with or on your website is driven by what you think your visitors what to see and read. Get into their mindset and adopt the F pattern, and you’ll notice the difference.