OpenClose

Popular

google analytics social media channels

HOW-TO: Tag Social Media Links for Google Analytics

facebook-home-page

10 Reasons Facebook Isn’t Working for Your Company

social media key performance indicators kpis

48 Social Media KPIs (Key Performance Indicators)

top 10

Top 10 Social Media Marketing Mistakes That You Shouldn’t Make

84

15 Must-Know Facts on How People View Websites

Do you know what is the first thing that your eye is drawn to on a website? And in what pattern do people scan your website? There have been many eyetracking tests on this subject and I’ll give you 15 most useful facts you should know.

The picture below shows 3 different websites and where people look on them. Red indicates the area, where people looked the most, yellow areas got a bit less eye-action, blue areas got the least views and the gray areas, well, people didn’t focus on them at all.

f reading pattern eyetracking1 520x231 15 Must Know Facts on How People View Websites

As you can see, the more people scroll down, the more they lose focus and start mainly scanning your website. So always try to place the most important information in the top part of your website.

Here are the 15 facts you should know on how people view websites.

  1. Text attracts more attention than pictures.
  2. People start viewing your website from the top left corner.
  3. Readers ignore banners. Surprise, suprise.
  4. Fancy fonts are ignored.
  5. People only scan the lower parts of your website.
  6. Short paragraphs work better than long ones.
  7. Ads, that are placed on the top or left part of your website, get the most views.
  8. Ads, that are placed inside or below an awesome piece of content, get more views.
  9. Big pictures attract more attention than small ones.
  10. Also headlines draw attention.
  11. Visitors spend more time looking at menus and buttons than other parts of your website.
  12. Lists are better at keeping your reader focused than large paragraphs.
  13. Some people even completely ignore large chunks of text.
  14. White space is good!
  15. Menu works best when placed on the top part of your website.

There you go. Some points from this list are pretty basic and elementary, but a good reminder never hurts. So the next time when you’re writing an awesome piece of content, or building your new website, keep these points in mind. You now have the knowledge – use it!

Sources:

BBC News | directcreative | GoogleBlog

Posted on: August 11, 2011

Leave a Reply

Your email address will not be published. Required fields are marked *

84 Responses

  1. Mart Prööm August 11, 2011 7:07pm

    Great post, Raul! Seriously.

    Reply

  2. Marc Miller August 15, 2011 4:04pm

    Good article. I am sure many will be surprised that text draws more attention than pictures. I am learning to use lists more frequently.

    I am going to move my share buttons to the top!

    Thanks!

    Reply

    • Ian Smith November 30, 2012 8:08pm

      I agree Marc, I would have always bet that pictures would have had more impact than mere words!

      Reply

  3. Isela Espana August 16, 2011 7:07pm

    Great post! Im curious to know how you were able to track what they were looking at.

    Reply

  4. Gordon August 16, 2011 8:08pm

    Good to see someone who is looking at internet marketing using a more analytical approach instead of urban myth and magic.

    Reply

  5. Priit Kallas August 16, 2011 9:09pm

    Here you can get an overview of eye tracking and its applications http://en.wikipedia.org/wiki/Eye_tracking. Practical web related stuff http://www.useit.com/eyetracking/

    Reply

  6. Tomasz Jablonski August 27, 2011 7:07am

    Eye tracking for the win. Major car companies use the technology to build in accident avoidance systems into their cars.

    Reply

  7. Hank September 26, 2011 2:02pm

    Nice tips. I hate having to go back and move things on the site after finally getting them the way I want them to look, but things like this have to be followed.

    Reply

  8. Ludwina Dautovic September 27, 2011 4:04am

    Great content. Thanks so much. I’ll post it on my facebook biz page. Ciao, Ludwina

    Reply

  9. Nathan Leigh Davis September 27, 2011 10:10am

    Pretty much a case of eye tracking confirming what we already instinctively know! Did we need eye tracking studies to tell us any of this?

    Readers start at the top left corner – well yeah, we do that with any form of media. That’s how we’re taught to read.

    Headlines and large images draw the most attention? Not really a revelation either.

    Also somewhat annoyed by the lack of clarification here too. What are fancy fonts? Do you mean cursive typefaces? Condensed? Expanded? Serif?

    Elementary? No, this is something else. The article is far too short. How do I know what your talking about if you don’t expand on your points or provide any references? Maybe short articles and paragraphs aren’t so good?

    Reply

  10. Chris Tompkins September 29, 2011 11:11pm

    Great post! I think what is really interesting is with all of the changes in technology, website layouts, applications and all the rest – the eyetracking tests have not changed in 10 years! Looks like we will never change how we view the web.

    Reply

  11. Nick Martin September 30, 2011 3:03am

    Great post! Or at least I think it was. Like everyone else apparently, I only got 3/4 of the way through and assumed I got the point ;)

    Reply

  12. Tony Noland October 18, 2011 5:05pm

    I like the analytical approach here. Fonts and graphics aren’t nearly as important as good content.

    Reply

  13. Sheridan Voysey October 18, 2011 5:05pm

    Very helpful indeed. What happened to the ‘top right-hand corner’ theory as the most viewed piece of website real estate?

    Thanks a-plenty.

    Reply

  14. Niek October 20, 2011 1:01pm

    What are your sources? Because if you base these facts solely on the eyetracking images shown in this article, you might be jumping to conclusions.

    I am asking this because two of your facts differ from general best practices. Specifically facts 1 and 5.

    I think that there is a bit more to say about these points.

    Reply

  15. Michelle October 28, 2011 4:04am

    Thanks for the great (and concise) information!

    Reply

  16. Neicole Crepeau November 2, 2011 9:09pm

    Good general post. Of course, these are just general patterns. The particulars of a website can change the F pattern to some extent. How you lay out the site, with what text, fonts, contrast, etc. will draw the eye to different locations.

    The one piece of data that surprises me is the pictures versus text. I’d love to know where this data came from and what kinds of pictures we’re talking about. For example, we know that the human eye is drawn to faces, so pictures of faces generally draw people’s attention. Which kind of pictures were tested here?

    Thanks!

    Reply

    • Priit Kallas November 2, 2011 10:10pm

      Thanks Neicole! I totally agree that in most cases the F pattern doesn’t apply. I would say, only in wide single column text.

      Reply

  17. Chad Tabary November 15, 2011 6:06am

    I wonder how much of that has to do with the way the website is laid out though. I’ve seen heat maps that showed the exact inverse. Well everything top is best, but I’ve seen heavy top right also.

    Reply

  18. Jahangir November 15, 2011 7:07am

    WOW the #1 and #3 and very surprising, it is always said that pictures draw more attention to visitors but the facts you are sharing is making that statement wrong.

    Thanks for the beautiful info.

    Reply

  19. Chandra November 20, 2011 4:04am

    Is this based on any study if yes what is the source. BTW great article would like to see more soon

    Reply

  20. Dan November 26, 2011 6:06am

    Thanks for the insights Raul! I’ve just started researching and going into UX so this info is extremely helpful.

    I’ve included this post in today’s Posthuman newsletter because I thought this would provide a ton of value for my readers who are primarily interested in building great apps for their budding startups (here is a browser version of what went out today http://eepurl.com/hkSAg).

    Keep up the great work!

    Dan

    Reply

  21. Birdy December 7, 2011 1:01pm

    Thanks a lot. It really helps me for my articles!!!

    Reply

  22. How does this affect asian people? December 8, 2011 12:12pm

    Only question is how would this f-shape pattern affect asian people? Reading manga, gotten used to viewing things from right to left.

    Wonder if these facts still apply

    Reply

  23. Al Jareds December 13, 2011 12:12am

    Actually surprised that text commands more attention than pictures. I know it used to be that way, but lately video and photos seem to have more impact than they used to.

    Also as a print designer I must concur:

    WHITE SPACE IS GOOD! Very good….

    Reply

  24. Jaime December 15, 2011 12:12pm

    Fantastic info. I will definitely take note in future design while I market my blogs…thanks much!

    Reply

  25. Cynthia December 16, 2011 2:02am

    I agree with most of the material but I think it all depends on the type of website. What product or services you are marketing. Some require more pictures then text. Seeing is believing they say!

    Reply

  26. Tamara Vuorinen February 4, 2012 8:08pm

    Interesting facts and good to know for the future. I agree with white space is good. It’s hard to read if the background is black or dark.

    Reply

  27. Safwan Rahman February 21, 2012 10:10am

    Great post!, but some points are subjective

    Reply

  28. Jack Martin February 28, 2012 12:12pm

    I dig this. But I think #1 needs clarification. I think eyes might just linger longer on text because it takes much longer to digest than a photo. I still think pictures are still your best attention-grabber for a blog post. Images help readers make sense of the words. They work together.

    Reply

  29. Michelle April 11, 2012 10:10am

    I stubbled across your website today through Linked-in and I am so glad I did! Thanks so much for the fantastic info! Keep it up

    Reply

  30. Geoff April 24, 2012 1:01pm

    ‘TEXT ATTRACTS MORE ATTENTION THAN PICTURES’ is a misleading comment. I understand you are trying to be bold putting this as your opening gambit.
    Really you should reconsider the statement.
    Your tests were likely to involve dull pictures from an image library as opposed to a giant cyborg woman spearing a planet with her ex husband’s torn penis.

    Reply

    • Priit Kallas April 24, 2012 5:05pm

      Geoff. No we don’t. This is based on research not an opinion.

      Reply

  31. Jason Stevens May 9, 2012 8:08am

    Great refresher. I was viewing the analytics of my website this evening and number 2 is definitely the hot zone. Prior to developing your content, one must know who they are targeting and why. With this information you can direct content and media to this consumer (in my case) or customer to increase conversions.

    Any information on bullets? I find myself reading bullets before paragraphs.

    Reply

    • Priit Kallas May 9, 2012 5:05pm

      Jason, I don’t have the links at the moment but Jakob Nielsen says that lists rock when giving bits of information. So do lists.

      Reply

  32. Hank_Scorpio May 10, 2012 4:04pm

    Hilarious that there is a point about banners being ignored, what pops up out of the bottom right corner, a fucking banner.

    Reply

    • Priit Kallas May 10, 2012 4:04pm

      Hank_Scorpio, I would say that it is not a banner. But it is a question of definition.

      Reply

  33. Jim Dougherty May 19, 2012 4:04am

    Great insight Raul – love how it is substantiated by the heat maps. Was surprised by the insight about text being more attractive than photos – thanks for your work!

    Reply

  34. Ranit Rana May 31, 2012 2:02pm

    Great article !! just want to know a few more things:

    1. Which are some of the fonts which grab more eyeballs?

    2. Is there any prefernce for colours?

    Reply

    • marty June 17, 2012 9:09am

      this is good question I was wondering this myself

      Reply

  35. marty June 17, 2012 9:09am

    This totally changed the way I write post .Thanks for sharing

    Reply

  36. Jeff Whittle July 2, 2012 12:12am

    Thanks, Lawton, good stuff to know.

    Reply

  37. top 5 July 16, 2012 2:02am

    Very helpful tips, and i already use it, but my ads ctr is stil <0.20% :)

    Reply

    • Priit Kallas July 16, 2012 5:05pm

      top5, depends where you place your ad. In Adwords we have got CTR more than 45% in some cases.

      Reply

  38. Lenny July 18, 2012 10:10am

    Great post!

    Your second point “People start viewing your website from the top left corner.” is targeted toward the read LtR world, but asian websites are structured differently. Similarly, heat maps in other countries show different patterns. It depends on what purpose your website serves, how you are presenting your content, and what kind of users you have. More than following a strict rule that you will never stray from, its invaluable to understand who your customer is and what they want.

    Reply

  39. Josh July 24, 2012 5:05pm

    wow. reasonable, practical advice that establishes credibility. and I thought SEO was dead

    Reply

  40. Raman August 18, 2012 9:09am

    Point 15: Menu works best when placed on the top part of your website.

    That’s right. But, for blogs with lesser number of categories they even work well without menus. Its just the matter of content we have.

    I do consider these heat map systems. But, when google tracks highly useful info on website then it is the best part which is required for website owners. So, I consider high info content first then other factors.

    Thanks for info. It is actually very useful. Keep it going.

    Reply

  41. Ian Smith August 29, 2012 8:08pm

    Just about to tweet this. Its great when large/detailed subjects are distilled into simple lists like this.

    Reply

  42. Paul Shapiro September 3, 2012 7:07pm

    I think some of these need expounding upon. For example: Text attracts more attention than pictures. The truth is: Headlines attract more attention than pictures.

    Reply

    • Priit Kallas September 4, 2012 7:07pm

      You are correct. Headlines are info rich text. But the other side of this is that people avoid banner-like elements.

      Reply

  43. Jai September 13, 2012 8:08pm

    I like it however Its just the matter of content.

    Reply

  44. pavanesh October 23, 2012 7:07am

    need more inputs to understand visitors more

    Reply

  45. Ann Druce November 5, 2012 8:08pm

    I particularly like the comment that ads near great content get more attention. Of course, ensuring your content is great is the hardest part.

    Great advice, thanks.

    Reply

  46. Al November 23, 2012 12:12am

    Thank you for sharing Great and Helpful information.
    I will definitely keep this in mind.

    Reply

  47. Shiful Alam November 24, 2012 12:12am

    Really a great post, Roul!
    I, myself, see the areas you pointed out. Thanks.

    Reply

  48. Dave – Customer Service Consultant November 24, 2012 4:04am

    Very useful post Raul.

    This is just to prove that you only have first 10 seconds to impress.
    Job interview,Customer Service, Face to face sales and now we have stats that websites fall in the same category of 10 seconds rule.
    Thank you for the post.

    Reply

  49. Ann Druce November 24, 2012 12:12pm

    I see why you have your social media share buttons both top and bottom of your article!

    Reply

  50. Gregory Osborne November 25, 2012 9:09pm

    I’m really glad that you shared this, very informative information…

    Reply

x