1. GUI Design
Taken from “Lecture Notes For Tutorial, Graphics Design for Usable User Interfaces”
Siggraph 97
By Aaron Marcus, John Armitage, Volker Frank, Andrew Thompson, and Pamela Tien.

2. What it a user interface?
Metaphors: Basic images and concepts
Mental Model: Organization of data, functions, tasks, roles, people.
Navigation: Movement through mental model
Look: Appearance Characteristics
Feel: Interaction Sequencing

3. What is Graphic Design?
Information-oriented graphic design is the systematic use of typography, symbols, color, and other static and dynamic graphics, in both two and three dimensions, to convey facts, concepts, and emotions.

4. Graphical User Interfaces
Screens
Windows
Menus
Dialogue boxes and control panels
Icons and cursors
Forms, charts, maps, and diagrams

5. Design Considerations for Successful User Interfaces
Development factors
Usability factors
Acceptance factors

6. Development Factors Platform constraints
Tool kits and component libraries
Support for rapid prototyping
Customizability

7. Usability Factors Human abilities Clear mental model
Multiple representations
Documentation and training

8. Acceptance Factors Installed base Product identity
International markets
Diversity

9. User Interface Design Objectives
Conceptually distinct organization
Visually consistent presentation
Effective visible language

10. Visible Language Layout Typography Color and texture
Imagery: Signs, icons, and symbols
Animation
Sequencing
Sound
Visible Identity

11. Three Principles Organize Economize Communicate
Provide the user with a simple, clear, and consistent conceptual structure.
Economize
Maximize the effectiveness of a minimal set of cues.
Communicate
Match the presentation to the capabilities of the user

12. Organize
Consistency
Screen Layout
Relationships
Navigability

13. Organize: Consistency
Chaotic Screen versus Ordered Screen
Internal consistency
External consistency
Real world consistency
Innovation

14. Internal Consistency
Observe the same conventions and rules for all elements of the user interface.

15. External Consistency
Following existing platform and application conventions across user interfaces.

16. Real World Consistency
Make the conventions consistent with real-world experience.
(the “save file” icon story)
STOP

17. Innovation
Deviate from existing conventions only when doing so provides a clear benefit to the user.

18. Screen Layout Use a grid structure Standardize the screen layout
Group the related elements

19. Relationships
Link related elements
Separate unrelated elements

20. Navigability Provide an initial focus for viewers attention.
Direct attention to important peripheral items.
Assist in navigation throughout the material.

21. Economize
“How many controls does a device need? The fewer controls, the easier it looks to use and the easier it is to find the relevant controls… To make something look easy, minimize the number of controls.” Don Norman

22. Economize
Simplicity
Clarity
Distinctiveness
Emphasis

23. Simplicity Include only elements essential for communication
Be as unobtusive as possible

24. Clarity
Design all components so their meaning is unambiguous.

25. Distinctiveness
Distinguish important properties of essential elements

26. Emphasis Make the most important elements salient.
De-emphasize non-critical elements.
Minimize clutter so that critical information is not hidden.

27. Communicate
“Communication…is…a social process, within a specified context, in which signs are produced and transmitted, perceived, and treated as messages from which meaning can be inferred.” Sol Worth

28. Communicate Legibility Readability Typography Symbolism Multiple views
Color and texture

29. Legibility
Design individual characters, symbols, and graphic elements to be easily noticeable and distinguishable.
Illegible: Enter SSN:
Legible: Enter SSN:

30. Readability
Design text and graphics to be easy to identify and interpret.
Design displays to be inviting and attractive.

31. Typography Typefaces Typestyles Typesetting
Use a small number of typefaces of suitable legibility, clarity, and distinctiveness to distinguish the different classes of information.
Typestyles
Within each typeface, select a set of enhanced letterforms, punctuation marks, and symbols.
Typesetting
Adjust character size, word spacing, paragraph indentation, and line spacing to enhance readability and to emphasize critical information.

32. Symbolism
Use appropriate visual signs (symbols, icons, charts, maps, and diagrams) to clearly communicate the intended meaning.
Icons can have different meanings for different culturals.

33. Multiple Views Multiple forms of representation.
Multiple levels of abstraction.
Simultaneous alternative views.
Links and cross references.
Metadata, metatext, metagraphics.

34. Color and Texture
Use appropriate highlighting and de-emphasis techniques to convey meaningful semantic distinctions.

35. Color
“Color can be a powerful tool to improve the usefulness of an information display in a wide variety of areas if color is used properly. Conversely, the inappropriate use of color can seriously reduce the functionality of a display system.” Gerald Murch

36. What is Color? Hue Value Chroma (if time permits, a gimp demo)
Wavelengths of light perceived as color
Value
Lightness or darkness of the color in a range from white to black
Chroma
Purity of the color in a range from dull to vivid.
(if time permits, a gimp demo)

37. Mixtures
Additive
Subtractive
Optical (dithering)

38. Advantages of Color Emphasize important information
Identify subsystems or structures
Portray time and progress
Portray natural objects realistically
Reduce errors of interpretation
Add coding dimensions
Increase comprehensibility
Increase believability and appeal

39. Disadvantages of Color
More expensive display hardware.
More expensive display software.
(both of these are getting better as time goes by)
Color-deficient viewers.
“the cookbook editing story”
Unintended associations
Visual discomfort and afterimages
Visual noise and confusion

40. Conclusion
Organize
Economize
Communicate