Good User Interfaces

Good user-interfaces are like good books: you understand, you can follow, they express common sense. Good documentation is not very much different, both should be well-structured and not self-repeating. Moreover a good user interface should be usable without having to read its documentation.

On the web you find a lot of quite different teachings about what makes up a good user interface. Not that I want to increase this confusion, I just want to summarize what of it I found useful, and mix it with my own experience. So (as the "10 things that ..." have become a web tradition:-) here come my ...

Seven (7) Things that Make Up Good User Interfaces

▷

1 Simplicity: don't overburden users

• The magical 7 ± 2 rule allows just a few fields per face
• Faces are wrapped into titled groups, tabs, accordions, internal frames
• Master-detail views allow to zoom into different faces
• Wizards facilitate work-flows
• Auto-complete filter fields are available on choosers with many items
• Modal dialogs are used only when absolutely necessary

▷

2 Consistency: words and symbols

• The same thing should not have different names or icons in different contexts
• Words come from the app's business, not from computer slang

▷

3 Transparency: hints, progress, success and errors

• Tooltips show more information about what some button will do
• When the app works, users can see what is going on, and how long it will last
• Also success is reported, not only errors
• Error messages tell why it happened, and how to correct it

▷

4 State Keeping: it is easy to come back

• When restarting, the app shows the face it had on exit
• On a desktop, the app has the same size and location
• Recently loaded items are available for fast review
• Text fields suggest recently entered input

▷

5 Navigation: can step safely

• "Back" and "Forward" actions make sense also for non-browser applications
• "Undo" and "Redo" actions let correct wrong inputs
• The user is guided by the app that enables and disables actions and input fields
• "Delete" and "Close" actions show a confirm-dialog
• Confirm-dialogs have a "Don't show again" option for skilled users
• When you tap somewhere and something opens, another tap to the same place closes it

▷

6 Different work speeds: support for all kinds of users

• Menus and toolbars for unskilled users
• Context menus and keyboard shortcuts for the skilled

▷

7 Layout: look regular

• Components are arranged in grids and aligned to each other
• There is enough space around labels, fields and buttons (wherever users want to tap)