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.

Automobiles - It's All About the Image

A suburban mother's role is to deliver children obstetrically once, and by car forever after.

- Peter De Vries

For the last 19 years, I've been relegated to mom-mobiles so I could drive around my four kids and their friends. But now that I have two young adult drivers, I found myself looking for a small, fuel-efficient car to do my everyday driving. The question was, what car to get?

I started looking around on the road for cars that I liked. I saw one that had the Kia logo on it, so I went to the Kia website. Turns out the car I saw was the Kia Soul.

When I go to the website, I don't just see a picture of the car. I get a flash "tour" - I can rotate the car to get different views, along with images of the interior and options. The website designers also made sure to include important facts on the image - things to make me keep looking - like the economical base price and the 5 star safety rating. With cars, it's all about image, isn't it? Speaking of image, if I could afford a Mercedes, here's the car I see on their international website.

Nice, huh? Just a little out of my price range, though...

Images, illustrations, symbols - we're surrounded by them every day to the point where we don't even know that we know them. I mean, we all know the automotive manufacturer symbols: Mercedes-Benz, Honda, Subaru, Chevy. They are some of the most recognized symbols in the world.

Let's look at another company that's famous for its look and logo - Apple, Inc. Apple frequently changes their homepage design, but on the day I visited, here's what it looked like.

Pretty striking, huh? It's still got the Apple look and feel - lots of white space, clean, uncluttered. All your navigation is done by clicking on the images on the screen, or by using the unobtrusive menu bar at the top of the page.

They have a link to the popular Mac vs. PC ads, but again, the title is unobtrusive. They offer a video for the iMac, but they don't force you to play it every time you visit the page. So not only is their logo famous, but their look and feel immediately tells you it's Apple, and their navigation is simple and streamlined, using lots of linked images.

Another company that has a famous logo and look and feel is Target. I don't know what it is about Target commercials, but I always know it's for Target even before they display the logo at the end. And it's not that they're always red and white - they're not. It's just something about the images, the music, the whole combination that lets you know it's Target. And of course you don't even have to see the name Target - all you have to see is the famous bullseye at the end and you know you're right.

Social Bookmarking - Building New Networks

Whenever I found out anything remarkable, I have thought it my duty to put down my discovery on paper, so that all ingenious people might be informed thereof.

- Antonie van Leeuwanhoek

What is all the hype about social bookmarking? Is it a new way to find useful information on the web, or is it just another way for people to occupy their time?

Social bookmarking is what sites like del.icio.us and digg.com are all about. The basic principle of social bookmarking is that people mark sites with descriptive tags. But the tags are shared with everyone else who subscribes to the social bookmarking site you are using. So instead of having private bookmarks in your browser, you can share your bookmarks with others. And as more and more people share their bookmarks, we start to develop ratings for information available on the web.

Say you’re feeling a little down and you want to see if there are any funny blogs you can read. You can log into your social bookmarking site and search for the tag “funny”. Now you can choose from one of the blogs other people have found funny, and if you think it’s funny, you can add your own tag, too. What if you have a favorite blog and you want to see what other people think of it? You can search for that blog and see how it’s been tagged, and even add your own tags. Because we the people are doing the tagging, there’s even a new term to describe what is evolving on these social bookmarking sites – “folksonomy” (a combination of folks and taxonomy) describes how the information on the internet is categorized based on what people like you and me think, not based on some expert sitting in a library or lab somewhere.

Some people might feel that social bookmarking is a “disorganized collection of personal preferences,” and to some extent that might be true. As my professor said, someone could tag my blog with the keyword nudity. It would probably get a lot of hits, but those viewers would be pretty disappointed. Similarly, I might find a website really interesting, but no one agrees with me. If that’s the case, my tag will sink to the bottom while more relevant, popular tags gain strength. In that respect, then, social bookmarking can be called a “democratic taxonomy that allows the community to peer review the content of the Web.” The entire concept of folksonomy implies that categories are built on the strength of people’s agreements about classifications. Questionable classifications will disappear under the weight of the classifications that receive support from the most users.

As someone who’s interested in social network analysis, I can see a parallel between networks of people and networks of social bookmarks – social bookmarking tags are creating new networks of information. For example, if a friend of mine tags my blog with keywords such as blog, typography, and feminism, my blog will suddenly get exposure to a whole new group of people: those interested in typography and those interested in feminism. It’s kind of like that “Six Degrees of Kevin Bacon” game – before, my blog was only read by my friends and my professors. Then suddenly its exposed to new audiences because a friend told another friend, and so on, and so on...

Speaking of which, if you want to see my bookmarks, here's a link.

Web 2.0 - Fact or Fad?

The computing field is always in need of new cliches.

- Alan Perlis

There are a lot of companies, websites, and products that are touting themselves as being “Web 2.0.” If you’re like me, you’re not really sure what makes something Web 2.0, so let’s take a look at how some others have defined it.

According to Tim O’Reilly in his article “What is Web 2.0: Design Patterns and Business Models for the Next Generation of Software,” Web 2.0 is a new way of looking at the world-wide web. First, the applications that can be considered Web 2.0 don’t just work over the web, they use the web, so that the web becomes a “platform.” Software doesn’t need to be downloaded, which means that the application can be improved and immediately updated based on user feedback.

Another significant difference in Web 2.0 software is that it relies on its users to provide information. One obvious example of this is Wikipedia, the encyclopedia written and edited entirely by its users. But lots of other Web 2.0 applications use this same principle – think about how Amazon tells you that people who bought what you are buying also bought these other things.

Tim O’Reilly sees the control and presentation of data as a crucial part of any Web 2.0 company. For example, did you know that there were actually a number of companies selling online music prior to Apple’s iTunes? None of them offered the user experience that Apple designed, and that’s why almost everyone uses iTunes.

Those are some of the highlights of Tim O’Reilly’s definition of Web 2.0. Do I agree? Well, mostly. I remember back when I was working at Digital Equipment Corporation (and I know I’m dating myself here), someone said to me that our generation (hers and mine) saw computers as work. We had to be system managers in addition to users - in those days, computers didn’t have nice user interfaces and error recovery procedures. But our kids saw computers as something to use to get a job done. I think the same can be said of Web 2.0. The internet originally started as a file sharing system, and people had to work hard to get it to do anything. Now, we don't look at what the internet does but what we can do with it. And it’s no longer limited to just techies – anyone can have a blog or a web page. Anyone can share photos or opinions. Anyone can publish information (whether it has value or not).

I think one of the most exciting prospects of Web 2.0 is that many sites are actually built using information contributed by individuals, not paid experts or people with a stake in the outcome. Take for example the website ShareTrip. It's built out of individual travel blogs - people who've gone somewhere create a blog of their trip on the site, which you can then review to get information for your own trip. The ability to read real reviews by real people is, as the commercials say, priceless.

Tim O’Reilly's focus when he wrote his article on Web 2.0 was business. But I think Web 2.0 has made its biggest impact on individuals. With Blogger and GoogleSites, just to name a few of the obvious choices, anyone can start a blog or web site. This freedom even filters down into the educational community, where teachers can encourage their students to share their work on Web 2.0 sites. Even this blog was created as part of a class assignment, although it's so much fun that I'll keep it up even after the class is over. And there are even specialized sites out there for sharing educational experiences. Teaching cartoon drawing? You can let your students create comics and share them with other users at Pixton. Want to practice a language? Go to MyHappyPlanet where you can make new friends while you practice.

Examining Garamond

There are now about as many different varieties of letters as there are different kinds of fools.

- Eric Gill

I once worked on a manual for a new product called Journalist. The Vice President of the company (it was a small start-up) told me he wanted me to use the typefaces Garamond and Gill Sans in the document. Okay, I thought, whatever you want. I had never worked with these fonts before, so who was I to argue?

Turns out, Garamond is a very nice, legible serif font. Why do I say it’s legible? Well, let’s look at a test of legibility as described by Kathleen Burke Yoshida in her article “Avoiding Typeface Terrors.” As Burke Yoshida puts it, if you can cover the top half or the bottom half of the letters and still read the word, then the font is legible. So let’s take a look at Garamond from that perspective.

I’d say that, with either the bottom or the top half of the letters covered, you can still pretty accurately read the word. In that sense, then, Garamond is a legible font. But what else can we say about Garamond?

Well, because it’s a serif font, it tends to be more readable in a printed body of text. Why? The serifs help guide your eye along the text. Also, the x-height in Garamond (the height of the letter body, not including ascenders or descenders) is large; the ascender of the letter d is shorter than the body height or x-height. That helps enhance the readability of the typeface as well. And because the strokes of the letters are relatively light, Garamond gives the impression of lighter (as opposed to darker, thicker) text on a page.

So why did the Vice President of the company tell me to use Garamond for the body text of his product’s documentation? Obviously, there was something about the personality of the Garamond typeface that matched the image he wanted to convey. (Yes, typefaces do have personalities.) He selected a serif typeface to increase readability, but why not Times New Roman or one of the other, more common serif typefaces? If you look at Garamond, it has a formal feel. The serifs add a sense of formality, but so does the variable stroke weight (how the letter’s thickness varies). Because the stroke weight is light overall (meaning that there is more white space within each letter), the printed page has a brighter appearance. You could say that Garamond is formal without being pretentious, it’s reserved but airy.

Blogging for the Ages

Women are the real architects of society.

- Harriet Beecher Stowe

This posting gets back to my interest of women in technology, and especially encouraging young women to pursue technical careers. To that purpose, let's examine two websites that specifically address females in technology: Engineer Girl and Women in Technology. In examining these two websites, I'm going to focus on a few of the important elements that the website designers used to make the websites appeal to their specific target audiences.

First, let's look at the role of the website user. Who visits these websites? Is it the person who is going to use the information, or some other decision maker, or maybe someone who is going to advise another person based on the information they get from the website?

Well, in the case of Engineer Girl, it's pretty apparent from the design of the website that it's really intended for young girls who might be interested in technological careers. It makes use of bold, bright colors, decorative flourishes and playful fonts. There's not even a link provided on the main page for parents or educators - the site is completely geared to young girls interested in engineering.

On the other hand, the Women in Technology website is very professional, with an understated blue/green color scheme and a clean professional font. Their website is designed to appeal not only to the women who belong to the organization, but also to women who might be considering joining.

So what are the goals of each of these sites? What do they want to accomplish?

The Engineer Girl website has a very basic yet critical mission. It wants to encourage girls to pursue engineering careers by educating them about the exciting opportunities available in various fields. The site provides a suggested reading list, a list of what courses the girls should take in high school to better prepare them, and even questions and answers with women engineers to get the girls excited about opportunities. Just look at some of these links (and of course note the smiling girl in the background).

What about the goal of Women In Technology? Their primary goal is to help women in technology connect to other women through events and networking so that they can encourage each other in their professional growth. They focus not on general tasks to help women in technological fields, but instead on what their organization offers. This is evident from the links on their homepage: Event Calendar, Special Interest Groups, Committees, Special Programs, and so on.

What about knowledge? What does each website assume about the knowledge of its visitors?

Engineer Girl assumes that the girl who comes to its site is curious about pursuing a technical career. The website provides a lot of information - starting salaries for engineers, links to other sites appropriate for girls interested in engineering, suggested reading materials, and a lot more. The website tells girls about upcoming contests, camps, and other opportunities for them to get involved. In general, the website assumes that the girls visiting it are looking for information.

On the other hand, the Women in Technology website assumes that its visitors are already involved in a technical field, so it doesn't provide that type of information. Instead, it lets its members know about upcoming events, awards, and special projects that require volunteers. The website also describes the parent organization in case anyone is interested in joining.

But what I like best about these two websites is that their designers share a similar culture - one of inspiring women (and girls) to advance in technology. In that respect, Engineer Girl and Women in Technology both get an A+ in my book.