Give’em Room Folks : The Importance of Open Space In Design

In a previous article on basement.org, I asked why we love rounded corners. I argued that the appeal of rounded corners went beyond the purely aesthetic and into the realm of “intuitive” for us. In this entry, I’d like to talk about another seemingly simple design mechanism that does more than just make interfaces look good: the use of open, empty space.

“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.

15 Comments Give’em Room Folks : The Importance of Open Space In Design

  1. Basement.org

    Spacing Out Netvibes

    I’m a big fan of Netvibes. It’s a highly dynamic portal with all kinds of neat widgets. It’s my home page these days. One gripe I have with it though is the way headlines are cramped together. It’s hard to…

    Reply
  2. Room

    Room

    Large rooms are often named halls , small onesPanic Room Doors and Safe Room Doors Bullet and Intrusion Resistant A room may have any number…

    Reply
  3. Chris

    Hey Rich,
    I know this post is a little stale, but just wanted to give you a minor round of applause for such well put together posts. I don’t consider myself to be an expert in interface design, so these are very beneficial.
    Not to mention I’m a big fan of Sigur Ros as well. Very mellow.
    -Chris Dary

    Reply
  4. Callie

    I like the “We Break Stuff” use of white space, too, but what would make their site even more visually efficient is narrowing of the main type column. The lines of text are too long….

    Reply
  5. Affiliate

    It’s interesting that you brought music into this post, because as I was beginning to read it this is precisely what came to mind. As a musician, there is a saying amongst professionals (that I think Eric Clapton coined) which says that a good song is not “what you put in… but what you leave out.” This is true of music. Good music has space and flexibility. You can spot a good band by how the instruments WORK together, not by how they layer on each other in some loud mismash, but when they each have their own space to breathe and compliment the song and each other.
    The same goes for design. It’s what you leave out that actually makes the design ‘more.’ More everything, actually. Subtlety has long been the real key of art. Young artists like to show off, make things elaborate and grand. Real artists only let the cat out the bag when they really have to… and they understand that the subtle things work better, say more, than just a big mismash of stuff. Great article! I am very grateful for CSS and the design that BLOGS have brought to the web – I hate pages like your example above where there are millions of links, adverts and faces everywhere. I soon navigate away from those pages.
    Some blogs, incidentally, are guilty of the same thing – with a blog roll as long as the constitutional courts laws. Too much choice, again, is just no choice at all. MAC has learnt this lesson, and I think this is one of those things that set them apart. Quality over quantity seems to work better every time.

    Reply
  6. Oyun

    徐家注意到,有許多良好的框架意見和該Web Servlet的框架不應重現。他還表示,他有興趣在那裡申請的工作流程和行動是操縱在運行時。因此,徐家,任務是找到一個模型框架,將管理其資料來源和工作流程,因此,所有他要做的就是寫的行動,並讓框架安排他們,並提供存取資料。然後他找到一個控制器的框架內將補充,這很好。由這樣,在這一框架內,依然能夠Struts的(或條紋,等) 。然後他選擇之一,許多現有的觀點框架。

    Reply
  7. Estetik

    Also, I too am getting the warning that yutaka is along with a few other similar ones about “Group”, “Link”, “Entry”, etc. It doesn’t seem to be breaking anything, just throwing a warning.

    Reply
  8. paul fastsize

    I don’t know, the whole thing seems a little bit overthought to me. There are many designs based on sharp corners that absolutely draw the eye. This is marketing plain and simple.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *