How is a cluttered layout quantified?

Question

In the comments of a different question, I asserted that Visual Studio has a "cluttered" layout. A different user disagreed with my assertion, and it made me curious as to how to quantify a cluttered layout.

What is it that makes google.com, less cluttered than yahoo.com (reference images below)? More importantly, how can I measure this so that they can be meaningfully compared?

My instinct is to compare the "functional area" to the total interface area as a ratio, but I'm not even sure how I'd define "functional area". Is there any precedent for a measure of "cluttered-ness"?

Answer 1

In Edward Tufte's brilliant Envisioning Information (Graphic Press, 1990) he states the following, in regards to clutter, in the opening paragraphs of Chapter 3 Layer and Separation:

Confusion and clutter are failures of design, not attributes of information. And so the point is to find design strategies that reveal detail and complexity - rather than to fault the data for an excess of complication. Or, worse, to fault viewers for a lack of understanding. Amongst the most powerful devices for reducing noise and enriching the content of displays is the technique of layering and separation, visually stratifying various aspects of data.

Effective layering of information is often difficult; for every excellent performance, a hundred clunky spectacles arise. An omnipresent, yet subtle, design issue is involved : the various elements collected together on flatland interact, creating non-information patterns and texture simply through their combined presence. Joseph Albers described this visual effect as 1 + 1 = 3 or more, when two elements show themselves along with assorted incidental by-products of their partnership - occasionally a basis for pleasing aesthetics but always a danger to data exhibits^[1]. Such patterns become dynamically obtrusive when our displays leave the relative consistency of paper and move to the changing video flatland of computer terminals. There, all sorts of unplanned and lushly cluttered interacting combinations turn up, with changing layers of information arrayed in miscellaneous windows surrounded by a frame of system commands and other computer administrative debris.

^{[1] Josef Albers, "One Plus One Equals Three or More: Factual Facts and Actual Facts," in Albers, Search Versus Re-Search (Hatford, 1969), pp 17-18.}

You'll have to excuse the huge dump of text, but it implies some way of quantifying clutter in as much as identifying the consequences of clutter. Intuitively we might think that the problem that clutter creates is confusion. Edward and Josef are implying that a greater problem is when clutter unintentionally creates unwanted messages.

Design can, inadvertently, tell lies.

Back to your examples though, perhaps identifying unintended relationships between cluttered elements might be a way to demonstrate that one design is more likely to unintentionally deceive the user, and in turn undermine the intentions of the business owner.

Answer 2

The disagreement between you and the user is probably due to different definitions of clutter. Characterizing and quantifying clutter first depends on the meaning you choose.

Information Density

Information density is simply the amount of information items per square unit of area on the screen (e.g., controls, words, sentences, icons, pictures, or combinations thereof). By this definition and measure, clearly Yahoo is more cluttered than Google.

There is a line of research that attempted understand the effects of clutter as measured this way on user performance, going back to the days of green-screen character-cell UIs. Not surprisingly, the more stuff you cram on the screen, the harder it is to find a specific item of information. Researchers have also held the total amount of information per page constant but varied the space between the items, thus reducing density alone. This does not seem to consistently affect search time. Here’re some recent examples:

Lingberg T (2003). Effects of Information Density and Size on the Perception of Graphics in User Interfaces. Masters thesis at Helsinki University of Technology.

Weller, D (2004) The Effects of Contrast and Density on Visual Web Search. Wichita State University.

Applying information density (or simply total information quantity) to design decisions is tricky because the alternative to high information per page is to spread the information over more pages, so now you have to weigh search-time-per-page against navigation time. It’s also complicated be the fact that search time per page depends on how well organized the information is, which is our second definition of clutter.

Information Organization

Information organization is the degree related information items are next to each other. This can mitigate the effects of high information density on search time because a user only has to look at one item in each region of the page. If that item isn’t close to what the user is looking for, then neither are any of the other items around it, and the user doesn’t even have to look at them.

The importance of organization has been shown in various studies comparing randomly organized menus with semantically organized menus (you can think of a web page as an enormous menu of links). For example:

McDonald JE, Stone JD, Leibelt LS, & Karat J (1982). Evaluating a Method for Structuring the User-System Interface, Proceedings of the 26th Annual Meeting of the Human Factors Society, p551-555

Again, no shocker, semantically organized menus outperform random menus.

From this perspective, both Google and Yahoo have low clutter, being well organized. I don’t know of any quantitative measure of information organization, but I suppose one measure would be to run cluster analysis or multi-dimensional scaling on card-sort results for all the information, then correlate the statistical distances between each pair of items with the physical distance between each pair on the page. That would make a good master’s thesis, if it hasn’t been done already. However, it fails to account for the effects of visual organization, the next definition of clutter.

Visual Organization

Visual organization is the degree that related information appears to go together. This is primarily accomplished by applying the rules of Gestalt. Those includes separating related information from other information with white space (which confounds visual organization with information organization), but it also can be accomplished by such graphic techniques as enclosing the information in a box or using the same font or color for the related information. The Weller study cited above showed the importance of visual organization.

Glancing casually at the Google and Yahoo pages, they both appear to have decent visual organization, and therefore low clutter by that definition. Unfortunately, I don’t know of any quantitative measures of the degree visual information presentation forms “good” gestalts.

Visual Variability

Perhaps a more promising approach to measuring clutter is to define it as visual variability, which is the degree colors and shades change irregularly over the page, regardless of the amount of information in those colors and shades. Measuring clutter this way involves applying models of human visual perception, which analyzes the spatial frequencies in the page. For details, see:

Rosenholtz R, Li Y, Mansfield J, & Jin Z (2005), Feature congestion: A measure of display clutter. SIGCHI 2005, p761-770

This definition of clutter seems to accurately capture the perception of clutter one gets when first looking at a page. The Yahoo page, for example, has more graphic variability (e.g., changes in colors per square inch) than Google, and thus looks more cluttered. However, I expect graphic variability is only partially related to visual search. For example, if we re-made the Yahoo page to use all the same type and size of font, all colored gray, and all evenly distributed over the page, it would look, at first glance, uncluttered (the way a page in a book looks uncluttered). However, by removing all the visual organization, I expect you made visual search harder.

Visual Salience

Personally, I decided to concern myself with the impact of clutter, rather than clutter per se. If the problem with clutter is that it increases visual search, then what makes visual search difficult? Among the factors is the degree the target information is visually similar from its context. The target will be hard to find if it’s surrounded by a lot of similar-looking imagery –that’s the clutter effect, or, more generally, the poor contrast effect. A means of measuring this are in:

Zuschlag MK (2004). Quantification of Visual Clutter Using a Computational Model of Human Perception: an Application for Head-Up Displays. Human Performance Situation Awareness and Automation II Conference, Daytona Beach, FL (Mar. 22-25).

This measure does not take into account other factors that influence visual search time, such as visual variability and organization, so it won’t tell you the whole story. For example, see:

Lohenz MC, Trafton JG, Beck MR, Gendron ML (2009). A Model of Clutter for Complex, Multivariate Geospatial Displays. Human Factors, 51(1), p90-101.

Bottomline

The bottom line is clutter is complicated, and we’ve yet to develop a single measure for it. But even if we do put a number on it, what does it mean? “Clutter” sounds negative, implying the real definition of clutter is “stuff on the screen I don’t care about.” Perhaps the disagreement between you and your user over the relative clutter of VS has more to do with what you each find useful than how much is in the window.

However, when using any of the above definitions and measures, is more clutter necessarily worse that less clutter? Sometimes the user’s task requires you display a lot of information in a small space. Sometimes reality is disorganized and it’s important that users understand that (e.g., in some data visualizations).

The best we have now are guidelines for balancing breadth with depth, following the rules for good layout and Gestalt, and balancing the graphic distinctiveness of your information with their importance.

Answer 3

Tufte is, as @Corin quoted, the law on visual information, and is worth reading for the inportant concepts of how information - not pictures, elements or design items - is presented to a user. The core is to look at the number of elements that seek attention. The Yahoo example has many items that seek attention, whereas Google has fewer.

There is also the interference from adjacent items - in Yahoo, the core items that you need to focus on are surrounded by other items that distract you. In Google, the most important area is surrounded by white.

And, incidentaly, I think VS is cluttered too. There is too much vying for my attention sometimes. I don't want to close stuff, because it is needed, but I would like some things to be more discrete, or easier to manage.

Answer 4

An interesting parallel to your question is found in clutter metrics for automatic target recognition (ATR).

I cannot provide you direct access to the research data, but there are plenty of papers available on the subject if you're so inclined.

The problem of calculating an effective contrast for diffused targets in visual scenery is addressed. The effect of local variations of intensity in the vicinity of the target is modeled by considering the distribution of the intensity of the edges. ^[1]

Or...

Both edge-based and textural-based metrics can help us to understand the effect of clutter in images on human target acquisition. By studying the actual fixation points of the observers, we can determine which features distract or confuse an observer in his attempt to acquire the true target. ^[2]

While this data does not answer your question directly, I do believe it might point you in an inspired direction.

^[1] http://ieeexplore.ieee.org/xpl/login.jsp?reload=true&tp=&arnumber=250408

^[2] http://www.sciencedirect.com/science/article/pii/1350449595001328

Answer 5

Ultimately, "clutter" is a subjective term.

There have been many good, recent attempts at quantifying clutter, as others have mentioned. Unfortunately--(correct me if I'm wrong)--none have produced an algorithm that can be used by a practitioner with no budget for user research.

Fortunately, we have several older methods we can use.

KLM-GOMS (Keystroke-level model/Goals, Operators, Methods, and Selection rule) is a great way to measure how complex an interface is and identify unnecessary steps. The method provides task times for pointing (1.1 seconds), pressing a mouse button (0.1 seconds), moving a hand from the keyboard to the mouse (0.4 seconds), etc. All you do is add up the times. You can compare the time with a different interface to see which one is faster/has less steps. Read more about KLM-GOMS on Wikipedia.

Fitt's Law, Hick's Law, and interface efficiency are other ways to tell if one interface is better than another.

Aza Raskin posted a good description of interface effiency.