Website Usability Testing: Step-by-Step Guide

Categories
User Experience (UX)

Welcome ?  to our step-by-step guide to website usability testing! ? In this article, we’ll walk you through the tasks and goals of usability testing and provide practical tips for conducting your tests. Usability testing is a crucial process that helps you understand how users interact with your website and identify areas for improvement. By analyzing user behavior on your website using tools like heatmaps and video sessions, you can gain valuable insights and increase your chances of achieving micro or macro conversions. Don’t let poor usability hold you back – let’s dive in and ⚡ get started!

FAQ About Usability Testing

This article will teach you what website usability testing is, what stages it presupposes, and why each website owner must be interested in this practice. We’ll also talk about usability research methods, some effective services, and an example of the usability test report. All this information will help you better understand the process of website usability testing and know when to conduct it on your own and when to engage UX experts.

Frequently asked questions from marketers and UX designers:

  • How to conduct usability testing for a website?
  • What is website usability testing?
  • How to write a heading for usability testing of a website?
  • How do website usability testing on mobile devices?
  • What types of website usability testing should I conduct?
  • How to do usability testing for a website before its redesigned?
  • What to check when testing website usability?
  • What are the common website usability testers?
  • How much can you make with website usability testing?

Plerdy’s tools offer a website heatmap and video session recording to help analyze user behavior. With Plerdy, you can easily test your website’s usability, be usability testing or website UX testing, improve designs, analyze calls to action, increase conversion rates, and more.

Website Usability Testing: Step-by-Step Guide-000

What is Usability Testing?

Usability testing is a complex evaluation of a website based on its ease of use and the efficiency of its technical elements. The ease of use largely depends on its UI design, while its functionality is tested during a website audit. Let’s find out how these processes are interconnected.

UI design entails creating a product prototype or a visual interface that is likely convenient for users. On the other hand, usability testing is the approbation of the product by the target audience or the users who are expected to be interested in the website being launched or the newly created product. To better understand the difference between UI and UX, consider these two examples: ketchup bottles and paved paths in a park.

According to the designer, a ketchup bottle must have the following properties: it should be compact, fit the user’s hand well, look stylish, and have a cap and a dispenser. According to the developer, this is the UI website design – the right product. After that, the UI bottle is given to the end-user, who thinks the design is flawed: the bottle is too small and has no flip-lid at the bottom; instead, it has a seemingly useless dispenser at the top of the bottle. This is usability testing – a practical assessment of the product’s usability.

The ketchup bottle example demonstrates the difference between UI & UX:

Website Usability Testing: Step-by-Step Guide 02

Now let’s study the example of the paved path. An architect has designed a park with paved paths for lazy Sunday walks and surrounded them with a green lawn, with some trees planted here and there. This is the UI design – the architect relied on their vision of user convenience. However, when the project was implemented, it turned out that the park visitors rarely used one section of the pavement and instead walked right over the lawn to cut their way short. This was the usability testing, which showed that the design was not usable enough, and the visitors had to create an additional path for their convenience.

The paved path example illustrates the difference between UI and UX:

Website Usability Testing: Step-by-Step Guide 03

A usability audit is a complex website check to detect technical vulnerabilities. A usability website audit will help you determine whether the targeted traffic has been reached, if any problems have occurred, and prompt the necessary actions to improve the situation. For example, if your website has caught a virus, all search engines will immediately detect it and block the entire website. As a result, it will get filtered as a potentially harmful resource, and some users will be unable to access it. This will lead to drops in traffic and sales and other ensuing circumstances. A website usability audit will help you troubleshoot and promptly address the detected problems.

Here’s a chart listing the possible ways to study user behavior and the steps one may take to conduct a complex website usability audit.

Ways to analyze user behaviorWebsite usability audit components
InterviewsTechnical audit
Online surveysWebsite content audit
QuestionnairesSemantic kernel evaluation
Tree testingLanding page audit
ScorecardsChecking web analytics tools
A/B testingLink audit
Persona BuildingCompetitors analysis
Click testAssessment of the internal optimization quality
Navigation testMarketing audit
5-second testingDevelopment opportunities audit
Usability testingUsability audit

Usability testing is the linking spot between UI design and website audit. In UI design, usability testing allows one to evaluate the convenience and practicality (remember the ketchup bottle and the paved paths examples).

On the other hand, a user audit shows technical vulnerabilities of the website and suggests ways to tackle them to let the UI design play. Since the processes are interconnected, conducting them simultaneously as components of one complex check would be wise. Otherwise, each process has little practical value: no one needs a non-functioning or functional website with an ugly design.

If the website has a convenient design, is appealing to its users (as shown in the UX test), and works properly (according to the usability audit), the chances are high that it will eventually reach its point.

Checklist for Usability Testing

When it comes to website usability testing, there are a lot of factors to consider. But fear not! With the Website Usability Checklist: 210 Points of Testing, you can ensure your website is truly user-friendly. Creating a website can be difficult, but making it usable is a different challenge. It’s like a never-ending game of Jenga; if you tweak one thing, the whole website can collapse. This checklist covers everything from general recommendations for usability to specific elements that affect sales, such as the product page and user registration. Here are just a few of the many points covered in the checklist:

  • Quality marks and certifications
  • Geo-targeting and language options
  • User-friendly design and clear terminology
  • Product filtering and user registration
  • The buying process and additional elements that affect sales
  • Website structure and internal linking
  • Usability analysis of content and the basket in the online store
  • Search functionality on the website

This thorough checklist will ensure that your website is easy to use and gives users the best experience possible. So why wait? Get started on your website usability testing today and improve your website’s performance!

Example Usability Testing Website – animalessalvajes.world

I recently had the opportunity to review the usability of the website animalessalvajes.world. Upon landing on the website, a pop-up appeared immediately, which is not the best practice since users need time to explore and understand the website’s purpose. As expected, most users closed the pop-up without subscribing to the newsletter. To address this, set a delay of at least 10 seconds before showing the pop-up or using a scroll-based trigger.

Another issue I noticed was the duplicated categories in the menu, which can confuse users with bad usability. It’s better to have only one menu, preferably the one in the upper left corner. Finally, the search bar is an essential website element and should be visible and easily accessible. The current search bar design needs improvement to make it more noticeable.

Regarding conversions, the subscription form needs redesigning to make it more attractive and catchy. Additionally, the shop section needs better naming and more promotion to encourage users to visit.

Overall, the website can benefit from some design and usability improvements. For example, with some modifications to the pop-ups, menus, and search bar design, the usability website can be more user-friendly and attract more visitors.

8 Types of Usability Testing Methods

Usability testing is an essential step in the development process of any website or application. However, deciding which approach to take can be challenging with so many different methods available. Before choosing a testing method, you must consider several factors, including your resources, target audience, and research objectives.

There are three broad categories of usability testing: qualitative or quantitative, moderated or unmoderated, and remote or in-person. The eight types of usability testing methods are based on these categories and are outlined below.

  • Moderated vs. Unmoderated Usability Testing: Moderated testing is performed with a trained researcher who introduces the test to participants, answers their queries, and asks follow-up questions. Unmoderated testing, on the other hand, is done without direct supervision. Participants might be in a lab but are more likely in their homes and/or using their devices.
  • Remote vs. In-person Usability Testing: Remote usability tests are done over the internet or by phone. In contrast, in-person testing is done in the physical presence of a UX researcher/moderator. In-person tests provide extra data points since researchers can observe and analyze facial expressions.
  • Explorative vs. Assessment vs. Comparative Usability Testing: Explorative tests are open-ended, assessment research is used to test a user’s satisfaction with a product, and comparative research methods involve asking users which of two solutions they prefer.

The different types of usability testing methods are designed to give answers to specific research questions. Here are some of the most popular usability testing methods:

  • Lab usability testing: takes place inside a specially built usability testing lab and is great for comparison tests.
  • Guerrilla testing: used to test a wide cross-section of people who may have no history with a product.
  • Phone interviews: are economical and help collect more data in a shorter period.
  • Card sorting: a great method to get feedback about layout and navigational structure.
  • Session recordings: a fantastic way to spot major problems with a site’s intended functionality.
  • Online testing tools and platforms include 5-second tests, unmoderated card sorting, and first-click testing.
  • Observation testing: allows researchers to see participants’ body language and facial expressions without interference from a moderator.

Ultimately, the usability testing method you choose will depend on the type of information you want to collect, your budget, and the amount of time you have available. By selecting the appropriate testing method, you can ensure that your website or application is easy to use, intuitive, and functional for your target audience. To help with usability testing, tools such as Plerdy heatmap and session replay can provide valuable insights into how users interact with your website.

Top 10 Usability Testing Tools

Usability testing is essential to ensure your website is user-friendly and easy to navigate. Unfortunately, there are many usability testing tools available in the market. Still, we’ve compiled a list of the top 10 tools to help you make an informed decision.

  1. Plerdy: Offers a CRO & SEO toolkit for analyzing the usability website to achieve maximum conversion. It is the 2nd easiest to use in heatmap tools software.
  2. Contentsquare: This tool moves beyond traditional analytics to provide an unprecedented understanding of the customer experience.
  3. Glassbox: Empowering organizations to create frictionless digital journeys for their customers.
  4. Hotjar: With a 4.3 out of 5 ratings, Hotjar is the 6th easiest to use in heatmap tools software, and the entry-level price is free.
  5. Smartlook: This tool answers the “whys” behind your users’ actions and is optimized usability for quick response.
  6. Mouseflow: Used by more than 210,000 digital marketing clients, Mouseflow offers behavior analytics.
  7. FullStory: A trusted digital experience intelligence platform that combines rich product analytics, full session detail, and collaboration tools to deliver real-time insights that uncover opportunities.
  8. Lucky Orange: With over 375,000 websites, trust its conversion rate optimization tools and usability website.
  9. Quantum Metric: With a 4.7 out of 5 rating, this tool automatically quantifies customer interaction impact.
  10. UXCam: This all-in-one mobile app analytics and usability tool enables businesses to understand their users.

Usability testing is vital in ensuring your website is optimized for user experience. By looking at how people use your website. With data based on heat maps or session replay, you can find potential problems and make your website easier to use. Remember, a poor usability score reduces your chances of getting micro or macro conversions, so investing in the right tools to enhance your website’s usability is essential.

Why Usability Testing Is Important

When a user visits a website for the first time, it takes up to three seconds to evaluate its design and usability. If everything is fine, the visitor spends the next ten seconds learning the website’s structure, navigation, and content. Suppose no problem arises and everything is clear. In that case, the user will most likely study the suggested content and perform the necessary action: subscribe to updates, call the office, buy the offered item or use the service. However, if first-time visitors encounter a problem within the first 15 seconds, they will probably close the page without paying attention to what is offered. If the user decides to stay on the page but gets confused or disappointed by something, the same situation will occur, and the website will miss its point.

The chart shows that $1 invested in UX (usability) testing brings you $100 in ROI.

Website Usability Testing: Step-by-Step Guide 04

To better understand the aim of usability testing, imagine that you have placed a pop-up window encouraging the visitors to provide their phone numbers and get a callback from the manager.

Website Usability Testing: Step-by-Step Guide 05

Nowadays, trillions of dollars circulate in the e-commerce sector, and 35% of this money will be lost due to the lack of proper UX testing. Suppose you decide to advertise your product at the expense of UI audit and UX assessment. In this case, the website will get more traffic after expanding the marketing budget. The irritating pop-up window will divert most visitors to your competitors, who have realized the importance of usability testing and designed convenient websites. Your website will miss its point anyway, while the increased marketing costs will translate into financial losses.

Thus, UX testing helps one to tackle the fundamental issues affecting conversion rates. This is the main reason to conduct timely usability assessments and correct faults in the design of your website.

UX testing makes the website development process much easier and allows one to launch websites two times faster.

Website Usability Testing: Step-by-Step Guide 06

Also, usability testing has several other advantages: it boosts sales, allows for the reanimation of faulty e-startups, and saves time for website developers. Thus, usability testing is a great opportunity to rejuvenate abandoned projects.

Website Usability Testing: Step-by-Step Guide 07

Every year up to $1 trillion is spent on the launch of internet startups. But unfortunately, approximately $150 billion is lost on abandoned projects. The good news is that most of those dying startups can be reanimated by timely usability testing.

Losses incurred by online stores due to insufficient usability testing.

Website Usability Testing: Step-by-Step Guide 08

A striking 27% of online shoppers in the US abandon their orders due to unsatisfactory checkout flow and design. If translated into money terms, American online stores lose $260 billion yearly for poor UX.

Other countries experience similar problems.

How to Test Website Usability: A Complete Case Study

We’ve decided to demonstrate how to do usability testing in practice. We will analyze the website of one of the e-commerce stores, Wesco-shop.us, and provide recommendations for improving it. If you plan to launch a Google Ads campaign, redesign your website, or promote it using SEO, UX testing will be useful. In one of the upcoming sections, we will throw some light on how one can assess the usability of a website on their own. You can find tons of instructional information on various usability testing sites. However, we’ve formulated the key tips for a successful website usability survey below for your convenience. But if you are too pressed for time – consider delegating this task to professionals.

Tip #1 Make sure items are categorized properly

Website Usability Testing: Step-by-Step Guide 09

Sometimes products listed on a page are of different colors. This makes the page seem messy and distracts the user’s attention. The page will look neat and stylish if all products are grouped according to color.

Website Usability Testing: Step-by-Step Guide 10

For example, a purple clock stands out from the other items on the page. For the page to look orderly, replace the purple kitchen clock with a red one. The colors would only matter a little if it weren’t for the stylistics of the usability website. Since the design concept implies that the products should be grouped according to their colors, ensure this condition is observed.

The client has adhered to the recommendation and filled the page with red items only. Now the page looks crisp and well thought out. To boost this effect, the client may hire a usability designer to ensure that the same color shade is used throughout the entire catalog.

Tip #2 A scrolling problem

The inner scrollbar on the page should be deleted. This is because the scrollbar needs to be designed correctly. The faulty code should be edited to eliminate the scrollbar and make the page look better.

Website Usability Testing: Step-by-Step Guide 11

In this example, the scrollbar is too thick and placed too far from the right margin.

Website Usability Testing: Step-by-Step Guide 12

Moreover, its color matches that of the items presented in the catalog. This distracts the viewer’s attention and makes the page difficult to navigate. By removing the scrollbar, you will make the page more user-friendly.

Website Usability Testing: Step-by-Step Guide 13

Our task is to study the code, find the problem, take a screenshot, and highlight the part that needs to be edited. After that, notify the client about the problem with usability and provide the screenshot.

For some reason, the client did not address the scrollbar problem. The thick grey line is still there, preventing the users from studying the catalog. We have no access to the website’s back-end, and thus we cannot edit the code ourselves. Let’s continue our analysis, hoping the website owner will tackle this problem with usability.

Tip #3 A mistake in the footer’s layout

The user can sometimes notice a website footer error when refreshing the landing page: a free field with a search bar appears at the bottom, though not to be there. To fix this usability problem, one should adjust the code to restore the original layout of the website.

Website Usability Testing: Step-by-Step Guide 14

There should be some space at the bottom of the page. Avoid placing elements other than links to social media and payment systems or “Sign Up” and “Back to the top” buttons.

Website Usability Testing: Step-by-Step Guide 15

Unfortunately, the website owner did not stick to our recommendation and decided not to adjust the code. As a result, the grey box still emerges at the bottom of the page from time to time, covering payment system logos. The non-functioning search bar that appears there will irritate most visitors as well.

Tip #4 Make sure the design elements are properly aligned

Three content blocks with categories shifted to the left and did not fit the general page layout. To fix this problem, go to the back end and center them properly. As easy as that!

Website Usability Testing: Step-by-Step Guide 16

Anyway, the client should double-check the rubricator. Even when centered, the three small content blocks look somewhat unnatural. So let’s add a new category, use bigger images, and center all elements again. Looks pretty cool usability.

Website Usability Testing: Step-by-Step Guide 17

The website owner adhered to our suggestions and introduced the necessary changes immediately. Now there are four content blocks placed neatly under the main image. If the store has new product categories in the future, they can be added as separate blocks and placed on top of each other. Such a layout will look attractive and easily navigable.

Tip #5 Size all elements optimally

The comments box should be resized and centered. Right now, it looks too big and inconvenient.

Website Usability Testing: Step-by-Step Guide 18

The website owner partially took our recommendations into account: the comment box got smaller, but it is still fitted to the width of the page. In this case, the user will likely find difficulty writing lengthy comments with a profound description of some problem they may have encountered.

Tip #6 Inadequate image layout

All images from each block should be the same size. The website will look messy and shoddy if this requirement is not followed. This can result in a lack of customer loyalty, decreased sales, and other problems.

Website Usability Testing: Step-by-Step Guide 19

Mark the image that stands out from the rest, show the screenshot to the client and explain how important it is to fix the problem immediately.

Tip #7 Delete unnecessary links

The feedback form features the “Powered by YOTPO” link – a specific service that aids customer feedback. However, if the link remains there, it will drive a significant portion of the traffic away from the website. So, we did not subscribe to that.

Website Usability Testing: Step-by-Step Guide 20

There is an unspoken rule: all elements featured on an online store website should facilitate the customer’s buying experience. Therefore, if something may distract the customer from browsing the products and proceeding to the checkout, it should be concealed or removed. Otherwise, the drop in conversion rates is inevitable.

Website Usability Testing: Step-by-Step Guide 21

In this regard, quality UX hinges on great attention to detail, but properly implementing those details is even more important. But unfortunately, this usability case study demonstrates how many essential details are left unattended.

How To Do Usability Testing

Stage 1

First, it is paramount to formulate the goals, hypotheses, and immediate usability testing tasks. Second, usability testing entails a profound research procedure, so it is sensible to undertake it in cases.

If UX testing is preventive, its goals, hypotheses, and tasks revolve around checking whether the website functions adequately and whether all its elements are displayed correctly. In this case, few changes will be made since it will take only minor adjustments to fix most potentially encountered problems. On the other hand, if the website does not yield the expected results, the goals, hypotheses, and tasks of UX testing should be considered separately. The goal is determined by the problem to be solved during usability testing. Hypotheses aid in finding the possible root cause of the problem, while the tasks help build the strategy to tackle the problem.

The goal of UX testingHypothesesTasks
Detect the root cause of the 50% drop in sales and understand why the well-thought-out promotion strategy has yielded a negative result1. Technical problems.

2. Mistakes in SEO optimization

3. Inadequate advertising

4. Low-quality content

5. Deliberate actions of the competitors

1. Conduct the technical audit and define the possible cause of the malfunction.

2. Double-check the semantic kernel and keywords.

3. Contact the advertiser and double-check the message of the published ads.

4. Analyze the block report and assess the quality of the published articles.

5. Check YouTube channels and forums for negative feedback or criticism.

Stage 2

After the preliminary testing of the formulated hypotheses, we have arrived at the following conclusions: three issues were not detected, one obvious problem has occurred, and one hypothesis remains questionable.

Issues that have not been detectedThe existing problemThe hypothesis needs further testing
Deliberate acts of the competitors. This hypothesis was not proved because the UX-testing tools have allowed for quick analysis of the popular resources for any negative action undertaken by a third party. Unfortunately, no such information was provided.Low-quality content. The website’s content is divided into three sections: ‘ Blog,’ ‘Product cards, ‘ ‘ News.’

Most ‘Product cards’ lack product descriptions, images, or videos. Instead, there is a list of characteristics to advertise the product. The ‘Blog’ section contains very few posts. Besides, each article published in this section abounds in mistakes and could be more informative to the reader. Finally, the ‘News” section provides only some basic information about the company, which is very generic and boring.

Technical issues. On some gadgets, the page download time has increased, and the layout differs from the original one. Apart from that, some videos cannot be played on tablets and smartphones.
Inadequate advertising settings. The advertisers provided their feedback and confirmed that the ads were appropriate.
Incorrect SEO-optimization. SEO professionals have checked the inquiries that have brought the website to Google’s Top-3. All procedures were carried out properly, and relevant keywords were used for website promotion.

Stage 3

Let’s name the most popular methods and see how they apply to our hypotheses.

  1. Corridor testing entails a group of users who take turns to test the product or website functionality. In contrast, the moderator (who organizes the test) records the process via a user test application. When the task is completed – the users’ actions are analyzed, and the results are used for improving the UX.
  2. Remote moderated usability testing – in this case, the moderator personally talks to respondents (the target audience) via Skype, telephone, or any other communication channel and collects the necessary information. Further, the interviews are documented and used for usability improvement.
  3. Remote unmoderated usability testing entails the tests conducted via specific testing applications without the participation of the moderator. When the task is finished, the moderators record the problems and use these reports to enhance the website’s usability.
  4. A/B testing involves creating several versions of the same product, whereby the user is asked to choose the best variant.
  5. Expert review presupposes the engagement of a professional who can spot problems without turning to the target audience. For example, if you have to analyze an online furniture store website, seek advice from an experienced furniture seller who can highlight some nuances that will help improve the website conversion rate.

In our opinion, remote unmoderated testing is the most suitable way to test the ‘poor content’ hypothesis. At the same time, spotting possible technical issues will be delegated to experts, who will provide an expert review. The choice of the testing method largely depends on the hypothesis, so you need to find the most relevant ones for each scenario.

However, it should be noted that the usability test report is only useful if the recommendations are implemented systematically.

Nota Bene

So, there you have it, folks! Website usability testing is a crucial technique that can significantly improve your brand’s metrics by identifying errors and issues quickly. With the integration of GA4 and other advanced tools, this process has become even more efficient and automated. But note that while these tools are handy, there’s no substitute for having a person walk through your website and read and observe their experiences. And that’s where Plerdy comes in. With its free walkthrough and illustration features, you can try Plerdy for free and collect UX data to record experiments and identify issues that would typically go unnoticed. So don’t be afraid to ask for feedback and try new techniques to improve your website’s usability – it could mean the difference between success and failure.

Andrew Chornyy - 001
Article by:
CEO Andrew Chornyy

CEO Plerdy — expert in SEO&CRO with over 14 years of experience.

4 replies on “Website Usability Testing: Step-by-Step Guide”

Замечательно, весьма полезная фраза

A useful article!
Do you want to have the best experience on any website?
Let’s read this writing

Отличная статья, всё подробно, по полочкам. Экспертиза – отличный уровень. И картнки подобраны очень наглядные и понятные + смешные.

Leave a reply for "Website Usability Testing: Step-by-Step Guide"

Your email address will not be published. Required fields are marked *