How People View Websites

To create the right visual hierarchy, you need to understand how our eyes process information.

Top left corner gets the attention first

When users land on your site, their eye path starts from the upper left corner and moves on from there. According to this eye-tracking study by Eyequant, these areas get the most attention:

Check your site and see what you have in these zones. Move the value proposition to the top left zone. Yes, there can be exceptions, but use this as a starting point and test from there.

Are you familiar with the Gutenberg diagram? It describes a general pattern the eyes move through when looking at (usually text-heavy) content. It fits this zoning conclusion pretty well, with the exception of the bottom right area.

Image credit

The fourth, bottom right terminal area is where you should place your call-to-action. Note that this is not some universal truth, but a good starting point.

People read in F-patterns

Most people don’t read, they scan. Eye-tracking visualizations show that users often read website content in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

This heat-map image shows where visitors look first. This is why you want your value proposition in the top and why your menu should be either top horizontal or on the left, vertical.

Image Credit

Use visibly bigger introductory paragraphs for improved attention

Make introductory paragraphs in boldface or larger font size. Keep the paragraph line lengths short and in a single column – that’s how people are used to reading text.

People do scroll, but put the most important content above the fold

Web users know how to scroll look below the fold, but not nearly as much as they look above the fold. Make sure the above the fold part contains your value proposition, but don’t try to squeeze everything in there.

Scrolling is still better than slicing up lengthy content to several pages – it provides better usability. Just make sure you guide people to scroll down.

Dominant headlines draw the eye

Big headlines most often draw the eye first upon entering the page.

Present a whole value proposition with the headline. Keep in mind that clarity trumps persuasion.

When you list a bunch of headlines on a page, most often it’s the left sides of the headlines that get the attention. People typically scan down a list of headlines, and often don’t view entire headlines. If the first words engage them, they seem likely to read on.

On average, a headline has less than a second of a site visitor’s attention. This means that the first couple of words of the headline need to be real attention-grabbers if you want to draw attention.