The Eyes Have It

The Eyes Have It
Heather Rubesch - Thu May 07, 2009 @ 12:01AM
Comments: 14

eye scanI am a bit of a science geek at heart.  My two majors as an undergrad say it all.  I have degrees in both Public Health and Marketing.  I am absolutely fascinated by what ads and information prompt people to make the health decisions they make.  I spent the early part of my career trying to promote healthier behavior through promotional programs.

So when I ran across this study showing how scientists are using eye tracking technology to evaluate web news pages, I was fascinated.  They tracked eye movements of subjects who were shown mock new websites and evaluated the trends.  This study is somewhat limited in scope as it is only news sites but this type of data can provide clues to common site viewing behavior.  I highly recommend you read the whole study.  But I am going to take the time to summarize the high points and offer my own insights here.

#1 Readers tend to move left to right across the page

This probably seems like kind of a no brainer.  We were all taught starting in pre-school that words move left to right but in the test pages they put some pretty exciting multimedia and such on the right and still that failed to draw subjects eyes from the upper left at least to start with.  Here is the picture of the basic flow most people followed.

eye chart

#2 If you want people to read your content and not just scan use smaller type

Headlines got scanned where as short paragraphs in smaller type got read.  As a writer of white papers and case studies I preach to clients the value of short paragraphs and lots of white space.  The same found to be true in this study.  A big glob of small text is hard to read.  The Eyetrack researchers found short paragraphs got twice as much viewing time.

#3 If you have to scroll to view it then you most likely won’t

Make the most of your “above the fold” real estate.  Only those who are truly interested in your content are going to bother to scroll.  This is also a good place to mention that super large header graphics are a waste of precious space.  I am sure you are proud of that logo you had professional designed but you might want to skinny it up or create a sidebar version to stick on the right “wasteland” side of your page.

#4 Text has better recall for facts and data but graphics are better for new or unfamiliar concepts

So if the product or concept you are promoting is likely to be new or unfamiliar then you might want to spend the money on some fancy graphics or a flash multimedia animation but otherwise text will do just fine.

When I think of a practical application of this I think of US Air flight 1549.  We all saw the still shots of that plane floating in the Hudson River and couldn’t imagine how the pilot managed to ditch it just perfectly to keep it afloat long enough for all 150 passengers to get out safely.  I remember shortly after the crash seeing a computer generated recreation of the crash with the cockpit voice recorder footage synced up so that you could hear what was occurring while watching the animated plane physically weave and ditch in the animation.  It was a perfect example of how a new or unfamiliar concept was made remarkably clearer to the novice viewer where text was simply not going to illustrate the situation nearly as well.

What does this mean to B2B marketers?

 We all need to be aware of the human behavior aspects of eye tracking when designing our product sites.  Reinforce and provide information in a way that is most easily digested and understood by your audience.  An elegant looking site with lots of fancy graphics and colorful header might win you an art contest but if the goal is effectively communicating your product to your reader then simple and uncluttered is likely best.

If you want more information about creating web pages that hold your reader check out these previous Savvy posts:

Comments: 14

Comments

1. Gail Nelson  |  my website   |   Thu May 07, 2009 @ 04:51AM

Thanks, Heather. Useful post, especially the section on when to use text vs. when to use graphics.

2. Emily Sheetz  |  my website   |   Thu May 07, 2009 @ 05:07AM

Awesome post! I will pocket this info for when I'm writing website content. Thanks a lot!

3. Audrey Shaffer  |  my website   |   Thu May 07, 2009 @ 06:40AM

Thanks! The "use smaller type" was news to me. I'll give that one a shot.

4. Heather Rubesch  |  my website   |   Fri May 08, 2009 @ 07:53AM

Gail, Emily & Audrey,
I'm so glad you found the information and suggestions helpful! Thanks for stopping by.

Best,
Heather

5. Franklin   |   Sun Aug 17, 2014 @ 11:33PM

Really great Blog, Great Articles thanks for sharing , i am always using http://couponcodes365.us and http://mrqe.us for my online shopping

6. Ramya   |   Fri Aug 22, 2014 @ 11:10AM

Won wonderful blog, It s so great work, keep regular updates. i like it so much. My Blogs http://mrqe.in and http://www.seotraininginameerpet.in

7. krishna   |   Mon Sep 01, 2014 @ 06:01AM

Thanks a lot for sharing the detailed list of Senate names of farm bill Conferees. Most of the members are new to me. This subject has interested me for quite some time. I have just started researching it on the Internet and found your post to be informative http://www.usafashiontv.com http://www.avignaseoservices.com and http://www.avighnaseosolutions.com

8. kerthi   |   Thu Nov 13, 2014 @ 10:00AM

encouraged to find Anine Bing this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you anine bing bookmarked to check out new stuff you post,
http://autopartspromocode.us/
http://autopartspromocode.us/store/autopartswarehouse-com/
http://autopartspromocode.us/store/spohn-net/
http://autopartspromocode.us/store/autopartsexpress-com/

9. franklin   |   Wed Jun 24, 2015 @ 04:23AM

ive been examining thie able to support its how can i include your feed to my rss reader as i need to observe you Thanks
http://inkpromocode.us
http://inkpromocode.us/category/printer-ink-toner-discount-codes/
http://ecigsdiscounts.com
http://inkpromocode.us/all-ink-stores/

10. zimzam   |   Sat Sep 19, 2015 @ 04:34AM
11. fhggj   |   Mon Dec 28, 2015 @ 01:33AM

You can find the Best vapor deals here

Discount vapor code
http://discountvaporcode.com
Vape mods
http://discountvaporcode.com/vape-mods/
Vape pen
http://discountvaporcode.com/vape-pen/
Vape eliquid
http://discountvaporcode.com/eliquid/
Kami Menawarkannya secara online dengan kami, anda tidak perlu ragu, karena perusahaan kami sudah diakui

12. klester   |   Mon May 16, 2016 @ 02:23AM
14. sterlin   |   Tue Oct 18, 2016 @ 08:48AM

Post a Comment




powered by Doodlekit™ Free Website Builder