The Science of Using Eye Tracking in Web Design

The Science of Using Eye Tracking in Web Design

Humans have a variety of senses that modern technology is constantly finding new ways to stimulate.  When visiting a web site, the first and sometimes exclusive sense used is eyesight. Over half of viewers typically spend less than fifteen seconds before deciding if they are going to leave the site or continue viewing. This is when you need to use the science of eye tracking to get the viewer’s attention before they leave.  

Eyes are drawn to common elements such as contrasts, locations, contours, and colors.   Using the algorithms used in eye tracking studies could be implemented in all areas of web design.  Ecommerce sites could use it to attract hesitant buyers. Newspaper and Magazine sites could use it to convince readers to click on certain articles.   Data could be used to find out what information causes visitors to choose to stay or leave the site.

Different sites show different eye tracking patterns.  When viewers use the Google search engine, the logo is viewed before the search box.  Ecommerce sites such as Amazon show that viewers focus on the center of the screen, then graphics, then boldface text.  These algorithms could be used across many ecommerce sites to help promote sales and direct a viewers attention.

Companies such as EyeQuaint and 3M have done many studies using real time eye tracking that have been able to predict attention when a site loads by using neuroscience algorithms that tests the visual impact of any design instantly.   The algorithms measure perception; defined as what content users eyes focus on within three seconds, and attent; defined as what the viewer finds most/least appealing.

There are several interesting results that were found from these studies.  One study was able to find an almost perfect correlation on what snack a person would buy based on what they focused on the most.  Viewers were given several pictures of snacks and there was a correlation of .93 (with 1 being a perfect correlation) in the snack the viewer spent the most time focusing on and what snack they chose to consume after viewing.  

Choice in fonts are always an important thing to factor in when designing a website.  Font size, positioning, and color are all things to consider when trying to get the viewer’s attention.  One thing that eye tracking studies showed was that viewers are more likely to read the site in its entirety when there is negative space. This allows a more fluid movement of the eye. Another thing these studies discovered was the use of color. Many people skim a web site and skip over words. The use of color didn’t make a difference on skipping words unless multiple words were in color or a single word was in grey.  The use of grey font caused the viewer to spend more time focusing on the word. When using colored font in hyperlinks, the color didn’t make a difference. However, using hyperlinks with low-frequency words were more likely to get clicked.  

 Another thing these studies discovered was the use of color. Many people skim a web site and skip over words. The use of color didn’t make a difference on skipping words unless multiple words were in color or a single word was in grey.  The use of grey font caused the viewer to spend more time focusing on the word. When using colored font in hyperlinks, the color didn’t make a difference. However, using hyperlinks with low-frequency words were more likely to get clicked.  

When designing a website, take the science of eye tracking into consideration.  If you already have a site built, try the suggestions to see if the amount of visitors or sales increase.  Implementing the results of eye tracking studies in building your web site could increase traffic, create higher sales, and be used to have your information reach a targeted audience.

Menu