Creating Conceptual Comics: Storytelling and techniques
Kevin Cheng Jane Jao Mark Wehner Yahoo!, Inc
Where are the artists?
An Exercise
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?
Who is kevin?
Who is Mark?
Who is jane?
Concept Tools
How we used comics Properties of comics Creating Comics Getting feedback on Concepts
What is Community?
TPS
Report
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Concept
Discover
Definition
Refinement
Development
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
Concept
Discover
Definition
Refinement
Development
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
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, hes not exactly looking to scout for the hottest in the late night club scene.
Concept
Discover
Definition
Refinement
Development
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
Use Case ID Use Case Name Goal Level Use Cases that reference this Use Case Success Guarantee Main Use Case Scenario
#24601 Discover a Quality Local Restaurant in the Immediate Vicinity User #10592, #16322, #20031 User locates a restaurant within 0.5mi which they are satisfied with. 1. 2. 3. User accesses web browser User enters local.yahoo.com address into browser 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 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 User enters a search term Restaurants and hits submit 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 User can sort results by: 7.1 Top Results (Relevance) 7.2 Rating 7.2 Distance 7.3 Name User filters results to the cuisine they are most interested in User selects a restaurant that is highly rated and also rated by a member of their network 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 User selects to send the driving directions and address of the business to users mobile phone
4.
5. 6.
7.
8. 9. 10.
11.
Concept
Discover
Definition
Refinement
Development
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
Concept
Discover
Definition
Refinement
Development
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
Concept
Discover
Definition
Refinement
Development
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
Concept
Discover
Definition
Refinement
Development
Animation Video Interactive prototype
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
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
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
Comics?!
Concept Tools
How we used comics
Properties of comics Creating Comics Getting feedback on Concepts
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.
TPS
Report
Pop Quiz
What motivates Peter?
A. Free Beer B. Late night club scenes C. Karaoke
Where do comics fit in?
Concept
Discover
Definition
Refinement
Development
Concept Tools How we used comics
Properties of comics
Creating Comics Getting feedback on Concepts
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
World Intellectual Property Organization (WIPO): http://www.wipo.int/freepublications/en/patents/485/wipo_pub_485.pdf
Source: Laurie Vertelney
Communication imagination Expression Motion Iteration
communication
imagination
expression
Im sorry
Thank you
facial expression dictionary, copyright kevin cheng
An Exercise
gesture dictionary, copyright kevin cheng inspired by will eisner
motion
iteration
Communication imagination Expression Motion Iteration
Concept Tools How we used comics Properties of comics
Creating Comics
Getting feedback on Concepts
Envelopes please
brainstorm
Think big Draw pictures to help discuss ideas Quantity then Quality Make assumptions (but write them down)
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.
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.
Anal George
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!
12 computer concept panels that always work, copyright kevin cheng
Story flow
Left to right, top to bottom Try a variety of angles comics convey motion Draw small Aim for 5-8 panels
Im hungry
Burp!
http://avatars.yahoo.com
Sun Design Comic Templates: http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0
The Amateur Gormet: http://www.amateurgourmet.com/the_amateur_gourmet/2006/11/chutzpah_truffl.html
Draw!
Dont forget to add dialogue Gesture and facial expressions say a lot Should communicate story on its own
Concept Tools How we used comics Properties of comics Creating Comics
Getting feedback on Concepts
Research and Comics
A Case Study
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.
The ability to view reviews from your friends o 1 Not at all appealing o2 o3 o4 o 5 Extremely appealing
Evaluation: Could gather quantitatively through online surveys
Percent indicating probably or definitely will use
87% 83% 83% 77% 76% 73% 76% 73% 70% 60% 66% 68% 62% 62% 62%
Feature A Feature B Feature C Feature D Feature E Feature F Feature G Feature H 0% 20% 40%
Why?
80% 100% Q205 Q404
60%
Percentage of Participants
How do we give users a feeling of experiencing a concept?
How can we be inspired by our users early in the development process?
Concept Discover Definition Refinement Development
Animation Video Interactive prototype
Personas Competitive analysis Creative brief
Use cases Mood board Site map Task analysis Requirements
Wireframes Functional Specs Style guide
Alpha Beta
Beyond Internal Communication Walking users through your comics
1st Instruction: Walkthrough and Talk Printed out these comics for the walkthrough
2nd Instruction: Walkthrough and Write
Purpose: Give participants a the story 3rd Instruction: Attributes ofmechanism to Complex Confusing Appealing Useful communicate their thoughts. Color coded their thoughts based on 4 basic attributes
4th Instruction: Tell your own story
This would have been useful when.
Confusion in the story Vs Confusion in the concepts
Which elements of the UI to include?
Sometimes UI elements were good
Sometimes bad
Be prepared to iterate your comics!
Know your key cells
Facilitation Allow normal for participants! of time! This burnout: Give yourselfread is not participantsup front Set expectations to plenty
zzzz
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 participants own stories 5. Clarify mental model users currently have of a product concept 6. Improve your storytelling
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.
Your turn
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
Final exam
Which Does Not Belong? Communication Imagination taxation Expression Motion Iteration
What is this expression?
a. Happy b. Angry c. Concentration d. Get me out of here
Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
Concept Tools How we used comics Properties of comics Creating Comics Getting feedback on Concepts
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
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 Woods 22 Panels That Always Work Yahoo! Avatars avatars.yahoo.com
Contact
Kevin Cheng kcheng@yahoo-inc.com Jane Jao janejao@yahoo-inc.com Mark Wehner markw@yahoo-inc.com CommunicatingConceptsThroughComics
facial expression dictionary, copyright kevin cheng
12 computer concept panels that always work, copyright kevin cheng
gesture dictionary, copyright kevin cheng
