1. 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

2. 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

3. Storyboarding in animation
Excerpts from Disney’s Robin Hood storyboard,

4. note how each scene in this storyboard is annotated
From

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

6. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 107

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

8. Technique: State Transition Diagrams
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

9. Technique: State Transition Diagrams
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. Sketch examples – storyboard transitions
1From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p11

17. Technique: Scenario sequences
Describes a person doing a particular task
Example: buy a stroller
Variation: buy a shirt, delete the stroller

18. Technique: Scenario sequences

19. Scan the stroller ->
Initial screen
Place the order ->
Change the color ->

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

21. Technique: Tutorials as Storyboards
a step by step storyboard walkthrough with detailed tutorial explanations
Apple’s Tutorial Guide to the Macintosh Finder

22. 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

23. Technique: Capture interaction spirit
Show the mood and context of use
interaction details only a sub-story

24. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 100

25. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 100

26. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 100