1. University of Washington HCDE 418 Storyboarding HCDE 418 Winter 2014

2. University of Washington HCDE 418 Agenda Announcements Lecture & Discussion – Storyboarding Break Storyboard Critiques Next class

3. University of Washington HCDE 418 Announcements R5 due now S3 due Wednesday R6 & P1 descriptions posted  (P1 tonight… sorry!) Questions/Comments?

4. University of Washington HCDE 418 LECTURE & DISCUSSION – Storyboarding

5. University of Washington HCDE 418 Three Ways of Telling Stories Written Scenarios – Last Wednesday  Written accounts and narratives of the experience  Analogy: Books Storyboards – today  Visual storytelling with rough sketches/cartoons  Analogy: Comics, Picture books Video Scenarios – Wednesday  Richer visual storytelling  Analogy: Movies/TV

6. University of Washington HCDE 418 Limitations of Written Scenarios Often harder to engage users Difficult to show interfaces/interactive elements Can take longer to read in order to understand the point

7. University of Washington HCDE 418 Storyboarding What is it?

8. University of Washington HCDE 418 Storyboarding in R5 How did it go?

9. University of Washington HCDE 418 Uses / background Very similar in nature to:  Comic art / cartoons Used in:  Movie / multimedia design  Product / software development

10. University of Washington HCDE 418 How is it done? Determine the story  A very iterative process through a lot of initial drafts  Includes a lot of brainstorming  Start with a scenario and break into logical segments Sketch on pen + paper Generate more polished art for presentation if needed

11. University of Washington HCDE 418 Storyboarding Challenges  Determining what to draw is hard  Drawing is difficult!  How is it presented? (time, length, attention) Usefulness  If done right, can help gain quick invaluable user feedback on early ideas  Quicker / easier than building the whole application or a prototype

12. University of Washington HCDE 418 Storyboards should convey… Setting  People involved  Environment  Task being accomplished Sequence  What steps are involved?  What leads someone to use the app/product?  What task is being illustrated? Satisfaction / Experience  What’s motivates people to use this system?  What does it enable people to accomplish?  What need does the system fill? Klemmer HCI Class

13. University of Washington HCDE 418 Benefits of Storyboarding Holistic focus: Helps emphasize how an interface accomplishes a task Avoids commitment to a particular user interface (no buttons yet) Helps get all the stakeholders on the same page in terms of the goal Time limits help! Klemmer HCI Class

14. University of Washington HCDE 418 Examples If you're the user, how would you feel about this service? How do you think it would work?

15. University of Washington HCDE 418 Examples Technology is embedded in blocks, Legos, or other building-oriented toys. The toys make different sounds or noises when places together. Children can customize what happens when different parts of the building are placed together.

16. University of Washington HCDE 418 Elements of a Storyboard Visual storytelling 5 visual elements 1.Level of detail 2.Inclusion of text 3.Inclusion of people & emotions 4.Number of frames 5.Portrayal of time Truong et al., 2006

17. University of Washington HCDE 418 1. How Much Detail? Guideline: too much detail can lose universality Credit: Scott McCloud

18. University of Washington HCDE 418 1. How Much Detail?

19. University of Washington HCDE 418 2. Use of Text Guideline: It's often necessary, but keep it short

20. University of Washington HCDE 418 3. Include People and Emotions Remember, the point of storyboards is to convey the experience of using the system Guideline: Include people experiencing the design and their reactions to it (either good or bad)

21. University of Washington HCDE 418 4. How Many Frames? Guideline: 4-6 frames/panes is ideal (for showing to potential users – clients may be longer) More is not always better. Why?  May lose focus of story  May lose reader's attention What this means:  Less work on the designer  Must be able to succinctly tell story

22. University of Washington HCDE 418 4. How many frames?

23. University of Washington HCDE 418 5. Passage of Time Guideline: Only use if it's necessary to understand story

24. University of Washington HCDE 418 Showing Sound

25. University of Washington HCDE 418 Drawing is hard… It doesn't have to be drawings..

26. University of Washington HCDE 418 Blur out unnecessary detail Use Photoshop filter “cut out” or similar Demo

27. University of Washington HCDE 418 Grab images form other sources http://designcomics.org/ http://www.pdclipart.org/

28. University of Washington HCDE 418 Get inspired by other comics http://www.ok-cancel.com/

29. University of Washington HCDE 418 Storyboards – Comparing ideas Authoritative vs. Non-authoritative

30. University of Washington HCDE 418 Storyboards – Comparing ideas Cooperative vs. Competitive

31. University of Washington HCDE 418 Storyboards – Comparing ideas Negative reinforcement vs. Positive reinforcement

32. University of Washington HCDE 418 Comparing ideas Online survey asked on a 5 point scale…  Likelihood of use  Perceived usefulness  Perceived ease-of-use  Big 5 personality test Halko & Kientz, Persuasive 2010

33. University of Washington HCDE 418 Scott McCloud on Comics http://www.ted.com/talks/scott_mccloud_on_ comics.html

34. University of Washington HCDE 418 Summary Think about how long you have a captive audience Think about how much you want to tell Think about options for presenting sequences of drawing

35. University of Washington HCDE 418 BREAK – 5 minutes

36. University of Washington HCDE 418 P1 – Storyboard & Video Teams of 3-4  You choose teams  Presented in class week of February 24 th w/ critiques Two deliverables:  Storyboard – 10-12 panels, drawn or photos  Video prototype (more on Wednesday) Two different design ideas  Can be anything you want (or choose from A2 list)  Sketching assignment 4 will help you with ideas

37. University of Washington HCDE 418 Example storyboards Food in a box AMIGo StoryStick

38. University of Washington HCDE 418 Design Activity: Storyboarding In small groups, spend 15 minutes doing a very rough sketch of a storyboard solution for the following design concept: “A navigation system that helps long-distance cyclists find restaurants and amenities” First write a short scenario and then draw pictures depicting the scenes (stick figures are fine!) Think about:  Use of people and emotions  Indicating passage of time  Usage of text captions  Amount of detail  Number of frames (4-6)

39. University of Washington HCDE 418 Next Class Topics Wednesday, February 5th  Video scenarios/prototypes Upcoming Work  Sketching Project 3 due Wednesday  Reading Reflection 6 due next Monday