Eye tracking Web usability

Eye tracking Web usability

Summary: User interface guru Jakob Nielsen of the Nielsen Norman Group is on the road, giving seminars based on a recently completed an eye-tracking study that indicates how users consume Web pages--such as where people start browsing on a page, whether they have banner and text link blindness, where users look for navigation, how they react to different text types, relative attention allocated to text vs. pictures and more.

SHARE:
TOPICS: Browser
2

eyetrack.jpgUser interface guru Jakob Nielsen of the Nielsen Norman Group is on the road, giving seminars based on a recently completed an eye-tracking study that indicates how users consume Web pages--such as where people start browsing on a page, whether they have banner and text link blindness, where users look for navigation, how they react to different text types, relative attention allocated to text vs. pictures and more. 

I caught up with Nielsen via phone in New York to talk about the eyetracking research. "The real highlight [of the study] is that peoples' eyes flitter fast across pages. Very little time is allocated to each page element, so you have to be brief and concise in communicating online," Nielsen said. "They don't look in on, across the lines of a page, and often fixate on something, such as the first few words of a headline, for only a tenth of second. The right-hand side is often never in view of the eyes. People look down the pages in an 'F' pattern [see example on the left], with a few stripes at top--the first one longer than the second--and then down the long vertical stripe to see if is any else. Sometime the track turns into an 'E' pattern but it's usually an F." 

Pictures, images and moving objects tend to be more of an obstacle course for the eye, Nielson said. "It's a bit of strange finding, but it's consistent across Web sites. They tend to have a goal of distracting user," he said. 

He gave an example of ecommerce sites with images of current promotions in the middle of a page that get tuned out. "If it's a product associated with what they are interested in, it gets high attention," he noted. Similarly, animation can repel the eye if it's not relevant to the user or if its overly complicated. "These are not spinning things that move around from all different angles, just a simple, predefined, one spin that plays on its own," Nielsen said.

Basically, users have become savvy surfers of Web pages, and that includes advertising content. "Advertising in general fares very poorly," Nielsen said. "There is almost no fixation on ads, and when there is, usually just in corner of the ad, perhaps attracted by some movement for a moment."

Ad placed on search pages are an exception. Search ads placed on the right side of a page, and especially at the top, get some amount of user attention, he said. The look and feel of text-based search page ads also carries over with a less negative effect on non-search sites. Non-ad page elements with the same shape or color of ads, such as banners, tend be ignored when people scan with their peripheral vision.

eyetrackgateway_1.jpg

The eye-tracked image from Gateway's Web site shows how the viewer missed the information about Gateway Convertible Notebook (red arrow) because it looked too much like an ad.

Image quality is also a factor in drawing attention. People in pictures facing forward is more inviting and approachable, Nielsen said. Obviously, fuzzy, small images are less inviting as are big glamor shots. Nielsen said the eye-tracking study also surfaced a counter-intuitive finding--people who look like models (perfect human specimens according to popular culture) are less likely to draw attention than 'normal' people. "A call center ad with model in it on the phone may be a good picture technically, but it will more likely be ignored," Nielsen said.   

Nielsen's advice: Understand the F principle, write eye-catching, concise headlines and display crisp images.

Topic: Browser

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

2 comments
Log in or register to join the discussion
  • RE: Eye tracking Web usability

    So what does the MetaWatch do?
    Linux Love
  • RE: Eye tracking Web usability

    thanks http://www.clasmt2.com
    DeLi_Cocuk