Storyboard

A storyboard is a technique for illustrating an interaction between a person and a product (or multiple people and multiple products) in narrative format, which includes a series of drawings, sketches, or pictures and sometimes words that tell a story.

Designers can create storyboards to specify how a user interface changes in reaction to users’ actions and to show things that are external to the system. Good storyboards allow design teams to get a feel for the flow of users’ experiences. They are generally not very detailed and use the minimum amount of detail required to get key points about the big picture across.

Related Links

Wikipedia describes the origin and wider uses of storyboards.

Sedaca, R. Comics: Not just for laughs! Boxes and Arrows. Explains the process of creating storyboards and provides links to additional resources.

Originators/Popularizers

Storyboarding was originated and first used in the film industry. The storyboard form as it is known today, was developed at the Walt Disney studio during the early 1930s:

• Disney Miller, D. (1956). The Story of Walt Disney. Chicago and San Francisco: Henry Holt and Company.

• Troung, K. N., Hayes, G. R., & Abowd, G. D. (2006). Storyboarding: An empirical determination of best practices and effective guidelines. Designing Interactive Systems (DIS), 12-21.

Authoritative References

McCloud, S. (1994). Understanding Comics. Perennial Currents.

Rosson, M. B. & Carroll, J. M. (2002). Usability Engineering: Scenario-Based Development of Human Computer Interaction. San Francisco: Morgan Kaufmann.

Wodtke, C. (2002). Information Architecture: Blueprints for the Web. Indianapolis, IN: New Riders Press.

Published Studies

Harada, K., Tanaka, E., Ogawa, R., & Hara, Y. (1996). Anecdote: A multimedia storyboarding system with seamless authoring support. In Proceedings of the fourth ACM international conference on Multimedia, 341-351.

McQuaid, H. L., Goel, A, & McManus, M. (2003). When you can’t talk to customers: Using storyboards and narratives to elicit empathy for users. In Proceedings of the 2003 international conference on Designing pleasurable products and interfaces, 120-125.

Branham, S. M, Shahtab, W., & McCrickard, D. S. (2007). Channeling creativity: Using storyboards and claims to encourage collaborative design. In Workshop on Tools in Support of Creative Collaboration (part of Creativity & Cognition 2007), 1-4.

Sinha, A. K., & Landay, J. A. (2001). Visually prototyping perceptual user interfaces through multimodal storyboarding. In ACM International Conference Proceeding Series; Vol. 15, Proceedings of the 2001 workshop on Perceptive user interfaces, 1-4.

Landay, J. A., & Myers, B. A. (1995). Just Draw It! Programming by Sketching Storyboards. Carnegie Mellon University, Human-Computer Interaction Institute Technical Report CMU-HCII-95-106 and School of Computer Science Technical Report CMU-CS-95-199. http://www.cs.cmu.edu/~landay/research/publications/storyboard-tr/storyboard.pdf

Landay, J. A., & Myers, B. A. (1996). Sketching storyboards to illustrate interface behaviors. In the Conference Companion of ACM Conference on Human Factors in Computing Systems: CHI ‘96, 193-194. http://www.cs.cmu.edu/~landay/research/publications/CHI96/short_storyboard.pdf

Related Subjects

Video storyboards: a storyboard can be created from a video by using key frames as images. Mackay, W. E., Ratzer, A. V., & Janecek, P. (2000). Video artifacts for design: Bridging the gap between abstraction and detail. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques, 72 – 82.

Storyboards and QOC (Questions, Options, Criteria): a technique that follows the creation of a storyboard. The team finds frames where they have questions that need answers, they list their options and criteria for making choices, and uses the QOC method to explore potential solution spaces.

Comicboarding: a participatory design method that uses comic books in brainstorming sessions with children. Moraveji, N., Li, J., Ding, J., O’Kelley, P., and Woolf, S. (2007). Comicboarding: using comics as proxies for participatory design with children. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI ‘07, 1371-1374.

Detailed Description

Benefits, Advantages and Disadvantages

Benefits

The main benefit of storyboarding is that it illustrates what the interface would do or how it will behave in response to user input, as opposed to a detailed user interface design that shows what the interface would look like (Landay & Myers, 1996). Additional benefits of storyboarding are understanding how technology reshapes human activity and influencing the understanding of the reaction to a system (Troung, Hayes & Abowd, 2006).

Storyboards are also a good way to help members of the project team visualize how an experience will work.

Advantages

• Is more meaningful than flowcharts and other more technical diagrams for conveying the user experience.

• Is vague enough that the audience will pose questions that are useful for requirements gathering, functional design, and the impact of the environment on product use.

• Is a way to gain early-stage design feedback

• Does not require programming skills

• Does not require artistic skills

• Provides a quick way to sketch design ideas

• Complements verbal scenarios

• Provides support for personas and scenarios

• Provides a way to organize use cases into a coherent description of users’ actions

• Helps stakeholders to visualize an experience

Disadvantages

• Interaction between the storyboard and a user is limited (Landay & Myers, 1996).

• Project team members may be reluctant to hand-draw if they feel that they are bad at it.

• While the storyboard method has face validity, there are few data on the effectiveness of storyboards for user interface design.

• Traditional storyboarding as done for movies is a linear process. Since computer products and Web sites can be non-linear, interactive storyboards (Wodtke, 2003) are more desirable, but take more time to design and program.

• Not practical for detailed design or covering all use cases.

Appropriate Uses

Storyboarding is useful for:

• Making early concept sketches (Landay & Myers, 1996).

• Simulating functionality without worrying about how to implement it (Landay & Myers, 1996).

• Providing visual aides

• Evangelizing

How To

Procedure

Decide What to Include

• Understand users, their backgrounds, and goals.

• Understand the system and its features.

• Put together a design team and brainstorm about the storyboard, preferably using a large whiteboard.

• Identify people and artifacts in the storyboard.

• Develop the storyboard scenarios.

Build the Storyboard

• Break the story into smaller sections called frames or panes (3-5 is optimal in most cases): Identify key “frames” from the scenarios while focusing each frame on an individual feature. Describe each frame in a short sentence.Draw a picture corresponding to each of these sentences.

• Draw the user, the product and other important objects in each frame. Different frames may have different perspectives.

• Use text for novel systems or for users’ thoughts (balloons, bubbles) or reactions (callouts).

• Include people when illustrating interaction.

• Indicate the passage of time only when it is relevant.

• Use the minimal level of detail required to communicate the features of the system.

• Write a short description of each frame explaining what is happening in it; describe non-graphic effects or interactions that are not clear from the pictures.

Feedback & Iteration

• Gather internal and external feedback from stakeholders.

• Iterate the storyboard design.

Participants and Other Stakeholders

The participants are generally people involved in the design of products. Optionally, participants may consist of a wide range of stakeholders:

• Design and project team members

• Optional: human factors practitioners

• Optional: visual designers

• Optional: prototyping practitioners

• Optional: representative users

Materials Needed

Storyboarding can be done almost anywhere and requires few materials:

• A room with a large whiteboard to brainstorm ideas.

• Papers and pencils for sketching frames.

• (Optional) Software tools that can be used for storyboarding such as PowerPoint, Photoshop, and Illustrator.

• (Optional) Software tools specifically designed for storyboarding such as, Comic Life, StoryBoard Artist, and StoryBoard Quick.

Who Can Facilitate

Any interaction designer or usability or human factors specialist is in a good position to facilitate the storyboarding activity.

Common Problems

• A great challenge in storyboarding is to know at what point to start the storyboard and at what point to end it. Starting too early or finishing too late may result in including irrelevant information or too many functions.

• If the storyboarding activity is performed individually, it may be difficult to create one agreed-upon storyboard out of the many ideas that were generated.

• Team members who feel they do not know how to draw may be reluctant to participate and contribute.

• Sometimes, a storyboard can skip important issues, functions, or interactions and create holes in the story.

• When including photos in a storyboard, it is difficult to maintain a consistent feel throughout the storyboard.

Data Analysis Approach

• Storyboard walkthrough: the team conducts a walkthrough with users of the system (current or potential) to provide storyboard designers with constructive feedback about how to improve or modify it.

• Storyboard testing: a storyboard can be tested internally or externally with users to verify how realistic it is and examine whether it is successful in communicating its message, function, or interaction.

• Comment wall: a storyboard can be enlarged to a size of a poster and hung on a wall in the company. Colleagues can be invited to write comments on the storyboard when they walk by.

Next Steps

After a storyboard is completed, the design team extracts the design implications and recommendations for improvements and feed those back to the storyboard or other design documents. As necessary, the storyboard is refined and re-assessed.

Special Considerations

Costs and Scalability

People and Equipment

Any interaction designer, usability expert or human factors specialist is in a good position to facilitate the storyboarding activity. No special equipment is required. Software storyboarding requires a person with knowledge of the storyboarding tool being used.

Time

Storyboarding can be done very rapidly. A simple storyboard can be developed in a matter of hours. If the storyboard is to be tested with end users and iterated several times, then a period of 2-4 days should be allowed. The development and testing of a storyboard will normally take approximately two weeks (for development and small scale testing), however, a limited-scope storyboard could take less than one week.

International Considerations

Video or Web conferencing capabilities can be used to allow communication between storyboarding team members who are located at different sites or different countries. If the storyboard is tested in different countries, it should be translated and the test conducted by interviewers in the participants’ language.

Ethical and Legal Considerations

If users participate in the storyboarding activity, they are normally required to sign a non-disclosure agreement beforehand.

If users participate in evaluation of the storyboard, they are normally required to sign a consent form before they participate in the session, in which they are informed of the true purpose of the evaluation. They are also told that the data recorded will be kept confidential, and that they may withdraw at any time.