Visual validation in e-commerce, Part 2: What to validate?

In a previous article, we provided an overview of visual validation in the context of e-commerce - what it is, why it is important and how it is performed (manual vs. automated test tools). In this post we will delve deeper into what can and should be validated on an e-commerce site in order to ensure an error-free visual experience for its users.

 

Recap of visual validation for e-commerce

We have already established the importance of visual validation for online businesses, and also mentioned the benefits of using an automated visual testing tool (easy, fast, reliable, flexible, customizable, optimal use of resources, and much more). 

In response you may wonder, “What exactly should I visually validate on my website?”

To answer this question, let’s think about the customer journey on a modern e-commerce site. While returning users are likely to login and navigate straight to the PLP and PDP pages, first-time customers follow a separate journey where they may want to discover more about a brand and the company. Some first time customers may decide to register before they start purchasing, others may choose to register during the checkout process. Evidently there are quite a number of scenarios that customers go through, and even before a purchase is considered.

 

Focusing on the customer experience

Ideally, the UI of an e-commerce website should be validated based on the possible interactions that a customer can make. At a high level the customer’s journey can be broken down into three main areas:

• Account Registration / Signup
• Navigation
• Checkout and Payment

It could be useful to create a visual validation strategy from this angle, then drilling down to test the UI based on more specific user actions within these three areas of the customer journey.

Note that user actions can be varied and do not only consist of mouse clicks of links. They can also consist of toggle/select actions, scrolls, mouse hovers and text inputs.

To provide some examples without going into all the types of scenarios possible, here are some of the visual aspects that can be validated:

 

Account Registration 

A user is shown a registration page where he or she is able to enter details such as username, password, date of birth, etc. The input is presented correctly to the user and the submission of details leads to a confirmation of a successful registration.

Navigation 

The PDP page displays the product information and price correctly, that is, no erroneous or missing information, element overlap or layout issues. If color options are available, toggling between different color styles will display the correct image.

Checkout 

The user is able to identify and perform click actions on Call-To-Action buttons (add to cart, checkout). Also, he/she is able to enter shipping and payment details, and the input is presented correctly to the user.

However, would it make sense to validate my entire e-commerce site? Or just some parts?

 

Customized visual validation for e-commerce

In theory, it would sound like a great idea to validate every single visual aspect on an e-commerce website. This is certainly possible for most visual testing tools.

Nevertheless, due to the dynamic nature of e-commerce websites, you may wish to customize the visual validation within a page, so that certain visual elements that are fluid in nature are ignored in the validation process. It is therefore essential to have a visual testing tool that provides the capability to ignore certain page elements, and even wait for elements to appear (like a chatbot pop-up).

We now know what can and should be validated. But what kind of visual errors would we see if we choose not to perform visual testing?

 

Examples of visual errors detected through visual validation

We will run through a couple of screenshot examples to explain how visual errors can significantly impact the customer experience on an e-commerce website.

The first example is an issue with a price strikethrough display on a PDP page.

While it may seem like a minor layout concern for some and not directly affecting the ability for the customer to purchase the product, the display error does two things:

• It confuses the end user as to what the actual price of the product is - $72.00 or $180.00.
• It presents a look of an unstable e-commerce site, which can cause a sense of uncertainty or distrust for the end user.

 

This second example shows an issue during the checkout process.

The visual error in the address input display is caused by the actual user input overlapping with the placeholder text (“Example: 97531”), rather than replacing it.

The major consequence of this error is that it disrupts the checkout process. The potential buyer is unable to confirm visually that he has made the correct input of the shipping address, therefore is likely to be deterred from proceeding with the rest of the checkout process.

 

Scoping and prioritizing visual validation

It is important to find the right balance in the scope of your visual testing. A good idea is to establish a scope wide enough to cover everything you need to test in your customer’s shopping journey, but narrow enough so that you’re not capturing visual elements of web pages that would be problematic to include in your test.

It may seem that prioritizing test resources is necessary due to most visual testing tools having significant costs associated with its usage. Therefore it is essential to choose a visual validation tool that is scalable according to the business needs, therefore being cost-effective without sacrificing performance.