The state transition diagram ¹⁾ captures states, transition and decision paths from a storyboards to help the designer to explore dynamics and flow of a storyline. Each state represents a moment in time and each step in the storyboard represents a transition from one step to another. The transitions are triggering changes in the states, which are triggered by the users interaction with the system. Combining transitions and states in a sequence creates a state transition diagram.

In abstract state transition diagrams are text labels and annotations used to describe each state as an abstraction. This type of state transition diagram is appropriate for early designs (e.g. sketch out the flow of user activities), because no detailed information what the user interface would look like are necessary.

In visual interface state transition diagrams each state is represented by a sketch (e.g. of the interface itself). It is used to communicate the look or character of a design approach. Visual state transition diagrams are appropriate for the exploration of precise and detailed interfaces when the design task already is progressed. Therefore it is a highly literal diagram with very rich information about the systems look alike. After the use of this type of state transition diagram a modification of the user interface becomes harder, because the connection of the interface and the sequence of actions is manifested in the viewers mind.

Additional to regular visual state transition diagrams it is possible to imply the flows between the states by spacial layout, instead of using arrows and other notations. The most famous example for doing so are comic strips, which are a form of narrative storyboards.

The annotated state transition diagram includes explanatory text. Its possible to add as much annotations as wanted on the states and transitions.

… but keep the diagram simple!

The indexed state transition diagram is combination of introduced state transition diagram types. It resemblesthe_abstract_state_transition_diagram, but also includes indexes to other figures. This figures are showing what screens could look like in a certain state (see The Visual State Diagram). It also could contain explanatory text, that explains the abstraction. The indexes are giving the possibility represent the decision, that could be made at that point and each point leads to an alternate interaction sequence. By doing that it is possible to define the most complex storyboards by adding more sketches as variations for what happens at a certain index. This type of state transition diagram is appropriate to use to manage complexity that occurs while developing large state transition diagrams.

The state transition diagram with branches is a extension of all basic types of state transitions diagrams. Like the_indexed_state_transition_diagram it is about the possible choices of actions a interactive systems offers, which are depending on the systems state. For example can a simple interface offer different menu options, buttons, tool palettes, keyboard shortcuts, mouse action etc. To show all possible decisions a state transition diagram can be used. Therefore each state of the diagram can have one or more out-coming transitions, which are leading to other states or back to earlier ones. It is possible to sketch and reflect the interaction flow across the entire design. These type of diagram is very similar to the_branching_storyboard.