Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »


"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
  • 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? 

Many designers recommend starting on a whiteboard (or similar low tech).

Resources

Storyboarding Rich Internet Applications with Visio - Boxes and Arrows, The Design Behind the Design

Wikipedia: Storyboard

  • No labels