Website Usability Testing

Categories
Website usability

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?
  • What types of usability testing should I conduct website?
  • How to do usability testing for a website before it’s built?
  • What to check when testing website usability?
  • 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, improve designs, analyze calls to action, increase conversion rates, and more.

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 to its users. On the other hand, usability testing is the approbation of the product on the target audience or the users who are expected to be interested in the website being launched or the newly created product. Consider two examples: ketchup bottles and paved paths in a park to understand the difference between UI and UX better.

According to the designer’s point of view, 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. This is the UI-design – product that seems right, according to the developer. After that, the UI bottle is given to the end-user, who thinks that the design is absolutely flawed: the bottle is too small, has no flip-lid at the bottom, but instead a seemingly useless dispenser at the top of the bottle. This is usability testing – a practical assessment of the usability of the product.

The ketchup bottle example demonstrating the difference between UI and UX

Разница между UI и UX на примере бутылки с кетчупом.

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 his own 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 is 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 illustrating the difference between UI and UX

Разница между UI и UX на примере пешеходных дорожек.

An audit is a complex check of the website conducted to detect any technical vulnerabilities in it. A website audit will help you determine whether the targeted traffic has been reached if any problems have occurred, and prompt the actions you need 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; hence the traffic drops, low sales, and other ensuing circumstances. A website audit will help you to troubleshoot and timely 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 audit.

Ways to analyze user behaviorWebsite 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). 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, it would be wise to conduct them simultaneously as components of one complex check. Otherwise, each process has little practical value of its own: no one needs a non-functioning website or a working 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.

Why usability testing is important

When the user visits a website for the first time, it takes up to three seconds to evaluate its design. If everything is just fine, the visitor spends the next ten seconds learning the website’s structure, navigation, and content. If no problem arises and everything is clear, 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.

As can be seen from the chart, $1 invested in UX testing brings you $100 in ROI.

1 $ вложенный в вопросы UX-тестирования возвращает обратно 100 $.

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

К чему приводит отсутствие юзабилити-тестов.

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, after the expansion of the marketing budget, the website will get more traffic. The irritating pop-up window will divert the majority of the 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 process of website development much easier and allows one to launch websites two times faster.

UX-тесты упрощают проектирование сайта и позволяют его запускать в два раза быстрее.

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

Юзабилити-тест — это возможность возобновить неудачные стартапы.

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

Losses incurred by online stores due to insufficient usability testing.

Убытки интернет-магазинов из-за отсутствия юзабилити-тестов.

A striking 27% of the 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 to poor UX. Other countries experience similar problems.

How to test website usability: A complete case study

We will analyze the website of one of the e-commerce stores, wesco-shop.us, and provide some recommendations on how to improve 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. But if you are too pressed for time – consider delegating this task to professionals.

Tip #1 Make sure items are categorized properly

Sometimes products listed on a page are of different colors. This makes the page seem messy and distracts the user’s attention. If all products are grouped according to their color, the page will look neat and stylish.
Каталог продукции до проведения юзабилити-аудита.

Here we see a purple clock standing out from the rest of the items listed on the page. For the page to look orderly, replace the purple kitchen clock with a red one. The colors would not matter that much if it weren’t for the stylistics of the website. Since the design concept presupposes that the products should be grouped according to their colors, make sure 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. The client may hire a designer to ensure that the same color shade is used throughout the entire catalog to boost this effect.

Tip #2 A scrolling problem

The inner scrollbar on the page should be deleted. This is because the scrollbar has been designed incorrectly. The faulty code should be edited to get rid of the scrollbar and make the page look better.

Проблема с прокруткой.

In this example, the scrollbar is too thick and placed too far from the right margin. 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. Ironically, by getting rid of the scrollbar, you will make the page more user-friendly.

Совет по редактированию кода.

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 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. So, let’s continue our analysis, hoping that the website owner will tackle this problem.

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 problem, one should adjust the code to restore the original layout of the website.

Ошибка в подвале сайта.

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

Владелец сайта не воспользовался советом и не исправил ошибку в подвале сайта.

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 got 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!

Расположение рубрик до проведения юзабилити-аудита.

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, does not it?

Расположение рубрик после проведения юзабилити-аудита: ошибка центрирования исправлена и блоки стоят ровно.

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.

Расположение поля для комментариев до проведения юзабилити-аудита.

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 is likely to 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 of the same size. If this requirement is not followed, the website will look messy and shoddy. This can result in a lack of customer loyalty, a decrease in sales, and other problems.

Размер изображений до проведения юзабилити-аудита.

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 a link «Powered by YOTPO» – a specific service that aids in customer feedback. However, if the link remains there, it will drive a significant portion of the traffic away from the website. So, obviously, we did not subscribe to that.

Ненужная ссылка, выявленная в процессе юзабилити-аудита.

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

Владелец сайта ссылку не удалил.

In this regard, one may realize that quality UX hinges on great attention to detail, but proper implementation of those details is even more important. But, unfortunately, this 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 tasks of usability testing. Second, usability testing entails a profound research procedure, so it is sensible to undertake it in cases.

If UX-testing is done as a preventive measure, its goals, hypotheses, and tasks revolve around checking whether the website functions adequately and all its elements are displayed correctly. In this case, few changes will be made since it will take only minor adjustments to fix most of the 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 in the course of 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 result 1. 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 that 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. No such information was provided.Low quality content. The content of the website is divided into three sections, namely, ‘Blog,’ ‘Product cards, and ‘News.’
The majority of the ‘Product cards’ lack product descriptions, images, or videos. Instead, there is a list of characteristics that are supposed to advertise the product. The ‘Blog’ section contains very few posts. Besides, each of the articles published in this section abounds in mistakes and is hardly informative to the reader. 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 is different from the one designed originally. . 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 enquiries that have brought the website to Google Top-3. All procedures were carried out properly, and relevant keywords are 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 talks to respondents (the target audience) personally 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 that have occurred and use these reports to enhance the website 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 any 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, the most suitable way to test the ‘poor content’ hypothesis is remote unmoderated testing. At the same time, spotting possible technical issues will be delegated to experts, who will provide an expert review. Needless to say, 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 fairly useless if the recommendations contained in it are not implemented systematically.

Nota Bene

Now you know what usability testing is and what important role it plays for the health of your business. We hope that you will use this service systematically and garner your users’ support.
Feel free to share your thoughts about usability testing in the comments: is it a useful thing to do, or is it a mere marketing trick?

Article by:
CEO Andrew Chornyy

4 replies on “Website Usability Testing”

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

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

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

Leave a Reply

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