Web Design Audit and Quality Assurance. UX Regression Testing & Its Impact

The rapidly evolving tech industry pushes web designers further with each passing day in their effort to create and maintain a positive user experience throughout their products. Evaluating new feature requests, conducting user research, and designing deliverables are only one part of the process. For a website to deliver true value, it is equally important to work closely with product managers and ensure that design choices align perfectly with business strategies.

This process can lead to incredible designs. But, just like any other digital journey, this one also comes with multiple roadblocks and perils along the way. From design discontinuity and accessibility gaps to UX regression, there are so many things to tend to in order to ensure that a product remains in accordance with the highest standards that you’ve set upon yourself.

In today’s article, our web design agency in Chicago presents web design audit best practices as part of quality assurance tests. In the following lines, we’ll help you identify and resolve any gaps or red flags that may appear on your website to avoid UX regression.

What is a web design audit?

A web design audit is part of the quality assurance testing process that aims to review and evaluate your website from a user experience standpoint. The goal of a web design audit is to ensure that your website meets accessibility, user interface component continuity, and design unity requirements. While performing a web design audit, you will be able to identify hidden gaps and design issues and plan the steps to resolve them. 

Here are some of the usual issues you can uncover through a web design audit:

• Images without alt text for accessibility screen readers
• Font type and size inconsistencies
• Missing navigation links
• Outdated content
• Incorrect component patterns usage
• Color usage that fails to meet accessibility requirements
• A misused layout that clutters or skews various components

A web design audit involves multiple steps and could prove to be an overwhelming task for a single person to conduct due to the sheer size of the process. That’s why an all-encompassing web design audit requires collaboration. Getting all of your team members on the same page is a tried and true way to improve the overall user experience on your website.

When should you perform a web design audit?

You should perform a web design audit as often and regularly as possible. The more you postpone this process, the greater the chance of issues emerging and hindering your website’s performance. Needless to say that in case you allow for these gaps to pile up, it will become more difficult and time-consuming to resolve them in the design process.

What is UX regression?

From better SERP rankings to higher conversion rates, website owners are well aware of the multiple benefits of a great user experience. Alluring and thoughtfully implemented design elements should serve to boost user experience and further elevate your business. However, this is not always the case.

UX regression represents a step back in the quality or usability of a website. This phenomenon, also known as UX backlash, can occur whenever a design diverts from an existing workflow, usually due to a change in technology or design practices. That means that your users are experiencing UX regression to some extent each time you make changes to your website design.

Not even an industry giant like Google is immune to UX regression. Experimenting with their Search toolbar design has shown both progressive and regressive patterns in their user experience. Let’s see how.

Google’s UX shifts along with its UI

In the year 2007, Google introduced universal search. This was an attempt to integrate search results from multiple sources like the web, images, video, news, and maps. A tabbed navigation bar placed in the upper-left corner of Google’s SERP allowed searchers to view results for each of these categories. It remained part of the interface for around two and a half years.

In 2013, Google introduced its app launcher. They did that by updating the user experience design and adding an Apps icon on the right-hand side of the Google bar. This icon opened a drop-top menu filled with Google’s apps. The tabbed navigation bar was placed in the center of the page under Google’s search bar.
However, new design solutions led to less page real estate dedicated to search results, requiring more scrolling. These usability issues caused UX regression, so Google quickly changed the design and went back to a docked app drawer in 2014.

The new pill-shaped toolbar resolved the scrolling issue.

They also introduced a drop-down menu with search suggestions that appear when a user types a query.

Today, Google prioritizes the search results placement, while these trials and errors outline the complexity of making the right design choices while keeping UX regression at a minimum.

What are the consequences of UX regression?

As we can learn from Google’s example, making changes to design as your website evolves can sometimes lead to usability issues. That, in turn, lowers the user experience. Here are some of the most common consequences of UX regression:

• Mental strain can negatively influence users’ perception of your website
• Your users may not understand how your website functions and what it has to offer
• Your users are likely to abandon their task and switch to your competitors

Website design has to allow users to complete a task without any additional steps. That’s why you need to ensure that the interface of your website is integrated in a way that brings together information and functionality. However, due to the complexity of this task, the design can easily diverge from the intended purpose and cause UX regression.

When does UX regression usually happen?

In many cases, UX maturity is closely tied to UX regression. Many companies experience UX regression after making changes to their UX process, usually following executive directives. For example, when a company introduces a new UX team or goes through an agile transformation, the entire UX process usually changes. Adding new team members, especially those that have never done certain UX activities, reduces the team’s overall awareness of those activities and the existing user workflows.

When it comes to the agile development process, members of teams with a low UX maturity level may lack clearly defined roles. In that case, the development team may be responsible for design choices, although they usually don’t possess the necessary design skills.

For example, let’s say you want to implement a new feature on your website. If your development team doesn’t provide a complete solution, each member could implement ideas that may or may not solve the problem at hand. This way, you risk guessing what your users need or not making any changes at all. This kind of process has little to no user validation and can only result in UX regression.

So, in case you overlooked some of the web design best practices or even skipped a few steps, how can you exactly know that the UX on your website has regressed? The best way to find this out is with the help of data provided through regular web design audits.

How to perform a web design audit to avoid UX regression?

By conducting a web design audit, you will be able to assess your website or digital product from multiple perspectives, including:

• Usability heuristics
• Accessibility guidelines
• User interface component continuity
• Adherence to the product’s style guide

Each of these perspectives will help you conduct a UX audit in order to determine to what extent a web page meets the respective area’s best practices. Now, let’s check what these perspectives mean and how to use them when conducting a web design audit.

Usability heuristics

One of the most well-known and widely spread evaluative processes in web design audit is the inclusion of Jack Nielsen’s 10 Usability Heuristics for UI design. It will allow you to assess the UI of your website from a human-centered and UX standpoint. Here is what these usability heuristics include:

• Visibility of system status: Your website design needs to keep your users informed about what is going on at all times. The best way to do this is through appropriate feedback within a reasonable amount of time. By doing so, you can help your users learn the outcome of their previous interactions, making it easier for them to plan their next steps. This sense of predictability instills trust in your brand. Here is how to do that:
  • Clearly communicate the system’s state to your users. Always inform them about any actions you are about to take that may have consequences for them.
  • If you cannot immediately provide feedback, do it as soon as possible.
  • Build trust with your users through open and continuous communication.
• Make a correlation between the system and the real world: Your design should speak the language of your users. That means you should avoid the internal jargon and use words, phrases, and concepts that your users are familiar with. Always follow real-world conventions so your information would feel natural and appear in a logical order.

Your design choices should very much depend on your target audience. Just because an image or an icon seems clear to you and your colleagues, it doesn’t mean that it is clear to your users. It will be much easier for your users to learn and remember how the interface works when the design’s controls follow real-world conventions. This is called natural mapping, and it helps to build intuitive UX. Here are some tips that may help:

• • Make sure that your users understand the meaning without searching for a word’s definition.
  • Don’t assume that your understanding matches that of your users.
  • Conduct user research to uncover the terminology they are familiar with.
• User control and freedom: Sometimes, users perform actions by mistake. That’s why you need to provide a straightforward way for them to abandon the unwanted action. If your users know that they can easily undo an action, they’ll have a sense of freedom and confidence so that they won’t feel stuck and frustrated. Here are some things you could do to provide this sense of freedom:
  • Support Undo and Redo actions.
  • Include a Cancel button so your users can quit the current interaction.
  • Ensure that the exit is clearly labeled and visible.
• Consistency and standards: If you follow platform and industry conventions, your users will never have to wonder whether different words or actions have the same meaning.

Jakob’s Law of Internet User Experience suggests that internet users spend more time using digital products other than yours. This way, they create habits and set expectations. If you don’t provide consistency and force them to learn something new, you’ll increase their cognitive load. The less mental processing power your visitors need to use your website, the easier it is for them to find content and complete tasks. Here is what you can do:

• • Improve learnability by maintaining both internal and external consistency.
  • Maintain consistency within a single product or a family of products (internal consistency).
  • Follow industry conventions (external consistency).
• Error prevention: Should an error occur, it is important to present your users with a message explaining the problem in question. However, the best design is the one that prevents the problem from emerging in the first place.

There are two types of errors:

• Slips
• Mistakes

Slips are unconscious errors, while mistakes are conscious and usually caused by a mismatch between the user’s mental model and the design. Here is how to deal with errors:

• • Prioritize your work by preventing high-cost errors before dealing with minor frustrations.
  • Prevent slips by providing helpful constraints and well-designed defaults.
  • Prevent mistakes by dealing with memory burdens, supporting Undo, and warning your users.
• Recognition rather than recall: If you make elements, actions, and options visible, you’ll help minimize your users’ memory load. People have limited short-term memory, so it is not wise to make them remember information from one part of the UI to another. Instead, make your interface elements either visible at all times or retrievable. Here is how:
  • Let your users recognize the interface info rather than remember (recall) it.
  • Provide help in context instead of a long tutorial.
  • Reduce the amount of information that your users need to remember.
• Flexibility and efficiency of use: Include shortcuts so your experienced users can tailor frequent actions. This way, your design will cater to both inexperienced and experienced users. Allow for flexible processes to be carried out in multiple ways so your users can choose the method that suits them the best. You can consider:
  • Providing accelerators such as keyboard shortcuts or touch gestures.
  • Providing personalization by tailoring content and functionality according to individual users.
  • Allow customization so your users can choose how they want their product to work.
• Aesthetics and minimalist design: Ensure that your UI contains only relevant information. Note that every extra piece of information you add competes with the relevant info and diminishes its visibility. That doesn’t mean that you should use a flat design at all costs. Instead, focus your content and design elements on users’ primary goals. In other words:
  • User interface content and visuals should focus on the essentials.
  • Don’t allow unnecessary elements to shift users’ focus away from the relevant information.
  • Prioritize your content and features to support primary goals.
• Help users recognize, diagnose, and recover from errors: Communicate your error messages in plain language. Also, you should precisely indicate the problem and suggest a solution. It is essential to pair these messages with visual treatments so your users would quickly notice and recognize them. Here is how to tailor your error messages:
  • Use standard error message visuals such as bold, red text.
  • Communicate the problem in a language your users will understand. Don’t use technical jargon.
  • Provide a solution, like a shortcut that instantly resolves the error.
• Help and documentation: The best systems are those that don’t need additional explanation. However, certain documentation is in order to help your users understand how to complete various tasks. Make sure that your help and documentation content is easy to search. Keep it concise, focus on the user’s task, and include concrete steps for them to carry out. In short:
  • Make the help documentation easy to search.
  • Present the documentation in context as soon as the user requires it.
  • List particular steps to be carried out.

Accessibility guidelines

Making your website accessible to people with various physical impairments is one of the crucial components of a web design audit. Multiple WordPress ADA compliance plugins can help you ensure that all people are able to use your design. Also, Google strongly emphasizes accessibility when ranking your website on its search engine results page. When designing with accessibility in mind, we suggest you follow these Web Content Accessibility Guidelines.

User interface component continuity

We’ve already mentioned continuity while we were talking about usability heuristics. However, design teams usually work on a tight schedule with multiple team members collaborating on the same project, so it often happens that UI continuity gets lost along the way. Since this can strongly affect user experience, it would be a good idea to use prototyping tools to create usability tests for user interface component patterns.

Style guide adherence

Creating your own style guide for the user interface would be wise to ensure the UX remains unchanged from page to page. By following this guide, your team members will have an easier time providing the uniform look, feel, and tone on your website or digital product. Furthermore, it can reduce the UX regression effect each time you make additional changes to your website. While making your style guide, think in terms of:

• Typography in UX design
• Iconography
• Layouts and grids
• Color palette
• Components

Web design audit template

Web design audit templates are extremely important since they provide insights and recommendations to your team members. Here are the elements our web design team includes in the web design audit template:

• Issue description: A brief and concise explanation of the issue.
• Source location: The exact place the issue is located.
• Usability heuristic: The usability heuristic which the issue failed to meet.
• Accessibility: Whether or not the issue regards accessibility.
• User impact: To which extent the issue impacts the UX (low, medium, high).
• Design sizing: The amount of the design effort requested for the issue to be corrected (low, medium, high).
• Development sizing: The amount of the development effort requested for the issue to be corrected (low, medium, high).
• Priority: An overall priority assessment based on all of the points above (low, medium, high).

Final thoughts

Once you gather all the metrics and assessments from the perspectives we discussed, you’ll get a clear picture of how crucial conducting quality assurance really is. Besides its primary goal of improving your digital product, it also pushes your collaboration and team chemistry to another level.

Beginnings are challenging, and though the process may seem daunting and overwhelming at first, rest assured that you’ll quickly get the hang of it. And once you do, you’ll know exactly what to look for and where to look for it. We suggest you start by building your web design audit template and go from there. Break the process into smaller chunks, see how many designers you can include, and then go page to page and document your findings. Once you conduct your first web design audit, the others will go much easier.