Design comics

Design comics are a type of storyboarding used in product and web site design. Design comics include product consumers or other characters in an illustrated story that shows how the users interact with the product. Here is an example of a design comic illustrating a set of problems on a web site:

This method of storytelling is closely related to basic storyboarding, but because design comics include one or more characters in the story, many designers find them to be a better medium to communicate user experiences.

Advantages of Comics and Storyboarding in Design

Design comics and storyboards fill a void in traditional design tools: In traditional design of products or web sites, individual components, user interfaces or pages are specified in detail. This specification is a crucial step in product development, but often fails to communicate the context of how the product will be used.

For instance, when designing a web site subsection, it is important to keep in mind contextual information such as the path users will take to get to the new section, what steps they may have followed previously, and what their ultimate task or mission is in using that site during that visit. Traditional specs such as wireframes don't provide this content, but showing the wireframes (or even rough concept squares) in a storyboard with characters (that is, a "comic") can provide this context very quickly even to readers outside of a core product team.

Comics can also be used to think through and illustrate potential poor customer experiences being created by weak product design, a business process change or regulatory requirement.

Disadvantages of Design Comics in Design

Users in different situations will tend to use products in different ways and from different starting points. On web sites, for instance, users may arrive deep within a web site via a search engine and visit multiple pages on that site before arriving at a newly designed subsection. There are many "front doors" to a web site, and users will enter and exit through many paths. But comics are a narrative form, so one comic can only tell a single story, and that story is usually told sequentially. A comic cannot easily illustrate multiple paths in one story like a flowchart can. It is important to keep this serial and "single story" nature of comics in mind when communicating scenarios to a product team and its stakeholders, because there may be other important scenarios and paths that the single story doesn't address. One common solution is to create multiple comics to show different stories, but time and resource constraints usually make it impractical for teams to illustrate any but a few main usage scenarios for a product.

In more conservative corporate environments, another issue with comics can be their seeming lack of formality; this issue can be overcome to a degree by using conservative drawing styles and character attire.

Origins

Design comics have been used informally within companies since the 1980s and perhaps earlier. Early examples of comics in design include designer Laurie Verteley's illustrated scenarios for photo-tablets. "We did many, many 'comics' (storyboards) to communicate design ideas way back in the late 80’s, early 90’s at HP Labs and Apple Computer," recounted Vertelney in an email in April, 2007 . "We wrote papers, gave panels & presentations at conferences like the SIGCHI. I was inspired by many of the folks from the MIT media lab."

Around the same time, in 1991, Sun Microsystems used design comics in its AnswerBook project to help understand product flow and also explain the product to customers via an online tutorial.

But design comics gained much broader adoption in the product design community after being popularized by YAHOO!'s Kevin Cheng and Jane Jao during the 2006 Information Architecture Summit, a popular annual design conference for web designers.

Resources

DesignComics.org is a resource site with templates and public domain artwork, intended for use by the product design and web design communities.

Kevin Cheng's Communicating Concepts Through Comics page on OK/Cancel.