Eye tracking research has helped web designers to understand how people view a web page. Researchers are able to track where on a web page a viewer is focusing, and the results are usually combined to produce a heat map like the one below. The heat map allows us to clearly see what grabs the reader’s attention, and what does not.  A key finding is how people’s reading behaviour is different when it comes to the internet. Viewers are more likely to scan a website in a classic F-Shaped pattern, than read its contents in-depth.

How Eye Tracking Research has Informed Website Design

People Like Pictures of People, Sometimes

People like looking at picture of people, but only if they are real people in a meaningful context. Stock photography or feel good images are generally ignored. For example a good use would be a picture of yourself on your about page. This will help you build trust with your visitors can help to increase your conversion rate.

Put the Most Important Information Above the Fold

Above the fold refers to area of the screen that is visible to the viewer without scrolling down. Several studies have looked at scrolling habits. The results do differ, but between 24% and 77% of visitors don’t bother to scroll down the page, and only 22% scroll all the way to the bottom (See the Wikipedia article).  You should save this area for your most important content. However, it may be best to avoid a hard sell. Neil Patel ran an A/B test on his own website and found a 21% decrease in conversion rate when the call to action was placed above the fold.

Put Calls to Action at the Bottom of the Page

The best place for your call to action is at the bottom of the page. When people do choose to scroll down the page it’s often straight to the bottom. The bottom of the page is the second most viewed section and the perfect location for a well crafted call to action.

Place Important Elements on the Left Side of the Page

People will tend to follow the natural reading pattern of their language. Most languages are written left to right so it’s perhaps no surprise that people also tend to look left first when browsing a webpage.

Use Plenty of White Space

White space in design is not just about aesthetics, it makes blocks of text feel lighter and less intimidating. Eye tracking research has shown how well spaced text encourages more focused eye movements and more in-depth reading of the text.

Break Up Your Information into Smaller Chunks

Try breaking your text up into smaller bit sized chunks. People can’t easily absorb large blocks of text, but if your content is divided intelligently into small meaningful block it’s easily digested.

Use Big Bold Headlines to Grab the Reader’s Attention

If you want your viewers to read your headlines you need to make them big and bold. Several studies have shown that the more visually dominant the headline is the more likely people are to read it. However, if the headline font is much larger that the standard copy font, you may find viewers skimming the headlines and ignoring the main text.

Don’t bother with Banner Ads

Eye tracking studies have shown that banner ads are ignored. A phenomenon called ‘banner blindness‘ was a hot topic in the late 1990s. Essentially people have learnt to ignore banner adverts on websites, or more specifically anything that looks like an advert.


Website Design Insights from Eye Tracking Research

This infographic was created by Single Gain and Crazy Egg.