User Testing Tools and Techniques You Need to Improve Your Site’s UX

Despite the clear connection between UX design and conversion rate, some companies are not currently conducting online user experience testing.

Why are so many companies ignoring the benefits of improving their site’s user experience when it has proven ROI?

One reason is the misconception that usability testing is time-consuming and expensive. Fortunately, nothing is further from the truth. The testing tools and techniques available today can enable you to increase conversion on your site and gain a competitive advantage.

In this post, we will explore how you can integrate user testing into your digital projects while minimizing friction and expenses. Let’s begin at the design stage.

How to Optimize Your Website for UX in the Development Stage

In Software Engineering: A Practitioner's Approach, author Roger Pressman suggests that fixing a problem in the development stage costs ten times as much as fixing it in the design stage.

That provides an enormous incentive to validate that you’re designing for humans (and bots!) before moving into production.

The case is even more compelling once you realize how easy it is to test design. With just a design mockup, you can test its aesthetic appeal, visual hierarchy, and top-level information architecture using three simple tests. These are the:

• five-second test;
• first click test; and
• semantic differential survey.

In addition to being simple by design, these tests can all be conveniently run using one tool like UsabilityHub. UsabilityHub will not only allow you to run a variety of tests — it will also handle the recruitment of participants. That means you can receive results within a few hours.

1. Test visual hierarchy with a five-second test.

As the name implies, a five-second test involves showing users a design concept for five seconds, then asking them to recall what they saw.

The reason we limit the time a user has to view the design is that studies show users only spend a few seconds on a page before deciding whether it has value or not. Also, in an article for UIE, CEO of Perfetti Media Christine Perfetti found that when users had more than five seconds to view a design mockup, they started to assess the page like a designer rather than react to it instinctively.

By paying attention to the elements the users list, and the order in which they list them, you can judge whether your page’s visual hierarchy is effectively pointing users to the most important screen elements first.

For example, if a user takes a long time to mention your call-to-action or fails to recall it at all, then it needs more prominence on the page.

The five-second test is specifically ideal for assessing the visual hierarchy of a web page. To evaluate another crucial website design guideline for UX known as top-level navigation, you will need a first click test.

2. Evaluate top-level navigation with a first click test.

Ideally, a visitor should be able to arrive on your site and navigate it seamlessly, without thinking much about where to click next or how to get from point A to point B. Such navigability can not only impact your user experience, it can also impact your conversion rate.

In one of the most influential studies on usability, Bob Bailey and Cari Wolfson found that if a user got their first click correct, they had an 87% chance of completing their action correctly. However, if they got it wrong, that chance dropped to only 46%.

We can, therefore, assess the quality of our top-level navigation by asking users what they would click on to complete certain key tasks. If they select the correct top-level section, we know they have a significantly higher chance of completing the task correctly.

UsabilityHub allows you to see where users would click when asked to complete specific tasks, as shown in the screencast below.

This simple test is easy to carry out and can avoid the need for restructuring pages later in the build process, or post-launch.

Now that we understand what tests to use to evaluate the visual hierarchy and top-level navigation of a page, let’s look at a semantic differential survey. This survey is ideal for testing the aesthetics of a design approach.

3. Assess the quality of design aesthetic with a semantic survey.

A design should not just be usable; it should also elicit an emotional response in users.

At the beginning of any design project, it’s essential to establish what exactly the design is attempting to convey. Should it appear "friendly" or "professional"? Should it invoke "spaciousness" or "dynamism"? You can then compile these desired keywords into a list and use it as an assessment tool.

You might be wondering: how do you assess if the design succeeds in feeling “friendly” or projecting other abstract concepts?

Because design is subjective, neither the designer or client will be a good judge. The only way to be sure is to ask users, and that is where a semantic differential survey comes into play.

A semantic differential survey presents the design concept to users and asks them to assess the design against each keyword. For example, a question might be: On a scale of 1 to 5, how much do you agree with the statement — “this site feels friendly." You can see a similar question in the mock-up below.

Using a simple survey like this can ascertain whether a design elicits the right feeling in users.If the design rates highly for the desired keywords, then you can be confident in the direction. If it rates poorly, you can correct issues before moving into production.

However, before you take that next step, consider prototyping first.

How to Optimize Your Website for UX in the Prototyping Stage

Building an interactive prototype of your design before committing to a full build helps ensure you make the necessary changes to improve usability before entering production.

A prototype can be as simple or complex as is required for testing. Your prototype, for example, might be as simple as a grayscale wireframe that’s built into a tool like Balsamiq, or as complex as a high fidelity prototype built using tools like Invision or Framer.

Here’s a mock-up I created for an example:

Let’s take a closer look at different ways you can use your prototype to ensure you have the most usable site structure possible.

1. Design your information architecture.

Although top-level navigation is crucial to the user’s first click, the rest of your information architecture matters too. To ensure that it reflects how your users think, you need to establish two things. First, you need to understand what they want to know and do. Second, you need to understand how they mentally organize that information.

You can achieve these two goals through top task analysis and card sorting, respectively.

Top task analysis is a simple technique created by Gerry McGovern. The process involves collecting and documenting all of the potential tasks somebody might want to do on your website alongside all of the information they want to know.

Once you've compiled this list, you can then survey users to establish which "tasks" are most important to them. Below is a mock-up you can base your own top task analysis on.

Getting users to vote on their top tasks helps inform the information architecture.

Typically a small number of "top tasks" emerge, which can inform both the visual hierarchy and the site's information architecture.

Once you have collected your top tasks, you can then use the results as the basis for a closed card sorting exercise. Card sorting asks users to organize these tasks into your top-level sections in a way that makes sense to them. This will enable you to test and make any necessary changes to the rest of your information architecture..

Like the design tests mentioned above, you can do card sorting remotely using a tool like UXOps. In addition to card sorting, UXOps also provides features that allow you to assess the results you receive. For example, it shows you how content maps to your information architecture.

With your initial information architecture in place, you can now build your prototype. That opens up the opportunity for further testing.

2. Test the usability of your prototype.

There was a time when usability testing was time-consuming and expensive. Today, a plethora of digital tools make it easy to run tests remotely.

One tool that is ideally suited to running remote usability testing is Lookback. With Lookback, you can run both facilitated and unfacilitated testing with ease. Enabling video and audio for participants, viewing their screen, creating notes, and sharing recordings are just a few of the features Lookback provides as you can see from the screenshot below.

When time allows it, consider running the testing yourself via Lookback's screen sharing function. This will allow you to ask people what they think while they complete a task and interact with your site in general, which often proves enlightening.

However, if time is pressing, you can also run unfacilitated testing where you share a link, and people complete the task without you watching it live. You don’t have the opportunity to ask questions, but can at least view a recording of the session.

Whether running facilitated or unfacilitated testing, it’s important to note you only need to test five people to find the majority of usability hurdles.

Now that we understand how to incorporate usability testing into the prototype stage, let’s look at how you can continue testing once a site is live.

How to Optimize Your Website for UX in the Post-Launch Stage

Once real users are interacting on your live website, you have access to unprecedented amounts of data on their behaviour. That provides additional opportunities to identify problems with the site and address them.

Below is a graphic I created to illustrate the point.

After launching, you should continue to analyze, prototype, and test improvements.

Typically, that is achieved using a three-step process.

1. Identify Problem Pages

After your site goes live, start monitoring user behavior using Google Analytics or some other analytics software.

Pay particular attention to where on your site users leave. The chances are there might be a problem with these pages.

2. Identify the Specific Problem

Once you have identified the problem page, the next step is to find out what on the page is causing an issue.

One tool that can help is a session recorder like Fullstory or Hotjar (shown below).

Hotjar and other session recorders allow you to watch back user sessions and identify problems with the page. Unlike usability testing, you cannot see or hear the person, but you can see what they do on your site.

If this doesn't help, try running some more remote usability testing on that page. That will almost certainly uncover the issue. Once you know the problem, you can move to step three.

3. Design and Test a Solution

Together your team can formulate ideas for how the problem might be solved. However, to be sure it will not make things worse, you need to test.

Depending on the complexity of the proposed solution, you can adopt one of two approaches.

If the solution is relatively complicated, you can prototype the solution and carry out some usability testing.

If it is merely a matter of changing a few screen elements like text, then A/B testing might be a preferable approach.

Leaving Your Misconceptions about Testing Behind

The idea that usability testing is a luxury that your project cannot afford is simply not true. The tools and techniques available today make testing at every stage of the development cycle possible, without requiring huge investments of time and budget. In fact, in many cases, it can save a project from wasting time debating where a design element should go, or be added, or tweaked without having data to back it up.

Don't believe me? Try it on one project and see for yourself. I promise you will never turn back.

Author Bio: Paul is the UX and CRO specialist and expert @boagworld.