Top tips for designing GUIs? [closed]

Question

A while back I read (before I lost it) a great book called GUI Bloopers which was full of examples of bad GUI design but also full of useful tidbits like Don't call something a Dialog one minute and a Popup the next.

What top tips would you give for designing/documenting a GUI? It would be particularly useful to hear about widgets you designed to cram readable information into as little screen real-estate as possible.

I'm going to roll this off with one of my own: avoid trees (e.g. Swing's JTree) unless you really can't avoid it, or have a unbounded hierarchy of stuff. I have found that users don't find them intuitive and they are hard to navigate and filter.

PS. I think this question differs from this one as I'm asking for generalist tips

Answer 1

well I personally follow these simple rules:

• be consistent throughout the application DO NOT CHANGE BEHAVIOUR/LAYOUT
• information flow: from top to bottom from left to right (in western-countries)
• not too much info on a page (like a ppt-presentation)
• big letters (so old people can read them too)
• KISS (whoever can use a videorecorder can use this page/form/etc.)
• use relaxing colors like blue, green, etc. (not bright-red or neon-pink)
• Structure (can change of course but as a first draft mostly it is):
  • top -> navigation/menu
  • left -> navigation/info
  • middle -> content
  • bottom -> status
  • bottom right -> buttons

Answer 2

Just one rather concrete tip I got once from a skillful GUI techlead:

When you have a dialog/form with buttons, text fields, lists etc, try to keep the space between them consistent and symetric. For instance, try using the same distance between widgets in all directions, and if a group of widgets is separated from another by increasing the space between the groups, try to make that space a duplicate of the space between the controls within the groups. For example if all buttons in one section are separated by 16 pixels in all directions, try making the larger space to the next group 32, 64, 128 or so pixels.

It's much more comfortable for the human eye to interpret something which is bound to a distinct symmetry.

Ever since I tried it I always use this method with very nice results. I even went back and reworked older GUIs and was surprised to see such a facelift from this adjustment only.

EDIT:

Forgot to mention an important lesson I learned from the above method:

When you arrange all widgets according to this system (in particular when reworking old cluttered GUIs) you might run out of space, and your dialog needs to be inflated. At some point one can feel that the dialog is getting too large (e.g. blocking related background GUI or related widgets ending up too far from eachother). That might be a good indicator that you maybe should split the dialog into tabs, move things into the menu or just making it into a wizard-style concept etc.

This is pretty unrelated to widget spacing but touches the subject of less-is-more for the user to interact with at any given time. It's interesting that when you start making things right it "ripples the water" and sometimes forces you to make more things right (kind of like fixing const correctness :p ).

Answer 3

My top tip would be From a GUI developer's perspective

Keep it thin and simple

If you mean from a usability perspective

Show it to the actual user as soon as possible and refine based on feedback