"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 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
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.
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.
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
Sketching User Experience: Storyboards