5.3 Branching Animations
animating different interaction paths in a branching sequence
Chapter 4.3 illustrated how storyboards can have multiple branches (or interaction paths), where the particular path taken at a branch point usually depends on the particular action of an end user. This chapter explains how – unlike a normal movie or slide show – you can create sketch animations that allow different paths to be taken as the animation runs.
Slide presentation software that lets you:
PowerPoint is an example of such a system, but there are many others available that you can use.
Selecting Alternative Interaction Paths Through Hyperlinks
Many slide presentation systems allow you to embed a hyperlink into or atop of particular graphics or regions of a slide. While the hyperlink can point to many things, for our purposes we will use a hyperlink that references another slide in the current slide deck.
The best way to illustrate this is to try it yourself. Our first example, illustrated below, will be a trivial sketch across three slides, with each slide representing a different system state. Slide 1 contains two ‘buttons’. Depending on which button you click, different text will then be displayed. As suggested by the arrows below, clicking ‘Say Hello’ will display slide 2, while clicking ‘Say Goodbye’ will display slide 3.
1. Create the three slides below (I used PowerPoint). The first slide is just two rectangles with some text in them, while the other two just contain the given text.
2. Add a hyperlink to the ‘Say Hello’ rectangle, which links to slide 2. In my version of PowerPoint, you do this by right-clicking over the ‘Say Hello’ rectangle to raise the context menu, and then select the ‘Hyperlink’ option.
3. This raises the dialog box below showing the kinds of things you can link to (see left side). Select the ‘Place in this Document’ button, and then select slide 2 containing the text ‘Hello’.
4. Similarly, add a hyperlink to the ‘Say Goodbye’ rectangle, except this time make the hyperlink point to slide 3.
5. Play your slide show; clicking each button should jump to the appropriate slide.
Animating indexed state transition diagrams
Hyperlinks can also link to other slide decks. This means you can put sub-sequences into individual slide decks. Your ‘master’ slide deck can then index these sequences. This helps manage complexity. It also means you can develop alternative sub-sequences that can be accessed simply by changing the hyperlink.
Example: A Complete Branching Animation
Reconsider our example equipment rental system you saw in Chapter 5.1. There are three types of screens: the initial splash screen, the rental screen, and the final payment screen. Try (on your own) to create a branching animation that illustrates the results of all possible interactions. In essence, you are creating a fully detailed state transition diagram, showing the effects of all user operations. Make sure to include what happens when you click on all buttons and checkboxes. Also include unclicking boxes that you may have checked previously (i.e., an ‘undo’ operation).
Hint: Create versions of all screen possibilities, order them in your slide deck, and then add the necessary hyperlinks.
Solution
The screens below realize all possibilities as a branching animation. The numbered arrows next to each interactive element (the buttons and checkboxes) indicate the hyperlink, i.e., it shows what screen would be displayed if a person clicked in that interactive element. For example, in slide 2, clicking the ‘Gloves’ checkbox would go to slide 3. However, clicking the ‘Hat’ checkbox in slide 2 would go to slide 4 instead. Undo also happens. In slide 3, clicking the ‘Gloves’ checkbox goes back to Slide 2; that is, it is the same as unchecking the box. In slides 2 through 9, clicking ‘Checkout’ leads to a variety of different slides, as the text content of the screen depends on what items had been selected. In Slides 11-17, clicking the ‘Done’ button always return to the initial slide 1.
The advantage of having a fully operational branching sequence is that you or someone else can operate the interface as if it were real. No direction is needed, as all options work. Another advantage is that it forces you to consider all possible paths in your system. But see the tip: this is a double-edged sword.
Are You Feeling Overwhelmed?
Our simple example required you to create the 17 different screens, and to add 33 hyperlinks. This is clearly tedious, even with templates. It is also impractical if you are sketching a system that is feature-rich.
The solution to this is to only instrument a few key paths, i.e., enough to illustrate your idea. Remember, this is a sketch, and a sketch is about ideas. For example, you may want to show how one goes from the splash screen (slide 1), to the main order screen (slide 2), and how one can select and unselect one or two items (e.g., slide 3 and slide 7), and an example of how one can place the order (slide 15) or what happens when no items are selected (slide 10). All other paths are so similar that little benefit is gained from ‘implementing’ them in the animation.
The basic strategy is to animate just enough of your sketch paths to illustrate the breadth of different features in your system, while going into just enough depth to illustrate the functionality of those features. Jacob Nielsen calls this Horizontal (breadth) vs. Vertical (depth) prototyping. (He also describes a Scenario, which is a single scripted path through your sketch – this is equivalent to a sequential animation.) Your selection of animation paths don’t even have to do both – your sketch animation may only explore the functionality of a single feature in depth, but not other features. Or you may want to give an overall ‘look and feel’ of your system by showing the different features, without going into depth about the actual functionality of any one of them.
You Now Know
Branching animations can be implemented easily using hyperlinks in slide presentation systems, where the branch taken depends on the hyperlink selected. You can use these animations to illustrate different high level portions of your system (horiziontal prototyping) or to go into depth of a portion of your system (vertical prototyping), or a combination of the two.