What Designers Can Learn From The New Science Of Eye Tracking

Research is redefining what “good design” really means.


Designers loathe to be told to design something “eye-catching”—it’s the vaguest of briefs. But for Amy Alberts, a user research manager at the visual analytics company company Tableau, determining the things that catch a person’s eye is an exact science.


With a masters degree in applied cognitive psychology, Alberts has done years of research on what involuntary patterns in eye movement reveal about the human brain. As a researcher at Microsoft and now at Tableau, Alberts has applied her psychology background to examine what those eye movements can teach us about interface and data design.

At last year’s Tableau Conference, Alberts conducted an eye-tracking study with the conference’s participants. She asked them to look at various dashboards—the presentation displays that show a company’s analytics—while an eye tracker traced the movement of their gaze across the page. She will be releasing the results of those tests in a white paper, which details the elements of the data visualizations and layout design that most draw a viewer’s attention.

Designers know implicitly that certain things, like strong imagery and high contrast colors, will grab a viewer’s attention. But the value of the Tableau study is that it shows that even within commonly held standards of good design, there are some approaches that work better, and more consistently, than others. “The thing that I think was interesting is that there seems to be—in this research as well as general brain research—certain elements like maps, big numbers, line graphs, and so on, that are more compelling than others,” Alberts says. “They draw attention faster than other ones; there’s a hierarchy.” 

In tracking attention-grabbing design, this nascent science seeks to quantify user experience by viewing design and functionality through the user’s eyes. 

[Image: courtesy Tableau]

What Draws The Eye? Big Numbers–And Humans

One of the most striking patterns that the study showed was how effective large numbers were at drawing a viewer’s attention.

The analysis showed that numbers set in large type got a lot of “visual attention”—a term Alberts uses to distinguish eye movement from actually seeing and absorbing content, the latter of which can’t be proved just from eye trackers. Numbers set in large type were also consistently one of the first things on the page that received that attention. “A big number is the neon sign of dashboards,” says Alberts. “Eyes go to it immediately.”


Even better than large numbers? Large numbers that are also in stand-out colors. The study revealed that colors that highly contrast the background and other elements on the dashboard also draw the eye. This will surprise neither designers nor evolutionary biologists: The human visual system relies on contrast to perceive what is in front of us, even when the amount of light changes. We’re hardwired to be drawn to differences in color and brightness.

[Image: courtesy Tableau]
We’re also hardwired to look for other humans. “Our brain is built to look at a human face,” says Alberts. In fact, there are parts of our brains that are solely dedicated to detecting human faces and forms. This was reflected in the study as well: In dashboards that included photos of humans, those photos always drew the eye quickly.  

These findings were more or less in line with what Alberts predicted based on previous studies. But she was surprised to learn that other imagery—like company logos and icons—garnered less visual attention. Alberts also expected charts that showed intense rises and falls to garner more attention than they did. But only when paired with the higher priority elements—bright colors, large numbers—did these things draw the eye first.

While Alberts says this science is more beneficial to presentations and data displays that have to convey information at a glance, designers of all stripes can still learn from how the human gaze prioritizes visual elements–the same way they’d consider the colors that will display the most vividly, or the thickness of a font.

A Science Still In Its Infancy

Analysts are a big consumer base for Tableau, so the study focused on the visual design and layout of data-heavy dashboards. But Alberts says the results can apply more broadly to interface design or data design in general. However, she calls eye-movement data a qualitative metric; since the technology tracks eye movements but can’t verify that this movement translates to actually seeing or understanding information, the results are best paired with studies on concentration and retention for drawing strong conclusions.

But Alberts also says that eye-movement tracking is a unique type of data gathering, in that it makes it easy for designers to empathize with users. They are literally seeing the site through the users’ eyes. “Watching another human being, their actions make sense,” she says. “Eyes will tell you the logic behind what is happening. If a user is frustrated, you can see that they are looking in the wrong place—that data stream helps you do your job to improve user experience.” 


When Alberts was at Microsoft, her eye-movement research helped inspire one of the biggest design changes Office ever made. In 2007, the company changed Office from displaying commands in toolbars and menus to arranging it into a tabbed canvas—Microsoft dubbed it “the ribbon”—so that tools were easier for users to find.  

When Alberts was at Microsoft, using eye tracking to measure usability for a website or product was relatively new. Today eye-tracking companies like Tobii and SMI devote considerable effort to provide services and technology for measuring attention on interfaces. Last year, Google acquired Eyefluence, an eye-tracking startup that is solely dedicated to applying the science to virtual reality. Eyefluence’s technology essentially enables users wearing VR headsets to use their eyes as a mouse and make selections only with their eye movements. A startup called Fove, founded in 2014, is developing similar technology. Google has also patented its own eye-tracking technology, leading some speculation on the privacy implications of something like Google Glass—and now, more likely, VR headsets—collecting data on a users’ gaze.

As tracking garners more use in the UX space, Alberts says that Tableau’s eye-movement findings are most useful when information needs to be conveyed quickly. In other words, these aren’t tried and true rules. Using human figures, for example, will be a surefire way to attract attention–but unless those figures convey something about your core message, it won’t help your communication design. 

Rather, Alberts says, it’s best to keep these findings in the back of your mind while determining the best and more efficient ways to convey the information you want to convey. “[This study] is about initial exposure—a 10-second exposure to something that someone has never seen before,” she says. “You have to ask yourself, the things that are important to you, are viewers seeing them?”

About the author

Meg Miller is an associate editor at Co.Design covering art, technology, and design.