Questions? (877) 643-7244
FutureNow Post
Wednesday, Apr. 8, 2009 at 7:10 am

Doesn’t Graphic Design/Layout Affect Scanning Patterns?

By Jeff Sexton
April 8th, 2009

Jakob Nielsen’s new post regarding how to optimize for online visitor’s F-patterned scanning is a must read.  There’s a lot of sound advice there, many of it confirming or aligning with Future Now recommendations.  Stuff like:

But one of the article’s baseline assumptions seemed off to me: do website visitors really follow the F pattern regardless of a page’s graphic design and layout?  What if you’re selling lingerie?  Wouldn’t you expect a different eye-plot than the standard F-pattern; something closer to this:

The whole point of a properly designed page is to direct and guide the visitor’s attention/eyes where you want them to go.  That’s why visual prominence is so important to page layout and why people (rightly) spend money testing it with sophisticated eye tracking equipment in order to get these kind of results:

And for more text-heavy sites and pages, wouldn’t skim- and scan-friendly formatting that makes use of bullets, bolding, and embedded links similarly affect or change the F-pattern described by Nielsen? We know the direction of your model’s eyes can affect how people look at your page.

I’d also imagine that just as buying a new car suddenly helps its automotive twins to “magically” appear all over the road, a strongly scented link can allow the reader to notice and pick it out amidst the rest of the text on the page, despite the fact that it may or may not have been entirely front-loaded to maximize the impact of its first 11 characters.

What do you think?  Do page layout and scent trump (or at least alter) F-pattern scanning?

[Editor's note: the author of this post is now blogging at jeffsextonwrites.com]

Add Your Comments

Comments (119)

  1. Great post. I think the main thing is how different the design/layout of a site is from a typical website (website design/layout that is generally used by many, i.e. left right column structure, size of the banner, the normal location of the menu etc.) I think the F pattern only shows on these typical website, that is to say, on website where their design is not too innovative. For example, the baby model page shown above, it is more like an image, rather than a web page. Taking it to the extreme end, if a web page only shows a baby, it is most unlikely that you will see an F pattern.
    Great example of how a slight change of element has influenced visitors attention!

  2. Of course. Simply put, the F-pattern should be considered descriptive, not prescriptive. Telling web designers that they have to follow it is a lot like telling copywriters that they can’t split infinitives.

  3. Great Post, in my testing, a quick cross scan of the top of the web page is inevitable and probably universal. Once user determines if site may serve their needs by this scan, the behavior is far less predictable. We know that head shots get 90% of views so their captions are key (captions are key everywhere actually) but we do our best to insure that eyes end up on the key Call to Action. We video test this by checking message retention of the call more then eye mapping.

  4. Thanks for the comments, guys.

    Jay, the baby is just an example of eye-tracking principles in general. My guess was that the baby pics were part of a print ad rather than a website. Still, it’s pretty clear from the pictures that visual scanning is largely impacted by pictures, color, layout, etc.

    Todd,

    Isn’t it interesting how little has changed? In his book, Ogilvy repeatedly warns readers that every picture should have a caption because they’re the most read items on the page. The more things change…

    - Jeff

  5. Totally. Pages that conform to the text-heavy lumping that were tested will most likely hold true to the F pattern, but I think at the core of it is that people review the “eyeholds” for context, so the images, the larger type, the beginnings of things. If that engages them, they wander to related, or seemingly related, items on the page.

    That is observation based on all the eye tests I’ve seen — when the only cues are text, beginning (title) and starts of lines. When there are other cues (images, models, badges, arrows) that affects how the eye is lead.

    This holds true in print design as well, and is a staple of layout.

  6. Great post, I am fascinated by this stuff. Although I would argue that great design dictates how the user reads the page.

  7. Jeff, whenever I cite that suggestion about captions I always say: “Aren’t you always disappointed when you look at photo in a magazine, newspaper or book and find no caption? I always am and can’t understand why it is so often ignored still. But then we come across a site that “gets it” and all is good.

  8. Although I generally agree with you, I think one of the things about the F-shaped pattern is that it has become habitual enough to kick in before visitors really process your design/information. So, if you vary wildly from an F-shaped layout, you’ll create some cognitive disruption and possibly processing delays and frustration.

    Of course, that doesn’t mean every site should look the same, and an alternate layout might still perform better, even if it strongly violates the F-shaped pattern. Even then, though, the habit is still affecting people – it’s just a matter of how well your site overcomes it.

    I do think Nielsen had a study on how images and their placement can alter the F-shaped pattern a while back, but unfortunately I can’t seem to find the reference. Clearly, none of these issues are black-and-white – processing something as complex as a website (especially as quickly as we do it) is tricky business.

  9. Great discussion. We’ve also seen that page design can definitely direct the eye and cause a deviation from the standard F-pattern. Interestingly, the screenshot in the original post shows the downside of this: a design that resulted in eyes darting back and forth all over the page. This is a great reminder of the power (both positive and negative) of page design.

  10. What I got from the Nielson article was the F pattern was for list items only – not the page as a whole.

    For instance
    In a List of Links
    What Nielson is saying is that
    Your eye will tend to read
    The first 11 characters – if your
    Interest is continued
    You will read the full “cross-bar”
    If not you will tend to taper
    Into a vertical line
    Like capital letter
    F

    “At this point, users see only the very beginning of the items in a list.”

    Again, thought it was list items mainly (specifically links in a list). I ended up doing it with the lists he had in the article; so, I at least agree. But, I do see how it is unclear if he is referring to the whole page or not. However, is specifically talking about reading – not bouncing around the page dependent on design contrast/size/etc.

  11. ps. In the baby images above – regarding text only – you see the F pattern again. The baby facing the text does lead the viewer back to the text. However, the eye path is horizontally longer at the top than at the bottom = F pattern.

  12. Great comments, Josh,

    I’d have to agree. And Nielsen’s article does provide good reason to frontload your material in a given list item. Page layout and graphics can push the eye towards a piece of copy, but the copy has to hold the attention of the reader with the content packed into the very beginning of it. And the baby pic is an excellent example of that.

    - Jeff

  13. Thanks Jeff – concur on your frontload note.

    I also apologize for the foray of comments. Forgot to mention – people do this with any body copy they are not actively engaged in. Reference the Journalistic principle of the Inverted Pyramid.

    Now we could ask – which came first – people with the F Pattern or the Inverted Pyramid – but, that’s another conversation I think.

  14. I’ve seen the eyetracking patterns of both men and women at the Victoria Secret site. The F pattern doesn’t always hold!

  15. No Susan, you are surely right there! :-) There are lots of ways to alter the scan pattern and that is one of the better ones.

  16. I agree, Todd. And not only is she right, this “mathematical pattern” discussion leads to formulaic design.
    Which, any student of Bernbach and VW will tell you…gets you trumped by creative thinkers every time.

  17. The baby example blew me away – and the discussion has been very valuable too – going to follow the great Ogilvy and check my image captions now…

    I guess the lesson – like all things – is, know the ‘basic’ rules when you start out during your apprenticeship, and then once you get confident enough and start monitoring / getting to really know your audience, *that’s* when you get to start breaking the rules, not before.

  18. [...] just finished writing about the impact of design on visitor eye tracking, I naturally found this to be the best part of the article.  Lost of great stuff on intelligent [...]

  19. The scan pattern is definitely a good reminder for any designer, web designer or art director. Especially true for landing pages in online marketing terms.

    I remember reading about behavioral studies which reveal humans, given to many choices will eventually delay their decision. This is especially true when the user is faced with a new choice or an option that involves even a minimal risk for the user.

    A thing to keep in mind. The interaction has to be motivated or plausible in relation to the layout/copy. Otherwise your ad might turn out to be pretty awkward.

  20. Great resource! I’ve always searched for a site that showed me how a person reads a page. I knew that top attention is on the top-left of the page and follows focusing on the left of the page (usually where a menu is placed) but what about a blank page with its principal content in the center. I think it’s very interesting how people focuses on strong and coloured images, so sometimes it’s better to have a light layout to have people focus on the text.

  21. [...] guru Jakob Nielsen recently wrote about his research about the importance of keywords in your hyperlinks. Jeff Sexton shares how to write more persuasive hyperlinks and calls to action so you don’t [...]

  22. [...] gourou de l’usabilité Jacob Nielsen a partagé récemment le fruit de ses recherches sur les mots clés dans vos liens. Jeff Sexton propose des méthodes pour éditer des liens attractifs qui appellent à [...]

  23. Using this F pattern, I rotated my navigation menu and ads. The navigation menu is on the right, and the ads are on the left where the menu would normally be. CTR is up a bit.

  24. There is a study called ‘Eye Movement Analysis of Text-Based Web Page Layouts’ at http://www.surl.org/usabilitynews/111/eyetracking.asp, which is very interesting.

  25. Just discovered the site! Some very interesting blog posts Jeff.
    Particularly like the images with the eyetracking analysis carried out on them.

    Keep up the good work.

  26. Without a doubt, the design of a site dictates the way a user uses your site. Something new designers overlook completely

  27. [...] How Graphic Design Layouts Affect Scanning Patterns Post a comment or leave a trackback. SHARETHIS.addEntry({ title: "Our F Shape Reading Behavior Online", url: "http://blueprintds.com/2009/07/14/our-f-shape-reading-behavior-online/" }); « What’s the Plan!? A Guide to Effective Website Navigation Leave a Comment! [...]

  28. Most people focus on images, so sometimes it’s better to have a light layout to have people focus on the text.

  29. Lately, most of our projects have been light on the graphics and heavy on the stuff that matters (good readable typography, colors that easily distinguish different types of content, etc) and it does seem that using color and size to distinguish important calls to action will disrupt the traditional F-pattern.

  30. I think what Nielson is pointing out is how readers follow an F shape pattern while reading articles on Web sites not while visiting an e-commerce site. Compare an article like this A Tour Through Microsoft’s West Campus Commons and Amazon.com”.

  31. The nearer to the number one position your business gets, the greater the chances that you will actually convert your visitors to sales.

  32. Dear Search,

    I have to disagree with you. Assuming you mean that the nearer a Website gets to the number one listing for a given search term, that does NOT mean that they have any greater chances of converting a visitor to a sale. It only means they stand a greater chance of converting a search for that key word into a visit to their site. Whether or not the visitor then converts is something that SEO is, at that point, only tangentially related to, at best.

    - Jeff

  33. The theory behind good page design has always been of great relevance to the designer and ultimately benefits the client primarily and the design firm secondary.

    Please take a moment to visit the site of Vorzie Studios and view some of our sample graphics and web design.

  34. [...] above is from an eye-tracking study featured on “Doesn’t Graphic Design/Layout Affect Scanning Patterns?” Notice how in this instance focus on the baby’s face actually deterred the viewer from [...]

  35. I am looking forward to see a “Eyetracking for home business”-tookit.

    That would be great…

  36. This comment: Don’t waste hyperlink words on non-descriptive or generic words. Make links keyword rich and ensure that customers can predict where the link will take them. Plan and link for maximum “scent” Is really important. Upsetting customers by making them search further on your site for what they want is not clever marketing.

  37. [...] Layout, F-Shaped [...]

  38. The technology used is incredible, how to they know where people’s eyes were looking? The results of this are interesting for those that use banner ads

  39. Using this F pattern, I rotated my navigation menu and ads. The navigation menu is on the right, and the ads are on the left where the menu would normally be. CTR is up a bit.

  40. just read the first
    i link your writing

  41. That would be great…

  42. Great post, I am fascinated by this stuff. Although I would argue that great design dictates how the user reads the page.

  43. I always am and can’t understand why it is so often ignored still.

  44. We know that head shots get 90% of views so their captions are key (captions are key everywhere actually) but we do our best to insure that eyes end up on the key Call to Action.

  45. I at least agree. But, I do see how it is unclear if he is referring to the whole page or not.

  46. Great post. Bookmark it.

  47. Great post,
    I am fascinated by this stuff. Although I would argue that great design dictates how the user reads the page.

  48. a baby above is lovely

  49. Interesting subject

  50. That is a new technique I’ve just found.
    It is very good
    Thank you

  51. v. good post
    thanks

  52. Great , Easy changed for better result.

  53. Good idea I will try

  54. Great , Easy changed for better result.

  55. i am looking forward to see a “Eyetracking for home business”-tookit. thank your for your sharing.

  56. just read the first thank you very much

  57. New knowledge has increased either. Will be taken to utilize. If anything new is introduced to a nice write I can learn so much other work to the best of me.

  58. Great , Easy changed for better result.

  59. Great post,just read the first i link your writing

  60. That looks neat. I might haev to use it

  61. Great article. Usability should be considered throughout the entire design process, many people seem to lose sight of that.

  62. Great example, all above picture are meaningful.

  63. Thanks for this great article.

  64. Indeed, very useful information, thank you.

  65. It’s nice to see scientific data on the field.

  66. I’m sure prominent graphic elements will change the scanning pattern.

    What I like to do however is to keep web pages extremely simple. I also tend to avoid column layouts.

    This works well for me.

  67. In hindsight, this stuff should be obvious. thanks.

  68. The nearer to the number one position your business gets!

  69. It’s things like this that amatures can’t even comprehend.

  70. Usability should be considered throughout the entire design process, many people seem to lose sight of that

  71. Great , Easy changed for better result.

  72. It certainly does affect scanning patterns it seems.

  73. The nearer to the number one position your business gets!

  74. Thanks for this great article.

  75. Thanks for this realy great article.

  76. Great article. Usability should be considered throughout the entire design process, many people seem to lose sight of that.

  77. Thanks for this great article.

  78. Great article. Usability should be considered throughout the entire design process, many people seem to lose sight of that.

  79. Thx for good article.

  80. Good job! THANKS! You guys do a great blog, and have some great contents. Keep up the good work.
    best regards,

  81. Hey this is awesome post. I have been suffering this problem for a few days and now I get the solution. Thanks for your psot.

  82. Indeed, very useful information, thank you.

  83. i like this place!

  84. i agree with the guys..

  85. Thanks for the comments, guys.

  86. i like this place!

  87. Yeah, very useful for anchor text. Thanks

  88. very useful article.. thanks..

  89. Good job , i find it.
    Thank you for share.

  90. That is very useful for anchor text. Thanks you very much..

  91. I like the use of the baby image example. We didn’t use eye heat maps at the time, but even in high school yearbook class, it was standard practice to have an image visually “point” towards your headline or page text.

  92. A bit comprecated.

    Thankyou for sharing

  93. very informative

    Thanks for sharing.

  94. t’s great to read such a well written post.

  95. Many try to manipulate layouts for SEO purposes. Recently I noticed more benefits of having righ hand side navigation, so the content can be read first.

  96. Thank seo

  97. Good job! THANKS! You guys do a great website, and have some great contents. Keep up the good work.

  98. I think the F pattern only shows on these typical website, that is to say, on website where their design is not too innovative

  99. Very very attractive collection.one thing which attract me and press me to write
    some good words for you is the visibility of all icons (the quality).really a
    very very nice efforts here.

  100. Thank You. Nice Content.

  101. Thanks for this great article.
    Battlefield Heroes

    Reguard You.

  102. [...] [...]

  103. very informative.

    Thank for Share.

  104. I think the F pattern only shows on these typical website, that is to say, on website where their design is not too innovative

  105. Many try to manipulate layouts for SEO purposes. Recently I noticed more benefits of having righ hand side navigation, so the content can be read first.

  106. Sales software lets the cashier imput the information of a product into a computer and from there on the program will do its own configuring.

  107. Colors also have an impact on where the eye goes first.

  108. I want to express my admiration of your writing skill and ability to make
    reader to read the while thing to the end. I would like to read more of
    your blogs and to share my thoughts with you. I will be your frequent visitor, that’s for sure.

  109. I noticed more benefits of having righ hand side navigation.. Thank you.

  110. Greeting !! Thanks for your post. A great article that I search today.

  111. I read your post . it was amazing.Your thought process is wonderful.
    The way you tell about things is awesome. i always wait for your posts.
    They are inspiring and helpful.Thanks for sharing your information and stories.

  112. People always look for this type of good information.
    I hope that it will helpful for needy people.I am apreciating it very much!
    Looking forward to another great article. Good luck to the author! all the best!

  113. Though I would’ve loved it much more if you added a relevant video or at least pictures
    to back up the explanation, I still thought that your write-up quite helpful.
    It’s usually hard to make a complicated matter seem very easy.
    I enjoy your weblog and will sign up to your feed so I will not miss anything. Fantastic content.

  114. I was once involved in a user testing where they actually have some kind of camera that was able to track movement of the eye and plot the heat map on the screen shot in question. That sort of technology should be able to add empirical data.

  115. Thanks for sharing your information and stories.

  116. The page layout, particularly when images are prominent, definitely throws the F pattern out the window.

  117. I noticed more benefits of having righ hand side navigation.. Thank you.

Add Your Comments

 

Print this Article
Share

Jeff is a Persuasion Architect, Web copywriter, blogger, and instructor of FutureNow's Persuasive Online Copywriting workshop. Follow Jeff Sexton on twitter

More articles from Jeff Sexton

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: