Creating Conceptual Comics - Storytelling Techniques

Slideshow Transcript

1. Slide 1: Creating Conceptual Comics: Storytelling and techniques Kevin Cheng Jane Jao Mark Wehner Yahoo!, Inc
2. Slide 2: Where are the artists?
3. Slide 3: An Exercise
4. Slide 4: Who are you? What do you do? How did you find out about us? What do you want to learn? What was the last comic you read?
5. Slide 5: Who is kevin?
6. Slide 10: Who is Mark?
7. Slide 12: Who is jane?
8. Slide 15: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
9. Slide 16: What is “Community”?
10. Slide 17: TPS Report
11. Slide 18: Personas Use cases Wireframes Competitive Mood board Functional Specs analysis Site map Style guide Creative brief Task analysis Requirements
12. Slide 19: Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements
13. Slide 20: Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements
14. Slide 21: This is Peter Peter is an information architect at a consultancy and travels frequently to meet with clients. He enjoys good food of most sorts and while he would never turn down a free beer, he’s not exactly looking to scout for the hottest in the late night club scene.
15. Slide 22: Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements
16. Slide 23: Use Case ID #24601 Use Case Name Discover a Quality Local Restaurant in the Immediate Vicinity Goal Level User Use Cases that reference this Use Case #10592, #16322, #20031 Success Guarantee User locates a restaurant within 0.5mi which they are satisfied with. Main Use Case Scenario 1. User accesses web browser 2. User enters local.yahoo.com address into browser 3. System requests for user to select a location: 3.1 By city and state 3.2 Or by zip code 3.3 Or by selecting a city from a list 4. System displays the Yahoo! Local homepage including 4.1 Map of the selected vicinity 4.2 Upcoming events 4.3 Highly rated businesses 4.4 Recently visited businesses on Yahoo! Local 4.5 A search box to enter a search term 4.6 A pre-filled Location box 4.7 Business categories 4.8 Neighborhoods 4.9 RSS feeds for top restaurants, recent events, and user favorites 5. User enters a search term “Restaurants” and hits submit 6. System displays a list of search results for the area selected: 6.1 Name of business 6.2 Average rating 6.2.1 Businesses with ratings from friends of friends are shown through a unique icon 6.3 Distance from selected location 6.4 Map of search results 6.5 Pagination for search results 7. User can sort results by: 7.1 Top Results (Relevance) 7.2 Rating 7.2 Distance 7.3 Name 8. User filters results to the cuisine they are most interested in 9. User selects a restaurant that is highly rated and also rated by a member of their network 10. System displays the Business Page which includes: 10.1 Business Details 10.1.1 Business Name 10.1.2 Business Address, Phone Number 10.1.3 Business categories 10.2 Reviews 10.3 Recent Searches 10.4 Suggestions for similar places 10.5 Map indicating location of business 10.6 Photos of the business, if appropriate 11. User selects to send the driving directions and address of the business to user’s mobile phone
17. Slide 24: Refinement Discover Definition Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements
18. Slide 26: Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements
19. Slide 30: Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha ? Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements
20. Slide 31: Discover Definition Refinement Development Concept Animation Personas Use cases Wireframes Alpha Video Competitive Mood board Functional Specs Beta Interactive analysis Site map Style guide prototype Creative brief Task analysis Requirements
21. Slide 32: skills and resources needed Scripts Drawings Comics Personas Use Cases Wireframes Video Animation Interactive Prototype some a lot Based on original chart by Gayle Curtis and Laurie Vertelney
22. Slide 33: Images copyright DC Comics, Marvel Comics, Bill Watterson, Jim Davis, Scott Adams, Frank Miller, Warner Bros, Akira Toriyama, Gary Larson, Bil Keane, Jerry Holkins and Mike Krahulik
23. Slide 34: Comics?!
24. Slide 36: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
25. Slide 40: • Dana visits Y!Local – searches for “restaurants” in the local search or – browses through to restaurants • Recent/popular reviews of restaurants are shown • She tries to find ones that are in her neighbourhood • Dana looks for restaurants reviewed highly by her friends • Dana gets driving directions printed, with a photo of the store front.
26. Slide 43: TPS Report
27. Slide 44: Pop Quiz
28. Slide 45: What motivates Peter? A. Free Beer B. Late night club scenes C. Karaoke
29. Slide 46: Where do comics fit in? Concept Discover Definition Refinement Development
30. Slide 48: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
31. Slide 49: Images copyright DC Comics, Marvel Comics, Bill Watterson, Jim Davis, Scott Adams, Frank Miller, Warner Bros, Akira Toriyama, Gary Larson, Bil Keane, Jerry Holkins and Mike Krahulik
32. Slide 52: World Intellectual Property Organization (WIPO): http://www.wipo.int/freepublications/en/patents/485/wipo_pub_485.pdf
33. Slide 53: Source: Laurie Vertelney
34. Slide 56: Communication imagination Expression Motion Iteration
35. Slide 57: communication
36. Slide 61: imagination
37. Slide 65: expression
38. Slide 66: I’m sorry Thank you
39. Slide 69: facial expression dictionary, copyright kevin cheng
40. Slide 70: An Exercise
41. Slide 72: gesture dictionary, copyright kevin cheng inspired by will eisner
42. Slide 74: motion
43. Slide 81: iteration
44. Slide 83: Communication imagination Expression Motion Iteration
45. Slide 84: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
46. Slide 86: Envelopes please
47. Slide 87: brainstorm • Think big • Draw pictures to help discuss ideas • Quantity then Quality • Make assumptions (but write them down)
48. Slide 89: INT. TENT - LATE AFTERNOON SCENE ...Harry paces. Hermione snaps shut the flap. Smiles nervously. ACTION HERMIONE How're you feeling? OK? Harry nods. Hermione glances about. Fleur sits in stony silence. Krum lies on a bench. Diggory paces. ACTOR HERMIONE The key is to concentrate. After that, you just have to... DIALOGUE HARRY Battle a dragon.
49. Slide 90: A “Script” • Dana visits Y!Local – searches for “restaurants” in the local search or – browses through to restaurants • Recent/popular reviews of restaurants are shown • She tries to find ones that are in her neighbourhood • Dana looks for restaurants reviewed highly by her friends • Dana gets driving directions printed, with a photo of the store front.
50. Slide 91: “Anal George”
51. Slide 92: The Script • Choose one or two core ideas • Aim for 5-8 steps in the scenario • The character is the narrator • Remember to script dialogue!
52. Slide 96: 12 computer concept panels that always work, copyright kevin cheng
53. Slide 97: Story flow • Left to right, top to bottom • Try a variety of angles • comics convey motion • Draw small • Aim for 5-8 panels
54. Slide 98: I’m hungry …
55. Slide 100: Burp!
56. Slide 103: http://avatars.yahoo.com
57. Slide 105: Sun Design Comic Templates: http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0
58. Slide 108: The Amateur Gormet: http://www.amateurgourmet.com/the_amateur_gourmet/2006/11/chutzpah_truffl.html
59. Slide 109: Draw! • Don’t forget to add dialogue • Gesture and facial expressions say a lot • Should communicate story on its own
60. Slide 111: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
61. Slide 112: Research and Comics A Case Study
62. Slide 113: Yahoo! Local - Yahoo! Local helps you find the things you need in your neighborhood and beyond. It gives you the names and phone numbers of local services and businesses, and it also shows you information related to them. For instance, you'll get the name and address of your local deli, the time it opens, whether it accepts Visa, and maybe even how helpful the wait staff is. In addition, several businesses have ratings and reviews from other users. Setup a Yahoo! 360 network so you can view reviews written by your friends.
63. Slide 114: Evaluation: The ability to view reviews from your friends Could gather quantitatively through o 1 – Not at all appealing online surveys o2 o3 o4 o 5 – Extremely appealing
64. Slide 115: Percent indicating probably or definitely will use 87% Feature A 83% 83% Feature B 77% 76% Feature C 73% 76% Feature D 73% 70% Feature E 60% 66% Feature F 68% Why? 62% Feature G 62% 62% Feature H 0% 20% 40% 60% 80% 100% Q205 Q404 Percentage of Participants
65. Slide 117: How do we give users a feeling of experiencing a concept?
66. Slide 118: How can we be inspired by our users early in the development process? Concept Discover Definition Refinement Development Animation Personas Use cases Wireframes Alpha Video Competitive Mood board Functional Specs Beta Interactive analysis Site map Style guide prototype Creative brief Task analysis Requirements
67. Slide 119: Beyond Internal Communication – Walking users through your comics
68. Slide 120: 1st Instruction: Walkthrough and Talk Printed out these comics for the walkthrough
69. Slide 121: 2nd Instruction: Walkthrough and Write
70. Slide 122: 3rd Instruction: Attributes ofmechanism to Purpose: Give participants a the story Confusing Appealing Complex Useful communicate their thoughts. Color coded their thoughts based on 4 basic attributes
71. Slide 123: 4th Instruction: Tell your own story “This would have been useful when….”
72. Slide 125: Confusion in the story Vs Confusion in the concepts
73. Slide 126: Which elements of the UI to include?
74. Slide 127: Sometimes UI elements were good
75. Slide 128: Sometimes bad
76. Slide 129: Be prepared to iterate your comics!
77. Slide 130: Know your key cells
78. Slide 131: Facilitation Allow normal for participants! of time! This burnout: Give yourselfread is not participantsup front Set expectations to plenty zzzz
79. Slide 132: Walking users through your comics can: 1. Evaluate concepts within the context of use 2. Understand why concepts are appealing and how to increase their appeal 3. Discover potential user barriers and motivations within using the product concept 4. Help redefine use cases based on participant’s own stories 5. Clarify mental model users currently have of a product concept 6. Improve your storytelling
80. Slide 133: Walking users through your comics cannot 1. Quantitatively define appeal of product concepts 2. Uncover usability issues within a product 3. Answer behavioral questions of how users accomplish a task 4. Uncover in-context behavioral uses and needs users can not describe.
81. Slide 134: Your turn
82. Slide 135: 1. Read through story (silently first!) 2. walk you through the story using their own words 3. Mark it up, using the 4 attributes Appealing, Useful, Confusing, Complicated 4. Ask them to tell you their own stories 5. listen, Probe, and know your key areas
83. Slide 137: Final exam
84. Slide 138: Which Does Not Belong? Communication Imagination taxation Expression Motion Iteration
85. Slide 139: What is this expression? a. Happy b. Angry c. Concentration d. Get me out of here
86. Slide 140: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
87. Slide 141: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
88. Slide 142: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
89. Slide 143: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
90. Slide 144: Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
91. Slide 145: Images copyright DC Comics, Marvel Comics, Bill Watterson, Jim Davis, Scott Adams, Frank Miller, Warner Bros, Akira Toriyama, Gary Larson, Bil Keane, Jerry Holkins and Mike Krahulik
92. Slide 147: Resources • Understanding Comics, Scott McCloud • Comics and Sequential Art, Will Eisner • Tarquin Engine www.webcomicsnation.com/tarquin/ • Storyboard Artist www.storyboardartist.com • Comic Life www.plasq.com • Comic fonts and bubbles blambot.com • Wally Wood’s 22 Panels That Always Work • Yahoo! Avatars avatars.yahoo.com
93. Slide 148: Contact • Kevin Cheng kcheng@yahoo-inc.com • Jane Jao janejao@yahoo-inc.com • Mark Wehner markw@yahoo-inc.com • CommunicatingConceptsThroughComics
94. Slide 150: facial expression dictionary, copyright kevin cheng
95. Slide 151: 12 computer concept panels that always work, copyright kevin cheng
96. Slide 152: gesture dictionary, copyright kevin cheng