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

The Design of Everyday Things - Donald Norman

A canon of design lore and the basis of many HCI courses at universities around the world. You won't design a great GUI in five minutes with a few comments from a web forum, but some principles will get your thinking pointed the right way.

--

MC

Answer 2

1. Use discreet/simple animated features to create seamless transitions from one section the the other. This helps the user to create a mental map of navigation/structure.

2. Use short (one word if possible) titles on the buttons that describe clearly the essence of the action.

3. Use semantic zooming where possible (a good example is how zooming works on Google/Bing maps, where more information is visible when you focus on an area).

4. Create at least two ways to navigate: Vertical and horizontal. Vertical when you navigate between different sections and horizontal when you navigate within the contents of the section or subsection.

5. Always keep the main options nodes of your structure visible (where the size of the screen and the type of device allows it).

6. When you go deep into the structure always keep a visible hint (i.e. such as in the form of a path) indicating where you are.

7. Hide elements when you want the user to focus on data (such as reading an article or viewing a project). - however beware of point #5 and #4.

Answer 3

Follow basic design principles

• Contrast - Make things that are different look different
• Repetition - Repeat the same style in a screen and for other screens
• Alignment - Line screen elements up! Yes, that includes text, images, controls and labels.
• Proximity - Group related elements together. A set of input fields to enter an address should be grouped together and be distinct from the group of input fields to enter credit card info. This is basic Gestalt Design Laws.

Answer 4

I try to adapt to the environment.

When developing for an Windows application, I use the Windows Vista User Experience Guidelines but when I'm developing an web application I use the appropriate guidelines, because I develop Dutch websites I use the "Drempelvrij" guidelines which are based on the Web Content Accessibility Guidelines (WCAG 1.0) by the World Wide Web Consortium (W3C).

The reason I do this is to reduce the learning curve of a new user.

Answer 5

Try to use verbs in your dialog boxes.

It means use

instead of

Answer 6

Show the interface to a sample of users. Ask them to perform a typical task. Watch for their mistakes. Listen to their comments. Make changes and repeat.