CMPUT 301: Lecture 25 Graphic Design

1
CMPUT 301 Lecture 25Graphic Design

• Lecturer Martin Jagersand
• Department of Computing Science
• University of Alberta
• Notes based on previous courses by
• Ken Wong, Eleni Stroulia
• Martin Jagersand

2
Graphic Design

• What
• the use of typography, symbols, color, and other
  static and dynamic graphics to convey facts,
  concepts, and emotions

3
Graphic Design

• Why
• can be used in user interface design to convey
  information effectively about system
  functionality and state

4
Graphic Design

• Visible language
• layout
• formats, proportions, alignment
• typography
• typefaces, typesetting
• color
• colors, texture
• imagery
• signs, symbols, icons
• sequencing
• animation, order of operations

5
Graphic Design

• Basic principles of design
• organize
• provide a 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

6
Graphic Design

• Apply these principles to design menus, control
  panels, dialog boxes, icons, etc.

7
Organize

• Internal consistency
• observe the same conventions and rules for all
  elements of the user interface

8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
Organize

• External consistency
• follow existing platform and cultural conventions
  across user interfaces

13
(No Transcript)
14
Organize

• World consistency
• make conventions consistent with real-world
  experience

15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
Organize

• Lexical consistency
• coding consistent with common usage
• e.g., left less, right more
• consistent abbreviation rules
• e.g., Jan, Feb, Mar, etc. (equal length)
• devices used consistently
• e.g., esc key to cancel
• symbols used consistently
• e.g., ellipsis () to bring up a dialog box from
  a menu item or button

21
Organize

• Syntactic consistency
• status messages consistently placed
• e.g., for Internet Explorer, at bottom of window
• commands come first or last
• e.g., verb then noun (command line)
• e.g., noun then verb (direct manipulation)
• menu items always at the same place
• i.e., perceived stability muscle memory

22
(No Transcript)
23
Organize

• Semantic consistency
• global commands always available
• e.g., help, cancel, undo
• e.g., cut/copy/paste

24
CMPUT 301 Lecture 25b Graphic Design

• Lecturer Martin Jagersand
• Department of Computing Science
• University of Alberta
• Notes based on previous courses by
• Ken Wong, Eleni Stroulia
• Martin Jagersand

25
Graphic Design

• Basic principles of design
• organize
• provide a 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

26
Tools in graphic design

• Visible language
• layout
• formats, proportions, alignment
• typography
• typefaces, typesetting
• color
• colors, texture
• imagery
• signs, symbols, icons
• sequencing
• animation, order of operations

27
Organize

• Screen layout
• use grids and alignment
• group related elements
• use balance and symmetry
• use task analysis for ordering
• standardize placements
• e.g., cancel button to left of OK button
• address perceived stability

28
(No Transcript)
29
Organize

• Grouping methods
• proximity
• alignment
• separators
• borders
• background color
• indentation

30
(No Transcript)
31
(No Transcript)
32
Organize

• Navigability
• provide an initial focus for attention
• direct attention to important, secondary, or
  peripheral items
• assist navigation among the elements

33
Example Navigability
34
Economize

• Simplicity
• KISS principle
• i.e., keep it simple, stupid
• minimize the use of colors and styles
• avoid the circus effect
• minimize clutter
• but do not hide essential information
• e.g., reveal details, use tabs

35
Example KISS
36
Economize

• Clarity
• design all elements so that their meaning is not
  ambiguous
• use affordances
• use plain language

37
Economize

• Distinctiveness
• distinguish important properties of essential
  elements and make the most important elements
  obvious

38
(No Transcript)
39
Communicate

• Legibility
• design individual characters, symbols, and
  graphic elements to be easily noticeable and
  distinguishable
• Readability
• design detailed displays to be comprehensible,
  inviting, and attractive

40
Communicate

• Typography
• limit the number of typefaces
• e.g., max 3 legible/readable typefaces
• limit the length of lines
• i.e., max 40 to 60 characters
• use appropriate justification
• e.g., right justified for columns of numbers
• avoid all caps for body text

41
Example Typography for edit boxes

• Proportional spacing
• Hard to see errors when typing in
• Fixed spacing, bold
• Easy to see individual characters

42
Communicate

• Imagery
• signs, symbols, icons
• icon design is difficult
• use standards if possible
• label unfamiliar icons
• avoid gratuitous images
• e.g., animated icons

43
(No Transcript)
44
Communicate

• Color and texture
• use appropriate highlighting and deemphasis
  techniques to convey meaningful semantic
  distinctions

45
(No Transcript)
46
Communicate

• Aspects of visual design
• scale
• size of a specific element relative to other
  elements and the whole composition
• contrast
• noticeable differences along a common visual
  dimension
• proportion
• balance and harmony of the relation between
  elements

47
Specific design examples

• Look at Joel's writings on UI
• http//static.userland.com/gems/joel/uibookcomplet
  e.htm