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.

Creating a Training Website - Insight and Hindsight

Good teaching is one-fourth preparation and three-fourths theater.

- Gail Godwin

To get back to my focus regarding women and technology, I want to write a bit about a training website I created for the NJIT ADVANCE grant that focuses on connecting women researchers in science and engineering to each other, to their male peers, and to their female counterparts in industry and government. You can access the website at sites.google.com/site/advancetrainingsite/.

Here is a screenshot of the home page of the training website.

And here is a picture of what the NJIT ADVANCE grant is examining – NJIT faculty social networks based on coauthorship of publications.

Although I created this website as an exercise for a web design class, it is actually going to be useful to the NJIT ADVANCE grant team. All the information on data conversion, as well as the sample files I provided so trainees could practice the steps themselves, are all real and correct. In fact, Dr. Nancy Steffen-Fluhr, the PI on the grant, is already planning to use it to train some new team members. Which means I should be getting some good usability feedback!

How did I come up with the design, you might ask? Well, I had some assumptions about my trainees that helped me design the website more effectively. For example, my learners are primarily verbal, so they prefer textual explanations rather than complex diagrams. I therefore focused on documenting the steps, providing links to visuals if the learner wants to view them. The visuals are annotated to make sure the learner knows what he or she is looking at.

My learners are more reflective than active, meaning that they like to think through a problem before jumping right in to solve it. So I documented all the steps and provided sample files so the learners could actually try the steps whenever they felt ready.

Luckily, my trainees are more sequential thinkers than global thinkers. That fits well with the entire concept of the site which is very sequential – the steps need to be performed in a certain order, and that is how they are documented. I don’t provide links for the trainees to jump around within modules because that would really mess up the data conversion.

And finally, my learners are more intuitive than sensing. What does that mean? It means they like to learn abstract concepts rather than necessarily real-life examples. To address this preference, I tried to explain the why of the steps instead of just the implementation.

In terms of the overall design of the site, I worked with the red and blue colors to maintain a coherent identity with NJIT (red) and the ADVANCE logo (blue and red). I provided a single page that contains all the formulas so that learners could reference it easily even after they are confident that they know all the steps. They can also print out the formula page and have it as a reference. I also provided a page with software requirements, including a link to the Analytic Technologies site where the learner can download UCINet 6 as a free trial version.