Comics: Not just for laughs!

by:   |  Posted on

Every project has its own unique set of “opportunities”—also known as challenges. Many of these challenges relate not to the quality of our work, but rather to the communication of our ideas. Often in the course of design, you must communicate complicated concepts to a non-technical (and often uninterested) project sponsor, client, or stakeholder. So how do you capture their interest, get their understanding and buy-in, and finally move on?

A Real-Life “Opportunity”

I work as a user experience designer on an interactive team at a mid-sized strategic communications firm, Capstrat, based in Raleigh, NC. One recent web project presented our team the opportunity to communicate using comics. We were redesigning a family of more than 120 individual franchisee websites into one common web strategy, look and feel, and information architecture (IA). The challenge (“opportunity!”) was that governing umbrella organization had never enforced any kind of control over the web and the brand had been fractured by an inconsistent online user experience.

Our team was faced with getting consensus from a committee of more than 40 individuals, all with equal interest and many with their own motives. We knew getting buy-in from this hugely diverse group on the design for the new common web strategy and CMS was essential.

At the time, we were prepping for an international presentation where we would unveil new website designs, information flow, and shared CMS strategy. After the presentation, a Q&A session and formal vote were planned; the outcome would determine if and how proceeded with the project. We had some difficult concepts to communicate to a large audience in a limited amount of time. In just 30 minutes, we had to cover:

  • The overall look and feel of the new websites
  • How external users would move through the website to complete common scenarios
  • How the site design would maintain brand and structure consistency when propagated out to more than 120 individual sites while still offering flexibility to accommodate each website’s individual needs
  • How a non-technical administrator for each of the individual websites would engage and interact with a CMS to set up and maintain their site

We knew that presenting wireframes or flow diagrams to such a large group had the potential to be disastrous, but we also recognized that presenting flat visual design screenshots would leave too many unanswered questions. That’s when we considered the idea of using comics.

Why Comics?

Comics are becoming recognized as an effective means of communicating difficult concepts to diverse audiences—even in the most staid corporate environments and with the most serious topics.

In fact, in August 2006, Sid Jacobson and Ernie Colon released “The 9/11 Report: A Graphic Adaptation,” an illustrated digest of the 9/11 Commission’s 586-page report. About their choice of the comic medium, they said, “In a culture that has become the most visually oriented in the history of humankind, comics retain the original concept of storytelling and remain a potent force of information.” It is the storytelling attribute of comics that allows them to strike an un-intimidating and familiar chord with many audiences, even when dealing with sobering topics such as the 9/11 terrorist attacks.

Comics are effective not only because they are essentially narrative, but also because they are unpretentious, easy to follow, and accessible. Whereas a functional specification document uses words and often “tech speak” to communicate functionality, comics use pictures and interactions to get ideas across. Comic artist and Yahoo! staffer Kevin Cheng put it best, calling comics “the universal language.”

In contrast to many of the common tools of our trade (for example, use cases and process flows), the sequential nature of comic frames can communicate the progression of time (see image 1). Scott McCloud, author of “Understanding Comics,” notes that “creating meaning differences” in sequential comic frames is what transforms a series of separate illustrations into the “art of comics.”

Using a series of comic frames sequentially helps illustrate the progression of time.

Image 1: Using a series of comic frames sequentially helps illustrate the progression of time. (Click to enlarge.)

Comics can also easily illustrate a user’s response to an onscreen interaction. A flow diagram with an end error state or confirmation message may require the reader to decipher it, but the comic character’s facial expression can clearly reflect frustration or pleasure (see image 2) with a specific computer interaction. Using characters in your comic forces you to focus on the user experience implications of design decisions, one of the basics of a user centered design (UCD) approach.

A user's satisfaction/dissatisfaction with the outcome of a specific computer interaction can be illustrated using facial expressions.

Image 2: A user’s satisfaction/dissatisfaction with the outcome of a specific computer interaction can be illustrated using facial expressions. (Click to enlarge.)

Screenshots of user interface (UI) elements can also be incorporated into comic frames (see image 3) to give readers additional insight into the user’s experience. When presenting comics and page elements, this approach allows your audience to provide timely feedback on a screenshot, low fidelity prototype, or wireframe while understanding a page element in a greater context.

Including wireframe or screenshot functionality in a series of sequential comic frames communicates the context for interaction.

Image 3: Including wireframe or screenshot functionality in a series of sequential comic frames communicates the context for interaction.

How do you use comics to explain user experience?

Here’s how we made it work:

Step 1: Focus on the point (forget the details)
I was already well aware of our key scenarios and use cases, so I crafted brief stories in paragraph form for each one. Taking the time to write these stories before incorporating them into a comic allowed me to focus on the main points and the completeness of the message without the clutter of images and thought bubbles.

Step 2: Go from script to strip
I then thought through how to logically translate each scenario-based vignette into a series of frames. Each frame needed to communicate a key action or thought process in the scenario. To do this I created empty square frames and pasted in portions of my story in each.

Step 3: Fill in the Details
With the outline of my comic strip completed, I was ready to start filling in the details. Based on what I’d learned from Kevin Cheng1 and others2, I knew I really didn’t need a lot of different designs, just a few varying facial expressions and illustrations of individuals at computers. With help from Microsoft’s Clip Art Gallery Live and a thought bubble tactic from Dan Brown, I added my characters and text. Finally, I carefully selected elements from the wireframes to incorporate. It looked something like image 4.

Draft version of a scenario-based comic.

Image 4: Draft version of a scenario-based comic. (Click to enlarge.)

While no work of artistic mastery, the rudimentary sequential frames were easy to follow and communicated how an external user would move through the website.

At this point, we could have decided to intersperse the visual design screenshots with the comic strips for the presentation. However, our creative and interactive directors decided to have the comics turned into cartoons, which included having them professionally drawn and voiced and the still frame transitions animated.

So, I completed five or more comic strips for the most common website scenarios. Each frame was then pasted into a storyboard that captured the audio content to support it. The storyboard also captured when and where the visual design screenshots would be incorporated into each story.

Shortly thereafter, the transitions between the individual comic frames were animated and interspersed with the visual designs to show not only what the site would look like but also how users would interact with it. The animated transitions also showed how administrators would manage and create the sites in the CMS.

The presentation successfully communicated how users would engage with the site in addition to how it would look. Audience members commented on the use of comics as “a really cool way to demonstrate functionality.” While the team also got a few “how did they do that?” responses, others mentioned how easy it was to understand the process with comics. Using comics, we were able to quickly communicate complex concepts to a large, diverse audience. The comic medium also allowed us to illustrate answers to many of the audience’s questions before getting to the Q&A session.

A bonus of the project: I now have a generic Visio template that includes comics that I can reuse for future projects. (Download it here.) When using the professionally-created frames in Visio3, remember that you can create your own comics using hand-drawn art or clip art.

It’s not the technical skill of the drawing that matters; rather, it’s the essence of what is being communicated. Be it wireframes, use cases, or scenarios, the comic strip is merely a vehicle that allows you to communicate your work effectively and powerfully.

1Kevin Cheng, Communicating Concepts through Comics.

2Carson Van Osten, Comic Strip Artist’s Kit

3To use this template in Visio, download it to your “My Shapes” folder. It should then appear in Visio under Files > Shapes > My Shapes.