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
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
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
- The hero: headline and most prominent image
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.
- 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)
- Card Sorting: Write concepts on cards and have participants sort them into categories
- 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.