Demystifying Viewing Patterns

Lately I’ve been intrigued by something called the ‘viewing pattern’ of people. This is a pattern in which people view, in this case, websites. There are really a lot of ideas about this out there. Now I’m wondering: is there one right pattern? In other words: is there one pattern we should follow when designing our product and landing pages?

Before I fully dive into the subject, let me say I’m aware that these kinds of patterns are subject to culture and education. Most probably the patterns are also vastly different for languages that are read from right to left. And of course, it could be that it’s different for men and women as well.

Viewing patterns

As I said, there are numerous patterns patterns out there. I will go into what I think are the most important ones here.

The F-pattern

As the name already infers, the F-pattern suggests that people’s viewing pattern is similar to the shape of an F:

Image source: www.nngroup.com

Users will view the top content of a page horizontally first. After this their view will go down the page, and they’ll view another part horizontally. However, this area of horizontal viewing will usually be smaller than the top viewing area. Users will end up just ‘scanning’ the left side of the page’s content (best shown in the middle screenshot).

The Gutenberg Diagram

The Gutenberg Diagram suggests that people are subject to a ‘reading gravity’ that goes directly from the top left of a page to the bottom right:

Image source: www.vanseodesign.com

Users will start at the top left of a page, and end at the bottom right of a page. However, they don’t do this by viewing everything: the Gutenberg Diagram suggests that users go there in a straight line. And to make things more complicated, the ‘Axis of Orientation’ is from left to right, making the top right area more likely to be noticed, and thus Strong, than the bottom left.

The Z-pattern

Like the F-pattern, the name of the Z-pattern already gives away its meaning. It suggests that people view a website’s content in the shape of a Z. The pattern is also known as the inverted S-pattern:

Image source: www.vanseodesign.com

This viewing pattern is already close to a more engaged reading path. People viewing a website like this will see every part of the website. The start and the end points are the same as in the Gutenberg Diagram, but the top right and bottom left will not be disregarded as easily.

Other viewing patterns

There are several others, but for the sake of keeping this post readable, I’ll only mention them. They all have great similarities with one of the patterns explained above.

There’s the Golden Triangle Pattern, which is very similar to the F-pattern. And there’s the Zig Zag Pattern, which is basically just a lot of Z-patterns underneath each other. This is usually a viewing pattern for the most engaged form of reading: people searching for something specific.

Structure and hierarchy

As I said, there are a lot of patterns and a lot of ideas of how people are viewing websites. But what can we learn from all of them?

I’m inclined to believe that people’s viewing is dictated by the structure and hierarchy of the page they’re viewing, as well as personal preference. Pan et al. (2004) concluded the same in their research, saying:

“The present research confirmed previous work in that individual characteristics of the viewer as well as the stimuli both contribute to viewers’ eye movement behavior.”

So viewing patterns could mean something when people would be viewing a website with a lack of hierarchy, but as soon as you add focus and hierarchy to your website, people will start following that hierarchy. Djamasbi, Siegel & Tullis (2011), Granka, Hembrooke & Gay (2006) and Habuchi, Takeuchi & Kitajima (2006) all concluded similar findings.

What I mean by ‘structure’ is made clear by all the ‘viewing heatmaps’ I’ve seen regarding the F-pattern. A lot of these studies have focused on search result pages, which are already content heavy on the left side. So people will obviously view the left side of those pages more. However, if you add a ‘heavy’ or large object, whether textual or visual, to the right side, people’s viewing will almost certainly be drawn to that. So, how you’ve structured the design of your page will direct how people view your page.

Similarities

I’ve not even mentioned the fact that all these patterns are, in their basis, very similar. So similar, in fact, that UX Movement reviewed the Gutenberg Diagram, while showing a viewing direction which is clearly a Z-pattern.

The patterns have all been given their own name, but you can’t hide the fact that all of them start in the top left. And from the top left they move to the right. This is either the top right or bottom right. We shouldn’t need research to know that, because most people in the western world read from left to right.

So, now what?

My advice to you is to bring a clear structure to your pages, with a clear hierarchy. Don’t be distracted too much by viewing patterns, and definitely do not read too much into them.

The best way to go is probably to have some people, who are representative to your website’s visitors, work their way around your website. This will give you far more insight than patterns and/or studies like the ones mentioned above.

Eyetracking

Having said that, we are still intrigued by these eyetracking studies, even though we’re not big fans of viewing patterns. Other areas in eyetracking are very interesting to pursue. So much in fact, that we’re planning to buy some eyetrackers ourselves and doing an independent study.

What’s your view on these things? Let us know in the comments!

This post first appeared on Yoast. Whoopity Doo!