Best Practices & Principles for GUI design [closed]

Answer 1

Breadcrumbs in webapps:
Tell -> The -> User -> Where -> She -> Is in the system

This is pretty hard to do in "dynamic" systems with multiple paths to the same data, but it often helps navigate the system.

Answer 2

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 3

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.

Answer 4

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 5

With GUIs, standards are kind of platform specific. E.g. While developing GUI in Eclipse this link provides decent guideline.

Answer 6

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.