Analysing the visual complexity of web pages using document structure

Abstract

The perception of the visual complexity of World Wide Web (Web) pages is a topic of significant interest. Previous work has examined the relationship between complexity and various aspects of presentation, including font styles, colours and images, but automatically quantifying this dimension of a web page at the level of the document remains a challenge. In this paper we demonstrate that areas of high complexity can be identified by detecting areas, or ‘chunks’, of a web page high in block-level elements. We report a computational algorithm that captures this metric and places web pages in a sequence that shows an 86% correlation with the sequences generated through user judgements of complexity. The work shows that structural aspects of a web page influence how complex a user perceives it to be, and presents a straightforward means of determining complexity through examining the DOM.

Keywords:

• visual perception
• perceived visual complexity
• pragmatic computational technique
• World Wide Web
• block-level HTML

Acknowledgements

This work was undertaken as part of the ViCRAM project, conducted in the Web Ergonomics Lab in the School of Computer Science at the University of Manchester (UK).

Notes

A Mash-up enables the Web developer to pull in content from different sources and facilitate rudimentary orchestration of that content. In this case, pages are often created which are naturally ‘blocky’.

Most XHTML 1.0 elements permitted within the body are classified as either block-level elements or inline elements. Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line.

Asynchronous JavaScript and XML is a group of interrelated web development methods used on the client-side to create interactive web applications.

Transcoding is the process of transforming the representation of the web page into another format, and is based on reverse engineering and design rediscovery techniques.

Pandir and Knight (2006), however, choose Flash based sites from Macromedia’s ‘Site of the Day’ but give no other rational than that, as to assumptions of visual complexity.

Full methodology and materials are available to allow third parties to confirm our experiments http://wel.cs.manchester.ac.uk/research/vicram/studies/metrics-study and as a technical report (Michailidou and Harper 2006)

http://www.alexa.com/

http://en.wikipedia.org/wiki/Responsive_Web_Design.

Flying Saucer Project website http://code.google.com/p/flying-saucer/ viewed in August 2011.

Indeed, these have already been used as metrics by previous researchers (see §2), their results being widely known.

Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line (examples are divs, headings, iFrames, paragraphs, etc.).

HTML Tidy Library Project website http://tidy.sourceforge.net/ [Accessed August 2011].

Apache Tomcat Project website http://tomcat.apache.org/ viewed in August 2011

Gecko Project website https://developer.mozilla.org/en/gecko viewed in August 2011 – The XHTML rendering engine created by the Mozilla Foundation. Widely used by FireFox and Mozilla.

http://wel.cs.manchester.ac.uk/research/vicram/studies/metrics-study/

Xerces website http://www.apache.org/xerces

Although we match Pandir and Knight’s (2006) 12 participants and exceeded their website sample by 8.