The eyes have it - How eye tracking can inform design.

Updated: Dec 16, 2019

Dr. Lizzie Crundall


It’s probably not the first thing that designers think of, but how we look at an advert, website or product can tell us a lot about how we understand and make sense of it.


Our eyes are naturally drawn to things that are important to us, or things that are unique and stand out from the crowd. We will look at things for longer if they are more beautiful and desirable, but also if they are difficult to process and understand.


Take a look at the image below. This shows a ‘heat map’ of where viewers looked when they were presented with an advertisement. The coloured areas show where the viewers looked, with red areas conveying where viewers looked most.


We can see clearly from this heat map that the viewers spent a lot of time looking at the baby’s face but relatively little time looking at the text or the image of the product. It’s therefore likely that people viewing this advert would only remember the cute baby, and nothing about the product itself.


Image credit - Nielsen-Norman Group

So why don’t viewers look at the text? For a start, pictures are more visually interesting than text and reading requires more effort. More importantly in this case, human beings have a natural propensity to look at faces. Even newborns display preferences for looking at faces over other comparable objects [1].


Now look at this alternative advertisement for the same product. Again, the heat map shows that viewers’ eyes were drawn to the baby’ face, but this time viewers spent more time looking at the text. From a marketing perspective, this response is preferable since potential customers will be more likely to retain information about the product itself.


Image credit - Nielsen-Norman Group

The following image explains why. The purple dots and lines are known as a ‘scan path’, which retraces how one particular viewer moved their eyes. The dots represent ‘fixations’, where the eyes were still, while the lines represent ‘saccades’ where the eyes rapidly moved from one fixation to the next (although in reality, the eyes do not move in a perfect straight line).


The size of the dots represent the duration of the fixations (the larger the dot, the longer the fixation), while the numbers reflect their order. We can only process visual information while our eyes are still, so long fixations indicate that the viewer is processing more visual information.


In this case, the viewer fixated the baby’s eyes for a relatively long period of time before shifting their gaze over to the text. The viewer was influenced by another human instinct: Following someone else’s gaze.


Image credit - Nielsen-Norman Group

This demonstrates how even the subtlest of design changes can alter the way in which people view products, and this could be the difference between someone buying a product or not, between then clicking further into a website or leaving it and going elsewhere.



Where do users look first?


When designing a product, website or advert, it is useful to know where people tend to look first, as this might not match the designer’s intentions. Look at the website below. What are your eyes drawn to first?



In this case, the answer is likely to be different for everyone, and in very few cases will it be the search box or the Quote/Order menu item, which are probably the first things we would want to find. This website is so cluttered with items of different styles and colours, all competing with each other for our attention, we simply don’t know where to look.

Now look at the following website, also for a car hire company.



The colour-scheme is simpler, there are fewer items on the page, and the information is well organised. Early on, the eyes are drawn towards the white box on the left hand side because it looks visually different from the rest, and this is a good thing as ultimately the company wants us to book a car.


The website has been designed with the user’s goals in mind. Furthermore, the search spyglass and Login buttons are isolated so they stand out in a position where we expect them to be.


As well as clutter, many other factors can affect where we look first. Obviously, we are affected by our own internal motivations, but we are strongly affected by what psychologists call 'pop out', where the eyes are automatically drawn to things that are visually different from their surroundings. This could be something of a different colour, size or style.



Can users find what they want?


When designing a product, it is critical that users can find what they want quickly and easily. This might be a rinse option on a washing machine or a shopping cart on a website; the same principle applies. By measuring users’ eye movements while they interact with these products, we can establish patterns in the way people search for what they need.


We can of course just measure how long it takes someone to find and press a button, but tracking their eye movements gives us insight into WHY it takes that amount of time to find that button. For example, maybe the user is distracted by another similar-looking buttons, or maybe the user actually looks at the button they want but doesn’t realise what it is and moves straight past it.



A picture paints a thousand words


It will come as no surprise that text-heavy websites or adverts are off-putting. Our eyes are drawn to pictures and videos that are easier to digest that paragraphs of text. Typically, when viewing websites, users will not read text like they would when reading a book. Users are scanning for key pieces of information, not trying to expand their mind.


Back in 2006, the Nielsen Norman Group identified that users typical view web content (i.e. sections of text) in an F shape pattern [2], scanning across the upper lines of text, before moving down the left hand side of the content and making a second, often shorter, horizontal movement.


This means that the first few lines of text on a page receive more fixations than subsequent lines, and words at the beginning of lines receive a larger portion of fixations. [3]


Image credit - Nielsen-Norman Group

This means that users will potentially skip important information. However, there are design practices that will discourage users from F shaped scanning and effectively do the work for the users so that they don’t need to take shortcuts. For example, using headings and bullet points, visually grouping related content, and formatting important text or links so that they stand out can all help to guide the user’s eyes. Furthermore, it is important to keep language simple. Long, infrequently used words attract long fixations and ambiguity results in users having to go back and reread words [4].



Eye movements and product choice


Research has shown that our eyes are drawn to aspects of a product that are most important when making aesthetic decisions [5] and when choosing between similar products. For example, when study participants were asked to choose between two mobile phones, the higher-rated phone evoked longer fixation times and larger pupil dilation [6]. Furthermore, there are formulae that are capable of quantifying and predicting aesthetic preference by only monitoring eye behaviour [7].



Packaging design


We intuitively know that our product choices can be influenced by attractive packaging, but what elements of packaging are important?


In one eye movement study [8], researchers systematically varied elements of a jam jar design (such as shape, texture, pictorial ingredients vs textual ingredients) to establish which of those elements affected consumers’ visual attention and willingness to try the product. Areas that received the most attention were flavour label, picture and logo, suggesting that designers should concentrate their efforts in these areas.


Furthermore, squarer shapes and ridged textures spread attention outwards from the centre of the packaging image. This indicates that packaging can be designed to draw the consumer’s attention towards or even away from certain information.



Location, location, location


Testing a product in isolation might not give you the whole story. People might look at it’s bold design and say that  they like it, but then walk straight past it when it’s in the store. Large companies are now investing in eye tracking capability to inform them about store layout and which designs/brands get noticed and which don’t [9].


Image credit - Phys.Org

Companies often pay supermarkets fees to ensure that their brand is placed in a prominent shelf position. Originally, eye level shelf positions were considered optimal and therefore attracted higher fees. However, an eye tracking study by Scamell-Katz showed that “we naturally look lower than eye-level to somewhere between waist and chest level”. Supermarkets have now changed their listing structure, charging higher fees for this so-called ‘grab level’ [10].



Conclusion


Eye movements can provide us with invaluable information about how users interact with products, what attracts their attention, what gets overlooked and what causes them difficulties. However, eye movement data alone can be difficult to interpret. For instance, a user might look at something for a long time because it is attractive or because they are having difficulty understanding it. Conversely, simply gathering verbal feedback from users can often fail to provide a complete picture: It relies on users to be introspective and aware of their actions, which they often aren’t. A combination of eye tracking and subjective feedback can provide extremely rich data. Modern eye tracking techniques are non-invasive and allow users to interact with products naturally. By subsequently playing back videos of scan paths to show users where they looked provides them with a prompt so that they can explain why they chose to look where they did. Using eye tracking to cue so-called ‘retrospective think aloud’ has been shown to add considerable value, allowing evaluators to detect more usability problems [11].



References


[1] Goren CC, Sarty M, Wu PY (1975). Visual following and pattern discrimination of face-like stimuli by newborn infants. Pediatrics 56(4), 544-9.

[2] https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/

[3] https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

[4] Rayner K (1998). Eye Movements in Reading and Information Processing: 20 Years of Research. Psychological Bulletin 124, 372-422.

[5] Chun-Cheng H, Shih-Cheng F, Ming-Chuen, C. (2017). Relationship between eye fixation patterns and Kansei evaluation of 3D chair forms. Displays 50, 21-34.

[6] Guo F, Ding Y, Liu W, Liu C, Zhang X (2016). Can eye-tracking data be measured to assess product design?: Visual attention mechanism should be considered. International Journal of Industrial Ergonomics 53, 229-235.

[7] Khalighy S, Green G, Scheepers C, Whittet C (2015). Quantifying the qualities of aesthetics in product design using eye-tracking technology. International Journal of Industrial Ergonomics 49, 31-43.

[8] Piqueras-Fiszman B, Velasco C, Salgado-Montejo A , Spence C (2013). Using combined eye tracking and word association in order to assess novel packaging solutions: A case study involving jam jars. Food Quality and Preference 28, 328–338.

[9] https://phys.org/news/2012-07-consumer-product-giants-eye-trackers-size.html

[10]http://www.independent.co.uk/news/business/news/the-secrets-of-our-supermarkets-8228864.html

[11] Elbabour F, Alhadreti O, Mayhew P (2017). Eye tracking in retrospective think-aloud usability testing: Is there added value? Journal of Usability Studies 12, 95-110.


View all >

27 views

© 2017 UXCENTRIC Ltd. All Rights Reserved. Registered in England & Wales, based in Rugby, UK. Company number 11033647.