Methods
Storyboard
Facts:
- Lifecycle stage: Design
- Contributors: Tomer Sharon, Shermin Ekhteraei, Shannon McHarg, Chauncey Wilson
- Version: 1/2010
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.
- Basic Description
- How To
- Special Considerations
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
Read More About It
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.
