SLIDE 1
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.
Storyboards Storyboarding Problem with vanilla sketches: hard to - - PowerPoint PPT Presentation
Storyboards Storyboarding Problem with vanilla sketches: hard to - - PowerPoint PPT Presentation
Storyboards 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. Storyboarding Solution: use more than one image a
SLIDE 2
SLIDE 3
Storyboarding
Solution: use more than one image
a series of key frames as sketches
- riginally 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
SLIDE 4
From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif
SLIDE 5
Context
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 4
SLIDE 6
Transitions
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 103
SLIDE 7
Transitions
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 107
SLIDE 8
Transitions
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 4
SLIDE 9
Techniques
State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive
SLIDE 10
Techniques
State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive
SLIDE 11
State Transition Diagrams
SLIDE 12
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
SLIDE 13
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.
SLIDE 14
State Transition Diagrams
Check to see what the meeting is about.
Click on that time slot
SLIDE 15
State Transition Diagrams
Choosing how to contact Mary.
Click on Mary’s name
SLIDE 16
State Transition Diagrams
Sending Mary a text message concering the ‘Tour’ which is the topic of the meeting.
Select Message from menu
SLIDE 17
State Transition Diagrams
Click on that time slot Select Message Click on Mary’s name
SLIDE 18
State Transition Diagrams
SLIDE 19
Techniques
State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive
SLIDE 20
Scenario Sequences
Describes a person doing a particular task
Example: buy a stroller Variation: buy a shirt, delete the stroller
SLIDE 21
Scenario Sequences
SLIDE 22
Scenario Sequences
Scan the stroller -> Change the color -> Place the
- rder ->
Initial screen
SLIDE 23
Scenario Sequences
Scan the shirt -> Touch previous item -> Delete that item-> Alternate path…
SLIDE 24
Techniques
State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive
SLIDE 25
Tutorials as Storyboards
SLIDE 26
Techniques
State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive
SLIDE 27
Make storyboards come alive
Spotlight: an interactive foam core and paper sketch/ storyboard