Communicating Concepts
Through Comics
Kevin Cheng
Jane Jao
Yahoo!, Inc

What is
“Community”?

TPS
Report

Concept Discover Definition Refinement Development

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

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

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

“Appealing”
“Useful”
“Complicated”
“Confusing”

Appealing, Useful, Confusing, Complicated

Appealing, Useful, Confusing, Complicated

Appealing, Useful, Confusing, Complicated

Walkthrough: What We Did

An exercise

Where are the artists?

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

#1
Comics
Communicate
concepts

#2
you
Can draw
comics

You can draw comics to
communicate concepts

#1

Source: Laurie Vertelney

Communication
imagination
Expression
Motion
Iteration

communication

imagination

expression

I’m sorry
Thank you

gesture dictionary, copyright kevin cheng

motion

iteration

Communication
imagination
Expression
Motion
Iteration

#1
Comics
Communicate
concepts

#2
you
Can draw
comics

You can draw comics to
communicate concepts

#2

Copyright Mark Wehner, Yahoo! User Researcher

facial expression dictionary, copyright kevin cheng

12 computer concept panels that always work, copyright kevin cheng

http://avatars.yahoo.com

#1
Comics
Communicate
concepts

#2
you
Can draw
comics

You can draw comics to
communicate concepts

Images copyright Jostein Magnussen, Trine Andersen, James Reffel, Chris Baum, Christian Crumlish, Cynthia Berman, Kyle Pero, Wilo Dietrich, Sonya Smith-Wong, Tutti Taygerly,
Vinicio Vasquez, Mira Sutijono, Lorelei Brown, Andrew Hinton

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

http://kevnull.com/presentations/iasummit2006/
Communicating Concepts Through Comics.pdf