1. University of Washington HCDE 518 Personas, Scenarios, & Storyboards HCDE 518 Winter 2011 With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

2. University of Washington HCDE 518 Agenda  Mid-quarter evaluation  Announcements, Hand in assignments  Sketching Critiques  Discuss Case Studies  Break – 10 mins  Lecture – Personas  Design Activity  Break – 10 mins  Lecture – Scenarios & Storyboards  Design Activity - Storyboards  Readings Discussion  Next Class  Group Project Work Time

3. University of Washington HCDE 518 Mid-Quarter Evaluation  Jim Borgford-Parnell  Center for Engineering Learning & Teaching

4. University of Washington HCDE 518 Announcements  R3 returned today  A2 still in progress  P1 due next week. Last chance to ask questions!

5. University of Washington HCDE 518 Sketching Critiques – Entertainment  Break into groups of about 4 people  Take turns showing off and explaining your 3 sketches with each other  Each critic should offer advice and feedback about the idea  Strengths, Weaknesses, Originality, Feasibility  Sketcher: take notes about what feedback was offered  Critic: be critical, but constructive and courteous!  Each critic should sign the page after the sketches and date it with today’s date

6. University of Washington HCDE 518 Case Studies  Huang & Truong  Questionnaire and Interviews  Focus on understanding how and why people dispose of their old mobile phones  Identify design opportunities  Tee, Brush, & Inkpen  Interviews, family trees  Understand ways that families currently communicate  Identify design opportunities

7. University of Washington HCDE 518 Questions  What were your overall thoughts?  What did you like about the approach?  What would you have changed about the approach?  Why do you think they chose the approach they did?

8. University of Washington HCDE 518 BREAK – 10 MINUTES

9. University of Washington HCDE 518 LECTURE – PERSONAS

10. University of Washington HCDE 518 Personas Scenarios & Storyboards

11. University of Washington HCDE 518 What is a persona?  A persona is a archetypal character that is meant to represent a group of users in a role who share common goals, attitudes and behaviors when interacting with a particular product or service

12. University of Washington HCDE 518 User Goals  Personas should each have three to four goals  (1) Life goals, which are personal aspirations  e.g., wanting to retire before the age of 50  (2) Experience goals describe how the user wants to feel while interacting with a product; they are personal and universal  e.g., wanting to be competent while using the product  (3) End goals, which are tangible outcomes the user has in mind when using the product  e.g., want to be updated about finances over last month  Typically experience/end goals are more helpful to designers

13. University of Washington HCDE 518 Purpose  Empathy  We are engaged by fictional characters all the time in movies and books.  Focus  Constraints on the user population so that a design team can focus on a specific subset of users in specific situations while interacting with the to-be-designed product  Emancipates designers from problems that might arise when considering a full spectrum of users  Concentrate on the highest priority set of user goals and needs.  Communication  Conduits for conveying a broad range of quantitative and qualitative data  Assumptions about users made explicit

14. University of Washington HCDE 518 Avoiding Stereotypes  In the void of user research, designers have only their assumptions and intuitions guide their work  “the whole point in creating personas is to get past our personal opinions and presuppositions.” Goodwin, 2002  Thus, make sure your personas to do not fall into your stereotypes of people in your target user groups!

15. University of Washington HCDE 518 Personas vs. Roles  Personas do not necessarily equal roles  e.g., parent, doctor, programmer, actor, etc.  People within the same roles can have very different needs and goals  e.g., new programmer vs. experience programmer  e.g., parent of 1 vs. parent of 8  e.g., oncologist vs. podiatrist

16. University of Washington HCDE 518 Persona Types  Primary  Secondary  Supplemental  Customer  Served  Negative  Make sure you specify the type on your personas!

17. University of Washington HCDE 518 Three Basic Steps to Creating Personas  1) Collect data about users  2) Segment the users  3) Create personas  Design Example: Designing an interactive, mobile directory for people in Kyrgyzstan. Research by Cynthia Putnam (HCDE PhD Alum)

18. University of Washington HCDE 518  Personas need to be created using data from real users  Can be qualitative or quantitative, but usually both helps  Qualitative helps get rich picture of ideas and people  Quantitative from a large sample ensures that your personas are representative of target users Step 1: Collect Data

19. University of Washington HCDE 518 Step 1: Collect Data – Example  Putnam used a combination of pre-existing data types for Krgyz Personas  Large scale survey  Design Ethnography  Provided inspiration for the proposed product  Created with a proposed product in mind  Mobile social software (MoSoSo) directory  Goal: provide accessible, reliable, and free information about phone numbers using social networks  E.g., Angie’s List, Amazon buying recommendations

20. University of Washington HCDE 518 Step 2: Segment the Users  Can use affinity diagramming to help sort through qualitative data  Use surveys to look for major groupings, especially based on user goals for technology or major motivations

21. University of Washington HCDE 518 Step 2: Segment the Users - Example 460 respondents owned used and owned mobile phones “What was your motivation to acquire your phone?” Three logical groupings – (1) Replacement for home phone motivations; – (2) Practical motivations Desire to make outgoing calls and pricing motivations – (3) Social motivations Desire to receive incoming calls and a need for a mobile phone because friends had them.

22. University of Washington HCDE 518 Segmentation Groups  Replacement group:  45 (13%) individuals in the replacement motivation group  84% of this group claimed to not have a phone at home  Practical group:  194 (55%) individuals in the practical motivation group  99% gave a need to make calls when away from home or work as the motivation  Social group:  113 (32%) individuals in the social motivation group  85%wanted people to reach them at all times

23. University of Washington HCDE 518 Attitudes

24. University of Washington HCDE 518 Step 3: Create the Persona  Photo  Name – first name starts with the first letter of the segmentation (e.g., Shirin Social, Rosa Replacement)  Quote that describes the user goals with the product  Goals - a priority rating and specific objectives are also suggested  Biographical profile and personal information that affects usage  Computer, internet and other technology usage are common components  Key Point: Back up persona with data whenever possible!

25. University of Washington HCDE 518 Presentation Types  Paper-based mediums (most common)  Single Page Information Sheets  Handouts  Posters  Other types  Beer glasses  Action figures  Key chains

26. University of Washington HCDE 518 Step 3: Create the Persona  Parxat: Practical user  Shirin: Social user  Roza: Replacement user  Download Personas:  http://courses.washington.edu/hcde518/readings/personas/ http://courses.washington.edu/hcde518/readings/personas/

27. University of Washington HCDE 518

30. P1 – Personas  You will create at least 3 personas for your potential users of your proposed system  Make sure personas are based on your user research and convey user’s goals  Specify whether persona is primary, secondary, supplementary, etc.

31. University of Washington HCDE 518 Persona Templates  Download pre-made templates for formatting personas:  http://zakiwarfel.com/archives/persona- templates/ http://zakiwarfel.com/archives/persona- templates/  http://graffletopia.com/stencils/460 http://graffletopia.com/stencils/460  http://courses.washington.edu/hcde518/project/ PersonaSample.docx http://courses.washington.edu/hcde518/project/ PersonaSample.docx

32. University of Washington HCDE 518 Design Exercise: Persona Creation  System Goal – Design an interactive system to facilitate parent-pediatrician (child doctor) communication  Questions to ask:  How might you gather the data?  What would the user goals be?  Who might the different personas be?  Primary, Secondary, Supplemental, Customer, Served, Negative

33. University of Washington HCDE 518 BREAK – 10 MINUTES

34. University of Washington HCDE 518 LECTURE – SCENARIOS & STORYBOARDS

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

36. University of Washington HCDE 518 Storytelling  Can be used to both:  Tell the users’ current situation  Describe a users’ hypothetical experience using a new technology design  Can be written, visual, or video-based  Alternate ways of conveying a story

37. University of Washington HCDE 518 Personas + Scenarios  Scenarios are often used to convey the experience and frustrations with current technology  Often the scenarios tell a story about your personas

38. University of Washington HCDE 518 Written Scenarios  Allow the user to imagine themselves in a given situation  Similar to books, imagination plays some role  This is good and bad  Good for engagement  Bad for specifics  Use personas as characters to help with empathy  They should be fully developed

39. University of Washington HCDE 518 Example – Krygyz Scenario  When Parxat arrives at his small computer club in the morning, he sees a flyer advertising the MoSoSo directory. The flyer explains that as a small business owner he can advertise his shop in the public information space where users can vote to recommend shops and services.  Parxat calls the service and discovers that listing a service requires using text.  Navigating the service through a phone tree system, he first decides to locate his shop under the public information space heading of “Computer cafe/club.” The entry system allows Parxat to set up two types of advertisements, one for users who utilize text and one for users who do not use text.  Later, Parxat asks one of his clients, Ilzat, to call the service and submit a positive vote. Ilzat already has a friends group that he belongs to in the MoSoSo directory and offers to not only give Parxat’s shop a good vote in the public information space, but to also add it as a recommended computer club in his group’s information space.

40. University of Washington HCDE 518 Video Scenarios  Similar to written ones, but acted out and filmed  Advantages  Can be more engaging  Specifics/prototypes are shown more easily  Disadvantages  Requires actors  Much more difficult to create  May be harder for people to relate to

41. University of Washington HCDE 518 Example video scenarios  TransTracker  http://courses.washington.edu/info360/videos/Tr ansTrackerMED.mov (130 MB) http://courses.washington.edu/info360/videos/Tr ansTrackerMED.mov  ParkSmart  http://courses.washington.edu/info360/videos/Pa rkSmart.wmv (27 MB) http://courses.washington.edu/info360/videos/Pa rkSmart.wmv Made by students in James Landay’s HCI class

42. University of Washington HCDE 518 Storyboarding  What is it?

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

44. University of Washington HCDE 518

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

46. University of Washington HCDE 518 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

47. University of Washington HCDE 518 Examples  If you’re the user, how would you feel about this service? How do you think it would work?

48. University of Washington HCDE 518 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

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

50. University of Washington HCDE 518 1. How Much Detail?

51. University of Washington HCDE 518 2. Use of Text  Guideline: It’s often necessary, but keep it short

52. University of Washington HCDE 518 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)

53. University of Washington HCDE 518 4. How Many Frames?  Guideline: 4-6 frames/panes is ideal  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

54. University of Washington HCDE 518 4. How many frames?

55. University of Washington HCDE 518 5. Passage of Time  Guideline: Only use if it’s necessary to understand story

56. University of Washington HCDE 518 Drawing is hard…  It doesn’t have to be drawings..

57. University of Washington HCDE 518 Blur out unnecessary detail  Use Photoshop filter “cut out” or similar  Demo

58. University of Washington HCDE 518 Grab images form other sources

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

60. University of Washington HCDE 518 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

61. University of Washington HCDE 518 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)

62. University of Washington HCDE 518 BREAK – 10 MINUTES

63. University of Washington HCDE 518 Readings Discussion  Cooper, A., Reimann, R., and Cronin, D. (2007) Modeling users: Personas and goals. Ch. 5 in About Face 3. Indianapolis, IN: Wiley Publishing, pp. 75-108.Modeling users: Personas and goals  Cooper, A., Reimann, R., and Cronin, D. (2007) The foundations of design: Scenarios and requirements. Ch. 6 in About Face 3. Indianapolis, IN: Wiley Publishing, pp. 109-123.The foundations of design: Scenarios and requirements  Truong, K.N., Hayes, G.R., Abowd, G.D. (2006) Storyboarding: An Empirical Determination of Best Practices and Effective Guidelines. Proceedings of DIS 2006. pp. 12-21.Storyboarding: An Empirical Determination of Best Practices and Effective Guidelines  Buxton, W. (2007) Selections from Sketching User Experiences. San Francisco: Morgan Kaufmann, pp. 277-298.Selections from Sketching User Experiences

64. University of Washington HCDE 518 Next Class  Tuesday, February 8 th  Sketching & Ideation  Due Next Week  P1  Reflection 5  Sketching, Week 5  Sketch 3 sketches relating to “Travel & Transportation”  air and car travel, bus travel, bicycling, etc.

65. University of Washington HCDE 518 GROUP PROJECT MEET TIME