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 .

He enjoys good food of most sorts and while he would never turn down a free beer. .This is Peter Peter is an information architect at a consultancy and travels frequently to meet with clients. he’s 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 .

5 Map indicating location of business 10. . 5. if appropriate User selects to send the driving directions and address of the business to user’s mobile phone 4. Phone Number 10.1.1 Top Results (Relevance) 7.2 Distance 7.5 Pagination for search results User can sort results by: 7.2 Business Address.3 Highly rated businesses 4.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.1 Business Name 10. 3.1 Name of business 6.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.6 A pre-filled Location box 4.1. #20031 User locates a restaurant within 0. and user favorites User enters a search term “Restaurants” and hits submit System displays a list of search results for the area selected: 6.9 RSS feeds for top restaurants.5mi which they are satisfied with.2.3 Recent Searches 10.2 Upcoming events 4.1 Businesses with ratings from friends of friends are shown through a unique icon 6.2 Or by zip code 3.2 Rating 7. #16322. 6.8 Neighborhoods 4.1 By city and state 3.4 Recently visited businesses on Yahoo! Local 4. User accesses web browser User enters local.4 Map of search results 6.3 Or by selecting a city from a list System displays the Yahoo! Local homepage including 4. 9. recent events.6 Photos of the business.2 Average rating 6.3 Distance from selected location 6. 11. 10.5 A search box to enter a search term 4.2 Reviews 10.1 Map of the selected vicinity 4.com address into browser System requests for user to select a location: 3.4 Suggestions for similar places 10.3 Business categories 10. 7. 2. 1.yahoo.1. 8.7 Business categories 4.1 Business Details 10.

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 .

Akira Toriyama.Images copyright DC Comics. Marvel Comics. Bil Keane. Jerry Holkins and Mike Krahulik . Frank Miller. Jim Davis. Warner Bros. Gary Larson. Bill Watterson. Scott Adams.

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 .

Late night club scenes C. Karaoke .What motivates Peter? A. Free Beer B.

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 .

Bil Keane.Images copyright DC Comics. Jerry Holkins and Mike Krahulik . Frank Miller. Marvel Comics. Akira Toriyama. Warner Bros. Jim Davis. Scott Adams. Bill Watterson. Gary Larson.

.

.

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

Source: Laurie Vertelney .

.

.

Communication imagination Expression Motion Iteration .

communication .

.

.

.

imagination .

.

expression

I’m sorry

Thank you

.

.

copyright kevin cheng .facial expression dictionary.

An Exercise .

.

copyright kevin cheng inspired by will eisner .gesture dictionary.

.

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) .

.

DIALOGUE HARRY Battle a dragon. .LATE AFTERNOON SCENE .INT. Diggory paces... TENT .Harry paces. Fleur sits in stony silence. Smiles nervously.. you just have to. ACTOR HERMIONE The key is to concentrate. After that. Hermione glances about. ACTION HERMIONE How're you feeling? OK? Harry nods.. Krum lies on a bench. Hermione snaps shut the flap.

. with a photo of the store front.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.

“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 .

top to bottom • Try a variety of angles • comics convey motion • Draw small • Aim for 5-8 panels .Story flow • Left to right.

I’m hungry … .

.

Burp! .

.

.

com .yahoo.http://avatars.

.

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

.

.

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

Draw! • Don’t 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 .

whether it accepts Visa.Yahoo! Local . For instance. and it also shows you information related to them. you'll get the name and address of your local deli. It gives you the names and phone numbers of local services and businesses.Yahoo! Local helps you find the things you need in your neighborhood and beyond. In addition. Setup a Yahoo! 360 network so you can view reviews written by your friends. several businesses have ratings and reviews from other users. and maybe even how helpful the wait staff is. . the time it opens.

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 .

Discover potential user barriers and motivations within using the product concept 4. Clarify mental model users currently have of a product concept 6. Help redefine use cases based on participant’s own stories 5.Walking users through your comics can: 1. Understand why concepts are appealing and how to increase their appeal 3. Improve your storytelling . Evaluate concepts within the context of use 2.

Walking users through your comics cannot 1. Uncover usability issues within a product 3. Quantitatively define appeal of product concepts 2. Answer behavioral questions of how users accomplish a task 4. Uncover in-context behavioral uses and needs users can not describe. .

Your turn .

using the 4 attributes Appealing. Mark it up. Complicated 4. Useful.1. Read through story (silently first!) 2. Probe. and know your key areas . Confusing. Ask them to tell you their own stories 5. listen. walk you through the story using their own words 3.

.

Final exam .

Which Does Not Belong? Communication Imagination taxation Expression Motion Iteration .

Get me out of here . Concentration d. Happy b.What is this expression? a. Angry c.

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

.

com/tarquin/ • Storyboard Artist www.plasq.Resources • Understanding Comics.com • Comic Life www.com • Wally Wood’s 22 Panels That Always Work • Yahoo! Avatars avatars.com . Scott McCloud • Comics and Sequential Art.storyboardartist.com • Comic fonts and bubbles blambot.webcomicsnation. Will Eisner • Tarquin Engine www.yahoo.

com Jane Jao janejao@yahoo-inc.com CommunicatingConceptsThroughComics .com Mark Wehner markw@yahoo-inc.Contact • • • • Kevin Cheng kcheng@yahoo-inc.

.

copyright kevin cheng .facial expression dictionary.

12 computer concept panels that always work. copyright kevin cheng .

copyright kevin cheng .gesture dictionary.

Sign up to vote on this title
UsefulNot useful