BASEMENT.ORG

"Dirty" Interfaces

This is a snapshot of a typical "newspaper" destination on the web. It's the home page for The Economic Times. Notice how the content of the page is crammed together. There is very little "open area." I'm sure the designers were given a mandate to display links to all sorts of resources. Nonetheless, the viewer is left to wade through a lot of visual data to make sense of what's going on.

When we land on a page like this, we're not really "reading" just yet. All these snippets of text and links are really a collection of options presented to a user. They can make any number of choices here. Before a user can start making such a decision, he has to first break up all of that data into digestible pieces. Studies have shown that we don't scan such pages in any predictable way. Instead, we sort of zig-zag around. We delineate this blob of information into chunks that we can take in, think about and ultimately act upon. It's sort of like noise-reduction for information. We first reduce the noise and then we listen.

As information and interaction designers, we are armed with a toolset that can help users understand the information before them. The more complex the set of information, the more work we have to do. Without much thinking, designers provide visual cues of what is related to what by a process I like to call delineation. We box things. We color things. We title things. Through delineation, we can deliver information with less noise.

One of the most powerful means of delineation is the use of open, empty space. By pushing less semantically-relevant information away we reduce the potential for cognitive load that can arise when less relevant information is placed too close together. In other words, we're handing the user a greater level of context to work within.

The blogging explosion and the advent of CSS brought with it a new design aesthetic that introduced an emphasis on the use of open space. One of my favorite sites is We Break Stuff, not only for its content but its visual appeal. Kubrick, the now nearly infamous default template for the Wordpress blogging platform, makes excellent use of space to convey a simple elegance. While the Economic Times barrages your field of vision with all sorts of "information pollution" We Break Stuff is a breath of fresh air. One of the most gratifying comments I can receive from a user is how "clean" an interface is. For me, a user is telling me that they didn't have to deal with a lot of clutter to understand it. They didn't have to work as hard.

Less Is Not Only More, Its Actually Better

A few months ago, I was at a Sigur Ros concert here in New York City. During one of their songs, the music just stopped and there was nothing but dead silence for at least 30 seconds. The crowd was perfectly silent during this pause. And then, finally, the music started up again (Kottke was actually at the same show and blogged about it). At first, it felt a bit self-absorbed and trite, but when the music returned, it had a new emphasis. It stood out.

Beyond reducing cognitive overhead, open space can convey a captivating, often times dramatic message. A bit of information, often times a title or brand name, that is placed in a drastically open space calls upon viewers to stop and pay attention. Used well, it can exude confidence and an understated power. One of my old law school professors often lectured us about speaking as slowly as possible. "When you hold onto your words, people wait for them." The Economic Times is the visual equivalent of a rambling, anxious speaker. Sites like We Break Stuff and the recently redesigned A List Apart for example, convey an unassuming confidence. You can find many examples of simple, powerful designs on site galleries like Webcreme and CSS Beauty.

Any designer would appreciate the ability to deliver a simple design while simultaneously delivering an emotionally powerful message. Open, empty space is one of those rare tools in a designer's arsenal that can do both.

This article and the previous article on rounded corners are based upon a design methodology called Information Objects. A white paper explaining Information Objects is available in PDF format.