A disorganized closet. A messy bedroom.

Clutter can make a space feel stressful and make it hard to find things.

But it’s not just your mother talking about clutter. We often use the same language to describe digital spaces like websites.

In our UX research practice, we have frequently encountered users and designers criticizing website interfaces for being cluttered and stakeholders who worry about the experiential and business consequences of a cluttered website.

But what exactly does it mean for a website to appear cluttered? Is the Wayfair home page (Figure 1) cluttered?

Figure 1: The Wayfair home page (8/7/2024).

How about the JetBlue home page (Figure 2)?

Figure 2: The JetBlue home page (8/7/2024).

It’s one thing to casually describe something with a word like clutter; it’s another thing to measure it. In this article, we describe our search for a way to quantify the perception of clutter on websites.

The Construct of Clutter

So, what do we mean when we say something is cluttered? Dictionary definitions of clutter tend to equate it with messiness or untidiness. As a transitive verb, the Merriam-Webster definition is “to fill or cover with scattered or disordered things that impede movement or reduce effectiveness” and, as a noun, “a crowded or confused mass or collection.” The Oxford Dictionary’s verb and noun definitions are, respectively, “to crowd (a place or space) with a disorderly assemblage of things” and “a crowded and confused assemblage.”

These definitions do not address two potential components of clutter. One component is the extent to which the disorganized objects are needed but should be better arranged (e.g., tools in a toolbox). The other is the extent to which some objects are unnecessary and should be discarded (e.g., old candy bar wrappers in a toolbox). This distinction is sometimes brought out in definitions of declutter (e.g., “to declutter is to tidy up a mess, especially by getting rid of objects … clean and organize a space”).

Even in this everyday sense, these two components of clutter suggest different decluttering strategies:

• Reorganize needed objects.
• Discard unnecessary objects.

Clutter in User Interface Design

There is a long history of defining and measuring clutter in user interface design, especially for mission-critical applications (e.g., aircraft cockpit displays), drawn from research in disciplines like human factors engineering and perceptual psychology. In most cases, this research focused on objective rather than subjective measurements of clutter.

The Formatting of Alphanumeric Displays

Tom Tullis (1984) published an early review and analysis on how to objectively measure clutter in the monochrome (green screen) alphanumeric displays used in the 1970s and early 1980s. He identified four basic format characteristics:

• Overall density (number of characters displayed divided by total character spaces available)
• Local density (number of filled character spaces near each character)
• Grouping (extent to which items formed well-defined perceptual groups)
• Layout complexity (extent to which the arrangement of items followed a predictable visual scheme)

He explored different ways to objectively measure these characteristics that, along with the reviewed literature, supported several key design recommendations. These recommendations seem surprisingly relevant for modern website design. For example:

• Keep overall density as low as possible while still displaying task-relevant data.
• Use white space to reduce local density.
• Group related items to benefit performance.
• Present data in tables rather than narratives for less complex layouts.

Clutter Analysis Based on Perceptual Psychology

Using an objective approach to the measurement of clutter based on perceptual psychology, Rosenholtz et al. (2007) evaluated three metrics:

• Feature congestion (the difficulty of adding a new item that can draw attention).
• Subband entropy (clutter is related to visual information in a display).
• Edge density (the percentage of pixels on a display that are edge pixels).

They found that these three measures correlated with different empirical measures of search performance (e.g., searching for objects in cluttered maps or on cluttered desks). They also reported that color variability (number of colors and how different they are) affected visual clutter. Design recommendations consistent with this research include:

• Make an object salient by using design features like contrast, color, orientation, and motion.
• Group similar objects together using features like hue, luminance, and size.
• Use some color to improve search performance, but avoid excessive color variability.

Clutter in Advanced Cockpit Displays

In the context of advanced cockpit displays, Kaber et al. (2008) developed a subjective clutter questionnaire. Their participants were four expert test pilots with experience using advanced heads-up displays (HUDs). They rated the clutter of images of a flight approach scenario depicting multiple display conditions. The initial version of the clutter questionnaire contained 14 semantic differential items gleaned from a literature review of display clutter (e.g., sparse/dense, monochromatic/colorful, empty/crowded, ungrouped/grouped). After each trial in the experiment, participants provided a single rating of overall clutter (20-point scale from “low clutter” to “high clutter”) and rated each of the 14 semantic differentials regarding their utility for describing clutter (20-point scale from “low” to “high”). Exploratory factor analysis indicated the 14 items aligned with four components:

• Global density: not salient/salient, sparse/dense, empty/ crowded, low workload/high workload, low attention/ high attention
• Feature similarity: redundant/orthogonal, similar/ dissimilar
• Feature clarity: unsafe/safe, dull/sharp, indiscernible/discernible, monochromatic/colorful
• Dynamic nature: static/dynamic, ungrouped/grouped, monotonous/variable

Literature Review of Definitions and Measurement of Display Clutter

In a review of definitions and measurement of display clutter, Moacdieh and Sarter (2015) wrote, “Despite the widespread agreement on the harmful nature of ‘clutter,’ researchers have yet to reach consensus on a definition and a reliable way of manipulating and measuring the phenomenon.”

Their primary goal was to investigate the literature for definitions and metrics describing clutter on visual search performance. Common definitions include display density (number of entities on a screen), display layout (arrangement, nature, and color of entities), target background/distractor similarity, task irrelevance (both essential and nonessential entities are displayed), and performance/attentional costs. Approaches to measurement include image processing, performance evaluation, eye tracking, and subjective evaluation (perceived clutter).

In the Moacdieh and Sarter (2015) review, most researchers who measured perceived clutter did so with a single rating of overall clutter. A notable exception was the questionnaire developed by Kaber et al. (2008).

Despite the clear value of the Kaber questionnaire in its intended context (professional pilots familiar with aircraft displays and associated technical terminology such as redundant/orthogonal), it does not seem well suited to assessing the perceived clutter of websites.

Perceived Clutter in the Specific Context of Website Design

We now turn to the more familiar domain of website design. The term “clutter” seems to be part of the website design vernacular, evident in online articles that discuss the topic of decluttering websites. For example:

• Crowley (2017) listed three characteristics believed to lead to perceived clutter: too much content on the screen, content not logically organized, and too much visual noise due to imagery and contrasts.
• Hughes (2024) made four recommendations for website designers: carry out some spring cleaning, have a clear linking strategy, improve content and site readability, and use more white space.
• Saxena (2021) advised against having too much text and too many options.

Even though typical user goals and behaviors with websites (e.g., browsing for information, making online purchases) differ from those of pilots using displays to land aircraft, many of these website design recommendations are consistent with the design guidance implied by clutter research in other domains.

Ads and the Perception of Clutter

We conducted a search of the peer-reviewed literature specifically targeting standardized questionnaires for the assessment of perceived website clutter, but there were no relevant results. We did, however, find relevant research in the fields of marketing and advertising regarding the extent to which online ads contribute to the perception of clutter on websites. This is a continuation of lines of research originally conducted on magazines and television (Speck & Elliott, 1997) in which a primary objective metric is the proportion of advertisements in the total space of a medium (Kim & Sundar, 2010).

Using a standardized questionnaire developed for assessing consumer reaction to online ads (specifically, the constructs of perceived intrusiveness, irritation, informativeness, and entertainment value), Edwards et al. (2002) reported that ads perceived as intrusive elicited irritation and ad avoidance. Interruptive ads that occur during an online shopping task have been found to increase primary task time, with early interruptions being more disruptive than later interruptions (Xia & Sudharshan, 2002).

Forced presentation of ads irritates users especially when ads are not skippable, but when ad clutter is high, skippability doesn’t reduce irritation (Senarathna & Wijetunga, 2023). Experimental manipulation of ad location and relevance found that both factors affect the perception of ad clutter (Kim & Sundar, 2010).

Brinson et al. (2018) investigated why consumers install ad blockers, noting that “To discourage the use of ad blockers, publishers and ad industry leaders have been experimenting with a variety of methods to improve users’ experiences—from decluttering websites to developing less intrusive ad formats.” They found concerns about information privacy influence attitudes toward personalized advertising when messages are hyper-targeted based on too many layers of personal data—ads often described as “creepy.”

Based on this research, web design guidelines relevant to advertisements include:

• Reduce perceived ad intrusiveness by increasing ad relevance and value (interesting and entertaining).
• Avoid haphazard presentation of ads regarding location and relevance.
• Time the presentation of online ads to avoid disrupting users’ primary tasks.
• Reduce disruption when placing ads on a website by considering where users probably are in their primary task (preferably at the end of the task).
• Use technologies to make ads relevant to users but avoid overly direct messages based on too much personal data, especially from third parties (i.e., avoid “creepiness”).

In short, website designers face numerous challenges regarding the management of perceived clutter. An effective ad strategy is critical for many websites, and failing to strike an appropriate balance between corporate and user needs can lead to negative impressions of the website and its parent enterprise. Website designers must also deal with more traditional design elements associated with perceived clutter, such as density, white space, logical grouping, layout complexity, and color.

Next Steps

This literature review serves as a starting point in our search for a measurement of perceived clutter. Our next steps, which we will cover in future articles, are to:

• Create an initial clutter questionnaire capable of measuring two hypothesized components of perceived website clutter: content clutter and design clutter.
• Streamline the initial clutter questionnaire by identifying the best items to retain.
• Assess the predictive value of the clutter questionnaire in the SUPR-Q measurement framework.

Summary and Discussion

In this literature review of the construct of clutter, we found:

The everyday conception of clutter includes two components. The perception of clutter can be driven by a disorganized collection of needed objects and/or the presence of unnecessary objects. These components suggest different decluttering strategies—reorganizing needed objects and discarding unnecessary objects.

Research on the measurement of clutter in UI design has mostly focused on objective measurement. Early research on alphanumeric displays explored metrics such as overall density, local density, grouping, and layout complexity. Later research evaluated metrics based on perceptual psychology like feature congestion, subband entropy, and edge density.

No standardized questionnaires are currently available for the measurement of perceived clutter on websites. There is a published questionnaire for subjective clutter in advanced cockpit displays, but its technical items and factors do not seem to be appropriate for assessing consumer websites. A more promising line of research comes from the fields of marketing and advertising regarding consumer reaction (positive and negative) to online advertisements.

Bottom line: This literature review covered past work in the measurement of clutter, both objective and subjective, in the research domains of the presentation of information on displays and the influence of advertisements on user experiences. This review is a first step in the search for a clutter metric for websites.

For more details about this research, see the paper we published in the International Journal of Human-Computer Interaction (Lewis & Sauro, 2024).