Eye Tracking in Design - Why Does It Matter?

It's not what you look at that matters, it's what you see.

- Henry David Thoreau

One of my favorite hobbies is scrapbooking. Instead of putting my photos in a photo album, I create decorative scrapbook pages with my photos. Through my scrapbooks, I am trying to enhance the experience of looking at the photos and also to provide more information about the event by including journaling. Recently I started working on what's called a heritage album - an album of my ancestors. I actually have a few treasured photos of my great grandmother and my great-great grandmother, shown in the photo below.

When I first started scrapbooking, I thought it was just a fun hobby, but there are people who take it very seriously. There are numerous magazines devoted to the topic. There are different types of scrapbooking: traditional, digital, and hybrid. And there are lots of articles and websites and even entire books about designing scrapbook pages. One of the first design rules I learned when scrapbooking was that people's eyes tend to move over a page in a Z pattern: they start at the top left, move across the top to the far right, then they scan diagonally back across to the lower left and then back across to the lower right. Here's a link to a scrapbook design blog that talks about the Z flow.

So how, you might ask, do we know that people's eyes move that way? From the study of eye tracking. Think about it – all day long, whenever you are actively engaged in something, your eyes are tracking. When you’re driving, your eyes are looking at the road in front of you, at traffic signals and cars entering the roadway… When you are eating, your eyes are looking at your food, analyzing color and texture that can either add to or detract from your overall dining experience. When you are reading, your eyes are tracking the printed word across the page. And when you are working on a computer, your eyes are scanning the text and images presented to you on your screen. By studying how our eyes track, we can gain very useful information about whether or not something is easy to use, clearly presented, or visually appealing.

There are two ways that researchers gather data about eye tracking. In the head-mounted system, they mount a particularly unattractive device on your head that measures your “pupil glint” from different angles to see what your eyes are focusing on. The other method uses a remote camera to track the orientation of your eye. Either way, the information the researchers collect can be pretty useful.

For example, researchers in the 1950s studied the eye movements of airplane pilots to see where their eyes moved during the difficult process of landing a plane. Based on their research, airplane manufacturers actually redesigned the instrument layout in the cockpit, and since then, instrument usability has improved and incidents of human error have decreased. I’d say that’s a pretty good tradeoff for having to wear some awkward headgear for a while.

Eye tracking studies have also been done on how people read printed material. In normal situations, studies have shown that readers typically skip words that are three letters or less, and instead read groups of words, not single words one at a time. But when the material gets complex, our reading speed slows down and we reread phrases more frequently. The other factor that can impact our reading speed is fonts. Eye tracking studies have shown that we do best with printed 9 to 12 point fonts with serifs. Anything smaller and we have a problem reading; anything larger and we can’t read words in groups.

So, as you can see, eye tracking really does give us a lot of useful information. What kind of information does it collect? In technical jargon, the data is called fixations and saccades. A fixation occurs when your eye is focused on a particular point, while saccades move the eye from one fixation point to the next. By looking at the organization and duration of fixations and saccades, researchers can identify scanpaths like the Z pattern I learned about through scrapbooking.

From a web design point of view, eye tracking can tell us a lot about the usability of our design. For example, the state of Washington performed an eye-tracking study on their Department of Licensing website. The people in the study were asked to perform certain functions, one of them being finding information about a motorcycle permit. Through eye tracking, the researchers found that several of the study participants scanned the Quick clicks section, even though the information wasn’t there. Knowing this, the Department of Licensing could redesign the Quick clicks to include motorcycle permit information, because obviously several people thought it should be there, even if they didn’t verbalize that assumption.

What about something like footnotes? We’re all used to reading them in print. But what happens when we’re reading online? Eye tracking studies have shown that people don’t read the information if it’s at the bottom of the screen, but they’ll read it if it’s near its reference. What other design guidelines has eye tracking given us? Here are some of the key ones as outlined in an article called “Eye Tracking: How It Works and How It Relates to Usability” by Lynne Cooke (published in the Technical Communication journal, Volume 52, Number 4, November 2005).

• Eye movements roughly follow the “Z” pattern of design.


• Small type encourages focused reading, while large type promotes scanning.


• Underlined headlines create a visual barrier stopping people from reading what’s below the line.


• Short paragraphs are better than long paragraphs.


• Headlines with a summary attract viewers and keep them reading.


• Images should be at least 210 x 230 pixels in order to grab viewers’ attention.

So the next time you’re developing a website or some other online document, remember to think about where you want your viewers’ eyes to go and make sure you design with that in mind.