Storyboarding
"Storyboarding...ensure that the team does not overlook any intents and steps that are critical to the work." ("Rapid Contextual Design", Holtzblatt et al, pg. 229) Using a combination of pictures and text, it is a great technique for working out the details of how a user will accomplish specific tasks in a new design.
Storyboards keep us in the context of the user's work rather than jumping right into the interaction details which runs the risk of them becoming the central focus in a vacuum.What is storyboarding?
Storyboards come in many different flavors but the main ingredients are pictures and text that describe how a user accomplishes a task. Most designers recommend starting on a whiteboard or some other low tech technique that allows you to draw and make changes quickly. Storyboards may contain pictures of the user using the product or for many web sites and applications you may only want to include the screens.
Examples:
Simple Text Inline Edit Storyboard
Uploader Storyboard - Simple Upload
Uploader Storyboard - Upload and Cancel
Date Time Picker Storyboard - Editing a selected date
Why use storyboarding?
Storyboards enable working out the interaction details in the context of users getting their work done. It can be a low cost method to work out designs from very early in the process to developing the final minute details. Storyboards are also a great communication tool for describing how the system should work to implementers and how it does work to users.
When to use storyboarding?
Start using storyboards early in the design process. They will keep you focused on the tasks the user needs to accomplish which thinking through the details of the design. It is easy to start working out detailed interactions and get so focused on the details to lose the bigger picture of how that interaction fits into the users work.
- Brainstorming early design ideas in the context of user's work. Creating storyboards for several of your primary scenarios is a good idea.
- Communicating how the system SHOULD work to implementors. They should be part of any functional specification. They can also become or supplement user stories in agile development.
- Communicating how the system works to users. They can be used in a help system or user manual for instance. You'll likely want to use screen shots of the actual system in this case.
How to do storyboarding?
There are many techniques for creating storyboards. The main idea is to tell a story about the user using your product to complete a task. We recommend you start early and with low fidelity tools like whiteboards or pen and paper so you quickly draw, change and throw things out. Storyboards can show the user's interaction with the product or can just be a screen by screen walk through of what the users sees and does like we've done in Fluid (see examples above).
Your storyboards will get higher and higher fidelity to the extent that the team requires.
How-to and other Storyboard Resources
Storyboarding Rich Internet Applications with Visio - Boxes and Arrows, The Design Behind the Design