A Storyboard as States and Transitions

As a sequence, each step in the storyboard represents a single (possibly labeled) transition from one state to another. A state usual represents a moment in time during the interaction. A transition is what triggers a change in state, where transitions are typically triggered by one or more user actions. Combining these into a sequence creates a transition diagram.

You have many options on how you can sketch these states and transitions; some are shown below. Illustrations are variations of the cell phone exercise presented previously in Chapter 4.1.

1. The Abstract State Transition Diagram. You can use text labels and annotations to describe each state as an abstraction. This is appropriate for early designs, where you are trying to sketch out the flow of user activities as a person uses the system to do a task, without having to detail (or commit to) what the interface would necessarily look like.

2. The Visual Interface State Transition Diagram. You can sketch the appearance of the interface itself as it passes through each state. This gives very rich information, as it is a highly literal diagram. It is appropriate when you are trying to flesh out the fine-grained details of the interface as the task progresses. But it also demands that you have a pretty good idea of what the system looks like at each state, as it will be a bit harder to modify if you change your mind.

3. The Annotated State Transition Diagram. The state diagram is augmented to include explanatory text. You can annotate each state and transition as much as you want. This example shows the above visual interface state transition diagram with annotations.

4. The Indexed State Transition Diagram. This combines the above methods. The diagram resembles the abstraction, but it also includes indexes to other figures. Those other figures could show:

– what the screen(s) look like in that state (as in the Visual Interface Diagram), which is the technique shown in the figures below,

– explanatory text that explains the abstraction,

– another more detailed transition diagram,

– decisions that could be made at that point that lead to alternate sequences (as we will show in the next section).

While the particular approach you will use depends on your needs, you will invariably find yourself using indexes to define most complex storyboards. This is because:

– you can generate multiple sketches as variations for what happens at that index (to illustrate, the figure above includes two possibilities of what the cell phone’s home screen at index 1 could look like),

– they help you manage complexity that is bound to occur when developing large state transition diagrams.

5. Implying State Transitions by Layout. Instead of using arrows and other notations for showing transitions, you can imply the flow between states by its spatial layout. This is how comic books are usually designed. In this example, I included additional ‘states’ that show how a conversation led to the cell phone interaction (see Chapter 4.4: The Narrative Storyboard).

The above is just a sampling of the many ways to draw state transition diagrams. Harold Thimbleby, for example, applies state diagrams and other related methods in detail in his 2007 book Press On! Principles of Interaction Programming.

Transition Diagram with Branches

Most interactive systems offer people many possible choices of action, although the choices available may depend heavily on what state the system is in. Think about even a simple interface: available choices are presented as menu options, buttons, tool palettes, fields that can be filled in, keyboard shortcuts, responses to mouse actions, and so on. Thus you will rarely represent interaction as a simple linear sequence, unless you are just try ing to show how a person accomplishes a single task or set of operations, or perhaps as a subsequence that fits within a larger (indexed) state transition diagram.

You can use transition diagrams to show all these decisions. Essentially, each state can have one or more transitions coming out of it, where they lead to other states or even back to earlier ones. While this can get quite messy, the reality is that you need diagrams like this to help you sketch (and reflect on) the interaction flow across your entire design. The next chapter shows you how to do this as a branching storyboard. The two figures below preview what is to come. Figures A and B are identical: Figure B uses indexes to manage complexity, while Figure A shows it all at once.

I don’t show my own solution to this exercise here. However, you should immediately appreciate through this exercise that modeling decisions in interaction design can get quite complex. Even very simple systems – such as your digital watch – can have hundreds or even thousands of possible states, which you would have to diagram as many inter-connecting sequences and sub-sequences.

Within the confines of sketching, what makes transition diagrams manageable is that you are normally trying to flesh out a limited set of key choices and sequences, where these sequences capture the essence of the interaction. Alternately, you may be focused on fleshing out a subset of your system – a limited interaction sequence – as a particular sub-sequence.

You Now Know

A state transition diagram captures states, transitions, and decision paths. There are many ways to draw them. Using boxes (to capture states) and arrows (for transitions and decision paths) is one common way. Your diagram can be quite abstract, or capture your sketches as they change between states, and can include explanations as annotations. To manage complexity, you can use your state transition diagram to index other diagrams, screens, and explanations, which are themselves sketches that you can use to explore possibilities.