Monday 2 Sept 2006 TC 310 Fall 2006 1

Usability Testing

• Gould & Lewis: 3 Principles of design– Early focus on the user– Empirical measurement– Iterative design

• Usability Testing = empirical measurement

Monday 2 Sept 2006 TC 310 Fall 2006 2

Informing your design decisions

• Gestalt Laws – one source of information• Proximity• Similarity• Closure• Continuity• Symmetry• Relative size• Figure and Ground• Common fate

– Later Additions• Division (Kostelnick and Roberts, 1998)• Connectedness (Palmer and Rock, 1995)

• Empirical Studies

Monday 2 Sept 2006 TC 310 Fall 2006 3

Gestalt Laws: Proximity

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.189.

Monday 2 Sept 2006 TC 310 Fall 2006 4

Gestalt Laws: Similarity

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.190.

Monday 2 Sept 2006 TC 310 Fall 2006 5

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.195 - 197

Gestalt Laws: Closure

Monday 2 Sept 2006 TC 310 Fall 2006 6

Continuity

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.193.

Monday 2 Sept 2006 TC 310 Fall 2006 7

Gestalt Laws: Symmetry

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.193.

Monday 2 Sept 2006 TC 310 Fall 2006 8

Gestalt Laws: Relative Size

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.197.

Monday 2 Sept 2006 TC 310 Fall 2006 9

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.198.

Gestalt Laws: Figure and Ground

Monday 2 Sept 2006 TC 310 Fall 2006 10

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.198.

Gestalt Laws: Figure and Ground

Monday 2 Sept 2006 TC 310 Fall 2006 11

Gestalt Laws: Common Fate

Monday 2 Sept 2006 TC 310 Fall 2006 12

Gestalt Laws: Division

Monday 2 Sept 2006 TC 310 Fall 2006 13

Gestalt Laws: Connectedness

Ware C. (2004). Information Visualization: Perception for Design: Elsevier Inc: San Francisco, CA, p.192.

Monday 2 Sept 2006 TC 310 Fall 2006 14

Monday 2 Sept 2006 TC 310 Fall 2006 15

Monday 2 Sept 2006 TC 310 Fall 2006 16

Monday 2 Sept 2006 TC 310 Fall 2006 17

Monday 2 Sept 2006 TC 310 Fall 2006 18

Monday 2 Sept 2006 TC 310 Fall 2006 19

Monday 2 Sept 2006 TC 310 Fall 2006 20

Empirical Studies

• Miles Tinker– Readability research

• Stone and Glock– Studies in how visuals effect procedural

instructions

• Kosslyn– Studies in understanding perception of charts and

graphs

• Design Research can address/help:– How to solve design issues– How to provide a design rationale

Monday 2 Sept 2006 TC 310 Fall 2006 21

Charts, Graphs, Diagrams and Maps

• Graph– Quantitative measures– Some Maps if they lay-out distance

• Charts and Diagrams– Qualitative– Specifies relationships– Diagrams = schematic pictures of objects

or events

• Maps– Spatial layout

Monday 2 Sept 2006 TC 310 Fall 2006 22

When to use a Graph

• Illustrate relations among measures

• Not for absolute measures

• Considersations– Relevance– Appropriate Knowledge

• Know your audience

Monday 2 Sept 2006 TC 310 Fall 2006 23

Pie or Divided Graphs

• Emphasize the components of a whole

1st Qtr

2nd Qtr

3rd Qtr

4th Qtr0%

20%

40%

60%

80%

100%

1stQtr

2ndQtr

3rdQtr

4thQtr

North

West

East

Monday 2 Sept 2006 TC 310 Fall 2006 24

Line Graphs

• Quantitative data• Good for Interval

Scales (Time,Temp,Money)

• Interactions

Winter tempatures

0

10

20

30

40

50

60

70

Dec Feb

Months

Deg

rees Seattle

SanFran

NewYork

Monday 2 Sept 2006 TC 310 Fall 2006 25

Bar Graphs

• Quantitative data• Comparisons• Vertical vs.

Horizontal– When in doubt…use

vertical

• Side by side graphs – show comparisons

0

10

20

30

40

50

60

70

80

90

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

East

West

North

Monday 2 Sept 2006 TC 310 Fall 2006 26

Step Graphs

• Quantitative Data• Illustrate trends

among >2 members of a nominal or ordinal scale

• Use a line graph if the values vary continuously

Monday 2 Sept 2006 TC 310 Fall 2006 27

Scatter Plots

• Quantitative Data• Regression Lines

0

10

20

30

40

50

60

70

80

90

100

0 20 40 60 80 100

Scores

Monday 2 Sept 2006 TC 310 Fall 2006 28

Stacked Bar

• Quantitative Data – nominal scale

• Many of the same properties of divided bar graphs…except overall height 0 50 100 150 200

East

West

North

1st Qtr

2nd Qtr

3rd Qtr

4th Qtr

Monday 2 Sept 2006 TC 310 Fall 2006 29

Layer Graph

• Quantitative Data• Overall height

indicates cumulative total

• http://www.babynamewizard.com/namevoyager/lnv0105.html

0

20

40

60

80

100

120

140

160

180

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

North

West

East

Monday 2 Sept 2006 TC 310 Fall 2006 30

Monday 2 Sept 2006 TC 310 Fall 2006 31

Monday 2 Sept 2006 TC 310 Fall 2006 32

Monday 2 Sept 2006 TC 310 Fall 2006 33

Monday 2 Sept 2006 TC 310 Fall 2006 34

Monday 2 Sept 2006 TC 310 Fall 2006 35

Monday 2 Sept 2006 TC 310 Fall 2006 36

Monday 2 Sept 2006 TC 310 Fall 2006 37

Assignment 1

• Software: Microsoft PowerPoint

• Genre: Poster (20” x 30”)

• Purpose: To support a speaker from your company/organization when talking about the company’s products.

• Users:– The speaker– One of three different audiences (focus

each poster on only one audience)