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

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

�������� ������� Context �������������� ���������� ����������� ���������� ������������������������ ������������������������ ��������������������� ��������������������� ��������������������� ����������������������� � �� ������������������������������ ��� � �� ���������� ���������������������������� � �� ������������ ������������������ ����������������������� ������������������������������������� ��������� ������������������� ������������������� �������������� �������������������� ������������������� �������������������� �������������������� ������������������������ �������������������������� �������� ������������ � ��������������������� ���������������������� ������������������������ ����������������������� ������������������ � �� ���������������������� ��������������� � � � ������������������� ��������������������� � �� �������� ����������������������������� ������������������������� ������������ ���������������������������������������� ����������� ������������������������������� Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 4 ������ ����������� ������ � ������������� ��

Transitions Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 103

Transitions Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 107

Transitions Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 4

Techniques State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive

Techniques State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive

State Transition Diagrams

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

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.

State Transition Diagrams Check to see what the meeting is about. Click on that time slot

State Transition Diagrams Choosing how to contact Mary. Click on Mary’s name

State Transition Diagrams Sending Mary a text message concering the ‘Tour’ which is the topic of the meeting. Select Message from menu

State Transition Diagrams Click on that time slot Click on Mary’s name Select Message

State Transition Diagrams

Techniques State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive

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

Scenario Sequences

Scenario Sequences Scan the Initial stroller -> screen Place the Change the order -> color ->

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

Techniques State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive

Tutorials as Storyboards

Techniques State Transition Diagrams Scenario Sequences Tutorials as Storyboards Make storyboards come alive

Make storyboards come alive Spotlight: an interactive foam core and paper sketch/ storyboard