Eye Tracking Patterns: What the Human Eye Sees First on a Website

Take a look at a few websites you look at often. What is it that catches your eye first? Most designers, marketers, and publishers look at their websites as a finished product, carefully examining every aspect. But to get a clearer picture of the user experience, it is worth focusing on the behavior of a casual browser. 

Most people don’t take the time to read every word of copy on a website - they scan. And they scan in predictable patterns - some aspects are absorbed, others have forgotten or ignored. Studies into eye-tracking patterns have shown a few ways that the majority of people consume content online, and this information is vitally important for designers to take into account, to make sure the message the site wishes to convey comes across clearly and concisely. 

So, what are the most usual reading patterns on the web? Let’s take a closer look.

Top left

When a person lands on a web page, the first place the eye is naturally drawn to is the top left corner. As this is the start of the eye path, it receives the most attention, and therefore naturally determines the type of content that should be displayed there. 

Studies show that the value proposition of a website - namely the product or service the site is offering and why the customer should be interested - is best placed in the top left-hand corner. If your main source of revenue is advertising, the top left, or the top in general will get the most eye time. 

Eye-tracking patterns

We mentioned that the majority of internet users scan, rather than read the copy on a website. This means that getting the site’s message across requires containing the message within a set pattern of scanning. There are several types of patterns, but the most common are F-pattern, Layer cake pattern, and Spotted pattern, and a website is often designed with one in mind.

F pattern

This is the most common scanning pattern. Readers, aiming to quickly get the gist of the information or searching for its meaning will read the first two or three lines of copy. If they don’t find what they are looking for they will scan downwards from the left, moving across the copy slightly to form an F shape. 

A good example of the F pattern is Asiabet - the top of the F on the page is a clear and concise message - Best Pakistan Casinos Online - followed by bullet points which make up the bottom half. Scrolling down just a bit gives the same structure - a heading - Best Online Casinos November 2020 - is followed by a visually appealing and a very clear list of casinos - 22Bet, 1xBet, BetWinner avatars, etc. This doesn’t give the reader the opportunity to get bored without absorbing the basic message of the web page, but the reader is provided with the most important pieces of information from the start, and scrolling down just adds more value.

Layer cake pattern

This pattern is also very common and can be applied to different types of products and services. Users may scan through layers of text, pictures, and information, and will stop when they reach the heading that interests them. This works well for mobile users due to increased levels of scrolling, and can also be incorporated into email templates. Layer cake patterning is also good for displaying different retail items. 

Spotted pattern

The spotted pattern is when viewers quickly scan through paragraphs of text looking for key-words that interest them. Bold words, headings, underlines, lists, bullet points, or different text colors can be used to draw attention to the page’s message. 

Text sizes and fonts

It has been shown that initial introductory paragraphs work better in larger font size - it makes for ease of reading, and tests suggest that almost all viewers read, rather than scan, the copy. Using a unique, over-designed font may be tempting for designers, but in fact, a clear, familiar font is much more effective. The general rule of thumb is this: if the reader notices the font, it doesn’t work. Keep it simple. One nice example is Aiaiai.audio, which has a simple font with a very nice mixture of different font sizes, and with design solutions that make a reader instantly engaged. 

Images

It may seem logical to include pictures of your product or some technical process. It probably isn’t. A large, striking image (in high resolution) showing a person suggestive of a customer is much more effective. According to research, using models is less visually disruptive - and therefore more effective - than using ‘normal’ people. The same research shows that photos of computers, tablets, or smartphones should use exclusively Apple products - they draw more attention than any other brand. 

Eye-tracking is interesting in and of itself, as a study of how the human brain consumes and retains information. But for web designers and marketers it provides invaluable guidance on how best to approach web page layout.