1. Sketching and Storyboarding IS 403 – Fall 2013 3

2. Today More on users Sketching and prototyping 2

3. Understanding user variations 3

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

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

6. 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

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

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

9. Dangers of Do… then read 9

10. Learning styles Visual vs. non-visual thinkers 10 http://en.wikipedia.org/wiki/File:Pythagore.jpg

11. Educational and cultural background Consider –Languages known –Cultural conventions 11 http://joannaklak.wordpress.com/

12. 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. 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

14. 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 15 http://www.afb.org/afbpress/pub. asp?DocID=aw050607

16. 16

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

18. 18

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

20. Sketching 20

21. Sketching Why sketch How to sketch Storyboarding 21

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 22

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 23

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

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

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 27

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 28

29. 29

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

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

32. Divergent sketching 32

33. Convergent sketching 33 Charles Eames (dwr.com)

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

35. 35

36. 36

37. Star people 37

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

39. 39

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

41. Google Glass in chopsticks 41 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) 42

43. 43

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

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

46. Next time User research and requirements gathering 46