{Carrer web log}

Blog about web design & development

F pattern or just simple triangle

Tuesday, March 03, 2009 { 11 Comments }

Couple weeks ago I read in Google Blog about their eye tracking research.

Jacob Nielsen called this pattern F – Shaped Pattern because it look like the letter F.

I was often wondering what is so special about the letter F. Probably Nothing. Because the shape is more like to be the triangle not the letter F.

Triangle is one of the most common shapes in nature, it will be more logical if we form same triangle pattern not to mention when we focus we always make triangle with our eyes and the focus point.

Ok, this "triangle" assumption is not based on some research study is just my observation.

I think if we need to make more serious research study on how we actually read on web we need to cover various parameters.

Then little psychology. What are we searching, what are our interests …

When you enter in some newspaper site what first do you look?

I think if you are football fan you will look for football sport results, if you like Obama you will search first for Obama.
Ok, big bold typeface may trick you for an instant but you will go and search for the things you actually care. And in this case we can’t have default reading pattern for all the users.

I started with the Google example. Lets analyze Google results.

First thing to do searching for something completely new. We shouldn’t have any knowledge about the topic otherwise we will select the things that we know. We need something like Turritopsis nutricula . Did you click on the Wikipedia site first? I did. We probably should eliminate all authority sites from the search result.

Let’s try with Saccharomyces cerevisiae. This is just the Latin name for ....
I actually scanned from top to bottom and I didn’t click anything. I think this is perfect way to get near to the possible default reading pattern. If is any.

What do you think?

11 Responses to “F pattern or just simple triangle”

  1. // Blogger Michele // 3/03/2009

    Interesting post!  

  2. // Anonymous Anonymous // 3/03/2009

    Interesting point of view. Thanks!  

  3. // Anonymous Anonymous // 3/03/2009

    Funny how you treat Nielsen's study result partially to suit your idea. Indeed it seems that your triangle idea fits on SERP. Does it fit as well on Corporate and e-commerce ?  

  4. // Blogger Vladimir // 3/04/2009

    @Anonymous: I think it fits well on every bigger block of text.  

  5. // Anonymous Anonymous // 3/09/2009

    F pattern...hmm I wonder if the "F" has anything to do with the fact that we read from left to right, top to bottom...imagine that--it resembles a Letter "F" Nothing new with that information, to be honest with you, that all hearkens back to your basic principles of information design.  

  6. // Blogger Vladimir // 3/09/2009

    @AnonymousII: I think they are many factors influencing our reading process. Like you mentioned left to right or right to left(Arabic) or top to bottom(Chinese). Then what are our interest or passion. And many other small things. But I was in the search of our default reading pattern (if any). How we scan the text? Do we divide the page in small triangles or circles? ..  

  7. // Anonymous Anonymous // 3/10/2009

    Vlad: I agree, there are many cultural influences to the way in which we scan text. I was speaking from a "western" perspective with the horizontal and vertical references I made (l->r t->b). Another thing to consider with this, which may very well be the most influential is how we have been "trained" by Google search results--having learned what is pertinent information in those results. I agree with anon1 in that this pattern may fit with Corp or Ecom, but not necessarily in the same manner--especially if it is a site that we are "new" to or are actually interested in. Think of the way you scan a search page vs. a photo album. very different--different visual cues will influence our approach to the site.  

  8. // Anonymous Ian // 4/28/2009

    Interesting article!

    Some research to back up your triangle hypothesis: gaze behaviour on a Google search results page has been studied quite extensively. You point out that the heatmaps show a triangle - this gaze behaviour was originally dubbed the "Google Golden Triangle" (see Enquiro's Google Eye Tracking whitepapers) and the "F-pattern" has arisen as a way to further break that triangle down. It hints at the fact that the triangle is not just a solid wash of gaze fixations, but rather that there are prominent lines of gaze behaviour that follow certain parts of the text.

    There are absolutely cultural differences - see the Enquiro whitepaper about Chinese Search Engine Engagement. In a comparison of Google China and Baidu, we found that Chinese searches tend to read every piece of information available on the page. This is remarkably different from the North American approach of a quick scan of the first few links and then selection.

    It's important to note that this Golden Triangle is the typical behaviour of a North American searcher using Google. However, that's because Google has done a great job of making sure that highly relevant results are served up near the top of the page, and in doing so has conditioned us to look at the page this way. If you look at heatmaps from searchers using MSN or Yahoo, the gaze behaviour is different, mainly because of the perceived relevancy of the results that are presented and the user experience.

    From a visual saliency standpoint (that is, things on the page standing out and capturing our attention), the Google search results page doesn't really change much, so we revert to our learned behaviour and scan it in much the same way every time we go there. There are always exceptions, as you point out with your example.

    Another interesting thing to look is how the introduction of universal search has affected gaze behaviour. Now that Google (and others) incorporates images, videos, etc. into their search results, the Golden Triangle is starting to disappear. These other items tend to act as "barriers" and either fence fixations in or route them to different areass.  

  9. // Blogger Vladimir // 4/30/2009

    @Ian: Thank you for dropping by, I'm very happy to see that we all came to the same conclusion it's not F it is triangle.
    I tryed to go one step further that the triangle is maybe our default reading pattern but probably I was wrong.

    I was wondering how our brain process various forms and shapes, when we are born how can we distinguish various object, we must some genetic knowledge.

    I find some interesting stuff about Gestalt psychology, but I have many many open questions.

    My guess is we all start with simple forms and we multiply and construct more complex forms something like fractals.

    The triangle is very simple object, it is the first object that can be built with 3 lines (with 2 lines we can't built any form), not to mention is one of most strongest constructs in architecture also is perfect for fractalization.  

  10. // Anonymous Ian // 5/02/2009

    I think our default reading pattern would depend on the context and the content. If you're reading a book and don't want to miss any of the story, you're most likely reading a complete rectangle... but so much of what we do on the web involves skimming the content with the intent of finding relevant information as quickly as possible - hence, the triangle.

    It's interesting that you bring up "being born with" knowledge of form and shape. The human visual system is tuned to identify edges, corners, sharp changes in contrast, and so on, so there is definitely something that. Beyond that, there's some pretty definitive research showing that infants very quickly learn to look at their mother's eyes and mouth, so it seems like there is some innate knowledge of what we're looking for.

    The way shapes are identified in our brains is by combining all of the little pieces together into a bigger object. So if you see a square (to take a simple example), your brain initially (and almost instantaneously )identifies four corners and four edges and then goes through a somewhat slower process of combining those edges and corners into one object.

    I'm not sure that the Golden Triangle and shape processing are necessarily related - if you look at a Google search results page, the information isn't arranged in a triangle, so it's unlikely that our brains say "oh, a triangle!" and control our gaze accordingly. I think in this case it's much more a result of our desire to get to what we want to find quickly.  

  11. // Blogger Pepito // 6/09/2009

    If we want to aid people in reading, we just have to emphasize hierarchy through typographic color. I don't quite see yet the importance of such patterns when compared with proper hierarchies.

    Example: http://typesites.com/typographica/  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License