If you are anything like me, you immediately get nervous when you hear the phrase eye tracking. However, understanding why this testing is essential to any web developer takes the uncertainty out of the equation. Through this blog, I hope to inform you about the eye tracking process and the information obtained from these tests. This will provide a complete overview of the research that happens through eye tracking and why it is crucial to understand as web developers.
Eye Tracking
With the digital age upon us, the first place anyone goes when they are interested in a company or product is their website. Google’s research found that it only takes 50 milliseconds for a visitor to your site to decide whether they like it. This is a pivotal moment in your website’s ecommerce success. Most companies are well aware of this fact and are always looking for ways to improve brand perception to users who browse their websites. How we perceive a website can persuade us to buy a product or move on. This is why various testing like eye tracking exists to understand what is happening off-screen in the user’s mind.
Eye tracking has become a very popular way for companies to gather information about their clientele. Eye tracking is what it sounds like, the observation and recording of eye behavior and movement. It is used so companies can identify where users are looking on their websites and what catches people’s attention. Behaviors can be uncovered by looking at where the user’s eyes go and what initiates action from a user.
“Eye-Tracking: Opel-Licht der Zukunft” by opelblog is licensed under CC BY-NC-ND 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nd-nc/2.0/jp/?ref=openverse.
This tracking looks at pupil movement and dilation to identify what a user is looking at. A fixation point, where a user’s gaze stops, is highly beneficial to researchers. Points of fixation indicate where a user has stayed on a point long enough to process what they have seen. These are collected by comparing the position of light reflected in the eye and the position of the pupil.
Researchers using eye tracking also look for “saccades.” These are the fixation between multiple points. Visualizing these saccades illustrates the paths that users take to collect a comprehensive view of where the user is looking and in what order. To record this, researchers collect coordinates multiple times a second, making a data set and exposing users’ behaviors.
So What?
With eye tracking, researchers gain an ordered list of fixations. They can see where and what the user sees. It also can highlight what the user did not see. Maybe something that the web developers thought was standing out is actually pushed aside to other aspects of the website. These insights highlight both the seen and the unseen of users, which is huge in making changes to better suit the user’s needs.
“Eye Tracking Thermal” by Travelin’ Librarian is licensed under CC BY-NC-SA 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=openverse.
Eye tracking gives insights into the time it takes for users to get to a fixation. This uncovers the ease and usability of the site. If an important element takes long for eyes to fix on, it may indicate that it needs revamping to make it stand out more.
Similarly, the fixation length can be seen through eye tracking, describing how engaging certain elements may be. It can also show the number of fixations per element, indicating what might be distracting or contradictory.
Eye tracking goes beyond secondary research to authenticate the user’s interest. It is not based on memory and is unconscious, with users often not remembering their eye movements. However, eye tracking does not tell researchers why a person is fixated on something. This is why interviewing, and other qualitative research methods should never be ignored, as they hold valuable information that can help web developers create a site that promotes credibility.
F-Pattern
Through the years of eye tracking tests, the most common pattern from users is the F pattern. This pattern describes users’ most common eye movements starting in the upper left corner across the entire row. This would include your navigation bar, and it is the best chance at getting your users’ attention as it is the first place seen. Eye movements then travel down on the left-hand side of the screen, moving slightly to the right to read the first few lines of copy, then continue traveling down the left column.
Due to the speed at which users make decisions on websites and brand credibility, it is essential to place your important content within the guidelines of the F pattern.
Testing With Five Users
When hearing all this information, it can seem daunting to research users’ perceptions of your website; however, the most important truth is that you receive zero insights with zero tests. With one test, user insights increase by a third. From testing a second user, you can understand the differences and overlaps between eye movements. The third user will confirm things that overlap with either user or both users. Each time you observe a new user after your third, you gain less and less information. After testing user number five, virtually no information is found.
This is excellent news for students like us. To understand users’ perceptions of our websites, we only need to observe five users to understand any usability problems that can be resolved.
“Eye-Tracking Demonstration” by City University Interaction Lab is licensed under CC BY 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/2.0/?ref=openverse.
Conclusion
To attract customers and create confidence, the designs of websites should be clear, simple, and attractive to the perception of users. It should point users to important features and avoid anything distracting. Through initial reactions, we as developers, lay the groundwork for frequent visits and greater brand trust.
By exhausting qualitative research, sticking to the rules of the F-Pattern, and observing five users, your website is bound to be user-oriented. By keeping users at the forefront of designs, brand trust will skyrocket.
Jean W
5 Oct 2022Hi Reilly,
I thought the photos you used in your post were very strong. I also really liked the “so what” header, as it ties all information together for the reader and tells us why we should care about the topic at hand. I also found the organization of this post valuable and the headers make it easy to scan.
Eye tracking is definitely the ultimate usability test, and I had no prior knowledge that this even existed. I found this article from Adobe explaining exactly how eye tracking is used for usability testing and what rules you should consider first: https://xd.adobe.com/ideas/process/user-research/eye-tracking-and-usability/
Kenny B
6 Oct 2022Hello Reilly, this is a really interesting post! I find the discussion surrounding the F-pattern to be really fascinating, myself. I didn’t really know that most people’s eyes find themselves directed to the upper-left corner, but it honestly makes a whole lot of sense when you think about it. It’s also really interesting to hear that only need a total of five people to do a proper eye tracking test for Usability testing. In general, this is a really good post! Thanks for the insight!
Aiden P
6 Oct 2022Hi Reilly, this was a very insightful and informative blog post. I actually almost forgot I was reading a blog written by one of my peers! The organization of information is excellent, and the stunning images with proper credit given make the blog look very professional. I learned a lot from reading this, and you provided a great explanation on the F-pattern that makes the concept easier to understand. Well done!
Bruna N
6 Oct 2022Hi Reilly,
This was a really well-written and organized post! The topic of eye-tracking is so interesting because I feel like not many people know about it or know its purpose. I think your explanations were very clear and concise and you brought up super important points (such as the fixation points that researchers look for). I also think the images were really helpful to illustrate the eye-tracking as well!
Al G
7 Oct 2022This is a well written, in depth article. I particularly liked the inclusion of the F-pattern. It was something I learned about while working on a high school newspaper, and I think it has a lot of relevance for the subject of eye-tracking. It’s a good general rule for what users are looking at in an article or website. https://uxmag.com/articles/eye-tracking-and-web-usability-a-good-fit This article is very in depth on the subject of eye tracking and web usability. I hope it will be helpful.
Eleanor L
9 Oct 2022There was a lot of useful information in your post on how exactly eye tracking works and why it matters to those conducting usability testing. I actually participated in a study a few years ago that used eye tracking to test viewer’s responses to videos and photos that were part of a new advertising campaign. https://ivpresearchlabs.com/solutions/eye-tracking/online-eye-tracking/ It used a similar program to this one. Although I participated in-person, the idea that eye tracking can be conducted remotely/through the internet (which is explained further in the link) is incredibly interesting; it opens up avenues for cross-cultural (or at least more geographically diverse) usability testing of any number of products/sites/etc. As a tool for usability testing, eye tracking seems to have a wide range of applications across many different fields of study.