Storyboards ^{1) 2)} are a (short) representation of connected states (like in graphs), each branch following a storyline. Each state could be represented by a photo, a sketch of the user interface, a abstraction of the state or a sketch of a situation. Thereby each sketch (image) captures a single moment in time and the whole sequence shows how the user experience unfolds over time. Therefore the chosen sketching method needs to incorporate actions, interactions and changes of the user experience across time. Mainly in storyboards all screens are simultaneously visible distributed in space at the same time (space multiplexed). In contrast for example PowerPoint presentations are sequentially ordered slides one at a time (time multiplexed).

Sequential storyboards are the basic type of storyboards with only one sequence (branch) of actions. Each sketch of a storyboard is a key frame or a state. The space between these frames are capturing the transitions of these states and occur as the result of the users interaction with the system. The key challenge is to decide what sketches to include as key frames to inspire the viewers imagination to fill the transitions. It's also recommendable to annotate the frames and transitions to explain the user's interaction, that happened during the transitions.

This example shows a sequential storyboard, which displays the user interaction with a smartphone. It displays the searching interaction implied in the third sketch of the sketching storyboards example. The storyline starts with a bunch of people an a thesis (there is a bird with blue feet). This thesis was established by one person out of the group and in our scenario he wants to proof it. Therefore interaction starts at the home screen of the users smartphone. It's a default setting of Android to have the standard browser application on the home screen, therefore our interaction starts with selecting the application „browser“. After the browser was opened, the start page (default Google) of the browser is shown. The user now selects the address field and types the URL wikipedia.org, because he wants to proof that a bird with blue feet exists. To confirm the URL the user presses „Los“ and the application loads the wikipedia main page. In the pages search field he types the name of the bird as he remembers it and again selects „Los“. The application loads the requested page and shows the desired goal of the user.

Branching storyboards are based on state transition diagrams. Mainly they are a state transition diagrams with branches with appliance of the visual interface state diagram and the indexed state transition diagram.

The picture shows mixed state transition diagram of the possible choices of applications a user can make at the home screen of a smartphone. He can choose (number 1 to 5) between the calendar application, the messaging application WhatsApp, the main menu of the device, the SMS application and browser application. This section follows the scenario of the previous section. Therefore the user chooses number 5, the browser application.

This picture continuation of the scenario after the user chooses the browser application. He now sees the start page of the application (here Google) and has two possibilities. First he can follow the sequence, that was introduced at the sequential storyboards or he has the possibility to use the search field of the google main page. Assumed he is doing so. Therefore he has to type his search term (the name of the bird with blue feet) in the field and select „Go“. The browser now loads the search results. The first result (without advertisement) is the wikipedia page about the bird and the user selects this page. The browser loads the selected page and the user ends up at the same page as if he had used the other branch of the storyboard. Of course there are storyboards of all other choices possible, but they will not be shown here.

Narrative storyboards are based on a storyline. They are illustrating the context of an interaction sequence. Therefore a narrative storyboards is sowing the context around the user interface to tell a more complete story about the users interaction over time. Because it is based on a storyline, it also provides information about the location where the interaction takes place and presents people as personalities. The viewer gains detailed information about other actions and things people are doing while they interaction with the system and maybe each other. Narrative storyboards are a variation of cinematographic storyboards. Therefore some techniques has to be introduced for the following example: Sketching Storyboards.

Vocabulary of camera shots and film making:

• Extreme long Shot (wide shot): A view showing details of the setting, location etc.
• Long shot: A view showing the full height of a person.
• Medium Shot: Shows a person's head and shoulders.
• Over-the-shoulder shot: Looking over the shoulder of a person.
• Point of View shot (POV): Seeing everything a person sees.
• Close-up: Such as showing details of a user interface on a device the person is holding.

Sketching Storyboards provides a basic and a photo specific tutorial how to create a narrative storyboard. It gives a context around the introduced interface usage scenario of the example of branching storyboards.

First you need a grid of rectangular boxes on a blank piece of paper. The number of boxes depends on the complexity of the interaction, but it is recommended to limit the number of boxes (sketches). For example five boxes have the benefit of limiting the storyboard to one particular scenario.

The next step is to develop the storyline. The story has to fit the number of frames. The first frame is the beginning frame, which introduces the story with a „establishing shot“. The following frames are developing the story and eventually leading to the climax (solution of a problem). The last and end frame concludes the story and indicates a scene that emphasizes that the interaction is completed (e.g. a person walks away). Write the developed storyline underneath each of the frames of your storyboard.

Now it is time to sketch the first scene of the storyboard. In general it is important to make quick sketches without unnecessary details. So keep the the element to a bare minimum. If you are unfamiliar with hand drawn sketches try the very easy technique tracing (rotoscoping) or any other technique on the page. The first scene is used to „set the scene of the storyboard as mentioned before. Therefore it is recommended to use an extreme long shot to show details of the environment.

The other sketches of the storyboard are following the storyline as described in step 1. To display the storyline in a suitable way use appropriate and varying camera shots. For example for beginning and the end the use of the extreme wide shots to illustrate context. An over-the-shoulder-view emphasizes what the person is looking at and a first person point of view emphasizes the action a person is doing. Close-ups allow to show details of the information displayed on a screen.

Add visual annotations if needed, to emphasize actions and motions to your sketch. In general annotations (e.g. red arrows) are a valuable way of indicating and emphasizing important motions or actions, that are difficult to show in a static image. Annotations can also be used to emphasize people's actions and thoughts or changes happening at a device interface.

It's important to develop a separate interface storyboard to show what the person does on the screen (in frame 3). For the scenario of this tutorial this was done as examples for sequential storyboards and branching storyboards. It is also recommended to develop variations of your scenario and built alternative storyboards to get more use cases for your system. More use cases generate a bigger target group of the final product. You should also discuss your ideas with others for example by using Sketch Boards to present them. The discussion generates new ideas and improvements.

The most famous examples of narrative storyboards are comic strips. The here used example is a early comic strip of Snow White and the Seven Dwarf from Walt Disney ³⁾ out of the year 1937.

Photo-based storyboards are a alternative method for portraying narratives by using photos. The foundation is again the storyline.

First take a series of various photos, maybe based on a hand drawn sketch. Select a suitable number of photos (e.g. five). Follow the already introduced general rules (point 2 and 3).

Manipulate your photos by decreasing the contrast and increase the brightness. Convert them to gray scale photos afterwards. This step makes annotations and sketching over the photos easier and more visible.

Print your photos in a suitable size (recommended 10x10cm).

Add annotation by using a thick marker and different colors to make them stand out from the photo underneath. Alternately you can use office supplies to add editable and movable annotations. It is also possible to place a transparency layer over the photos and draw on top of the layer to get more changeable but analogous annotations. The annotations also can extend over the boundaries of the photos.

If annotations are made on dark areas they are difficult to read (e.g. the screen of a mobile phone). Create small paper cut outs of the size of the area and put them on it (now you have a blank screen) by using clue. Now you can sketch on the top of these paper cut out (e.g. an user interface).

Write the storyline below the printout and add comments if necessary.

Boarding a game is a storyboard technique to explore the spirit of the play. It is used to explore, brainstorm, capture and communicate ideas about the use and the user experience. The main idea is to sketch people to represent their emotional state and their physical position to get a big picture of the situation. The storyboard sketches the impact of the lifestyle of the user and the location on the design of the device and the interface. Some of the storyboards can be seen as sketching of a theatrical play or a role play.