Eye-Tracking & Website Usability Testing

The key function of usability testing is to witness how the average consumer interacts with your product in order to gather information about potential improvements.Usability testing is not only about ensuring that the product fulfills basic functionality requirements, but spotting changes that could be made in the design of your product in order to improve its overall function, which in turn improves user experience. In web design, website usability testing often involves examining user actions and behaviors when instructed to complete a number of tasks on the website. If you are interested in what makes web usability testing different from other kinds of usability testing, follow the link provided for an introduction to website usability testing. The web usability testing process can be greatly improved using a technology that began to take hold on web design usability testing in the late nineties, eye-tracking. 

Follow the link provided for a brief history of eye-tracking

Eye-Tracking Technology

Eye-tracking technology is built to observe, track, and record the movement and dilation of a usability tester’s eye as they navigate through a website. This allows experts to gain access to not only what consumers may say they find interesting or challenging about a site, but also to what they are subconsciously drawn to on the page. Special points of interest on the screen are marked as areas of fixation, meaning areas where the user’s eye lingers longer in order for them to process what they are seeing. The path a user’s eye takes between points of fixation is known as a saccade. Tracking the saccade of the user’s eyes allows for testers to visualize the path their attention takes between fixations. 

How Does It Work?

The most common method for calculating the focus points of the user’s gaze compares the position of an infrared light (positioned nearby to reflect off of the user’s eye) to the position of their pupil within their eye. This info, when combined with the position of the user’s head, can be used to determine the coordinates on the screen that the user’s gaze is focused on. This setup can be roughly observed within the images to the right

Why Should I Care?

Using the extrapolated data, analysts can provide web designers with the following:

  • An ordered list of fixations or overlooked element.
    • This highlights what the users sees or misses.
  • The amount of time taken to arrive at any given fixation.
    • This relates to how easy or difficult a specific element is to locate.
  • The length spent on any given fixation.
    • This is related to how engaging or understandable an element is.
  • The number of fixations per website element. 
    • This is related to how distracting or useful an element may be.

All of this information can prove useful in accessing the effectiveness of your website. For example, in a recent study regarding a browser-based game, users were tasked to find their performance on previous levels. Standard usability testing indicated that roughly 50% of users were unable to do so. Eye-tracking, however, indicated that every participant held fixation points on the button needed in order to complete their task, but did not comprehend its purpose. This additional information allowed designers the knowledge that, while the button was easily found, it was not descriptive enough in its purpose. Follow the link provided if you are interested in more about the specifics of this study

The position of the reflection of the infared light (the white dot in the center of the eye) in relation to the pupil (the black circle) is used to calculate where the user is looking.

Consumer Reading Patterns

In recent years, researchers have discovered that what your audience sees within the first few seconds of loading your webpage is one of the most important factors for success, especially in the world of ecommerce. 

The Golden Rule Of Vision

Additionally, an often cited Nielsen Norman Group study found that users consistently view online content in a variety of patterns, the most dominant being the F-Shaped Reading Pattern, which is comprised of three components.

STEP 1

Users first read following a standard horizontal movement, generally across the upper section of the content area. The first line of content holds focus the longest. This is what forms the top bar of the F.

STEP 2

A user’s gaze moves down the page until it makes another horizontal movement, generally covering a shorter area than the previous. Only the first few words hold focus. This forms the lower bar of the F.

STEP 3

Finally, users scan the content’s left side in a verticle movement. Sometimes this is a methodical scan, and others it is quick, in search of interesting content. This forms the stem of the F.

The F-Shaped reading pattern demonstrated on an About Us page of a corporate website.
The "About Us" page on a corporate website.
A product page on an E-commerce website.
The F-Shaped reading pattern shown on a search engine's results page.
Results page from the search engine Google.

Further studies performed more recently have mimicked the findings of the original Nielsen Norman Group study, such as the comprehensive Eye Tracking and Web Experience study performed by Worcester Polytechnic Institute.  From a combination of studies regarding this common phenomena arose the Gutenberg Diagram, which is the simplest image that explains the prioritization of information by consumers. When combined with the standard understanding of F-Pattern reading, the golden rule of eye-tracking online content was born.   

The Gutenberg Diagram.
The Gutenberg Diagram
Image of the golden rule of eye-tracking.
The Golden Rule of Eye-Tracking

‘F’ Isn’t For Everyone

Although the F-shaped pattern is the most dominant, consumers view content based upon their motivation, personality, and interest in the content they are reading. For this reason, there are a variety of other possible scanning patterns for online content and webpages. These may include:

  • LAYER CAKE PATTERN– The eyes scan heading and subheadings while skipping the normal content below. An eye-tracking heat map of this behavior will show horizontal lines, reminiscent of a cake with alternating layers of cake (areas with high focus) and frosting (areas with little to no focus).
  • SPOTTED PATTERN– Eye movements skip big chunks of text and instead scan consistently, as if looking for something specific such as links, digits, or a particular word or set of words.
  • MARKING PATTERN– The eye stays focused in one place as the mouse scrolls or the finger swipes the page, leaving a consistent mark across the screen. This pattern is more often observed during mobile viewing.
  • BYPASSING PATTERN– The eye deliberately skips the first words of a line when multiple lines of text begin with the same wording, such as a list. 
  • COMMITMENT PATTERN– The eye fixates on nearly everything on the webpage. If the consumer is highly motivated and interested in the content, they will read almost the entire page as apposed to simply scanning. 

Fundamentals Of E-Commerce

One of the most important concepts behind the consumer-marketer relationship is trust, and this is increasingly so when your business is conducted online. In an incredible study regarding the first impressions of websites, Google analysts found that it takes only 50 milliseconds to develop an opinion about a website. This is crucial. From the time that a user is able to move their gaze from the upper-left corner of the screen to the upper-right, their first impression has already been formed. This is why you must grab their attention, communicate vital information, and form a sense of trust. 

 

Trust can be formed in a variety of ways, some of which involve the site’s design as a whole while others focus specifically on the first line of text the user will read. Design elements account for a large amount of a website’s trust (or mistrust). These elements may include:

  • Visual Complexity
  • Color Scheme
  • Advertisements
  • Pop-Ups
  • Endorsements
  • Font Size
  • Font Family
  • Search Options
  • Navigational Aids

What Does This Mean?

By the time that a website visitor’s eye has zoomed from the left to the right, they’re already working hard to determine whether the site is trustworthy or not. By placing high-priority elements in the path of their eye, you’ll appear more trustworthy. Consumers don’t want to think about about how to navigate your site, they want you to do that. Follow the link provided for more info about trust in ecommerce.

Meet The Contenders 

Viewers of websites generally follow the same three-step looking process, and this is where the three “hidden gems” or contenders for consumer attention appear.

The Hero

The visitor will give a disproportionate amount of attention to the hero: the headline combined with the most prominent image. This section needs to hook the visitor an immediatley confirm their trust for the site. The consumer cannot be made to feel as if they’ve clicked into the website without reward. It is crucial that your headline and image hold a consistent message and blend together ell to create a clear statement about your websites overall purpose and effectiveness. 

The Header

The second place a visitor is likely to look is the header, most likely the websites navigation bar. Again, it is important to maintain a synonymous message and design, and make titles obvious. Short and easy titles help the navigation process of the user. The easier the navigation process for the consumer, the more views or sales you’re likely to garner.  

The Hops

The visitor is not likely to read your entire webpage in sequence, but rather to hop around, placing their attention in different fixation points across the page. These hops, however, are predictable. As the viewer seeks out relevant information, they’re likely to hop between headers first,. The second most important hop point for visitors are images and videos, however, NPPA research author Sara Quinn notes in a 2015 Poynter article that captions for images and videos are a highly underutilized yet extremely important element for website visitor experience. 

For more information regarding the specifics of these ecommerce tips, visit the provided article regarding the science behind ecommerce eye-tracking

Conducting Usability Testing

While some people may believe that usability testing is costly and complex, that could not be further from the truth. Studies show that the best results of usability testing come from running multiple tests with no more than 5 users. The image to the right indicates the percentage of usability problems found compared to the number of users tested. The curve of the graph steepens quickly and then flattens, as many of the same users will encounter the same issues over time, creating overlap. 

Graph regarding the percentage of usability numbers found (scale of zero to one hundred percent) and the number of test users (scale of zero to fifteen users).

Thinking Smarter

The curve of the graph would indicate that you require 15 users to test the website to find all of the potential flaws. However, Nielsen of the Nielsen Norman Group would suggest that you only need to test with five users. Why is that? 

Essentially, this theory explains that after testing with five users, you should opt for a redesign of the website. Since five users will generally find roughly 85% of usability issues within a website, you have enough information to make significant fixes. However, since nobody can design the pefect website, some of these fixes may lead to greater usability issues, warranting another test. Nielsen argues that by testing your website with five users at a time, you improve your website much greater than by testing it with one large study of fifteen total users, as you have potential to fix the problems you may be creating in the process.

When To Test

After original testing, you may need to test with a greater number of users. This situation is applicable if your website has a high number of highly distinct groups of users. For example, imagine an elementary school website that is intended to be easily navigated by both school children and parents. One would need to run usability testing focused on both categories to ensure their website is optimized for easy navigation and comprehension for both groups. 

Follow the provided link for the basics on usability testing

This Post Has 9 Comments

  1. Hi Devin,
    Eye-tracking is a topic I’ve always found interesting and wished I knew more about, so I enjoyed reading your blog post! I was especially interested in the “Golden Rule of Vision” section where you discussed the various patterns of eye movements users tend to have. I’m not surprised that the “F” pattern is the most popular. I’ve never thought about these patterns before, but now that I know them, I can totally think of certain sites where I use that pattern (I’m doing that right now as I look over your blog post again!).
    I agree that eye-tracking can be very helpful in the process of usability testing—if you have the means to do it, of course. Seeing where people spend most of their time and what information they “get stuck” on could definitely provide insights on what to improve. I wish we were able to do this for our upcoming project.
    I found an article about eye-tracking and app usability testing that relates to this blog post. First of all, I thought it was interesting because it was about apps instead of websites, which I can assume may have different patterns because apps often have different layouts (more galleries of buttons than lines of text). I also thought it was interesting that this article mentioned how important it is to review what the eye-tracking shows the user did not look at. This way, you can figure out what information may not be necessary. Link to the article: https://uxmag.com/articles/eye-tracking-the-best-way-to-test-rich-app-usability

  2. Devin,

    This is an excellent blog post! I thoroughly enjoyed reading through it, and the way you displayed your content ensured that it was engaging and easy to understand. I especially appreciated your “what does this mean?” sections and information about why I should care. Another thing that improved the readability of your blog post was your descriptive, embedded links. Nice work! The concept of eye tracking in web usability testing is something that is fascinating to me. Of course we use our eyes to observe a website, and yet I never considered the extensiveness of the research that has gone into analyzing the specific ways we LITERALLY look at a website. An interesting article I found was one that describes 5 takeaways we can gather from eye tracking during usability testing. It can be accessed here: https://www.crazyegg.com/blog/lessons-eye-tracking-studies/ and it includes things like the fact that we are predictable, (hence the F-pattern you discussed) we can break these predictions, (hence the other eye tracking methods you discussed) and something that I found interesting was that we’ve grown accustomed to ignoring ads with our eyes. For example, when using Google as a search engine, there are almost always ads that appear as the first initial search results. As web users we have gotten so used to this that we don’t bother wasting our time looking at the ads – we jump immediately to the relevant content. This is the same for advertisements on other webpages as well. Finally, we seem to like looking at what we’re used to looking at. The article specifically talks about using blue as the color for links because that is the convention and that is what our eyes are trained to look for, and how breaking this convention could come at a cost. Thanks again for a great post, (and for using blue links)!

  3. Hi Devin,
    I enjoyed reading your blog post this week! Your post flowed between each topic well and your placement of visuals next to the text made it easy for me to look from one to the other as I read. I also appreciated your inclusion of links that further explain a specific concept, inviting readers to dive deeper into the content you discuss. I knew eye-tracking in usability testing was important, but I didn’t comprehend just how important. It’s interesting to see all of the different ways in which a fixation or saccade can be interpreted depending on the particular site and its functions, as demonstrated in the browser-based game example. The F-Shaped Reading Pattern was particularly fascinating to me, and I did some further research on the Gutenburg Diagram that you described (https://3.7designs.co/blog/2009/01/the-gutenburg-diagram-in-design/#:~:text=The%20gutenburg%20diagram%20is%20a%20method%20of%20understanding,to%20optimize%20layout%20as%20a%20result%20of%20it.). The post outlined concepts such as de-emphasis in fallow areas that receive less attention (such as including secondary navigation links in these areas) that make sense when considering what you discussed in your post. What I found most interesting were the examples of the Gutenberg Diagram at the end of the post. They included several examples of websites with the Gutenberg Diagram outlined on top of it, demonstrating how users’ eyes tend to move when visiting websites. This concept also reminded me of your discussion of establishing trust within a website. The Gutenberg Diagram seems to consider some of these elements with which to establish trust in regards to placement of content, font size, and navigational aids.

  4. Hi Devin! This blog was extremely useful as well as entertaining to read. It really helped to get me in the mindset for writing the usability report and conducting the testing. The section where you talk about design elements used in e-commerce was so interesting! Elements like visual complexity, color scheme, pop-ups, advertisements, fonts, etc are used to establish trust with consumers. You’re very right when you mention consumers want navigatio to be easy and effortless for them. I learned a lot in this blog about how important eye path is in the user determining the site’s usability. Your graphic shows multiple brands and their themes for their website. From the graphic I chose to analyze Aussie’s website which was categorized as creative and imaginative. The site is definitely familiar with the “F” path of eye-tracking. The navigation menu is located on the top left corner of the page. There is a very apparent color theme of purple shades all over the site. There is a slideshow of products that is visually appealing. The site is definitely checking all the boxes that your blog discusses as establishing trust with a consumer with their design efforts

    https://www.aussie.com/en-us.

  5. Hi Devin! This was a really informative blog post. It was well structured with great visuals. I found it especially useful because of my major. I’m an advertising major with a minor in writing, which means I spend a lot of time designing documents. I’ve learned a little bit about how color affects the brain, but your blog provided some great information. I knew that we scan documents from left to right, but I was not aware of the full golden rule of vision. This will be incredibly helpful as I design more documents for the rest of my career. I found it so interesting that I did a bit more research on it. This article shows how color affects mood and how it can be used in visual design. https://www.verywellmind.com/color-psychology-2795824

  6. Hey Devin! This was a great blog and very enjoyable to read! I’ve never thought of eye tracking before, so this was cool to learn about and think about. The section about the eye tracking technology and the consumer reading patterns were especially interesting. Since I am going to be in the process of starting a company after college, these tips about websites are very helpful. I found another blog on the same topic of eye-tracking (https://www.singlegrain.com/blog-posts/conversions/101-on-eye-tracking-how-your-eyes-move-on-a-website-infographic/) and this article discusses some of the same things as your blog. What we don’t realize is that lots of data has come from eye-tracking and the way websites are commonly set up has come from this data.

  7. This was a very fascinating blog! I really enjoyed the visuals that you provided, as they helped me understand how the eye-tracking works. This is a fascinating tactic that can definitely put you on the right direction when it comes to web design as well as information. If they seem to be skimming, perhaps there is an info dump present. It allows us to see what the user is looking for and how to make it most effective. I also appreciated the chart talking about the different colors and the brands attached to them. It was interesting to see how the color of a logo affected my interest in the company or their site in general. Especially when I saw Target, I can understand why it’s so popular and why so many people are drawn to it. (https://www.usability.gov/how-to-and-tools/methods/eye-tracking.html) Here is a site that is very similar to your blog and discusses similar topics. Great job on this blog!

  8. Hello Devin! Your article is so well thought out and organized! I really enjoyed all of the graphics you used and the organization of the text (especially when you used multiple columns which helped to break up the text into manageable sections). Content-wise, I found the F-Shaped Reading Pattern very interesting. I think I personally use the F-shaped pattern when I am reading websites. I often look for headings, the text under them on the left side, and pictures on the right side. This often looks like an F-shape. I think website pages that sell products often have a layout in this shape. For example, Barnes & Nobel (https://www.barnesandnoble.com/b/textbooks/_/N-8q9) has a column on the left side with the different categories that are vertical and more information on the right side that is horizontal. It’s interesting to me that there are more comfortable or natural layouts to view with my eyes than others.

  9. This blog post is so important and exciting. I think the patterns of how our eyes view documents is of such value when designing any document. It was not surprising to me to find that an eye movement follows the normal convention and continues to do so following the page vertically. I feel I am so aware of my eye and hand movements while reading this. I also thin your information on usability testing is relevant and important. I have read about the different types of testing and how they compare. I think I find the most help in remote testing because it takes the pressure off of performing in front of someone, and thus I feel one gets more honest results. I found specifics of usability testing here: https://www.hotjar.com/usability-testing/methods/

Leave a Reply

Close Menu