Sketching and StoryboardingIS 403 – Fall 2013 3

2

Today

• More on users• Sketching and prototyping

3

Understanding user variations

4

How are users different?

• What characteristics of users might we want to know about?– Age (button size, text size – esp for extremes

colors)– Gender– Tech-savvy (complexity, features)– Extra-ordinary or uncommon users (visual ability– )– Where they live (cultural norms; marketing/style;

language they speak)– “Context of use”

5

User characteristics

• Physical/demographic differences• Learning style• Technology use• Technology experience• Ability• Individual/cultural preference

Physical differences

• Age (use larger fonts for older people; younger people are smaller, have less fine motor control)

• Gender (different aesthetic preferences)

• Ability or disability

Chapter 3: Know Thy UserCopyright © 2004 by Prentice Hall

7

Learning style

• Quick survey– Who has read the manual for their mobile

phone?

8

Do-then-read

• Do-then-read (an active user believes that only wimps read manuals)

• Read-then-do (what manual writers seem to assume)

9

Dangers of Do… then read

10

Learning styles

• Visual vs. non-visual thinkers

http://en.wikipedia.org/wiki/File:Pythagore.jpg

11

Educational and cultural background

• Consider– Languages known– Cultural conventions

http://joannaklak.wordpress.com/

Technology use

• What kind of technology will the users have access to?– Browsers or other software– Content filtering– Old vs. new– Sound? Video?– Internet connection?

Chapter 3: Know Thy User Copyright © 2004 by Prentice Hall

13

http://www.experientia.com/blog/the-mobile-web-is-not-helping-the-developing-world-and-what-we-can-do-about-it/

http://www.rferl.org/content/iran-internet-censorship/24926892.html

Tech knowledge

• Do your users know how to use:– Search engines– Keyboard shortcuts– The mouse

• Do they know how to troubleshoot problems?

15

Abilities

• Visual• Hearing• Cognitive• Reading/language• Physical/motor• Multiple

http://www.afb.org/afbpress/pub.asp?DocID=aw050607

16

17

Individual preferences

• Individual interests

• Cultural background– What does the color red mean?

18

19

Users vs. stakeholders

• Not all stakeholders are users• Who else will be affected by use of the

technology?– e.g. Google Glass

20

Sketching

21

Sketching

• Why sketch• How to sketch• Storyboarding

22

What is sketching?

• Representing early ideas outside of your brain

• Many forms: block diagrams, drawings, storyboards, text

• Early ideas at a level of detail that is easy to work with

23

Why sketch

• Capture ideas before you forget them

• Feed the creative part of your brain

• Try out ideas quickly (and discard bad ones)

• Prevent yourself from getting distracted by SQUIRREL details

24

Other uses for sketches

• Sketching for communication

• Sketching for collaboration

• Sketching as record

“The whole essence of good drawing – and of good thinking, perhaps – is to work a subject down to the simplest form possible and still have it believable for what it is meant to be.”

–Chuck Jones

26

“If Ernest Hemingway, James Mitchener, Neil Simon, Frank Lloyd Wright, and Pablo Picasso could not get it right the first time, what makes you think that you will?“

— Paul Heckel

27

“If we had sketched out our projects ahead of time like you said, we would have saved days of wasted time.”

– Student group from last year’s mobile HCI class

28

Myths about sketching

1. I can’t sketch!

2. I need to be an artist to sketch

3. I’ll save time by going straight to my dev environment

29

30

Sketching tools

• Skitch: http://evernote.com/skitch/• Balsamiq: http://balsamiq.com/• Many apps, e.g. Paper http://www.fiftythree.com/paper

31

Sketching tools

• Skitch: http://evernote.com/skitch/• Balsamiq: http://balsamiq.com/• Many apps, e.g. Paper http://www.fiftythree.com/paper

• But really, start with paper(get fancy notebooks/pens if it helps)

32

Divergent sketching

33

Convergent sketching

Charles Eames (dwr.com)

34

Storyboarding

• Sequential sketches• Like a comic book• Show possible paths of interaction

35

36

Star people

37

38

Paper prototyping

• Draw interface components on paper

• User tests interface by touching “buttons”

• Person acts as computer, and switches paper

39

40

Sketching physical objects

• Jeff Hawkins’ (Palm) block of wood

41

Google Glass in chopsticks

http://glass-apps.org/google-glass-prototype

42

Tips for sketching

• Make LOTS of sketches

• Hang them on the wall

• Sketch neatly, so you can go back to your sketches later (and share them)

43

44

More on sketching?

• If you’d like more guidance on sketching, let me know– Useful resources– Or more class time

45

Activity

• Groups of 3

• Divergent sketching: Draw 4 designs for a weight logging app

• We’ll share at the end of class

46

Next time

• User research and requirements gathering