GUI Design

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

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