Week 6: What You Can Learn About Effective Website Design From Eye Tracking, Scanning Patterns, and Usability Testing

Have you ever left a website because it’s too frustrating to use or hard to read? If your website leaves a bad impression on users, they aren’t likely to return. This is why usability testing is important; it’s easier and cheaper to test your website on a few users first (and fix problems early on). We’re going to discuss eye tracking as a testing method and how the results influence webpage design. We’ll also discuss the merits of eye tracking, alternative testing methods, and tips on how you can craft a website users want to read. Ready to learn more?

Let’s start with the basics:

What is Eye Tracking?

Eye tracking is a method of usability testing that observes and records eye behavior, such as pupil dilation and movement. Results of this test help researchers identify where users spend the most time looking at a page and provide insight into user behaviors. Then, the data is analyzed to target problems early on and improve the website design. Testing early saves time and money because problems are fixed before the website ever reaches its intended audience. This is important because what your audience sees in the first few seconds of looking at your website is one of the biggest factors of e-commerce success. Google found that it only takes 50 milliseconds for a user to form an opinion about your website. So:

How Does Eye Tracking Work?

There are a few different varieties of eye tracking maps. You might recognize the splash of colors across the page, but what do they mean? Essentially, eye tracking can tell us where or how long a user views a webpage. There are two points of special interest on an eye tracking map:

  • Fixations: Points where a user’s gaze stops moving, and they process what they’re looking at
  • Saccade: The path of a user’s eyes between fixation points

In a “heat map,” red displays the highest concentration of fixation points while the other colors show the relative duration of fixation across the page. Similarly, a gaze plot generates ordered dots for each fixation with a line connecting the path between them. Both displays offer valuable information about how users consume content on the page.

In addition to these visualizations, eye tracking can also create a dataset that includes:

  • An ordered list of fixations
  • The time taken to arrive at a fixation
  • The length of any given fixation
  • The number of fixations per element

What does all of this data tell us? Beyond where a user’s gaze focuses most or longest on a page, we can also use this method to reveal scanning patterns. Once we know how a user will view the page, we can make changes to the design to increase readability and keep users on the page longer.

Let’s look at some reading patterns, including one of the most common, the F-shaped pattern.

What is the F-Shaped Pattern?

The F-shaped scanning pattern is just what it sounds like: a concentration of fixation points that resemble the letter F. First, users read horizontally across the top of the page, which forms the top of the F. Then, users read horizontally a bit farther down the page (but not as far across as before). This is the second bar of the F. Finally, users scan the left side of the page vertically, forming the stem of the F. This means that the first few lines (or the first paragraph) receive more gaze time than other lines. Words on the far left of the page are read more often than other words in the same line. The F-shaped pattern applies to content on a particular page, not the website itself (and does not include scanning the navigation bar). Why do users read in this fashion? Users might scan in an F-shaped pattern when:

  • The page has little to no formatting (headings, bullet points, etc.)
  • They are trying to read efficiently
  • They are not committed to or interested in reading every word
“Eyetracking” from the Nielsen Norman Group demonstrates a heat map of the F-shaped scanning pattern

Those don’t necessarily sound like good things, do they? Even though as readers we are accustomed to this style of reading, that doesn’t mean it’s the most effective way to design a website. The F-shaped pattern often fails because readers miss big chunks of content when they skim. If you’re using a responsive design, the way the page looks from device to device will vary, meaning the content in the F-pattern will vary, too. How do we change the way users read our content? Scanning on the web is dictated by users’ motivation and goals, as well as the layout and formatting of the page. Let’s look at some antidotes to the F-shaped pattern as well as other types of scanning patterns.

What are Alternatives to the F-Shape?

Some minor changes to the formatting of your webpage can drastically affect how users will read the content. Here are some tips to help you combat the sparse F-shaped pattern:

  • Include the most important information in the first two paragraphs
  • Use headings and subheadings
  • Begin headings with keywords
  • Visually group related content
  • Bold important words and phrases
  • Use descriptive links
  • Use bullet points or numbered lists
  • Cut unnecessary content

These changes may seem simple, but they dictate where a user’s focus will lie on the page. Bolding a word will make it stand out visually while adding headings will chunk the content and make it more likely that users will read each section. The F-shaped pattern is by far the most ineffective, so let’s look at just a few more scanning patterns from least to most effective:

  • Spotted pattern: fixating on certain words or chunks of the text
  • Layer-cake pattern: fixating mostly on headings/subheadings with some fixations on body text
  • Commitment pattern: fixating on most or all of the webpage content
A visualization from Creative Handles on the different types of scanning patterns

The commitment scanning pattern is the best because only users who are very interested or motivated will read all of your content. This pattern also leads to the best comprehension because the more a user reads, the more information they’ll gleam. Highly motivated users will read all the content on your page, and they probably know and trust your website. However, users only scan in the commitment pattern when content is organized in digestible chunks (like headings and subheadings). Keep users on the page. Organize content in a way that’s easy to scan and motivates users to read all the content. Let’s take a look at how you can organize content effectively.

What Does Effective Webpage Structure Look Like?

Even beginner designers can harness the fundamentals of good web design whether or not eye tracking is used. The structure of your webpage is the foundation for your content, so let’s make sure you have a strong one. Check out these tips to help you create a webpage that’s easy to read:

  • Place high-priority items where users will look
    • Utilize the top-left corner of the page where users have their first and longest look
  • Follow the three-step looking process:
    • The hero: headline and most prominent image
      • Hook readers and be the hero to the problem that brought them to your site
    • The header: navigation bar
      • Aim for simple and descriptive over clever
    • The hops: headings and captions
      • Predict that readers will hop to headings and captions
      • Place your call to action by itself at the end

Now you know how eye tracking works and how scanning patterns can help us evaluate and structure a website. Is eye tracking the solution to usability testing we’ve been looking for? Maybe not. After all, not all of us work for corporations with endless funds and time to devote to this complicated testing method.

Is Eye Tracking Worth It?

Eye tracking data is useful because it allows researchers to see exactly where users spend the most time on the page, and test participants don’t have to remember what they looked at or for how long. But is this data worth the time and cost of eye tracking?

Eye tracking can tell us where users spend time on a page, but not why. While this method provides insight into user behavior and reading patterns, it’s not a comprehensive method that reigns supreme over usability testing methods.

Eye tracking is not a replacement for other, qualitative research techniques. The data from an eye tracking study may indicate that users spend more time fixating on a certain element, but it can’t tell us why; this qualitative information can only be discovered through interviewing, observation and experience.”

Eye Tracking: What Is It For And When To Use It – Usability Geek

For those with the time and money to purchase equipment, train staff, and run regular tests, eye tracking is a great tool to add to your arsenal. However, for the low-budget or beginner usability researcher, there are plenty of other low-tech and low-cost options that also provide insightful data.

What Are Alternative Testing Methods?

Eye tracking might seem intimidating and costly, but there’s plenty of other options that provide equally insightful feedback. Let’s explore just a few alternative usability methods to eye tracking.

  1. Guerilla Testing: Go into a public space and ask people for a quick usability test in exchange for a small token (a coffee, for example)
  2. Card Sorting: Write concepts on cards and have participants sort them into categories
  3. A/B Testing: Launch various versions of content to see which participants prefer

Depending on your project, these testing methods are all viable options for receiving feedback on your website. They’re also relatively cheap (besides the cost of coffee or otherwise compensating people for their time).

You might be wondering: how much testing do I really have to do? Although testing can provide valuable insight into your users and website design, extensive testing is a waste of resources. Instead of fewer tests with many participants, utilize frequent tests with just a few users. In fact, the optimal number of participants is no more than five. This is because a single user provides almost a third of all there is to know about the design usability. More users will provide a little more insight but will mostly overlap with the first user. So why not test with only one user? Testing with only one user runs the risk of being misled, so more users will confirm what you already know, as well as provide new insight.

If you only need a few users, why conduct so many tests? Each test offers the chance to fix something in the redesign. A second study will provide deeper insight into the usability of the fundamental website structure. This testing will reveal new, smaller problems that will require more changes and a third usability test.

A few smaller tests now will save you the headache of fixing problems later on. Ready to receive feedback on your website design? It’s time to harness the power of usability testing.

Where Do I Go From Here?

Eye tracking can be a useful tool because it provides valuable insight into user behavior and scanning patterns on the page. However, most of us don’t have the time or money to invest in eye tracking. Instead, focus on these crucial takeaways:

  • Use elements like headings and lists to create structure and keep users reading on your page
  • Conduct many usability tests with fewer users to fix mistakes early on
  • Explore different usability testing methods to see which one works best for your project

Usability testing is one of the most important aspects of creating a website. It’s worth your time to invest in testing and implement good design from the beginning, even without eye tracking software.

This Post Has 13 Comments

  1. Hi Audrey! Nice job on explaining fixations and saccade, it was interesting connecting them with the heat maps. The link you provided regarding how eye tracking is analyzed on those maps and how it can clearly show where users looked and the areas of interest that attracted them gave me a better understanding of why it is important to understand eye tracking when it comes to creating a usable and readable site.

    I admit I was a little confused on how the F-shaped pattern worked but your explanation was very thorough and easy to understand. I have definitely been a user that tries to read more efficiently and am not committed to reading every word when I open a site. Knowing about the F-shaped pattern is especially helpful because it can remind site creators to remember the tips you listed on how to combat the pattern, such as cutting unnecessary content and using headings and subheadings. I found this article that is similarly related: https://www.exchangewire.com/blog/2021/09/22/eye-tracking-findings-emphasise-the-importance-of-measuring-attention-in-digital-advertising/
    It talks about how eye tracking results showed one company that their visibility can be increased with more well-designed, high impact ads compared to standard display formats.

    1. Hello Audrey,
      I really enjoyed your post about user eye-tracking, the visuals that you provided were very helpful in demonstrating how the viewers eye moves across the page. I particularly enjoyed the portion of the post that had examples of effective layouts, as well as what makes the layouts effective. I thought this was very informative for what we should be modeling webpages as, or at least understanding what a good webpage looks like. I thought the ‘Is eye tracking worth it?’ could have been earlier in the article to justify the topic before readers loose interest; However I still appreciate the current format since I found the ‘How does eye tracking work’ section interesting enough to consider it as a hook. I thought this article was interesting because it explained a few other ways of tracking eye-movement https://xd.adobe.com/ideas/process/user-research/eye-tracking-and-usability/ . Overall great article and I really enjoyed reading it!

  2. Hi, Audrey!
    I really enjoyed reading your blog post for this week. The visual about the F shape for eye-tracking was really cool. I know I scan websites like that without even realizing. I found the explanation about the different testing methods very beneficial since I believe we have a usability assignment coming up. I think the A/B testing method would be the most beneficial because you could see why users prefer one version over the other. I also thought the advice about testing usability early on was very helpful because then you understand what’s not working earlier on in the project.

    The article that I found went further in-depth on eye tracking and its capabilities and limitations. In your post, you mentioned that eye tracking doesn’t replace other qualitative methods, and my article definitely agrees with that notion. For example, eye tracking cannot tell you what users see with their peripheral vision. My article also used heat maps as good visuals for eye tracking like your post did. I was interested in this topic because I wanted to know why I hadn’t heard much about eye tracking prior to this class. I believe some of the limitations of eye tracking explains why I haven’t discussed it in classes not pertaining to web design.

    https://www.usability.gov/how-to-and-tools/methods/eye-tracking.html

  3. Hi Audrey! I appreciate your extensive explanation of eye-tracking and common scanning patterns and how these concepts can be used to help improve website design. I was interested in the section about alternative scanning patterns. Personally, I don’t understand how the commitment scanning pattern is the best because most users do not take the time to thoroughly read all the content on a webpage. Designing your website to follow the commitment scanning pattern may decrease usability because users have to spend more time finding what they are looking for. Deciding which scanning pattern to model your website towards depends on the target audience and the context in which the user visits the site. I found a great article that discusses all seven scanning patterns and provides tips for better scannability of your website to ensure users can find what they are looking for quickly (https://www.toptal.com/designers/web/ui-design-best-practices). It is a good starting point to design your webpage with these scannability tips and patterns in mind, but performing usability tests will provide real-user feedback on how your webpage can be improved even further.

  4. Hey Audrey. I think you did a great job with summarizing the information. I also am very impressed with your ability to create a conversation with the reader! I love the block headings. I think the color, size, and font used in these blocks was perfect. The way you integrated links was interesting to me. I feel as though they would be better explained rather than just placed under certain words. Explaining the article that is linked will help the reader know if they want to click on that link. I think you kind of mentioned these links with your “Tags” section at the bottom of the blog, although as a reader, I wanted more explanation. Something that may be worth mentioning is the space that is needed for usability testing. This website (https://www.usability.gov/how-to-and-tools/methods/usability-testing.html) mentions that a formal space is not needed for usability testing.

  5. Hi Audrey! I just wanted to start off by saying that I like what you did with the headings in this blog post! It really makes them stand out and keeps the page organized! Something that I enjoyed learning about in your blog was eye tracking! So, I found an article that relates to it and goes even in depth about it. The article (https://www.tobiipro.com/blog/eye-tracking-and-ux-testing/ ) explains the main tips to apply when you use eye tracking. This article goes into depth about the main reasons to be using eye tracking and how you can implement this practice into your own usability testing. I thought this went along well with your eye tracking section of this blog post, and it built upon it in further detail. This is something that I found extremely interesting to read about because I think it’s a strategy that I wouldn’t have thought about, but something that seems to be super useful! Great job on the blog this week!

  6. Hi Audrey! Your post is super insightful and organized beautifully. I think the part about f-shape patterns and alternative styles was really interesting. At first, I was certainly convinced that the F-shape was a good way to do things, probably because it seemed very basic and easy to explain. You did a good job of explaining how it’s not ideal, which I think is pretty interesting. I noticed you talked about guerilla testing. After watching the video in the assigned videos on the class website, I was inclined in learning more. I found this website, https://usabilitygeek.com/guerrilla-usability-testing-how-to/ , and noticed some noteworthy information. The cool thing about this kind of testing is that fact that you can use literally anybody to perform the test. They mentioned that the participants are not required in advance. This makes testing unbiased and can help apply what you know to make anyone and everyone your audience. Anyway, good job on your blog. I’m sure we can all learn a thing or two about your research!

  7. Hi Audrey!
    I thought this post was really interesting. The concept of eye-tracking seems almost sci-fi, but your post reveals how much insight can really be gained from the data this technology provides. When I was looking into the optimized structure of a blog post, I found that these ideas about scanning and informational hierarchy come into play. I especially like how you noted the drawbacks of designing with this F-shaped pattern as a goal. I hadn’t thought of the amount of skimming that must be done to read a page in this way, and I agree with you that it seems to be a drawback. I also really enjoyed how you segway the topic into more effective and accessible forms of testing. Thanks for your post!

  8. Audrey, I really loved the organization of structure and incorporation of certain design choices we’ve discussed in-class and from our readings. Particularly, I really loved your unique heading dividers for each section of your writing (the banners). After reviewing all the uniquely crafted details of your structure and content, I do have a couple of things to note. Please, take them as you will, we are all still learning here! Initially, when following the linked text to the articles, I wasn’t quite sure what I would be going into directly. A little more in-depth elaboration could be incredibly beneficial in this regard. Additionally, my eyesight is pretty bad, so I originally couldn’t see the blue link, “Eye Tracking Thermal” because of the contrast background. This could entirely be the components of the blog, but it’s something that I thought would be crucial in pointing out.
    Overall, your blog really got me thinking about different aspects to usability testing. Your segment about “Alternative Testing Methods” had me inquiring more information, seeing as this week we’re talking about usability testing. Focusing in on the testing methods, “moderated” vs “unmoderated” caught my attention. In this article, “Usability Testing: Moderated vs” Unmoderated” by Nick Babich (https://medium.com/thinking-design/usability-testing-moderated-vs-unmoderated-adbccc37404b), it addresses the pros and cons of each testing process, and I was surprised to discover I found interest in “unmoderated”. In my personal experience, I feel as though when a moderator is over my shoulder while I’m completely a particular task, I always want to present the “right” answer, which leads to bias. In an unmoderated environment where you’re most comfortable, it’s less likely that you’ll present such bias. It’s an interesting contrast to look into, especially as we go forward with our testing process! Overall, great job!

  9. Hi Audrey, I really enjoyed getting to read your blog post! As someone who is starting a small business with a website, it is good to know this type of stuff to make sure I’m letting my audience get all the information they need in a convenient way. I really enjoyed getting to read about the different ways the eye may look at the page when being tracked. There were four you mentioned: F-Pattern, Spotted Pattern, Layer-Cake Pattern, Commitment Pattern. And even though my eyes aren’t being tracked for a study, I can relate to thinking about how do I personally look at a page. I would say I relate closest the the Layer-Cake Pattern because I try to find clues to the specific answer I am looking for. Formatting a website so it is convenient for your audience keeps your audience interested and wanting to come back. Where if they were struggling to find information, they won’t want to come back because they will spend too much time looking for what they need. Sites are used in a “grab and go” concept. Where they get to the site, look at what they need and log off. My only suggestion is in your first two pictures the captions are too dark so they blend in and make it hard to read. Other than that, everything looked great! Nice job!

  10. Hi Audrey!
    I thought your post was super interesting, and it took me back to learning about design and user reading patterns in WRT 200. It was cool to be able to connect everything you said to things I learned in other classes. I particularly liked your use of banner headings and clear images to show examples. The type of heading made it very clear when you switched to another topic, even if the reader was just skimming the content. I like it so much I think I’ll employ them in my own blog post here in a couple of weeks. The images you used were clear, large enough to see and analyze, and you also included citations and caption decsriptions in case we wanted to know more information. One of the problems I see with blogs is that sometimes when you upload an image, it comes through grainy and hard to see. You selected images that were just the opposite and it made understanding the piece so much easier. I looked at an article discussing the pros and cons of remote testing vs. moderated testing (https://journals.sagepub.com/doi/abs/10.1177/154193121005401103) and I found the results to be interesting. The article dives into the fact that while a lot of users prefer unmoderated testing, the results come into question later because of the lack of supervision. I wonder if there’s a way to merge the two so we can have the maximum level of user comfort, but also gaining that important insight as to what’s happening during the testing process.

  11. Hey Audrey! I love the idea of using different scanning patterns for websites. I know you said that the commitment pattern is the best alternative for getting the most content to the reader, but my personal favorite is the layer-cake pattern because I like how the headers are the focus. I appreciate the fact that you also gave some alternative options for testing, like card sorting and guerilla testing. I found this article that gives a detailed account of how to run various usability tests: https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html
    It also gives an example of what a testing session is like, and I thought it was interesting and helpful, much like your post! You did a great job formatting everything and organized each topic quite effectively.

  12. Hi Audrey!
    Before I had taken this class and read your blog specifically, I did not have much of a clue about eye-tracking and how useful it can be when researchers want to know exactly where users spend the most time on the page and what they looked at, for how long. It’s such an interesting and effective tool! More on your blog post – I think the organization, use of pictures, and clarity all throughout your post make for an overall informative and highly readable post. The pictures and visuals you used, especially for the tool of eye-tracking, are all very clear and understandable, and they add a lot of substance to the blog post. Eye-tracking is so interesting that I actually googled it on my own and found this video on YouTube: https://www.youtube.com/watch?time_continue=1&v=lC-Gv_abod8&feature=emb_logo. It’s really informative and easy to understand, just like your post! Great job overall.

Leave a Reply

Close Menu