What Eye Tracking tells us about website usability / by Cory

eyetrack1.jpgLike all forms of usability testing results, eye tracking gives us good clues into user behavior, but it certainly shouldn't be taken literally. Testing results are merely insights into problems and their solutions...and I prefer to treat them that way. Heck I've observed many testees that do the opposite of what they say...which is really just part of human nature when it comes to using things vs. explaining how you use them. One of the recent and big studies to come out this year was the Poynter Institute's "EyeTrack III" 2004 Eye Tracking Study. This is the third eye track study conducted by Poynter since 1991.

Here's what Poynter has found from their eye tracking studies relating to website content usability, page layout, navigation and design: (along with some great comments from Frank Spillers below each finding that are good examples of how one can interpret the data):

1. Users spend a good deal of time initially looking at the top left of the page and upper portion of the page before moving down and right-ward. Comment: Another thing to think about is how this user behavior mirrors search engine traffic (i.e. Google Bot visiting your site). Search engines read starting at the top left, and then downward in a left to right column fashion.

2. Normal initial eye movement around the page focuses on the upper left portion of the screen. Comment: Not surprising when you consider that users are patterned by all the other software and websites that they use which have a standard menu start point (e.g. File, Edit, View...). Note: For Japanese or Arabic it would be the mirror reverse. 3. Ads perform better in the left hand column over the right column of a page. Comment: The right column is treated by users as an "after-thought" area and should be designed with that in mind.

4. Smaller type encourages focused viewing behavior. Comment: This is especially true in older or elderly users. For the rest of your users, stick with 9-12 point Sans Serif (Arial, Helvetica, Verdana) with an average of 10-11. FYI: Only developers appreciate miniature fonts!

5. Larger type promotes lighter scanning. Comment: Most reading behavior consists of skimming and scanning. If you want to slow your users down- use smaller fonts in the body of your content. Use larger fonts to help them cover more territory.

6. Dominant headlines most often draw the eye first upon entering the page- especially upper left of the page. Comment: Remember, Poynter's focus was a newspaper website. However, bear this in mind for portal type design and intranet design.

7. Users only look at a sub headline if it engages them. Comment: So make sub-headlines relevant and of course make them the keyword phrases users and search engines use.

8. Navigation placed at the top of a homepage performed best. Comment: Again, if you understand how users are patterned by other tools they use (Word, IE, Outlook Express)- the goodies are at the top of the page.

9. People's eyes typically scan lower portions of a page seeking something to grab their attention. Comment: This seems consistent with "Information Foraging Theory" where users are said to hunt for information by "scent" or navigation and content of the highest value to them.

10. Shorter paragraphs performed better than longer ones. Comment: Attention is clipped on the Internet. Short bursts of attention are the environment you are designing for at all times. Note: Longer product descriptions do better than shorter ones in ecommerce situations. As with all usability findings, context is key.

11. The standard one-column format performed better in terms of number of eye fixations. Comment: Most users are overwhelmed by the average web page that they try to deflect information as a coping strategy. It is the same phenomenon that occurs at a party when you focus on one conversation and ignore the other conversations around you by categorizing them as "noise". 12. Ads in the top and left portions of a homepage received the most eye fixations. Comment: Interesting, but I wouldn't recommend putting ads there. *Just because they receive eye fixations doesn't mean they put a smile on the user's face*. This is one of the main points of this article!

13. Close proximity to popular editorial content really helped ads get seen. Comment: One of the golden "rules" of usability is that anytime you satisfy the user's task (interest, goal, objective), you increase the likelihood or create the conditions that they will be open to other stimuli (advertising, cross-selling etc.)

14. Text ads were viewed mostly intently of all types tested. Comment: Text ads are popular because they are less distracting, camouflage well with the page and are often not known to be ads and therefore annoyances to the user. Oh, and since Google "pioneered" them- they are the de facto standard in effective web advertising.

15. Bigger ads had a better chance of being seen. Comment: Also repeat advertising on a page by the same company is being used on many sites to reinforce exposure.

16. The bigger the image, the more time people took to look at it. Comment: Using larger images (file sizes) is easier these days since 20% or more (USA) are on high speed connections, but using thumbnails with large images is always a safer bet.

17. Clean, clear faces in images attract more eye fixations on homepages. Comment: Humans are wired to recognize patterns and hard wired to other human faces.

18. Higher recall of facts, names, and places occurred when people were presented with that information in text format. Comment: Good recall depends on the level of relevancy, good copy-writing and content usability (structure and display).

19. New, unfamiliar, conceptual information was more accurately recalled when participants received it in a multimedia graphic format. Comment: It is known in the field of cognitive science that the more emotion involved in a learning transaction, the higher the retention and recall.

20. Story information about processes or procedures seemed to be comprehended well when presented using animation and text. Comment: And the animation or text must be clear, easy to understand and in the language or conceptual world of the audience.