Part 2. Storyboarding

Problem with vanilla sketches• hard to capture dynamics of interaction over time• captures user interface, not user behaviour

A good sketch should tell a story

Part 2. Storyboarding

Solution: use more than one image• a series of key frames as sketches

o originally from film; used to get the idea of a sceneo snapshots of the interface at particular points in the interaction

• portrays key scenes in the interface and the transitions that caused the changes

Storyboarding in animation

Excerpts from Disney’s Robin Hood storyboard, www.animaart.com/Cellar/disneyart/90robin%20storyboard.jpg.html

From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif

note how each scene in this storyboard is annotated

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 103

Storyboarding: Transitions are key

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 107

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 4

Storyboarding: Transitions are key

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Technique: State Transition Diagrams

Create transition diagram • key interaction steps• branch points

For each transition• sketch the screen• include the transition diagram

o a navigational map

• label the transition with what triggered the transitiono typically user input or set of system responses

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Interacting with a PDA-based agenda

Looking at the agenda and seeing that there is a 10am meeting with someone named Mary Ford

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Click on that time slot

Check to see what the meeting is about

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Click on Mary’s name

Choosing how to contact Mary

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Select Message from menu

Sending Mary a text message concering the ‘Tour’ which is the topic of the meeting

Technique: State Transition Diagrams

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Click on that ti

me slot

Select Message

Click on Mary’s name

Sketch examples – storyboard transitions

1From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p11

Technique: Scenario sequences

Describes a person doing a particular task• Example: buy a stroller• Variation: buy a shirt, delete the stroller

Technique: Scenario sequences

Scan the stroller ->

Change the color ->

Place the order ->

Initial screen

Scan the shirt ->

Touch previous item ->

Delete that item->

Alternatepath…

Technique: Tutorials as Storyboards

• a step by step storyboard walkthrough with detailed tutorial explanations

Apple’s Tutorial Guide to the Macintosh Finder

Technique: Make storyboards come alive

Spotlight: an interactive foam core and paper sketch/storyboard

Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington From Sketching User Experiences, Bill Buxton , Morgan Kaufmann

Technique: Capture interaction spirit

Show the mood and context of use• interaction details only a sub-story

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 100

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 100

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 100