Top tips for designing GUIs?

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

See earlier question: UI design books/resources for programmers.

Answer 3

I don't think that it's possible, in this little space, to give tips which would make it possible to design good GUIs (the question is as big as "how can I write good programs?"). But I can give pointers to some helpful books:

• The Design of Everyday Things
• About Face
• User Interface Design: A Software Engineering Perspective
• Usability Engineering

Answer 4

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

Answer 5

Once you have completed the design: Have a few people sit down in front of your software and let them try to solve a task that your software was designed for (one by one, not all at once...). It's absolutely amazing what you will learn just by watching them.

If possible, the testers should match the profile for your typical customer group. The more people you can find for this kind of usability testing the better, but even watching just a handful of people per product iteration has been very useful for me in the past.

Answer 6

To address your issue with JTree (which I agree with), you should look into using glazed lists if you want nice JList and JTable interaction in your app: http://publicobject.com/glazedlists/

You get a lot of functionality (sortable table headers, e.g) with a few tweaks to your code.

Aside from that, keep it simple.

Answer 7

Do not change default colors. It is important for people who are colorblind.

Answer 8

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 9

Use as little UI as possible.

I think we forget that computers are information machines, i.e. they’re meant to do work for us.

Ever seen Shazam on the iPhone? It pretty much has one button. You press it, hold the phone up to a speaker playing a song, and in about 10 seconds it’ll tell you what song’s playing.

Incredibly useful, virtually no UI. All of the hard work goes on underneath.

Answer 10

Remember that the goal of the user isn't to use your program. Their goal is something else, and your program is simply a tool to help them achieve that goal. Do your best to make them successful and happy.

Answer 11

User Interface Design by Joel Spolsky. You can read it in one afternoon.