Why Designer Needs to Know About Eye-Tracking?
Imagine a beautiful, trendy website with all those fancy words, high-quality visuals, state-of-the art functionality, and yet… “It doesn’t generate a desired conversion rate” – your boss says. Now you’re asked to improve your design. Where to start? Make the main button red? Underline the key phrase? And then? Check with your boss again? Run a little test with a group of your friends? Believe me or not, eye-tracking would be a good help in this situation. For those who haven’t tried it yet, eye-tracking may sound a bit too complicated, but it shouldn’t. Here we will explain in short what is eye-tracking and how it can help improve your work.
What Is Eye-Tracking?
As you could guess eye-tracking is some sort of tracking (measurement) of someone’s eyes or gaze. And that is correct. Eye-tracking is a technology-enabled process that makes it possible for a computer or other device to know where a person is looking.
Typically eye-tracking consists of an eye-tracker (a device), a user (participating human) and a software (an algorithm).
An eye tracker measures the positioning, movement and focus of the eye. It can be a webcam, goggles or a helmet with a mounted camera. Software analyses data collected by the eye-tracker and provides a desired information which is usually presented as a heatmap of a tested visual, i.e. webpage. A user is the one who`s eye gaze is being tracked. He or she might have a task to search for something particular on a website or just take a look at presented visual content.
The main result of eye-tracking is usually plotted as an averaged heatmap. Such heatmap shows averaged results of participating users gaze. It marks areas of interest by different colors. Color red in a heatmap represents the most attractive area of the webpage or visual. This is where the user looked first, where the gaze stopped. It shows a point of the main interest or attention, sometimes measured in milliseconds. Colder colours, such as blue would mean that the user went through the image but didn’t really pay attention to it, didn’t read. Finally, gray (or no color) area shows where the user didn’t look at all during the session.
Eye-Tracking Detects Web Usability Problems (Examples)
How can eye-tracking solve website problems? Let me give you a couple examples.
In 2007 the U.S. Census Bureau’s homepage had a big fiasco: 86% of users failed to find the main information – country’s current population. It was presented in large red numbers, at the top of their homepage.
In a reduced screenshot, the population count is the only information that’s clearly readable, so it makes the task easier than it was actually. On the actual site, users often ignored the big red characters.
The website was tested by the Nielsen Norman Group (NNg). The averaged heatmap from NNg study shows how users looked at this homepage. Their task was to find the current population of the United States.
At first, the heatmap seems fine. On closer inspection it’s clear that users only fixated on the first third of the number that shows current population. In other words, people scanned that area, but didn’t actually read the number. Only a small percentage — as indicated by blue coloring — looked at the last 2/3 of the number.
The heatmap showed a clear problem – people did not read the whole number or didn’t take it seriously. Banner blindness and made-up terms are explained as the main reasons for this failure, but the problem was identified only after an eye-tracking test.
Here is another example. It is well known that if there’s face in an image, it will draw a lot of attention. You can see it clearly in the heatmap of this diaper advertisement. Unfortunately, from a marketing standpoint, this is a problem because the copy isn’t attracting enough attention.
Now look at the browsing patterns when an image of the baby facing the text was used.
As you can see, users focused on the baby’s face again (from the side) and directly followed the baby’s line of sight to the headline and opening copy. Even the area of text that the baby’s chin was pointing to was read more!
There are far more lessons a designer can learn from eye-tracking studies, and we will discuss them in our blog a bit later.
Our client, a German news portal Welt.de wanted to direct users’ attention towards the first article and make sure they notice that it was video news. After running a few prediction-based eye-tracking trials, we let our client to make an objective, data-based image choice that ensured their goal was reached.
Simple Eye-Tracking Solution For Designers
There are many eye-trackers to choose from and ways to do the eye-tracking itself. Which way is the best depends on your needs and budget.
We at the Attention Insight are offering prediction-based eye-tracking. Based on deep learning and trained with previous eye-tracking studies data, this Artificial Intelligence (AI) analysis can predict where users will look while engaging with provided content. It lets you identify visual attention errors and get insights on user’s attention shifts without a real person participating in the task. It gives you results of over 30,000 “users” in 90 seconds and a 90 % accuracy of prediction for websites. It is pretty simple to try from your home or work computer. You can perform a few trials at no cost. Try it if you haven’t yet. Nothing to lose!
Conclusion
To sum up, eye-tracking is a powerful tool that can predict the usability of a website. A prediction-based eye-tracking can give a precise result in a matter of minutes and at a relatively low cost.
If you like our blog, we welcome you to sign up for our newsletter or come back later to check our new articles. Please scroll down to comment, ask questions, share your stories, demand for blog posts.
One Response