Storyboards Overview & Key Concepts
Designing with Storyboards
A storyboard is a high level interaction flow diagram that consists of pictures and narrative text in a sequence that usually represents the passage of time. In Indigo, storyboards serve the purpose of representing people using software in their daily lives.
Storyboards help us tell stories about what people do or would like to do. In software design and, thus, in Indigo, they are often used to represent human interactions with software.
Storyboards help designers understand product-user interaction in context and over time. They are a useful tool in the creative process as they promote thinking from the human perspective (instead of from the technology perspective), and they also contribute to communication among the different people involved in the development process. For more information, see Usability Body of Knowledge:Storyboards.
These concepts are the basis of Indigo storyboards.
Each step is a point in the storyboard’s interaction flow. It is made up of a box with a scene or a screen, and some text.
Containers for scenes, screens, or scenes with screens in them.
Pointers used to indicate flow direction.
Pictures that represent real life situations where technology is used.
The basic building blocks of interactive UI design that make up your Indigo prototype. They include interactions and can be run.
A storyboard is made up of steps connected to each other by arrows. A step consists of:
- A picture in a box – visual representation of that point in the narrative.
- A summary line – text used to summarize this part of the story.
- A detailed explanation – some more text used to provide more detailed narrative for the step, if desired.
Arrows link steps to each other and represent sequence.
- connect any pair of steps
- be curved
- be bidirectional
Branching is implemented through the use of arrows. For more on this, read Showing Branches for Optional or Parallel Paths.
Scenes are pictures that represent common scenarios. There is a set of scenes included in the product available in the
Scenes tab in the
Some of the available scene categories are:
Some scenes contain placeholders, i.e. sections of the picture where you can place a screen state. These special sections will typically include computer, tablet and telephone screens, among others.
You can use your own images to fill in the boxes in a storyboard. You can click on the
Pick an Image link of an empty box or just drag a picture (.png or .jpg) from your computer onto the box.
Screens are graphical user interfaces. Following user interaction, screens may have several states. Screen states from your projects can be used as images for steps and for scene placeholders. They are available in the
Screens tab in the
Indigo takes storyboards to the next level, creating a live connection between screens and storyboards so that when you put a screen in a storyboard box, the box will always be up to date with your latest screen design. This eliminates the cumbersome steps of creating an image of a screen, inserting it into the storyboard, and then repeating that each time the screen is updated. It also enables people to jump right into a particular point in the prototype (represented in the storyboard step) with no extra effort.
For more information on screens, see Screens Overview and Key Concepts.
Here are some suggested topics: