Brief GUI Design Guidelines
November 13, 1998 - Jack Harich
| Users usually see a product as a GUI tool to get things done. Therefore the GUI better be superb.
We present a few of the most important ways to design a product's human interface. |
Window Workflow Design Steps
1. Determine the top objectives of the product from the user's viewpoint.
2. Organize these objectives into a single top level window.
3. List the window use cases. Rank by frequency of use.
4. Organize these use cases into a logical, easy to use Window Workflow
Model.
5. Do a paper mockup of each widow.
6. Validate the mockup model with user excercices and expert reviews.
7. Fine tune the paper models with a tool such as Visio.
8. Get final feedback and approval.
Output of these design steps is:
- A Window Workflow Model showing all windows and navigation.
- Unambiguous definition of what each window looks like.
- Textural description of what each window has and does.
Exit criteria - This step is done when the mockups meet high user satisfaction and product requirements.
Go for actual user usability tests early and often.
Workflow Guidelines
Be consistent.
The user always knows where they are.
It taks a very small number of clicks to get anywhere.
The high frequency windows take the smallest number of clicks to get to.
Use cases involving an extended series of workflow steps are expressed by
a logical series of windows. As many as possible of these windows are also
used in other use cases.
Provide useful defaults.
Always validate all user input. Do this as close to the time of entry as possible.
This smooths out the user's habitual workflow.
Use Wizards when the workflow needs active guidance.
Window Guidelines
Be consistent.
The window can be easily understood at the first glance.
Use a small collection of standard widgets. Follow industry standards.
Use a standard window layout. For example put the most important data at the
upper left, the buttons at the bottom, and a close button at the lower right.
Follow industry standards.
Clearly label everything.
Don't put too much on a window unless it's for a highly skilled user.
Avoid inventing cool new widgets, clever layouts and snazzy effects.
Put the user in a "look and choose" mindset, not "remember
and enter" .
Right click context menus are a form of "hidden choices". The simplest
GUIs don't use them. If you do start to use them you must uniformly provide
them everywhere.
Everything should be able to be done without the mouse.
Allow expert users to sail through a window fast, such as without the mouse.
Always follow the principle of "Least user astonishment".
Complexity Guidelines
Be consistent.
A huge problem for products with complex requirements is how to make the product
appear simple to the user. Address this large risk early.
Hide complex areas from the casual user, such as with an Advanced button,
lower window expansion (show detail button) or user types. Different user
types cause the system to reveal different types of behavior.
Organize the workflow so complex areas are not accidentally encountered.
Provide online "how to do it assistance" in a variety of levels,
such as tool tips, F1 use, and a User's Guide. Each level has progressively
more assistance.
Have a super duper workflow for all complex use cases. Make the hard stuff
easy.
In some cases offer alternate paths to accomplish something. For example,
for the average user offer a Wizard, but for the expert offer raw data entry.
The first is easy but slow, the second requires more skill but is fast.