Sketching and Storyboarding IS 403 – Fall

Today More on users Sketching and prototyping 2

Understanding user variations 3

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” 4

User characteristics Physical/demographic differences Learning style Technology use Technology experience Ability Individual/cultural preference 5

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 User Copyright © 2004 by Prentice Hall

Learning style Quick survey –Who has read the manual for their mobile phone? 7

Do-then-read Do-then-read (an active user believes that only wimps read manuals) Read-then-do (what manual writers seem to assume) 8

Dangers of Do… then read 9

Learning styles Visual vs. non-visual thinkers 10

Educational and cultural background Consider –Languages known –Cultural conventions 11

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 UserCopyright © 2004 by Prentice Hall

13 web-is-not-helping-the-developing-world-and- what-we-can-do-about-it/ internet-censorship/ html

Tech knowledge Do your users know how to use: –Search engines –Keyboard shortcuts –The mouse Do they know how to troubleshoot problems?

Abilities Visual Hearing Cognitive Reading/language Physical/motor Multiple 15 asp?DocID=aw050607

16

Individual preferences Individual interests Cultural background –What does the color red mean? 17

18

Users vs. stakeholders Not all stakeholders are users Who else will be affected by use of the technology? –e.g. Google Glass 19

Sketching 20

Sketching Why sketch How to sketch Storyboarding 21

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 22

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 23

Other uses for sketches Sketching for communication Sketching for collaboration Sketching as record 24

“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

“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 26

“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 27

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 28

29

Sketching tools Skitch: Balsamiq: Many apps, e.g. Paper 30

Sketching tools Skitch: Balsamiq: Many apps, e.g. Paper But really, start with paper (get fancy notebooks/pens if it helps) 31

Divergent sketching 32

Convergent sketching 33 Charles Eames (dwr.com)

Storyboarding Sequential sketches Like a comic book Show possible paths of interaction 34

35

36

Star people 37

Paper prototyping Draw interface components on paper User tests interface by touching “buttons” Person acts as computer, and switches paper 38

39

Sketching physical objects Jeff Hawkins’ (Palm) block of wood 40

Google Glass in chopsticks 41

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) 42

43

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

Activity Groups of 3 Divergent sketching: Draw 4 designs for a weight logging app We’ll share at the end of class 45

Next time User research and requirements gathering 46