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.

Visual impressions of mobile app interfaces

“…Strong deviations from the standard induce aversion, whereas subtle deviations are seen as novel and interesting [14]. A grid-based structure eases orienting within a visual scene; regularity and repetition contribute to figural goodness [24,12]. Basing a GUI on a grid has become a standard practice and is extensively used in automatic document generation [3].…”

“…Element-based metrics consider standard GUI elements, such as buttons, labels and icons. Harper et al [12] explored the distribution of visual blocks on webpages and predicted webpage ranking by participants with 86% accuracy. Ivory et al [15] described several element-based metrics of webpage quality, including the number of words, font types and sizes, and links per page, the proportion of emphasized, visible and invisible text, number of text colors, and reading complexity.…”

Quantification of interface visual complexity

“…Wu et al [42] operationalized layout complexity as the number of leafs and number of levels of webpage visual block tree, but still did not exploit repetition. Lastly, Harper et al [8] placed top-left corners of webpage elements in an overlay grid, and computed the average number of corners in a grid cell and variation of corner amounts across the grid. They found a Spearman correlation of r = 0.95 for their manual and computational rankings of 20 webpages.…”

Visual diversity and user interface quality

“…Nadkarni et al [31] counted the number of media types (e.g., text, image or audio) used on pages, and then, estimated the variability in these numbers across pages of websites. Harper et al [35] split webpages in 300-pixel square blocks and counted the number of top-left corners of HTML elements falling in each block. This could be seen as a within-page variability measure, but could also be easily transformed in a between-page measure.…”