Fast Company: Attention

Visitors to Fast Company's website find bold text headlines to be one of the most eye-catching elements.

Fast Company: Perception

. . . However, the information that the eye lingers on is primarily visual.

Amazon: Attention

Stelzer praises Amazon as "a website with lots of content but drawing attention to just the right spots."

Amazon: Perception

According to EyeQuant, the eyes of Amazon users tend to stray towards the center of the page.

Bing: Attention

By Stetzer's estimate, Bing's content "distracts users a lot from the actual search functionality."

Bing: Perception

The main objects of perception for Bing users are graphical, and the search bar isn't one of them.

Google: Attention

EyeQuant says the home page is "zero clutter, drawing people right into what matters most: search."

Google: Perception

The placement of Google's logo and search bar in the center helps with perception.

Justfab: Attention

On this shopping site, users' attention is attracted via boldface type instead of graphics.

Justfab: Perception

. . . But users' perception is influenced by the use of different-size typefaces.

Havenworks: Attention

In this example of a badly designed website, viewers' eyes simply don't know where to go.

Havenworks: Perception

Despite all the images and odd text color changes in this very busy webpages, viewers' eyes stick to plainer text.

Click here to preview the new Fast Company

Want to try out the new

If you’d like to return to the previous design, click the yellow button on the lower left corner.

Eyetracking And The Neuroscience Of Good Web Design

Companies like Google, eBay, and Barnes & Noble are all integrating neuroscience discoveries into their web design. Here's how.

Fabian Stelzer, EyeQuant's CEO, believes there's a science to how we view the Web. Whether on desktops or on mobile, whether we're male or female, young or old, our eyes will be drawn to certain common elements of web design— a combination of contrasts, locations, contours and colors. Stelzer's also sure of something else: Knowing what these common elements are, and integrating them into websites, mean ecommerce sites can snag hesitant buyers and magazines can convince readers to click on articles.

The German entrepreneur, who was previously featured in Fast Company in 2011, runs a company that counts Barnes & Noble, eBay, Google, and Nokia among its clients. EyeQuant uses algorithms based on eyetracking studies and research to evaluate web sites. Using algorithms derived from the movement of the human eye while looking at computer screens and at real-life commodities such as food and retail items, the company claims they can predict where a viewer's attention will go when they load a web site.

Earlier in October, EyeQuant announced a $650,000 funding round that, though modest by the standards of the tech world, is admirable for a neuroscience marketing startup. While EyeQuant isn't the only company working in the space (there are several competitors such as 3M's Visual Attention Service and ad-oriented services such as RealEyes), EyeQuant is one of the best funded. Companies, in exchange for submitting an email address and contact information to the company's marketers, can receive from EyeQuant almost immediate evaluations of one of their site's URLs .

Attention and perception: best frenemies

Stelzer told me that the two main maps his company provides cover perception and attention. For EyeQuant's purposes, perception maps predict what content users' eyes will gravitate towards within three seconds of loading a page. Meanwhile, there's the second metric of attention: The content users will find the most and least visually appealing.

The slide show at the top of this story shows some examples of both, culled from both the company's clients and some of the Web's best-known brands.


In the case of Google, users' eyes gravitate towards a logo, which then steers them towards the main event—the search box.


The eyes of Amazon users veer towards the center of the screen and clearly identifiable clusters of graphics and boldfaced text. This is the sort of insight marketers want to know in order to optimize sales.

Internet neuroscience

In the latest issue of the Proceedings of the National Academy of Sciences, a paper was published using EyeQuant findings (two of the study's three authors, Milica Mormann and Christof Koch, are affiliated with the company). The paper, which centered on a research project that conducted eye-tracking studies on several food items, offered several new mathematical models regarding the tug-of-war between the visual appeal of items (or web sites) versus how much they cost to purchase. The study also offers some empirical backing for EyeQuant's claims, and gives the company new weaponry to help it attract potential clients through a set of new algorithms.

For example: In the study, students at Caltech had their eye movements measured while staring at a grid of snack food items. The students' eye movements were then compared with the snack food that they chose to eat after they finished viewing the grid. Results extrapolated from the snack food observations were integrated into computational models of the eye's movements. Stelzer said in an email that the authors reported an area under the curve of .93, where 1 marks a perfect prediction. That means their mathematical model is usable and that they could replicate their findings.

Stelzer told me that one of the main takeaways from the study was the importance of visual impact. "Making sure that the human eye is drawn towards a product through its design alone remains an important factor in sales, but this is 100% context dependent. Put simply, if everyone's dressed in red, being green wins."

He also said the study showed EyeQuant's product, which uses computerized models of eye-tracking instead of actually eye-tracking every user, could be used by companies to evaluate their web sites as a substitute for expensive internal corporate studies.

Eye-tracking, meet search engines. And your supermarket.

But ecommerce isn't the only sector EyeQuant is looking at for applying neuroscience to web design. Search engines (as in Google's case above) are another hot area. Stetzer noted that search engines could someday understand which sites are less relevant than others—for example, burying sites that feature distracting advertising which subconsciously prevents users from finding the information they came to the site for. Meanwhile, the company is using some of that $650,000 funding round to branch into eye-tracking research for mobile platforms. He also mentioned EyeQuant's interest in researching applications for grocery shelves.

The ultimate Holy Grail for eye-tracking companies of all kinds is brick-and-mortar retail. But unlike computer screens, where your eyes are inevitably fixated on the monitor, eye tracking in real life adds all sorts of challenges. In Stetzer's words, "On laptops, screens are in a seated position and you're staring at them straight ahead. Mobile is more difficult, but it's similar. Retail is much more different, because of angles, the physical size of customers—whether they are large or whether they are small—and if they're freely roaming around supermarkets. It's less than perfect incremental data."

With that said, you can probably expect that someday the same neuroscience research being used to assemble your home page will help assemble the perfect aisle at your local Target or Macy's store.

[Images courtesy of Eyequant]

Add New Comment


  • It's interesting that users eyes seem to focus on the "L" in Google. The "L" is the only non primary color in the Google logo. They chose the green secondary-color on the "L" to demonstrate "the idea that Google doesn't follow the rules."

  • I never use to think about this topic in my whole life. This is the first time I come to know and I am really very thankful to you for the outstanding share. This information is really very hard to find anywhere online. I bookmarked your URL to my browser to keep updates myself with all your tips and tricks. Many thanks,

  • Instalogic Web Design

    It's cool how science gives us information and strategies we would have never had before.

  • Spanningtree Media

    Good post and these ideas will help to make a professional eCommerce website. I was looking for few post like it and today it made my day. Thanks

  • certifyD

    A great insight into the relationship between ux design, user testing and science. Thanks

  • Offshorent

    Great insight. Creativity of a web designer is very handy for converting a visitor to customer.

  • islandplanet

    I have to admit that I had to bookmark this article to finish later because there is so much to keep in mind when laying out and designing a website already. Eye tracking science is kind of bending my mind!

  • gazeme

    Cool article! I can see surely this benefiting some use cases, i.e. when I want to plan out my website layout at start and have a clue how to combine text pics and contrasts. But nothing substitutes for a real time eye tracking with ux tools like Morae. And now that some good quality eye tracking is only hundreds (no longer thousands) $ away our clients are expecting for every study a mouse behaviour, video rec of facial expressions and gaze behaviour. It just tells a rich real story...

  • Phil Barden

    Does this take faces into account? The 3M tool doesn't. There is NOTHING more rewarding to the brain than another human being and we fixate on faces in preference to objects and text.

    We have a tool (built by a Caltech post PhD researcher in visual neuroscience) which factors this in alongside the more obvious principles of contrast in colour, shape and size, luminance etc so you get the best possible correlation with real eye-balls. We're now using this to help clients with shelf layouts, POS material, print and outdoor advertising, packaging design and web pages.

    If anyone's interested please contact

  • Anthony Reardon

    Another good article, Neal.

    Let's see, I talk about this kind of thing a lot when discussing design sense, web usability, and end-user experience optimization. I actually think the neuroscience combined with algorithm is a pretty stimulating idea, but not necessarily crucial.

    Just break down a couple general rules of thumb in web usability that I would think any web designer ought to have a grasp of already. First, what I call the 3 second rule for grabbing interest. Second the NorthWest to SouthEast inclination or path of attention. If you are good enough to get someone's interest when they land on your site, you've probably got less than 30 seconds as they scan and hop from the top left corner to bottom right. There's a whole science to this that's been debated about for years in web design circles, such determining best methods from "vertical scrolling" vs. having everything "above the fold".

    Certain conventions are emerging like minimal design. This is critical for controlled delivery of presentation so you know exactly what the end-user experience is going to be. Compare this with the traditional imperative of packing in quantitative modules of content- most of which audiences view as unwanted distractors, even causing some anxiety as they figure out how to look for what they want, and creating complicating attention gaps as they focus in on the wrong things instead of getting the picture the site owner had in mind for them. So it gives me something to talk about on the majority of websites I encounter anyway. Generally too much information and wasted opportunities.

    There are special advantages to graphic presentation though when talking to decision makers. Part of this has to do with the psychology of what they want to present vs. the realities of effective web design. You can articulate the reasoning but not get a rational response. You can put forward a model for how it should be, but they are more likely to scrutinize based on their own mental models and intentions. However, if you have pictures and! One such program I have used in the past was a graphical use tracker that plotted out where a user would point their mouse. A lot of users on pc's anyways tend to carry their cursor with them as they navigate. So the same rules of thumb are proven in that case too.

    The best technique I have used though, is to stand over the shoulders of someone new to a site and observe what they go through. The less web savvy the better too. You can really get your thumb on how logically organized and intuitive something is by running it by old folks, kids, or friends after a few good beers. The thing is it's all obvious and immediately evident- you don't necessarily need eye tracking neuroscience and algorithms for this.

    I'm down with the science of it though. Some of the best research extends all the way back to Piaget's Mechanisms of Perception- specifically where he talks about "centration" or "fixation", "indices", and "signifiers". I'm telling you this is hot stuff for where technology is moving today, but not enough people are talking about it. More recently, cognitive scientists have been doing a lot of work with babies tracking their eye movements as they "scrutinize" fields. For instance, they scrutinize more deeply/ stare at longer things that change. So one ball, curtain drops, two balls, they pick up on the asymmetry and try to process it. Big ball vs. small ball, or pink ball to blue ball. You can see attention peak and decline around these differences. Even more excitingly, I think 60 Minutes had a segment a year or so ago on babies demonstrating preference. Simulation like a teddy bear being nice vs. one being mean with the negative getting only a cursory look, and the positive getting a good 30 seconds and even an enthusiastic reaction to lean in and reach for... that proverbial click.

    Anyways, note how the examples above almost all completely ignore the ads lol! Love it! Also, anything with a face is more likely to draw on our root nature of functional attention. With that in mind, I often recommend minimal design highlighted by visual intensive media of people, especially complemented with the audio and motion of video!



  • Neal Ungerleider

    Thanks Anthony. What interests me the most here is mathematical modelling that replaces conventional gaze testing: The idea that our eye movements can be replicated by algorithms to a useful-enough degree. This is something that--and I'll fully admit it--is strange to fully grasp my head around, but it's a concept that has parallels in other fields like medical research and aerospace.. Curious to see where this will be five years from now.

  • Anthony Reardon

    My pleasure Neal,

    In my opinion, the mathematical modeling is going to be moving toward more user-centered system designs. In other words, a combination of engineering and nature like biomimicry. Of particular interest to me is an emerging field called "holonics" which deals with modeling the autonomy and cooperation within systems. It's a field of systems engineering and mathematics research pertaining to everything from biological, social, manufacturing, distributed decision-making, platform architectures, nanotechnology, and artificial intelligence.

    In a nutshell, nature tends to find simple solutions to complex challenges. I think that's where you find the holy grail of retail for instance. You might not arrive at the solution looking at it from the vendor perspective, nor even the technology developer perspective. However, if you just take a walk with a retail shopper to observe and discuss their experience, you'll probably identify the key areas of leverage that vendors and technology developers will be arriving at and focusing more on in the near future.

  • Joe@DayTranslations

    As far as I am concerned The Wrong Agency, I need you to hone in on the salient point that you are making. Please excuse my obtuseness. By the way, I think this technology is interesting due to the older technology that has shown the emphasis of people's mouse movements, as this seems far more meaningful.

  • The Wrong Agency

    The more I think about the potential impact of Big Data & neuro-science, the more it strikes me that we need to create a countercurrent. For never was the need for poets more acute. Those who, whatever field they work, develop lyricism. Those for whom creativity, surprise, intrigue and joy are as necessary to life, as breath itself.

    Or we may, as Tolkien may have said end up with 'One brand to rule them all. one brand to find them, one brand to bring them all, and in blandness bind them.'

  • The Wrong Agency

    When the answer to every significant marketing question has been answered –
    what colour, what image, what texture, what copy, what fonts, what design, what
    message, what packaging, what combination, in what format and medium – to which
    demographic, in which locale, at what time of year. Or day. Will we simply end up managing nothing more than process?

    Will marketing creativity potentially go the way of the appendix. A relic of a bygone age.

    For the creative space will be shackled by neuro-science & Big Data. Potentially, a time when difference is measured solely by degree. Not design. Where best practice
    is not merely common practice, but the only practice.

    And this data will be a jealous master - demanding fealty. It will be no simple task
    arguing against a Sales Director waving around the empirical truths contained
    within the ‘Data Bible’. And what the Data says, the Data gets. Monotheistic marketing. Where the only sound to be heard is the toothless gnawing of the bland brand.

  • malcolmrands

    This doesn't take into account the long tail, the niche which is becoming the main. Our antimarketing stands our been our success