Creating Conceptual Comics - Storytelling Techniques

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 Use cases Wireframes Competitive Mood board Functional Specs analysis Site map Style guide Creative brief Task analysis Requirements

Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements

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, he’s not exactly looking to scout for the hottest in the late night club scene.

Use Case ID #24601 Use Case Name Discover a Quality Local Restaurant in the Immediate Vicinity Goal Level User Use Cases that reference this Use Case #10592, #16322, #20031 Success Guarantee User locates a restaurant within 0.5mi which they are satisfied with. Main Use Case Scenario 1. User accesses web browser 2. User enters local.yahoo.com address into browser 3. 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 4. 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 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 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 7. User can sort results by: 7.1 Top Results (Relevance) 7.2 Rating 7.2 Distance 7.3 Name 8. User filters results to the cuisine they are most interested in 9. User selects a restaurant that is highly rated and also rated by a member of their network 10. 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 11. User selects to send the driving directions and address of the business to user’s mobile phone

Refinement Discover Definition Development Concept Personas Use cases Wireframes Alpha Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements

Discover Definition Refinement Development Concept Personas Use cases Wireframes Alpha ? Competitive Mood board Functional Specs Beta analysis Site map Style guide Creative brief Task analysis Requirements

Discover Definition Refinement Development Concept Animation Personas Use cases Wireframes Alpha Video Competitive Mood board Functional Specs Beta Interactive analysis Site map Style guide prototype Creative brief Task analysis Requirements

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?!

• 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

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

I’m 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

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

I’m 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! • Don’t forget to add dialogue • Gesture and facial expressions say a lot • Should communicate story on its own

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.

Evaluation: The ability to view reviews from your friends Could gather quantitatively through o 1 – Not at all appealing online surveys o2 o3 o4 o 5 – Extremely appealing

Percent indicating probably or definitely will use 87% Feature A 83% 83% Feature B 77% 76% Feature C 73% 76% Feature D 73% 70% Feature E 60% 66% Feature F 68% Why? 62% Feature G 62% 62% Feature H 0% 20% 40% 60% 80% 100% Q205 Q404 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 Personas Use cases Wireframes Alpha Video Competitive Mood board Functional Specs Beta Interactive analysis Site map Style guide prototype Creative brief Task analysis Requirements

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

3rd Instruction: Attributes ofmechanism to Purpose: Give participants a the story Confusing Appealing Complex 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 participant’s 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

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 Wood’s 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

Creating Conceptual Comics - Storytelling Techniques

0 comments

Notes on slide 1

61 Favorites & 1 Group