The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Use Whitespace to Indicate Relationships Between Content Elements

One of the most important tools in a designer's toolbox is whitespace. Whitespace is just that -- it's space between various content pieces, like paragraphs, headings, buttons and so on. This space can be tweaked to achieve different effects -- such as to separate elements apart from each other by increasing the amount of space or group related things together by tightening it.

It's also one of the things that's easy to mess up if you stop paying attention to it. Here's a segment of the comments section taken from Ryan Holiday's blog:

Can you tell which person made which comment? It's pretty much impossible unless you check the very first comment to see if it has a name label above it or not. The names are posted under the comments in this case. I don't particularly like this flow of content, but it doesn't really matter -- what's important is that we can make this comments section much more readable by tweaking the whitespace between each comment. Here's my redesigned version:

While it's not perfect, it's definitely an improvement. By increasing the space between each comment we've separated them apart -- each comment is a separate piece of content now. I've kept the same space between the name label and the comment text to keep those two things together. Both the text and the name are part of the same comment.

Here's an example from the WordPress admin panel. This is a portion of the sidebar you see when writing new content in WordPress:

It looks pretty good. What's bothering me is the distance between the heading and the content to which it relates to. Look at how far away the word "Shortcuts" is from the text below it. Now look at the distance between it and the links above. The heading is closer to the stuff above it than to the content it's meant to be tied to.

The horizontal line is to blame here, which I don't think adds very much value. Here's my version with the space tightened between the elements:

I've flipped the horizontal divider line above the heading -- it now separates the heading and its content from other content above it. More important, I've decreased the distance between the heading and its content, clearly showing the relationship between those two elements.

Clearly linking together various related bits of content on your page is very important. Your visitors are impatient -- they scan pages. People don't read everything and they don't look at your interface for very long either, so it must be clear at a glance which bits are tied to each other are what bits are separate. Using whitespace to do this is the easiest way to manage these relationships.

Have any examples or thoughts to share? Please leave a comment.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: