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!

Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

26 Responses

  1. Edo DijkgraafBy Edo Dijkgraaf on 3 December, 2013

    Perhaps I overlooked it following my pattern, but I think you keep one thing out of sight. What’s the influence of habit?

    Many websites have been published according to the so called webconventions. The F-pattern is leading for the webconventions.

    • Thijs de ValkBy Thijs de Valk on 3 December, 2013

      Well, I didn’t call it habit, but I did call it personal preference ;)

  2. Nils van der KnaapBy Nils van der Knaap on 3 December, 2013

    I think it is possible to make your own pattern. Make use of elements that really stand out, like one big distinguished Call to Action. Use visuals like arrows, pictures of people looking at something, and the attention of the visitor is drawn to that spot.

    People use patterns, because they cannot easily find what they are looking for (the answer to their questions), so make it very easy :)

    • Thijs de ValkBy Thijs de Valk on 3 December, 2013

      I’d argue that it isn’t a “pattern” at all if everyone can ‘make one’ :)

      • Nils van der KnaapBy Nils van der Knaap on 3 December, 2013

        Hmm, you are right, Thijs. Then it’s not a pattern. What I meant to say was: Don’t focus on patterns, but make use of the right way to present the most import parts of your website. Every website has a different purpose.

        • Thijs de ValkBy Thijs de Valk on 3 December, 2013

          We’re in agreement there then! Focus on what you think is important.

  3. Barry HuizengaBy Barry Huizenga on 3 December, 2013

    It comes down to how a website/webpage logically and compellingly tells the ‘story’ of the service or the product. A solid, logical and pleasant user experience achieved by good design will make all the difference in whether a visitor converts or not.

  4. Erik HooijerBy Erik Hooijer on 3 December, 2013

    Would love to participate in those eyetracking studies, whenever you’re holding them.

  5. OmarBy Omar on 3 December, 2013

    @thijs, did you look at any research that studies possible links between viewing patterns and website conversion? I reckon that’s the kind of thing you would be interested in :-)

    • Thijs de ValkBy Thijs de Valk on 3 December, 2013

      Well this would be interesting, if I believed in viewing patterns ;-)

      But indeed, I’m hoping to get some nice conclusions in our research that we can use for conversion rate optimization.

      In a way, calls-to-action, among others, are already a way to ‘manipulate’ a visitor’s viewing.

      • Barry HuizengaBy Barry Huizenga on 4 December, 2013

        What do you mean when you say you don’t believe in them? If you put a site through an eye scan test to determine where the user’s focus lies when viewing a page, wouldn’t you take that into consideration when giving optimization advice?

        • Thijs de ValkBy Thijs de Valk on 4 December, 2013

          You’re implying that everyone views every page the same way. That’s what I don’t believe ;) There’s simply too many factors that could be influencing people’s viewing.

          Sure, you can test every page of your website using eyetrackers, but that’s not realistic, obviously…

        • Thijs de ValkBy Thijs de Valk on 4 December, 2013

          So I will give advice on things that I know will draw (visual) attention from people, but I can’t tell you what structure to use for your design… It’s just not that general, unfortunately.

  6. Haseeb Ahmad AyaziBy Haseeb Ahmad Ayazi on 3 December, 2013

    Patterns in Analytics is a very Good innovation. Crazyegg is gibing this, Google analytics should also provide this…..

  7. Mike ThompsonBy Mike Thompson on 4 December, 2013

    I find the patterns useful for planning ‘scanning content’, those parts of articles which are worth highlighting with bold or italics but they’re really useful for planning adverts. On client websites I can work out where to place the most valuable adverts or affiliate links to get seen and hopefully clicked. So as always, great content first then build interstitial material around it according to the pattern which will get it noticed. Another alternative is deliberately breaking the patterns to try and force ad views but personally I prefer to build relevant ads around useful content for a better user experience.

    • Thijs de ValkBy Thijs de Valk on 4 December, 2013

      So you’re using viewing patterns to design your website? But how do you know how the visitors of your website view its content?
      I’m thinking it’s more about adding focus and hierarchy than it is about following a specific viewing pattern…

  8. MatthijsBy Matthijs on 4 December, 2013

    Agree with Thijs in this. These so-called viewing patterns (the F-shape) are just the consequence of the way most pages are designed (bigger headline, some text, a few sub headers). No reason you (as the designer) are -required- to design a page in a specific way, matching such a pattern. If there’s a good reason to design the visual hierarchy a different way, people watching your page will also view it with a different pattern.

  9. Steven BradleyBy Steven Bradley on 5 December, 2013

    Yoast, I discovered during the research for my post that all these patterns describe where the eye will look in the absence of design. These patterns are meant for text heavy pages without images. Once you start designing a page to have hierarchy and you give cues where the eyes should look next, etc., these patterns go out the window.

    You can take advantage of the patterns by placing important information in the areas where people naturally look, but your design will control where the eye flows and not these patterns.

    • Thijs de ValkBy Thijs de Valk on 5 December, 2013

      My point exactly :)

    • JosephBy Joseph on 2 January, 2014

      Nice summation. My opinion is that well placed content will always win out over “patterns”. Sometimes the best websites I have seen do not follow the recommended patterns based on data but instead offer a rich experience.

  10. Patricia SarsfieldBy Patricia Sarsfield on 11 December, 2013

    Hi guys,

    Interesting stuff. I don’t buy into the F-pattern (or any pattern really) for 2 reasons.

    1. Your site design will dictate where the reader’s eyes will go.
    I’ll take this to the extreme, just for illustration purposes. Right- picture a blank landing page. Now this time, picture an almost blank landing page– except now there is a small picture in the top right corner.

    I don’t think we need in-depth studies to determine where the visitors eyes will go in that example.

    Yes, I guess I’m saying that I would not put too much faith in the patterns, and more faith in the arrangement of your page and the techniques (some mentioned already in other posts here) in order to get the visitor to look where you want them to.

    2. I don’t believe we need to know at an in-depth level whether our visitor reads from left-to-right, or back-to-front or bottom-to-top, or whatever the case may be.

    I say that because depending on what your site is about, the visitor (regardless of education, culture, background, sex etc.) will act in a contextual way. By that I mean that if you’re truly interested in something and you’re reading about it with a desire or drive, then you will read most everything; if it’s something that needs lots of words to explain it.
    If however you are on a page just to get a ‘quick fix’ of information, then no amount of well-constructed text or knowledge of patterns will benefit you. You just need to make your piece ‘jump out of the page’ at you.

    I would illustrate that by picturing a page full of ads. Now picture a page full of ads this time with a small blank circle in the middle. That will grab your attention because the lack of images and text there is actually it’s uniqueness amongst the other content.

  11. Stijn VogelsBy Stijn Vogels on 13 December, 2013

    The company I currently work for did an eyetracking study to find out how first users responded to an interactive demo of new website. Having read a lot about UX throughout the years, I wasn’t surprised to see some the results.

    * Blocktext follows F for the first couple of lines.
    * Images with faces attract your gaze, but your mouse doesn’t move over them.
    * Clear clickeable buttons are noticed and the mouse moves in their direction, even if they eye is still reading something else.

    I think a lot of this has to do with how people have learned to respond to popups in the Microsoft Windows interface: read text > notice descriptive icon/image > click button.

    • PatriciaBy Patricia on 13 December, 2013

      good point. What has become clearer to me from your post, is that the eye tracking and mouse/cursor tracking should not be studied as separate items.

      The combination of eye and mouse gives the most useful information. After all, it’s more important to understand why or why not a user will click where you want them to click.

  12. AngelinaBy Angelina on 22 December, 2013

    stunning article..incredible points…thankss…!!

  13. Robert ReedBy Robert Reed on 28 December, 2013

    I first read about this sort of F pattern in Peep Laja’s book. First, I was skeptic a bit, but I gave a try for it. I changed the site structure and it has helped to get more subscribers and clicks on ads. The increase is approx. 10-15%.

  14. wap giai triBy wap giai tri on 29 December, 2013

    Agree with Thijs in this. These so-called viewing patterns (the F-shape) are just the consequence of the way most pages are designed (bigger headline, some text, a few sub headers). No reason you (as the designer) are -required- to design a page in a specific way, matching such a pattern.