CMPUT 301: Lecture 25Graphic Design

Lecturer: Martin JagersandDepartment of Computing Science

University of Alberta

Notes based on previous courses byKen 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

9

10

11

12

Organize

• External consistency:– follow existing platform and cultural

conventions across user interfaces

13

14

Organize

• World consistency:– make conventions consistent with real-world

experience

15

16

17

18

19

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

23

Organize

• Semantic consistency:– global commands always available

– e.g., help, cancel, undo

– e.g., cut/copy/paste

CMPUT 301: Lecture 25b Graphic Design

Lecturer: Martin JagersandDepartment of Computing Science

University of Alberta

Notes based on previous courses byKen 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

29

Organize

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

30

31

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

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

44

Communicate

• Color and texture:– use appropriate highlighting and deemphasis

techniques to convey meaningful semantic distinctions

45

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/uibookcomplete.htm