GUI Design Principles

From Wikibooks, open books for an open world
Jump to: navigation, search


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[edit]

  • 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.