Thursday, January 04, 2007

SnTT: Sometimes, It's About What's Not There

Well...it's the first Thursday of the new year, so what better way to kick it off than a show and tell post. Lotusphere always seems to energize people, so I'm looking forward to lots of great SnTT posts from fellow bloggers within the next few weeks.

Today, I'd like to address a topic that is fairly nebulous and certainly open to interpretation by the designer, but one that is very important in user interface development.

Have you ever seen a page or form in a Notes/web application that looked pretty good, but you could tell that something was off? Maybe you couldn't say exactly what, but you might have thought to yourself that, "it just doesn't look quite right". If you've encountered this (or perhaps find this in your own designs), then you've experienced the powerful effect that whitespace can have in an application UI. Whitespace (also referred to as negative space), is defined as the parts of a page that are absent of any content. What's really important about this is that whitespace isn't just blank space, but space that the designer purposefully left empty to provide an appealing and usable application interface.

In general, whitespace in UI design is used to:

*Logically separate content areas
*Provide margins and padding
*Aid in reducing strain on the eyes when reading text on the screen
*Help guide the user through the page's layout via subtle visual cues

In simple terms, whitespace can be thought of as the part of the design that helps frame the content and anchor the various elements on the page. Thoughtful use of whitespace can make a good design great, while poor use of whitespace can just make the page look empty or off balance. Whitespace is very important in defining a page's "flow", guiding the user's eye around the page, almost as if there was a dotted line trail saying, "follow me this way--->". As developers, there is often so much we need to fit into our designs...action buttons, fields, text containers, photos, etc. Our general tendency is to want to cram as much as possible into the available screen real estate. This is a bad idea, however, since it usually leads to visual overload for the user. The end result is that their productivity while using your application is diminished. Ever hear the saying that it's the notes that a musician doesn't play that is the true music (the exact quote...attributed to Claude Debussy is "Music is the space between the notes.")? Basically, that's what whitespace is to UI design.

First, lets look at a very simple example...some text within a box.



This is about as simple an example as we could get, yet it is extremely effective in demonstrating the power of whitespace. If you're like most people, just looking at the first box puts a strain on your eyes. This is because you are trying to process where the text begins in relationship to the boundary of the box. In addition, since the text runs up against the border, at every line beginning and ending point, it's like your eye is hitting a brick wall. In the second example, whitespace has been added to pad the text on all sides. This very simple change has made the text far more pleasant to read. You can just flow through the entire block of text very smoothly.

My blog design (which is basically hacked together from a blogger template...I'll update this someday I swear! :-) actually shows poor use of whitespace over on the right hand side of the page. The content, such as my photo, RSS feed, etc., butts right up against the edge of the column. Putting some whitespace in there would enhance the design. Here's a before and after mocked up with a graphics editor. The effect is subtle but effective.


Let's take a look at some more examples I've created. Two images are shown...the original and then one I've fixed up (click the picture to view it full size). Pick which one looks best to you in each set. See if you can identify the reason why one design stands out over the other.



OR


This example shows a personal document database I use to store good articles, blog entries, etc. that I come across. In the first screenshot, the design uses a standard view in the right-hand pane. Since the content extends beyond a single page, one problem I see is that the scroll bars make an ugly, off balancing border around my content. What would look much better is to have some simple whitespace (padding) around this element. With an easy design change (using an embedded view on a page), we get the second example, which has a much better flow. [ Yes, Nathan...I know...I'm going against Fitt's Law regarding the scroll bars ;-) but it looks better...especially with the thin scrollbars of the embedded view. ]

Even more readily apparent is the use of whitespace in the design of a Notes form. Take a look at these two snippets:



OR


This is from the Application Activity Tracking app that I have on OpenNTF. The first shows a dashboard screen that is all crammed together, something I see all too frequently in Notes databases. Notice how it is not readily apparent where sections begin and end. If you contrast that with the second screenshot, you'll see that adding a little whitespace around each bordered element makes them appear as discrete containers. Your eye naturally figures out and signals to your brain that each of these boxes actually represent something different. Again, a small change, but one that helps a great deal.

Here's one more...a form with a bunch of fields.



OR


In the first screen, there's lots of misuse of white space. First, there are many places where it's just absent (similar to the other examples) and makes the form look really crowded. Then, there are a couple examples of passive whitespace, which is also something you should try to avoid. Passive whitespace is whitespace that was not intentionally created by the developer. Rather, it's just space that is there due to the way the form is laid out. It's not really very extreme in this example, but it gives the sensation that something is missing. Usually, playing with the alignment and sizing of your layout can correct passive whitespace problems pretty easily.

[ Bonus points go to those of you that realized there's a more egregious error than whitespace on the first form...improper alignment! Those fields being misaligned creates a great sense of imbalance on the form (I'll talk about this more in another post). ]

So there you have it...a relatively simple overview of whitespace and it's use in design. As with much UI stuff, it is really just "advanced common sense". Readers who mostly like to sling code are probably rolling their eyes right now, but believe me, this stuff is important. I'm far from a great visual designer, but I endeavour to improve my skills with each assignment I have. Hopefully, as I try to introduce the basics of these concepts, you'll find some value in trying these techniques yourself. As always, I'd love to help you with any questions you might have. Feel free to leave a comment or drop me a line (chris@interfacematters.com).

Cheers!

3 comments:

Nathan T. Freeman said...

Nice examples. The importance of this stuff is one of the reasons I'm doing so many code-examples in the session. I really want to highlight for our audience HOW to get those whitespace & alignment effects. A lot of the methods are non-obvious. Pixel-level border controls make this stuff ultra-flexible.

Lottie said...

I totally understand where you're coming from and like Nathan said, good examples.
I did UID for my MSc a few years ago and maybe I've been with the wrong crowd of developers, but not much thought goes into the aesthetics, perception & memory et al of Notes/Domino applications. Someone even turned round to me and said - that's not important, we need to get the functionality done first.....So which comes first the UI or the dev stuff (akin to chicken and egg)

It's nice and refreshing to see someone talking about HCI stuff from a Notes/Domino POV.

:o)

Chris Blatnick said...

@Lottie: Thanks! It's really nice to know that people are reading about this stuff too! :-)