The Infosys Labs research blog tracks trends in technology with a focus on applied research in Information and Communication Technology (ICT)

« Analytics in Software Testing | Main

Towards a Consistent and Responsive Web design

Visual Interface is the first interaction a user experiences in a website. Even minor lapses in visual consistency can be picked up without even the user being aware. These influence the bounce rates and user experience hence suffers. Unlike the desktop Web era, it is now imperative to address the emergent demand for a higher quality Web on growing number of devices.

While we realize the immense importance of a responsive and consistent web design in current times, design consistency and compliance testing as part of a web testing portfolio is far from a standard industry practice. Majority of the tools and utilities available for detection of HTML failures are dependent upon image oracles, using which recognition of failures may be straightforward but debugging the code can be tricky. UI/UX i.e. User Interface and Experience testing is thus limited to error-prone and expensive manual processes.

Faults need to be corrected not just reported

Substantial amount of research with varied level of success has been done for detection of HTML faults. However reaching out to the faulty code element for corrections is still a challenge. It is thus prudent to delve into the basic design of a web page, to detect and localize possible UI issues. A holistic approach that uses more reliable methodology involving individual elements of a parsed web page, by comparing their structure and style to find any faults, is recommended.

Research[1] recommends leveraging benefits of Document Object Model or DOM[2] for validation of visual consistency, media sources, HTML markup, hyperlinks and browser compatibility for web applications.

Comparative checking of style and structural attributes of individual DOM elements for a given web page can aid identification of following UX/UI faults:
(1) Visual Inconsistencies i.e. style, text and structure mismatches,
(2) Broken or unreachable hyperlinks,
(3) Invalid image sources and
(4) HTML markup errors and warnings.

While reporting consistency and compliance issues is vital, listing HTML code around the element can be useful for developers to easily identify them in code for corrections.

Additionally, analytics upon the consistency and compliance testing results could reveal a lot about UX health of a web application. For example, a lower score in links validation suggests majority of the hyperlink sources listed on the web page are not reachable or might be broken. Similarly, lower HTML markup score reveals, the code is not following markup and coding standards recommended by W3C. This may hinder the user experience of the page under test, which needs to be corrected immediately.

Lately, UX/UI testing has gained a lot of traction. However, it seems to be limited to usability testing during user-acceptance tests. The need of the hour is to adopt UX testing as a salient part of the Web testing processes while in production and to stand out in the competitive Web world. And yes, with immediate effect!



[2] Programming API for XML and HTML pages that defines the logical tree structure of the document for access and manipulation

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.

Subscribe to this blog's feed

Follow us on