Storyboarding Exercise

CPSC581.ExerciseStoryboarding History

Storyboarding - a sequence of key images portraying a story - is a simple yet highly effective method to illustrate interaction (and alternate paths) 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.

to:

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.

Changed lines 47-48 from:

to:

* [[http://www.ilikecake.net/hci/envisionment/storyboards.htm | What is a storyboard?]]

Storyboarding - a sequence of key images portraying a story - is a simple yet highly effective method to illustrate interaction (and alternate paths) 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.

to:

Storyboarding - a sequence of key images portraying a story - is a simple yet highly effective method to illustrate interaction (and alternate paths) 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.

Changed lines 18-19 from:

to:

* model your storyboard after the one shown on p282-285 from the reading

Changed lines 32-33 from:

to:

* model your storyboard after the ones shown on p286-297 from the reading

Storyboarding - a sequence of images - is a simple yet highly effective method to illustrate interaction (and alternate paths) 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.

to:

Storyboarding - a sequence of key images portraying a story - is a simple yet highly effective method to illustrate interaction (and alternate paths) 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.

!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 2Using 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

!!!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 3Recreate 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.

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