Orienteed logo en la cabecera
Go to blog

Visual Validation in e-commerce: An Introduction

by Leon Lau, August 10, 2021

Visual validation is an emerging field in e-commerce innovation that helps businesses deliver a consistent and optimal visual experience to their online customers. Automated visual validation tools, such as Valido, allow you to easily monitor your site's UI, to be notified whenever changes appear, and to take immediate action based on real-time analysis.

What is visual validation?

Visual validation, in simplest terms, is verifying that everything looks correct.

If we wanted to expand the definition for more clarity, it is:

  • Making sure that everything that we want on a website is actually there
  • Making sure that everything we don’t want to be there is not
  • Making sure that the overall look and feel of the website is as expected

In the context of e-commerce, it is a quality assurance activity that is performed to ensure that  the site’s UI appears as intended for the customer, whether he/she is browsing a product listing page or completing the checkout steps for a purchase.

 

Why is visual validation important

In this age of digital commerce, we all know how vital the user experience (UX) is in customer engagement, especially the visual aspect of a website.

Great visuals help to build trust and credibility. It reinforces a brand’s image. It guides users towards actions that are desirable for positive business outcomes. We judge a product or company by seeing their website or product page.

 

So how can visual validation benefit one’s e-commerce?

Part and parcel of running an e-commerce site is performing maintenance and upgrades where deemed necessary. In the agile world of incremental development and regular release cycles, a lot of undesired effects to the UI can occur as a result.

Content not uploaded Broken web formatting Page loading error Unexpected session expiry

 

As you can see in the real-world examples above, a sales opportunity can be lost in so many different ways relating to UI errors. 

  • The user can be discouraged from taking action due to certain product information not being displayed.
  • The user is unable to take action due to a broken call-to-action (CTA) button or a page loading error.
  • The user may be interrupted from completing the payment process due to an unexpected session expiry, causing frustration and cart abandonment.

Visual testing reduces the occurrence of UI errors that negatively impact online sales and the customer experience.

 

How is visual validation performed?

Prior to automated visual testing tools, visual validation was often performed manually by web developers themselves. In recent times, QA teams have started incorporating visual regression testing into their test plans, but only to a limited degree.

With the manual method, testers would manually interact on each page of an e-commerce site and inspect for visual errors. Evidently this is a time-intensive process, not only due to the number of visual elements that need to be scanned, but also because of the different operating systems, browser dimensions, screen orientations and device configurations involved. Manual testing regularly poses a concern of priority and resources for a lot of organizations. 

Nevertheless, we are now seeing an increase in the use of automated tools, which offer speed, repeatability and reliability in execution across a wide range of test scenarios.

 

What are we actually validating?

A number of things!

First, let’s establish the definition that a visual element can refer to an image, text, video, visible space, etc. - basically anything that is intended to be presented to the user.

When we talk about visual testing or visual validation, we are: 

  • Checking that visual elements that belong to a page are visible, and visual elements that do not belong (example: technical error messages) are not visible.
  • Verifying the visual elements on a webpage appears correctly, in terms of its size, color, brightness, contrast, density, texture, weight, shape and position in relation to the user viewport.
  • Making sure that visual elements are not overlapping one another, causing them to be hidden or poorly visible.

It is important to note that visual testing is different from functional testing. For example,a business may not want an out-of-stock message to appear for their products even though the stock calculation is correct from a technical and functional standpoint.

Visual testing tools scan for visual changes and inform the reviewer whether the changes were intentional or bugs, ensuring that errors are not seen or experienced by users. 

This brings us to the point of the key features of a visual validation application:

The ability to execute a variety of tests automatically and in parallel, to monitor and report results in real-time, and to provide analysis and recommended actions to the test reviewer.

 

Summary

In recent years, e-commerce businesses have started giving more importance to visual validation. QA teams have long realized that automated functional testing tools are poorly suited for identifying visual bugs. However, the manual method of visual validation is evidently a tedious and resource-intensive process, with no guarantees of comprehensive test coverage.

Hence automated cloud-based visual testing specific to e-commerce is now gaining popularity, and is likely to establish itself as an essential QA practice for years to come. In future articles we will explore in-depth the application of visual validation in practical business scenarios, along with its challenges.

 

Want to learn more?

Visual Validation with Selenium by Rúnar Sverrisson

A talk about Visual Validation at the 2021 eShow in Barcelona 

Related posts

We use cookies to improve your experience and our services by analyzing your navigation on our website. If you continue to browse, we consider that you accept its use. You can learn more by clicking here:
Cookies Policy
Logotipo de Orienteed

Cookies Policy

A cookie is a small text file that is downloaded to your computer when you access certain web pages. Cookies allow web pages, among other things, to store and retrieve information about the device or browsing habits of a user. Depending on the information retrieved, cookies can be used to recognize the user.
Technical Cookies are essential to provide the service offered and requested by a user, to remember configuration preferences, as well as for security and fraud prevention purposes. The website cannot function properly without these cookies.
Analytical cookies help us analyze the activity of users and the number of visitors on the website. They allow the collection of information on the number of visitors, their origin, the browser used, the duration spent on each page, the impact of ads, etc. These cookies are used exclusively for statistical purposes and do not allow identification of particular individuals.

How to deny or revoke cookie consent

Cookies can be blocked or deleted through the browser settings. The following links detail how to do it in each of the most used browsers.