Post on 06-Apr-2018
transcript
8/3/2019 Creating Conceptual Comics
1/152
Creating Conceptual Comics:Storytelling and techniques
Kevin ChengJane Jao
Mark WehnerYahoo!, Inc
8/3/2019 Creating Conceptual Comics
2/152
Where are the artists?
8/3/2019 Creating Conceptual Comics
3/152
An Exercise
8/3/2019 Creating Conceptual Comics
4/152
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?
8/3/2019 Creating Conceptual Comics
5/152
Who is kevin?
8/3/2019 Creating Conceptual Comics
6/152
8/3/2019 Creating Conceptual Comics
7/152
8/3/2019 Creating Conceptual Comics
8/152
8/3/2019 Creating Conceptual Comics
9/152
8/3/2019 Creating Conceptual Comics
10/152
Who is Mark?
8/3/2019 Creating Conceptual Comics
11/152
8/3/2019 Creating Conceptual Comics
12/152
Who is jane?
8/3/2019 Creating Conceptual Comics
13/152
8/3/2019 Creating Conceptual Comics
14/152
8/3/2019 Creating Conceptual Comics
15/152
Concept Tools
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
8/3/2019 Creating Conceptual Comics
16/152
What is Community?
8/3/2019 Creating Conceptual Comics
17/152
TPSReport
8/3/2019 Creating Conceptual Comics
18/152
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
8/3/2019 Creating Conceptual Comics
19/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta
8/3/2019 Creating Conceptual Comics
20/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta
8/3/2019 Creating Conceptual Comics
21/152
This is Peter
Peter is an information
architect at a consultancy andtravels frequently to meet
with clients.
He enjoys good food of mostsorts and while he would
never turn down a free beer,
hes not exactly looking toscout for the hottest in the
late night club scene.
8/3/2019 Creating Conceptual Comics
22/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta
8/3/2019 Creating Conceptual Comics
23/152
#10592, #16322, #20031Use Cases that reference this Use Case
User locates a restaurant within 0.5mi wh ich they are satisfied with.Success Guarantee
Main Use Case Scenario
UserGoal Level
Discover a Quality Local Restaurant in the Immediate VicinityUse Case Name
#24601Use Case ID
1. User accesses web browser2. User enters local.yahoo.com address into browser3. System requests for user to select a location:
3.1 By city and state3.2 Or by zip code3.3 Or by selecting a city from a list
4. System displays the Yahoo! Local homepage including
4.1 Map of the selected vicinity4.2 Upcoming events4.3 Highly rated businesses4.4 Recently visited businesses on Yahoo! Local4.5 A search box to enter a search term4.6 A pre-filled Location box4.7 Business categories4.8 Neighborhoods4.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 business6.2 Average rating
6.2.1 Businesses with ratings from friends of friends are shown through a unique icon6.3 Distance from selected location6.4 Map of search results6.5 Pagination for search results
7. User can sort results by:7.1 Top Results (Relevance)7.2 Rating
7.2 Distance7.3 Name
8. User filters results to the cuisine they are most interested in9. User selects a restaurant that is highly rated and also rated by a member of their network10. System displays the Business Page which includes:
10.1 Business Details10.1.1 Business Name10.1.2 Business Address, Phone Number10.1.3 Business categories
10.2 Reviews10.3 Recent Searches10.4 Suggestions for similar places10.5 Map indicating location of business
10.6 Photos of the business, if appropriate11. User selects to send the driving directions and address of the business to users mobile phone
8/3/2019 Creating Conceptual Comics
24/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta
8/3/2019 Creating Conceptual Comics
25/152
8/3/2019 Creating Conceptual Comics
26/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta
8/3/2019 Creating Conceptual Comics
27/152
8/3/2019 Creating Conceptual Comics
28/152
8/3/2019 Creating Conceptual Comics
29/152
8/3/2019 Creating Conceptual Comics
30/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta?
8/3/2019 Creating Conceptual Comics
31/152
Concept Discover Definition Refinement Development
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
Alpha
Beta
Animation
Video
Interactiveprototype
8/3/2019 Creating Conceptual Comics
32/152
skills and resources neededScripts
DrawingsComics
PersonasUse Cases
WireframesVideo
AnimationInteractive Prototype
some a lot
Based on original chart by Gayle Curtis and Laurie Vertelney
8/3/2019 Creating Conceptual Comics
33/152
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
8/3/2019 Creating Conceptual Comics
34/152
Comics?!
8/3/2019 Creating Conceptual Comics
35/152
8/3/2019 Creating Conceptual Comics
36/152
Concept Tools
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
8/3/2019 Creating Conceptual Comics
37/152
8/3/2019 Creating Conceptual Comics
38/152
8/3/2019 Creating Conceptual Comics
39/152
8/3/2019 Creating Conceptual Comics
40/152
Dana visits Y!Local searches for restaurants in the local search or
browses through to restaurants
Recent/popular reviews of restaurants areshown
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 aphoto of the store front.
8/3/2019 Creating Conceptual Comics
41/152
8/3/2019 Creating Conceptual Comics
42/152
8/3/2019 Creating Conceptual Comics
43/152
TPSReport
8/3/2019 Creating Conceptual Comics
44/152
Pop Quiz
8/3/2019 Creating Conceptual Comics
45/152
What motivates Peter?A. Free Beer
B. Late night club scenes
C. Karaoke
8/3/2019 Creating Conceptual Comics
46/152
Concept Discover Definition Refinement Development
Where do comics fit in?
8/3/2019 Creating Conceptual Comics
47/152
8/3/2019 Creating Conceptual Comics
48/152
Concept Tools
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
8/3/2019 Creating Conceptual Comics
49/152
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
8/3/2019 Creating Conceptual Comics
50/152
8/3/2019 Creating Conceptual Comics
51/152
8/3/2019 Creating Conceptual Comics
52/152
World Intellectual Property Organization (WIPO): http://www.wipo.int/freepublications/en/patents/485/wipo_pub_485.pdf
8/3/2019 Creating Conceptual Comics
53/152
Source: Laurie Vertelney
8/3/2019 Creating Conceptual Comics
54/152
8/3/2019 Creating Conceptual Comics
55/152
8/3/2019 Creating Conceptual Comics
56/152
Communication
imaginationExpression
Motion
Iteration
8/3/2019 Creating Conceptual Comics
57/152
communication
8/3/2019 Creating Conceptual Comics
58/152
8/3/2019 Creating Conceptual Comics
59/152
8/3/2019 Creating Conceptual Comics
60/152
8/3/2019 Creating Conceptual Comics
61/152
imagination
8/3/2019 Creating Conceptual Comics
62/152
8/3/2019 Creating Conceptual Comics
63/152
8/3/2019 Creating Conceptual Comics
64/152
8/3/2019 Creating Conceptual Comics
65/152
expression
8/3/2019 Creating Conceptual Comics
66/152
Im sorry
Thank you
8/3/2019 Creating Conceptual Comics
67/152
8/3/2019 Creating Conceptual Comics
68/152
8/3/2019 Creating Conceptual Comics
69/152
facial expression dictionary, copyright kevin cheng
8/3/2019 Creating Conceptual Comics
70/152
An Exercise
8/3/2019 Creating Conceptual Comics
71/152
8/3/2019 Creating Conceptual Comics
72/152
gesture dictionary, copyright kevin cheng inspired by will eisner
8/3/2019 Creating Conceptual Comics
73/152
8/3/2019 Creating Conceptual Comics
74/152
motion
8/3/2019 Creating Conceptual Comics
75/152
8/3/2019 Creating Conceptual Comics
76/152
8/3/2019 Creating Conceptual Comics
77/152
8/3/2019 Creating Conceptual Comics
78/152
8/3/2019 Creating Conceptual Comics
79/152
8/3/2019 Creating Conceptual Comics
80/152
8/3/2019 Creating Conceptual Comics
81/152
iteration
8/3/2019 Creating Conceptual Comics
82/152
8/3/2019 Creating Conceptual Comics
83/152
Communication
imagination
Expression
MotionIteration
8/3/2019 Creating Conceptual Comics
84/152
Concept Tools
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
8/3/2019 Creating Conceptual Comics
85/152
8/3/2019 Creating Conceptual Comics
86/152
Envelopes please
brainstorm
8/3/2019 Creating Conceptual Comics
87/152
Think big
Draw pictures to help discuss ideas
Quantity then Quality
Make assumptions (but write themdown)
8/3/2019 Creating Conceptual Comics
88/152
INT TENT LATE AFTERNOON SCENE
8/3/2019 Creating Conceptual Comics
89/152
INT. TENT - LATE AFTERNOON
...Harry paces. Hermione snaps shut the flap. Smilesnervously.
HERMIONEHow're you feeling? OK?
Harry nods. Hermione glances about. Fleur sits in stonysilence. Krum lies on a bench. Diggory paces.
HERMIONEThe key is to concentrate. After that, you just haveto...
HARRY
Battle a dragon.
SCENE
DIALOGUE
ACTOR
ACTION
A Script
8/3/2019 Creating Conceptual Comics
90/152
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 herneighbourhood
Dana looks for restaurants reviewed highly byher friends
Dana gets driving directions printed, with aphoto of the store front.
8/3/2019 Creating Conceptual Comics
91/152
Anal George
The Script
8/3/2019 Creating Conceptual Comics
92/152
Choose one or two core ideas
Aim for 5-8 steps in the scenario
The character is the narrator
Remember to script dialogue!
8/3/2019 Creating Conceptual Comics
93/152
8/3/2019 Creating Conceptual Comics
94/152
8/3/2019 Creating Conceptual Comics
95/152
8/3/2019 Creating Conceptual Comics
96/152
12 computer concept panels that always work, copyright kevin cheng
Story flow
8/3/2019 Creating Conceptual Comics
97/152
Left to right, top to bottom
Try a variety of angles
comics convey motion
Draw small
Aim for 5-8 panels
Im
8/3/2019 Creating Conceptual Comics
98/152
I m
hungry
8/3/2019 Creating Conceptual Comics
99/152
8/3/2019 Creating Conceptual Comics
100/152
Burp!
8/3/2019 Creating Conceptual Comics
101/152
8/3/2019 Creating Conceptual Comics
102/152
8/3/2019 Creating Conceptual Comics
103/152
http://avatars.yahoo.com
8/3/2019 Creating Conceptual Comics
104/152
8/3/2019 Creating Conceptual Comics
105/152
Sun Design Comic Templates: http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0
8/3/2019 Creating Conceptual Comics
106/152
8/3/2019 Creating Conceptual Comics
107/152
8/3/2019 Creating Conceptual Comics
108/152
The Amateur Gormet: http://www.amateurgourmet.com/the_amateur_gourmet/2006/11/chutzpah_truffl.html
Draw!
8/3/2019 Creating Conceptual Comics
109/152
Dont forget to add dialogue
Gesture and facial expressions say a lot
Should communicate story on its own
8/3/2019 Creating Conceptual Comics
110/152
Concept Tools
8/3/2019 Creating Conceptual Comics
111/152
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
8/3/2019 Creating Conceptual Comics
112/152
Research and Comics
A Case Study
8/3/2019 Creating Conceptual Comics
113/152
Yahoo! Local -Yahoo! Local helps you find the things youneed in your neighborhood and beyond. It gives you the
names and phone numbers of local services andbusinesses, and it also shows you information related tothem. For instance, you'll get the name and address ofyour local deli, the time it opens, whether it acceptsVisa, and maybe even how helpful the wait staff is. Inaddition, several businesses have ratings and reviewsfrom other users. Setup a Yahoo! 360 network so you canview reviews written by your friends.
8/3/2019 Creating Conceptual Comics
114/152
The ability to view reviews
from your friends
o 1 Not at all appealingo 2
o 3o 4o 5 Extremely appealing
Evaluation:
Could gatherquantitatively throughonline surveys
8/3/2019 Creating Conceptual Comics
115/152
Percent indicating probably or definitely will use
62%
68%
60%
73%
73%
77%
83%
62%
62%
66%
70%
76%
76%
83%
87%
0% 20% 40% 60% 80% 100%
Feature H
Feature G
Feature F
Feature E
Feature D
Feature C
Feature B
Feature A
Percentage of Participants
Q205
Q404
Why?
8/3/2019 Creating Conceptual Comics
116/152
How do we give users a feeling of experiencing a concept?
8/3/2019 Creating Conceptual Comics
117/152
How do we give users a feeling of experiencing a concept?
How can we be inspired by our users
8/3/2019 Creating Conceptual Comics
118/152
Concept Discover Definition Refinement Development
Alpha
Beta
Animation
VideoInteractive
prototype
Personas
Competitiveanalysis
Creative brief
Use cases
Mood boardSite map
Task analysis
Requirements
Wireframes
Functional SpecsStyle guide
early in the development process?
Beyond Internal Communication Walking users
8/3/2019 Creating Conceptual Comics
119/152
Beyond Internal Communication Walking usersthrough your comics
Printed out these comics for the walkthrough1st Instruction: Walkthrough and Talk
8/3/2019 Creating Conceptual Comics
120/152
2nd Instruction: Walkthrough and Write
8/3/2019 Creating Conceptual Comics
121/152
3rd Instruction: Attributes of the storyAppealingUsefulConfusingComplexPurpose: Give participants a mechanism to
communicate their thoughts
8/3/2019 Creating Conceptual Comics
122/152
Color coded their thoughts based on 4 basic attributescommunicate their thoughts.
4th Instruction: Tell your own story
8/3/2019 Creating Conceptual Comics
123/152
4 Instruction: Tell your own story
This
would
have been
useful
when.
8/3/2019 Creating Conceptual Comics
124/152
8/3/2019 Creating Conceptual Comics
125/152
Confusion in the story
Vs
Confusion in the concepts
Which elements of the UI to include?
8/3/2019 Creating Conceptual Comics
126/152
Sometimes UIelements were
8/3/2019 Creating Conceptual Comics
127/152
elements weregood
Sometimes bad
8/3/2019 Creating Conceptual Comics
128/152
Be prepared to iterate your comics!
8/3/2019 Creating Conceptual Comics
129/152
Know your key cells
8/3/2019 Creating Conceptual Comics
130/152
Know your key cells
Facilitation burnout:Give yourself plenty of time!This is not normal for participants!Set expectations up frontAllow participants to read
8/3/2019 Creating Conceptual Comics
131/152
zzzz
Walking users through your comics can:
1. Evaluate concepts within the context of use
8/3/2019 Creating Conceptual Comics
132/152
2. Understand why concepts are appealing and how toincrease their appeal
3. Discover potential user barriers and motivations withinusing the product concept
4. Help redefine use cases based on participants ownstories
5. Clarify mental model users currently have of a productconcept
6. Improve your storytelling
Walking users through your comics cannot
1 Q tit ti l d fi l f d t t
8/3/2019 Creating Conceptual Comics
133/152
1. Quantitatively define appeal of product concepts
2. Uncover usability issues within a product3. Answer behavioral questions of how users accomplish atask
4. Uncover in-context behavioral uses and needs users can
not describe.
8/3/2019 Creating Conceptual Comics
134/152
Your turn
1. Read through story (silently first!)
2 walk you through the story using
8/3/2019 Creating Conceptual Comics
135/152
2. walk you through the story usingtheir own words
3. Mark it up, using the 4 attributes Appealing,Useful,Confusing,Complicated
4. Ask them to tell you their ownstories
5. listen, Probe, and know your keyareas
8/3/2019 Creating Conceptual Comics
136/152
8/3/2019 Creating Conceptual Comics
137/152
Final exam
Communication
Which Does Not
Belong?
8/3/2019 Creating Conceptual Comics
138/152
Communication
Imagination
taxation
Expression
Motion
Iteration
What is this expression?
a. Happy
8/3/2019 Creating Conceptual Comics
139/152
b. Angry
c. Concentration
d. Get me out of
here
Concept Tools
8/3/2019 Creating Conceptual Comics
140/152
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
Concept Tools
8/3/2019 Creating Conceptual Comics
141/152
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
Concept Tools
How we used comics
8/3/2019 Creating Conceptual Comics
142/152
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
Concept Tools
How we used comics
8/3/2019 Creating Conceptual Comics
143/152
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
Concept Tools
How we used comics
8/3/2019 Creating Conceptual Comics
144/152
How we used comics
Properties of comics
Creating Comics
Getting feedback on Concepts
8/3/2019 Creating Conceptual Comics
145/152
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
8/3/2019 Creating Conceptual Comics
146/152
Resources
Understanding Comics, Scott McCloud
Comics and Sequential Art, Will Eisner
8/3/2019 Creating Conceptual Comics
147/152
Comics and Sequential Art, Will Eisner
Tarquin Enginewww.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
8/3/2019 Creating Conceptual Comics
148/152
Jane Jao janejao@yahoo inc.com
Mark Wehner markw@yahoo-inc.com CommunicatingConceptsThroughComics
8/3/2019 Creating Conceptual Comics
149/152
8/3/2019 Creating Conceptual Comics
150/152
facial expression dictionary, copyright kevin cheng
8/3/2019 Creating Conceptual Comics
151/152
12 computer concept panels that always work, copyright kevin cheng
8/3/2019 Creating Conceptual Comics
152/152
gesture dictionary, copyright kevin cheng