Applying principles of human visual processing to maximize findability and minimize clutter effects in your windows and web pages.
As the old story goes, the boss gives the developer a lengthy list of features. The developer says, “I don’t have enough time to get them all in this release cycle. Which features are top priority?” “All of them are top priority,” answers the boss. A similar situation often faces the designer of a window or web page: a large number of features and amount of content need to be fit on the same window or page because all are considered very important. The user experiences the result as clutter and the effect is low discoverability and findability: the item the user is looking for is hard to find among all the other items competing for attention. Clutter is the visual equivalent of the user entering a room and everyone shouting his or her name, the result being the user can’t hear the one person she or he is actually looking for.
Limits of Progressive Disclosure
Insulation, layering, and other forms of progressive disclosure, where the user is given control of what items to display, comprise one effective technique to manage clutter. But let me leave that topic for a later post. For now, suffice to say that progressive disclosure has several disadvantages. First of all, progressive disclosure is nothing more than trading the time and work of visually searching a given page for an item with the time and work of managing which items appear. Sometimes that is an effective tradeoff, but many times not. Particularly with web pages and web apps, with their attendant server delays, the time-cost of user-controlled content is sufficiently high that it’s typically better to pack as much as possible on each page. While the advent of broadband connections and AJAX, allowing faster and partial download respectively, opens new possibilities for progressive disclosure, this is counteracted by larger and bulkier web pages with more content and features (some of the latter also made possible by AJAX). Thus, the web is characterized by heavily cluttered pages that can overwhelm the user. Even the Google homepage, once the exemplar of sparse simplicity has become iGoogle, with its display of far more content and features, many, oddly, irrelevant to searching the web.
Furthermore progressive disclosure can backfire. Adding the controls and instructions for the user to manage the content or features itself adds content and features, which need to be represented on the page or window, adding clutter while trying to reduce it. Clearly, progressive disclosure is only effective if net amount of clutter is decreased. There’s little point in providing a link for “optional items” that only displays one dropdown list. Each effective control for progressive disclosure must display multiple items. That means each progressive disclosure control must represent an abstraction of the items it displays. Abstract controls have abstract labeling, often making their purpose less clear. The epitome of this is the “More” or “Advanced” button or link, low-clutter controls that indicate something can be progressively disclose without disclosing a hint of what.
While progressive disclosure can and should be used to control clutter, we also should in any case minimize the clutter on any page so as to minimize the reliance on progressive disclosure and the compromises it requires.
Managing Clutter Through Visual Contrast
The problem of clutter is that it makes items hard for the user to find. Given a case where you must include a large number of diverse items on a single page or window, the design challenge is to make an item findable when embedded in the context of other items. This can be achieved by making the item visually apparent from its surroundings. Two factors determine the degree an item is apparent:
- The item’s size.
- The item’s contrast with its surroundings.
Obviously, large items are more visually apparent than smaller items, so using relatively large font or imagery will improve an item’s findability. Equally obviously, there is a limit how large an item can be. Real estate is precious on a crowded page or window, and large items consume more screen real estate. Also obviously, there’s little to be gained by making all items large. Once most items are sufficient large to be recognizable for the expected use conditions, there is little gained by making them larger even if there is room. For example, for users of typical visual abilities using a web site in a home or office environment, the reading efficiency of text does not increase much as font size is increased beyond 12 point.
Other than size, you can make an item more apparent by visual contrast, which is more complicated. Three basic dimensions make on image visually distinct from the background, dimensions that correspond to low-level processes in the human visual cortex.
- Color, including brightness (luminosity).
- Spatial frequency.
- Orientation.
Color
Nothing makes something standout against its background like color contrast, particularly when the contrast include strong differences in brightness as well as hue. No one would miss the bright yellow Z (a fine, upstanding letter if there ever was one) in the dark context of the image below due to the chromatic and luminous contrast.
Black text on a white or a very pale background is still considered best for readability because of its high color contrast, among other reasons. Assuming the bulk of your page or window features black on white text or symbols (or black on some other pale color), other color differences may be employed to make selected items contrast from the surrounding. Links within this text, such as the one above, stand out in part due to their difference in color from the surrounding text and background.
Color differences in the background can also be used to separate visually different areas of the screen. For example, on the homepage of this site, different background colors are used to separate the text of the most recent posts from the links to other content. Meanwhile, the browser uses yet another background color to help separate the browser’s controls from the web pages.
Perceptual differences in color do not linearly follow difference in RGB values. To precisely assess the differences of two colors, you need to convert RGB values to L u v coordinates. By design, the Euclidean distance between any two points in L u v space is linearly proportional to perceived differences. Bruce Lindbloom provides a convenient calculator for making the conversion between RGB and L u v (along with the underlying CIE equations in case you want to make your own calculator).
As with color-coding, using only hue differences to achieve visual contrast will have limited effectiveness for users with color vision deficiencies. This can be mitigated by ensuring the selection of colors for a page or window differs adequately on the L dimension alone.
Orientation
Orientation represents the visual angles assumed by boundaries between colors in an image. For example, the letter Z includes primarily horizontal and about 30 degree angles while the letter N has primarily vertical and about 150 degree angles, as measured clockwise from vertical (making N the antithesis of Z, and therefore evil). Thus, one can readily distinguish a letter Z from a field of letter Ns.
Differences in average orientation can make items visually contrast against each other almost as much as color. For example, italic text stands out well against normal text because it is lower in the vertical orientations and higher in angled orientations. Serif fonts stand out against san serif in part because the serifs add horizontal orientations. The underlining used in links also adds horizontal orientations to make links contrast more against the surrounding text.
Spatial Frequency
There is evidence that at a basic physiological level, human visual perception involves the decomposition of the visual scene by spatial frequency, essentially performing a Fourier analysis of the visual field. Fine lines and sharp changes in color (including brightness) register as high spatial frequencies in the brain, while thick lines and gradual changes in color (such as found in trendy gradient shading) register as low spatial frequencies. Here’s a high spatial frequency (at a horizontal orientation, in this case):
And a low spatial frequency:
And here’s combined high and low frequencies:
The pattern of spatial frequencies of various orientations and colors constitutes the perception of the shape or pattern of an item. For example, the text on this web page is characterized by large amounts of high spatial frequencies where each letter contrasts from the background “paper,” plus strong horizontal lower spatial frequencies that correspond to the lines of text. In addition to color differences, this makes the text contrast against the header image at the top. Bold text stands out well against normal text because, in addition to being slightly larger, it includes somewhat lower spatial frequencies in the thicker strokes used for the letters, while sharing the high frequencies that define the boundaries between the letter and the background.
Differences in spatial frequency and/or orientation can also be used to create textures to separate visually areas of a page or window. A pattern using relatively low frequencies and an even distribution of all orientations, for example, will contrast well against a pattern using higher frequencies at one predominant orientation, resulting in a holistic image emerging from the context.
Typically textures for computer screens will include spatial frequencies and orientations within the range of most fonts. Thus, when a texture is used as a background for text, the text contrasts poorly from the background, making for difficult findability and reading. For this reason, background textures are discouraged for web pages. However, they may be a viable alternative to color contrast for certain graphics.
Combining Dimensions
Generally sufficient visual contrast can be achieved by differences on any one dimension alone: color, orientation, or spatial frequency. Not surprisingly, contrast is generally increased if items differ redundantly on multiple dimensions. Bold red text will stand out more against normal black text than either normal red text or bold black text.
However, items that differ by a specific conjunction or joint combination of dimension values usually contrast poorly. Bold red text will not visually “jump out” as much from a context of bold black, normal black, and normal red text.
To differentiate an item from all others, it should have a unique value on at least one dimension.
Visual Distinctiveness and Variability
Okay, so to make something stand out from its context, give it a distinct color, orientation, or spatial frequency. You’ve probably already figured that the way to counteract the effects of clutter –the difficulty in finding an item embedded in the context of other items –is to give each item a distinct color, orientation, or spatial frequency. Easy.
Well, there’s always a catch. It turns out that the effects of clutter depend not only on the visual distinctiveness of the target item but on the visual variability of the context items. The greater the context items vary on color, orientation, or spatial frequency, the greater the clutter effects, and the harder it is to find any one item.
Compare finding this target item 
–with that specific color, orientation and weight -in the context of these distracter items:
And now the same target in the context of these distracters:
You probably found it harder to spot the target in the second context than the first. In both contexts, the target is unique on each graphic dimension of color, thickness (spatial frequency), and orientation. On average, the target is as different or more different than the distracters in the second context than the first context. The color differs by the same amount in L u v space for any target-distracter pair in either context. The distracters in the second context have more extreme thicknesses and orientations relative to the target than the first context.
If finding an item were only a matter of the absolute difference between the target and the context you should be able to find the target faster in the second context than the first. But we get the opposite effect. The reason is that the distracters in the second context differ in many different ways. Indeed, while the first context’s distracters in are pretty close to all being the same, many of the distracters in the second context are unique. It’s not the absolute graphic difference between the target and context that determines findability, but the difference relative to the graphic variability of the context.
The significance is that if you make every item highly visually distinct, giving each an extreme value on some dimension, then the overall visual variability of the context increases for whatever item the user is looking for. For a fairly wide range of average distinctiveness among your items, the functional findability does not change. You can’t win.
(For more on the role of context variability in clutter, see Rosenholtz, R., Li, Y., Mansfield, J., Jin, Z. (2005), Feature congestion: A measure of display clutter. SIGCHI 2005, 761-770.)
Nonetheless, it seems to me that certain web pages and apps try solve the problem of clutter by doing this, although not on purpose. I suspect it’s an unintended outcome of iterative testing or design for the unwary designer. Item A is not being seen by users (so says usability testing or hit logs), so the designer makes it red. Now Item B is not being seen, so it becomes bold. Now Item C is lost, so a box is drawn around it. In an iterative tragedy of the commons, solving the findability problem of each item adds to the overall visual variability of the page or window, making other items harder to find. The overall average findability of the items remains unchanged and unacceptable. You’re running on a usability hamster wheel.
When Variability Matters
Too Little
I say “for a fairly wide range of average distinctiveness among your items, the functional clutter effect does not change,” because at the extremes, average distinctiveness will make a difference in how easily your users can find things. If the differences among your items are so low or viewing conditions so poor that the perceived differences are on the edge of psychophysical detection, items are going to harder to find or recognize. One reason text in all caps is harder to read is that it makes all words appear more the same by removing some of the variation in low spatial frequencies that constitute the “word shape.”
We also see something like this in many thick-client desktop apps where there is no graphic variation beyond the letters used in fields and labels. We present users with vast forms with banks of fields to scan and complete, all using the same size, weight, style, and color font. Twenty-five years of GUIs and we’re still laying out forms like we’re working with green-screen character cell displays. Desktop forms could learn a lesson from web forms in using graphics to meaningfully distinguish important items. For example, consider the dreaded Options dialog box with its endless columns of identical looking check boxes, many which are unlikely to be of interest to the vast majority of users.
Options should of course be organized by category, but that does have the downside of very infrequently used options adding clutter for the options the user is more likely looking for. Why don’t we make the more commonly needed options stand out, perhaps by using bold text? This could shorten the search times for the most common items, while keeping the less common items visible.
This is likely better than the progressive disclosure approach of moving all rarely needed items to an “Advanced” tab, and making a user guess if the item she or he happens to be looking for is “advanced” or not.
Too Much
Visual variability in the context can also become so extreme that ability to find or recognize an item degrades even as distinctiveness has increased in pace with variability. This is why typefaces have similarity among the letters. You might think reading would be easier if letters were more clearly distinguished from one another, but it doesn’t work out that way.
Where desktop apps tend to have too little variability, web pages are more likely to error on too much, where every part seems to have its own style and color theme. Take for example the web page of Longs Cycle (click for full size), which achieved Number 6 on Vincent Flander’s 2006 Worst Web Pages.
Perhaps this is a result of the distinctiveness hamster wheel designers may get caught in, where every sale or promotion that is added tries to out-perform the other. The cure is to redesign the whole thing with a “quiet” visual structure, as Andy Rutledge describes it. You may get better user performance by reducing the variability even if it means reducing the distinctiveness of each part.
Perceived Clutter
So extremes in visual variability should be avoided in any case. That still leaves a middle range of variability that does not significantly affect human performance as long as the variability is put to good use. However, while the functional effects of clutter depend on distinctiveness of the target item and variability of the context, the perception of clutter by users depends on the variability alone. Two pages may have an equal balance of item distinctiveness and context variability (and thus about equal item findability), but the page with greater visual variability will strike the user as subjectively more cluttered.
Usually that’s a bad thing. Usually we want our users to feel calm and in control of our web sites and apps. For that purpose, designer should favor a muted, uniform graphic style. However, sometimes you want a cluttered look (but not a cluttered effect) –you want your page to look exciting and full of capability, so sometimes you should ramp up the variability. If done correctly and not too much, it won’t hurt human performance. The key thing is to be aware of subjective impact it will have.
Optimizing Distinctiveness
Trying to fight clutter effects by iteratively increasing visual distinctiveness of items one at a time is example of trying to fight clutter with more clutter, a strategy with, shall we say, a diminished probability of success. Efforts to improve findability by incrementally increasing the visual distinctiveness of the items will at best increase subjective clutter and at worse genuinely degrade overall findability.
Distinctiveness Proportional to Importance
The best you can do is select certain key items or classes of items to be visually distinct. Visual distinction is a precious resource that should not be squandered on unimportant items. All items cannot be top priority. Most will have to play second fiddle to an elite few. These may be the most commonly needed items, or they could be headers for groups of items. Rank your items in importance, and apply graphics to make a visual hierarchy. Top rank items should be easy to find, which requires that bottom rank items be harder to find. And remember that perhaps the best way to make one key item stand out is to reduce the degree the surrounding items stand out –make the context more homogeneous on color, orientation, and spatial frequency.
In general, any variation in graphics should have a purpose, adding meaning to the page. Colors and images should not be present if they don’t code information about the page or window. Graphic variation can be used to mark and differentiate:
- Important content.
- Information on available actions.
- Classes of content or actions.
- Feedback on actions committed.
Coloring and underlining for links is generally a good idea as is using bold or large font for headers, but ordinary text should not arbitrarily vary. It should all have the same color, font, style, and size.
Justify the Variation
More than avoiding gratuitous graphic variation, each graphic variation needs to be worth the information it provides. Any variation in size, color, orientation, or spatial frequency should not just mean something, but provide sufficient meaning for the clutter it contributes. For example, your web page may have four different blocks of content. You could choose four different background colors so each block is distinguished by color. The information each color provides is, “This is a different block of content.” Okay, but is that amount of variation –four different background colors –worth that? Wouldn’t such a minimal message be sufficiently indicated by separating the blocks with borders, or lines, or just white space? It would be different if the colors for the blocks corresponded to certain associations or codes the users know (e.g., blue for police, red for firefighters), but even then, is it worth coloring such large areas of the page? Would coloring the headers for the blocks be better?
Looking at some web pages, one could easily get the impression users are not supposed to notice the content they’ve come to see. Certainly, headers, titles, meaningful blocks of content (e.g., rows in a table) should be visually distinct, but how distinct does it have to be?
Somewhere in the illustration above is the data the user is actually looking for. Do you really need those dark reverse video bands across the page? Headers should stand out from ordinary text, but it shouldn’t in aggregate overwhelm it. In tables, horizontal and vertical rules or alternating shading can help the eye follow a row or column, but do you really need those thick 3-D rules or strong color differences on alternating rows?
The order of headers on a page is often sufficient to represent their ranking. They don’t all have to be graphically different. Table rules don’t really provide much information. Tables need only the faintest of rules if any at all. For small tables, the low spatial frequencies of the text itself provides adequate separation of rows and columns. Let the content stand out from the background.
Many forms for desktop apps have a similar problem with fields. When you’re talking about a simple dialog box with just two or three parameters, you can do okay with heavy (e.g., beveled) borders around the fields and a relatively strong gray versus white contrast of the field to the background. But when it’s a form with dozens for fields, that’s too much graphic variation relative to the field values –which are what’s really important. Try faint “flat” borders –or maybe no borders, while having low or no contrast between the field and the background. The only challenge this presents is distinguishing read-only fields from editable fields.
Reduce Redundancy
You have size, color, orientation, and spatial frequency to make an important item distinct. Pick one. Or if you must, pick two. Yes, redundantly distinguishing items on multiple dimensions makes them easier to perceptually separate, but that is overkill for most cases (assuming your color means differences in brightness as a well as hue). For example, it should not be necessary for your headers to have a different color, size, font, and style. Varying on just style or size is generally sufficient.
While you’re at it, minimize the redundancy of the non-graphic aspects of your page or window. Anything you add to a page or window –anything that contrasts with the background or the surroundings –is another thing adding to the visual variability and therefore the clutter. Avoid placing the same links in multiple locations, such as in the content, in the sidebar menu, in a top menu, at the bottom, and in a dropdown list. Instead, design your page with each link ideally in its single best position. Avoid wordy text, especially instructions or other explanations. Be terse, concise, and useful. Write “Select a report,” not “You can select a report from the dropdown list presented below these instructions which explain that you can select a report, which will be displayed on a new page (the report, not the dropdown list).” Or better, have no instructions. Let the simple presence of the controls (the dropdown list labeled “Reports”) provide the affordance of the actions available to the user.
Duplicate links, explanatory text, redundant graphic distinctiveness, and anything else that adds to the visual variability should only be considered when there is empirical evidence (e.g., usability test results) that it is necessary. And if empirical evidence suggests there is a problem with a design, first pursue non-cluttering solutions (e.g., clearer, not necessarily longer labels).
Overload Items and Graphics
Beyond reducing redundancy, make some of your graphics serve multiple purposes. Branding purposes may require that you have certain specific colors. Don’t use them just for some decorations (e.g., random dividing lines). Use them for your most critical distinguishing needs, perhaps differentiating the menu and links from ordinary content.
Best Uses of Graphic Dimensions
Finally, certain visual dimensions are more appropriate for some kinds of distinguishing than others. Size and spatial frequency, for example, are best to represent rankings. Thus, text size or weight are best for headers and titles. Orientation is perhaps best for visually distinguishing items that are qualitatively different from ordinary items. Italic text, for example, is especially suitable when the need for distinction is relatively mild. Color is likewise good for qualitative differences, especially for making an item jump out when distributed among many other items (e.g., a pushpin on a busy map). Color should only be used when findability is especially important and challenging. That doesn’t necessarily apply to all links (or maybe not any links), but links have a long tradition of being colored, so color must be used for them.
Divisions among blocks of items should use the least variability you can get away with. Preferably, separating white space is used. Faint lines are second best. Boxes or shaded background are least preferred.
Summary Checklist
Problem: Excessive clutter in pages and windows prevents users from finding important content.
Potential Solutions:
- Recognize that only a few high priority items can be visually distinctive.
- Distinguish high priority items on one graphic dimension: color, spatial frequency, or orientation. Size may also be used.
- Use the least amount of graphic variability necessary to distinguish high priority items in order to minimize the perception of clutter.
- Employ any graphic variation to provide meaning to the user. Graphic variation should be proportional the information conveyed. No gratuitous graphics.
- Don’t loose the content in the surrounding graphics such as used for headers, rules, and separators.
- Minimize redundancy in content, controls, and graphic distinctions.
Next Month…
There won’t be a next month, as I take the rest of the summer off. See you in the Fall.