GUI Design Principles

Generally accepted principles for Graphical user interface design are:

1. Aesthetically pleasing Provide visual appeal by following these presentation and graphic design principles:

• Provide meaningful contrast between screen elements.
• Create groupings.
• Align screen elements and groups.
• Provide three dimensional representation
• Use colors and graphics effectively and simply.

2. Clarity The interface should be visually, conceptually and linguistically clear, including

• Visual elements
• Functions
• Metaphors
• Words and text

3. Compatibility Provide compatibility with the following:

• The user
• The task and job
• The product
• Adopt the user’s perspective

4. Comprehensibility A system should be easily understood and learned. A user should know the following

• What to do
• What to look at
• When to do it
• Where to do it
• Why to do it
• How to do it
• The flow of actions, responses, visual preparations and information should be in a sensible order that is easy to recollect and place in context.

5. Configurability Permit easy personalization, configuration and reconfiguration of settings.

• Enhances a sense of control
• Encourages an active role in understanding

6. Consistency A system should look, act, and operate the same throughput. Similar components should:

• Have a similar look
• Have similar uses.
• Operate similarly
• The same action should always yield the same result.
• The function of the elements should not change
• The position of standard elements should not change.

7. Control The user must control the interaction.

• Actions should result from explicit user requests
• Actions should be performed quickly
• Actions should be capable of interruption or termination
• The user should never be interrupted for errors
• The context maintained must be from the perspective of the user.
• The means to achieve goals should be flexible and compatible with the user’s skills, experiences, habits and preferences.
• Avoid modes since they constrain the actions available to the user.
• Permit the user to customize aspects of the interface, while always providing a proper set of defaults.

8. Directness Provide direct ways to accomplish tasks

• Available alternatives should be visible,
• The effect of actions on objects should be visible.

9. Efficiency

• Minimize eye and hand movements, and other control actions.
• Transitions between various system controls should flow easily and freely.
• Navigation paths should be as short as possible.
• Eye movement through a screen should be obvious and sequential.
• Anticipate the user’s wants and needs whenever possible.

10. Familiarity Employ familiar concepts and use a language that is familiar to the user.

• Keep the interface natural, mimicking the user’s behavior patterns.
• Use real world metaphors.

11. Flexibility A system must be flexible to the different needs of its users, enabling a level and type of performance based upon:

• Each user’s knowledge and skills.
• Each user’s experience.
• Each user’s personal preference
• Each user’s habits
• The conditions at that moment

12. Forgiveness

• Tolerate and forgive common and unavoidable human errors
• Prevent errors from occurring whenever possible.
• Protect against possible catastrophic errors.
• When an error does occur, provide constructive messages.

13. Predictability The user’s should be able to anticipate the natural progression of the task.

• Provide distinct and recognizable screen elements
• Provide cues to the result of an action to be performed
• All expectations should be fulfilled uniformly and completely.

14. Recovery A system should permit:

• Commands or actions to be abolished or reversed.
• Immediate return to a certain point if difficulties arise.

Ensure that users never lose their work as a result of

• An error on their part
• H/W, S/W or communication problems.

15. Responsiveness The system must rapidly respond to the user’s requests.

• Provide immediate acknowledgement for all user actions
• Visual
• Textual
• Auditory

16. Simplicity

• Provide as simple an interface as possible
• Provide defaults
• Minimize screen alignment points.
• Make common actions simple at the expense of uncommon actions being made harder.
• Provide uniformity and consistency

Five ways to provide simplicity:

• Present common and necessary functions first.
• Prominently feature important functions,
• Hide more sophisticated and less frequently used functions

17. Transparency

• Permit the user to focus on the task or job, without concern for the mechanics of the interface.
• Workings and reminders of workings inside the computer should be invisible to the user.

18. Trade-offs

• Final design will be based on a series of trade-offs balancing often-conflicting design principles
• People’s requirements always take precedence over technical requirements

Further reading

• Verplank, W.L. (1985). "Graphics in Human-Computer Communication: Principles of Graphical User-Interface Design". in Peterson H.E. and Schneider W.. Proceedings of the IFIP-IMIA Second Stockholm Conference on Communication in Health Care, Stockholm, Sweden. pp. 113–130. 
• Aaron Marcus (1995). "Principles of effective visual communication for graphical user interface design". Human-computer interaction: toward the year 2000. San Francisco: Morgan Kaufmann Publishers Inc.. pp. 425–441. ISBN 1-55860-246-1.