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