Wednesday, March 25, 2009

Cheap UI Trick: Add Whitespace With Borders

When I'm building a new UI or composing a document to send to an audience, I like simple elements that make a big difference in the final presentation. I thought I'd share a trick that I use to add whitespace to designs when using graphics with wrapping text in Lotus Notes.

If you've not tried it before, first let me point out that you can paste or import an image into a Notes form/document and set the properties of the image so that text can wrap left or right. This is analogous to using floats in CSS on the web.

While this can spice up your formatting quite a bit, in the Notes client the text butts right up against the graphic, so this doesn't look particularity nice. By way of example, the other day, I wanted to send my latest blog post to some internal folks through Notes and I wanted to retain the formatting (as close as possible) to my web entry. Thus, I made use of the text wrap property. This ended up looking like so:

Notice the lack of whitespace around the photos. Here's a close up to show what I mean:

So how do you fix this? Simple really. Most elements have a Border property which can be manipulated. This doesn't necessarily mean you have to have a physical line around your element. A border can be used to emulate padding. If an element has a border, you can also define the space between the inside border and outside border and between the outside border and the elements outside of that. Click the drop down in the border properties box to choose between the border thickness, the inside spacing and outside spacing.

For the purpose of this e-mail, I thought a spacing of 7 looked about right, so my properties box was set accordingly

This quick update produced the following results:

and close up once more

A very subtle effect, but a powerful one. Remember that whitespace is very important for guiding the eye and providing a feeling of space. It's a little thing that people may not be able to articulate if you ask them to point it out, but I guarantee that they'll think the option with good use of whitespace looks better ever ytime. Whether it's really true or not, if it looks better, people will think it is better. When dealing with the UI, often perception is reality. I hope this helps. Cheers!


Bilal Jaffery said...

Great post. From sales perspective, presentation speaks greatly when trying to close out those deals!

Rich Waters said...

Definitely makes things look nicer. I can only hope for the day where we actually have reliable CSS3 support across browsers so you could tack in:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

and get some nice rounded corners for those images.

Tony Palmer said...

Not sure if its a cheap trick...


very effective though.

Auldbreck said...

Nice one Chris. Had this problem in the past - I know what to do next time. :-)

Jamie Magee said...

Very useful, thanks!