Storyboarding Exercise

back to CPSC 581

Overview

Storyboarding - a sequence of key images portraying a story of the user experiencee - is a simple yet highly effective method to illustrate interaction (and alternate paths) taken by a person while using the system over time. Storyboarding is excellent at

• illustrating the behaviour of discrete user interfaces, i.e., where the interface has clear transitions resulting from simple user interactions, and
• scenarios of how that interface is used in practice, i.e., they illustrate and complement other methods such as personas and task-centered system design.

Readings

• Visual Storytelling. p276-297. in Buxton, B. Sketching User Experiences, Morgan Kaufmann.

Part 1.

Choose a pocket-sized screen-based device that you are familiar with. Examples could be an iPod, a cell phone, even a digital watch. Choose a particular feature within that device that requires a moderate amount of discrete interaction with it to make it work. Create a single sketch - a snapshot of the screen and physical device - that best captures that feature. Annotate the sketch as needed.

Part 2

Using the same feature as above, create a storyboard that illustrates the interactive behaviour of that feature. Be sure to include:

• clear labels identifying the step
• what the person is doing (i.e., how they are actually interacting with that screen)
• description describing the transition between storyboard scenes
• a finite state diagram completely illustrating that sequence and where you are within it
• model your storyboard after the one shown on p282-285 from the reading

Hints.

• Storyboards can illustrate quite different levels of granularity, i.e., from minimal changes to gross changes in interaction behaviour. Spend some time thinking about the level of granularity you want to illustrate. Do this by first creating the finite state diagram, as this will solidify your choices.
• The level of fidelity of each scene needs to be enough to explain what is going on. However, unecessary detail can be muted or removed from view.
• If your scenes have fixed portions to it, you may want to create a single backdrop (e.g., the finite state diagram, the housing for the device, the fixed interface elements) and photocopy it so you don't have to redraw it all the time.

Part 3

Recreate your storyboard as a partial comic strip that shows a person using that feature in their real world setting. The point here is to show an expected scenario of use - the spirit of interaction - rather than the specific interaction details. This type of storyboard can complement the one you created in Part 2.

Hints.

• Start by composing a story - a paragraph or two - that you believe best captures the spirit of interaction in a real world setting. A story that shows someone interacting with the device in a non-routine situation may be good as it will 'stress' particulars of the interaction, e.g., showing a friend your music on an ipod, and sampling through selected ones; selecting cell phone options while driving, etc.
• You don't have to be a great artist to create a comic strip. The important think is that the illustrations -the people, the things in it, the backdrop - capture the essence of the story.
• Feel free to use comic book tricks to tell the story - speech / though bubbles, narrative boxes, scene-setters and closeups, etc.
• model your storyboard after the ones shown on p286-297 from the reading

Part 4

Redo parts 2 and 3 for a subset of your Project 1 on Single Display Groupware.

Possible Links of interest

I googled the words "interface storyboarding examples"; here are some results. Not all are great examples, but they do show variety.

• Animatics & Storyboards
• Josh Sheppard storyboard showcase
• Usability Net description of storyboarding (see examples under more informatin heading]]
• Storyboard examples by JDalbey and students
• Guide for storyboard authors
• What is a storyboard?