Problem with vanilla sketches 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

Solution: use more than one image Part 2. Storyboarding Solution: use more than one image a series of key frames as sketches originally from film; used to get the idea of a scene 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

note how each scene in this storyboard is annotated From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif

Storyboarding: Transitions are key Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 103

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 107

Storyboarding: Transitions are key Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 4

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 a navigational map label the transition with what triggered the transition typically user input or set of system responses

Technique: State Transition Diagrams Interacting with a PDA-based agenda Looking at the agenda and seeing that there is a 10am meeting with someone named Mary Ford Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Technique: State Transition Diagrams Check to see what the meeting is about Click on that time slot Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Technique: State Transition Diagrams Choosing how to contact Mary Click on Mary’s name Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Technique: State Transition Diagrams Sending Mary a text message concering the ‘Tour’ which is the topic of the meeting Select Message from menu Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

Technique: State Transition Diagrams Click on that time slot Click on Mary’s name Select Message Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

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 -> Initial screen Place the order -> Change the color ->

Scan the shirt -> Alternate path… Delete that item-> Touch previous item ->

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