User Experience Methods Catalogue

# Storyboard

Purpose
The visualization of the interaction with the application
Time required
From 1 hour to 1 day
Participants
UX Conceptual Designer, UX Team
Level of experience
experienced
Example of a Storyboard

# Summary

A storyboard is used to visualize the usage requirements of an application, service or product in sketch form at an early stage of the project. With the help of images, drawings and/or collages, a storyboard tells the individual steps of an interaction. In contrast to wireframes, which show individual sections of an application, storyboards are used to depict an interaction from a user's point of view, usually in the form of a comic strip. Storyboards illustrate usage requirements in their holistic context and make them comprehensible. Discussions are to be provoked about possible weak points or possibilities for improvement. Storyboards enable the user's perspective to be visualized and, if necessary, useful feedback to be obtained. In addition, storyboards serve as a means of communication within the development team and ensure a common understanding.

# Result

Sketch-like visualization of a sequence of an interaction with the application.

# Approach

  1. Concretize the theme and message that you want to express through the story. The results from the understand phase serve as input for the development of storyboards.
  2. Define the actors of your story.
  3. Choose which interaction to visualize and which are the individual steps.
  4. Write down the whole story in a script.
  5. Divide the story into sections (scenes).
  6. Choose a suitable graphic representation (drawing, photos).
  7. Create a picture for each scene.
  8. Limit yourself to 6 to 12 images.
  9. Use the storyboard to tell your story efficiently and effectively.

# Time of use

A storyboard is particularly useful when the context of use is understood and possible usage scenarios should be compared.

# Tools and Templates

  • Paper and pens (e.g. thin black pen, thick black pen, grey highlighter)

# Advantages

A visual representation is usually more understandable than a textual description of an interaction. They thus serve to generate a common basic understanding within the development team and can prevent comprehension problems. Illustrations of different variants can serve as a basis for discussions, comparisons, and decisions for a variant. Storyboards also provide a good overview of the application and its interactions.

# Disadvantages

If the representation becomes very detailed and extensive, the effort can be high.

# Hints

In order to design a storyboard you need to know your users and their environment well enough. In addition, the storyboard must be properly designed so that users can understand it.

# Sources

← User Journey Map →