Heuristics for absolutely-positioned GUI design - are multiples of 5 a good idea?

Question

Disclaimer: I do not specialize in [desktop] GUI design, but have to do it on occasion. I have seen co-worker's dialogs worse than the once I created, and my major problem with them is that they can be unnecessarily big, and things do not line up.

To be more specific, I mostly do it in .Net Winforms, but occasionally with MFC(C++) as well. My simple heuristic so far is: I try to make the sizes and positions divisible by 10 ... or 5 if I have to. Something like a Label would be an exception, for it knows its own size. I find that things mostly look OK after I am done (of course there are other considerations such as grouping things intelligently, etc.), and I am satisfied because I know that every control has non-random position, and my OCD can now go back to sleep.

Somewhere at work I found a guide from MSFT about ideal spacing between things. Sorry, I do not have a source for it available. It has many rules, such as (for instance) 2 pixels between a button and a border, 3 pixels between two buttons horizontally, 4 pixels vertically, unless ... it is pretty complicated and not practical to remember. Additionally, I simply do not trust that MSFT knew much about GUI design, not until they hired an ex-apple person to help them design the ribbons for Office 2007, etc.

What rules/heuristics do you follow? References to short articles and other links are welcome.

Answer 1

If you want to go the "fixed spacing" way, multibles of 10 are ok. Switching down to multiples of 5 is only necessary when you run out of screen real estate. In one company I'm working for, we use a framework where multiples of 10 are the default setting in the (homegrown) GUI editor. Only in very rare occasions someone has to change that. The resulting forms are not exactly aspirants for the beauty contest, but nobody has complained, either.

Answer 2

Forget about "nice round numbers", you will have to experiment with spacing to get something that looks nice, a fixed multiple just gets in the way.

I'd have to say that MSFT programs do tend to look pretty polished when it comes to such details, so despite your disbelief I would guess that the guide you found is probably pretty competent. Whether the higher level interface is clever or the graphical elements look good are different questions.

Answer 3

One of the things I do is I try to avoid being put in a position where I get to decide where anything goes in the first place. My initial interaction with GUI design was with Tcl/TK, which uses a very clever scheme of building the layout dynamically based on content (this is actually a model roughly reproduced in the CSS box model). A line of text has a predetermined size, a button can guess it's size based on the text it contains, a box can guess its size from the number and size of the buttons it contains, and so on up to the toplevel window.

It does take some adjustment using this technique to make sure that things that should line up, do, but once you've done that, the layout suddenly becomes very fluid. This is especially valuable when internationalizing the UI, since phrases which are longer in another language don't overrun their containers.

Since most things are on the web now, this principle still crudely applies, but CSS more or less expects you to make many subtle choices about how things are spaced. I'll usually start off by building a rough interface with no CSS. Then I'll start integrating any of the design mockups (from photoshop/illustrator/mspaint), and add the needed CSS to get the spacing where it needs to be. "Where it needs to be" mostly means what is easy to read. Nothing trumps readability here.