Best Practices & Principles for GUI design [closed

Question

What is your best practical user-friendly user-interface design or principle?

Please submit those practices that you find actually makes things really useful - no matter what - if it works for your users, share it!

---

Summary/Collation

Principles

1. KISS.
2. Be clear and specific in what an option will achieve: for example, use verbs that indicate the action that will follow on a choice (see: Impl. 1).
3. Use obvious default actions appropriate to what the user needs/wants to achieve.
4. Fit the appearance and behavior of the UI to the environment/process/audience: stand-alone application, web-page, portable, scientific analysis, flash-game, professionals/children, ...
5. Reduce the learning curve of a new user.
6. Rather than disabling or hiding options, consider giving a helpful message where the user can have alternatives, but only where those alternatives exist. If no alternatives are available, its better to disable the option - which visually then states that the option is not available - do not hide the unavailable options, rather explain in a mouse-over popup why it is disabled.
7. Stay consistent and conform to practices, and placement of controls, as is implemented in widely-used successful applications.
8. Lead the expectations of the user and let your program behave according to those expectations.
9. Stick to the vocabulary and knowledge of the user and do not use programmer/implementation terminology.
10. Follow basic design principles: contrast (obviousness), repetition (consistency), alignment (appearance), and proximity (grouping).

Implementation

1. (See answer by paiNie) "Try to use verbs in your dialog boxes."
2. Allow/implement undo and redo.

References

1. Windows Vista User Experience Guidelines [http://msdn.microsoft.com/en-us/library/aa511258.aspx]
2. Dutch websites - "Drempelvrij" guidelines [http://www.drempelvrij.nl/richtlijnen]
3. Web Content Accessibility Guidelines (WCAG 1.0) [http://www.w3.org/TR/WCAG10/]
4. Consistence [http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]
5. Don't make me Think [http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]
6. Be powerful and simple [http://msdn.microsoft.com/en-us/library/aa511332.aspx]
7. Gestalt design laws [http://www.squidoo.com/gestaltlaws]

Answer 1

When constructing error messages make the error message be the answers to these 3 questions (in that order):

1. What happened?

2. Why did it happen?

3. What can be done about it?

This is from "Human Interface Guidelines: The Apple Desktop Interface" (1987, ISBN 0-201-17753-6), but it can be used for any error message anywhere. There is an updated version for Mac OS X. The Microsoft page User Interface Messages says the same thing: "... in the case of an error message, you should include the issue, the cause, and the user action to correct the problem."

Also include any information that is known by the program, not just some fixed string. E.g. for the "Why did it happen" part of the error message use "Raw spectrum file L:\refDataForMascotParser\TripleEncoding\Q1LCMS190203_01Doub leArg.wiff does not exist" instead of just "File does not exist".

Contrast this with the infamous error message: "An error happend.".

Answer 2

I test my GUI against my grandma.

Answer 3

(Stolen from Joel :o) )

Don't disable/remove options - rather give a helpful message when the user click/select it.

Answer 4

Be Powerful and Simple

Oh, and hire a designer / learn design skills. :)

Answer 5

Never ask "Are you sure?". Just allow unlimited, reliable undo/redo.

Answer 6

Avoid asking the user to make choices whenever you can (i.e. don't create a fork with a configuration dialog!)

For every option and every message box, ask yourself: can I instead come up with some reasonable default behavior that

• makes sense?
• does not get in the user's way?
• is easy enough to learn that it costs little to the user that I impose this on him?

I can use my Palm handheld as an example: the settings are really minimalistic, and I'm quite happy with that. The basic applications are well designed enough that I can simply use them without feeling the need for tweaking. Ok, there are some things I can't do, and in fact I sort of had to adapt myself to the tool (instead of the opposite), but in the end this really makes my life easier.

This website is another example: you can't configure anything, and yet I find it really nice to use.

Reasonable defaults can be hard to figure out, and simple usability tests can provide a lot of clues to help you with that.