Creating Conceptual Comics

8/3/2019 Creating Conceptual Comics

1/152

Creating Conceptual Comics:Storytelling and techniques

Kevin ChengJane Jao

Mark WehnerYahoo!, Inc


2/152

Where are the artists?


3/152

An Exercise


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?


5/152

Who is kevin?


6/152


7/152


8/152


9/152


10/152

Who is Mark?


11/152


12/152

Who is jane?


13/152


14/152


15/152

Concept Tools

How we used comics

Properties of comics

Creating Comics

Getting feedback on Concepts


16/152

What is Community?


17/152

TPSReport


18/152

Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes

Functional SpecsStyle guide


19/152

Concept Discover Definition Refinement Development

Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta


20/152


Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta


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.


22/152


Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta


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


24/152


Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta


25/152


26/152


Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta


27/152


28/152


29/152


30/152


Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta?


31/152


Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


Alpha

Beta

Animation

Video

Interactiveprototype


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


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


34/152

Comics?!


35/152


36/152

Concept Tools

How we used comics


Creating Comics



37/152


38/152


39/152


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.


41/152


42/152


43/152

TPSReport


44/152

Pop Quiz


45/152

What motivates Peter?A. Free Beer

B. Late night club scenes

C. Karaoke


46/152


Where do comics fit in?


47/152


48/152

Concept Tools

How we used comics


Creating Comics



49/152



50/152


51/152


52/152

World Intellectual Property Organization (WIPO): http://www.wipo.int/freepublications/en/patents/485/wipo_pub_485.pdf


53/152

Source: Laurie Vertelney


54/152


55/152


56/152

Communication

imaginationExpression

Motion

Iteration


57/152

communication


58/152


59/152


60/152


61/152

imagination


62/152


63/152


64/152


65/152

expression


66/152

Im sorry

Thank you


67/152


68/152


69/152

facial expression dictionary, copyright kevin cheng


70/152

An Exercise


71/152


72/152

gesture dictionary, copyright kevin cheng inspired by will eisner


73/152


74/152

motion


75/152


76/152


77/152


78/152


79/152


80/152


81/152

iteration


82/152


83/152

Communication

imagination

Expression

MotionIteration


84/152

Concept Tools

How we used comics


Creating Comics



85/152


86/152

Envelopes please

brainstorm


87/152

Think big

Draw pictures to help discuss ideas

Quantity then Quality

Make assumptions (but write themdown)


88/152

INT TENT LATE AFTERNOON SCENE


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


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.


91/152

Anal George

The Script


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!


93/152


94/152


95/152


96/152

12 computer concept panels that always work, copyright kevin cheng

Story flow


97/152

Left to right, top to bottom

Try a variety of angles

comics convey motion

Draw small

Aim for 5-8 panels

Im


98/152

I m

hungry


99/152


100/152

Burp!


101/152


102/152


103/152

http://avatars.yahoo.com


104/152


105/152

Sun Design Comic Templates: http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0


106/152


107/152


108/152

The Amateur Gormet: http://www.amateurgourmet.com/the_amateur_gourmet/2006/11/chutzpah_truffl.html

Draw!


109/152

Dont forget to add dialogue

Gesture and facial expressions say a lot

Should communicate story on its own


110/152

Concept Tools


111/152

How we used comics


Creating Comics



112/152

Research and Comics

A Case Study


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.


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


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?


116/152

How do we give users a feeling of experiencing a concept?


117/152

How do we give users a feeling of experiencing a concept?

How can we be inspired by our users


118/152


Alpha

Beta

Animation

VideoInteractive

prototype

Personas

Competitiveanalysis

Creative brief

Use cases

Mood boardSite map

Task analysis

Requirements

Wireframes


early in the development process?

Beyond Internal Communication Walking users


119/152

Beyond Internal Communication Walking usersthrough your comics

Printed out these comics for the walkthrough1st Instruction: Walkthrough and Talk


120/152

2nd Instruction: Walkthrough and Write


121/152

3rd Instruction: Attributes of the storyAppealingUsefulConfusingComplexPurpose: Give participants a mechanism to

communicate their thoughts


122/152

Color coded their thoughts based on 4 basic attributescommunicate their thoughts.

4th Instruction: Tell your own story


123/152

4 Instruction: Tell your own story

This

would

have been

useful

when.


124/152


125/152

Confusion in the story

Vs

Confusion in the concepts

Which elements of the UI to include?


126/152

Sometimes UIelements were


127/152

elements weregood

Sometimes bad


128/152

Be prepared to iterate your comics!


129/152

Know your key cells


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


131/152

zzzz

Walking users through your comics can:

1. Evaluate concepts within the context of use


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


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.


134/152

Your turn

1. Read through story (silently first!)

2 walk you through the story using


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


136/152


137/152

Final exam

Communication

Which Does Not

Belong?


138/152

Communication

Imagination

taxation

Expression

Motion

Iteration

What is this expression?

a. Happy


139/152

b. Angry

c. Concentration

d. Get me out of

here

Concept Tools


140/152

How we used comics


Creating Comics


Concept Tools


141/152

How we used comics


Creating Comics


Concept Tools

How we used comics


142/152

How we used comics


Creating Comics


Concept Tools

How we used comics


143/152

How we used comics


Creating Comics


Concept Tools

How we used comics


144/152

How we used comics


Creating Comics



145/152



146/152

Resources

Understanding Comics, Scott McCloud

Comics and Sequential Art, Will Eisner


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 [email protected]

Jane Jao [email protected]


148/152

Jane Jao janejao@yahoo inc.com

Mark Wehner [email protected] CommunicatingConceptsThroughComics


149/152


150/152

facial expression dictionary, copyright kevin cheng


151/152

12 computer concept panels that always work, copyright kevin cheng


152/152

gesture dictionary, copyright kevin cheng

Creating Conceptual Comics

Documents

Transcript of Creating Conceptual Comics