1. Outline storyboard frames

Take a blank piece of paper and draw a grid of 5 rectangular boxes. These frames are the basic template for our storyboard. Depending on the type of storyboard you want to create and the complexity of the interaction, you might need more than five boxes to draw all your scenes. Using only five sketches for the storyboard, however, has the benefit of limiting the interaction shown in the storyboard to one particular scenario. If necessary, you can draw additional storyboards later; either as variations of the first one, or as storyboards illustrating a different kind of interaction with the system.

2. Develop the storyline

Before you start sketching scenes, you need to plan a storyline for the storyboard you want to create. Some aspects to consider when describing a storyline are:

You will develop this storyline across your five frames. The first beginning frame introduces your story, and is also called the ‘establishing shot’. The following frames develop the story, eventually leading toward a climax, i.e., the solution to the problem. The last end frame concludes the story, and often indicates a scene that emphasizes that the interaction illustrated in the storyboard is completed (e.g., a person walking away).

Before you read our particular solution below, try to plan your storyboard by describing a series of five shots.

Here is one possible storyline for your example scenario:

Write the storyline text underneath each of the five frames of our storyboard.

The next step is to draw each of these scenes from the storyline in our storyboard. Give it a try before you see our solution below (which is one of many possible solutions).

3. Sketch establishing shot (introduction)

As mentioned above, our first sketch of our storyboard – the establishing shot – will be used to ‘set the scene’ of our storyboard. In particular, it gives an overview of the location where the interaction takes place and shows the people involved. For this kind of sketch you can use an ‘extreme long shot’ (as described earlier) to show details of the environment. In our solution, we sketched a hallway containing a door and an announcement board, and a person as a simple stick figure (similar to those of Chapter 3.3). Similar to many of our sketches before, a key aspect is simplicity. Do quick sketches instead of spending too much time with unnecessary details. Keep the elements you are sketching (people or features of the environment) to the bare minimum.

If you want to try different scenarios, do that as separate storyboards. For example, using different sheets containing five blank panels, you can create similar establishing long shots of other environments and situations: a person walking through an airport with many surrounding people and an electronic display, or a couple arriving at an enclosed bus stop with posters hung on it.

4. Continue the storyline sketches with appropriate camera shots

Now continue with the remaining sketches of the storyboard. Apply the simple sketching techniques we introduced in earlier chapters. Use stick figures to illustrate people’s postures and orientation (Chapter 3.3), or draw simple silhouettes of people and objects with the photo tracing technique (Chapter 3.9). Our five sketches are shown below.

In each of the above sketched scenes you can apply the cinematographic techniques of varying camera shots. For the beginning and end we used the extreme wide shot to illustrate context. The over-the-shoulder view in the second frame shows details of the person and the board, as this emphasizes what the person is looking at. We then used the first person point of view shot in frame 3 to emphasize the action a person is doing (i.e., taking a photo of the bar code). Finally, the close-up in frame 4 allows us to show details of the information displayed on the screen.

5. Emphasize actions and motions

If needed, you can now add visual annotations to the sketches. Annotations (drawn in yellow below) are a valuable way of indicating and emphasizing important motions or actions that are otherwise difficult to show in a static image.

For example, we used various arrows to indicate a person’s motion.

In our establishing scene, we drew a large arrow on the floor indicating that the person is walking by the announcement board.

In the 2nd frame, the circling arrow emphasizes the head-turning motion of the person just noticing something of interest on the board.

The last frame also uses a large arrow, this time showing the person walking away.

We also used a variety of other annotations to emphasize people’s actions or thoughts, or changes happening in a device’s user interface:

These lines in the 3rd frame emphasize the photo taking action and what is being captured.

The question mark above a person’s head reveals emotion, such as an expression of surprise and interest.

The lines around the screen of the person’s mobile phone emphasize that new content just appeared on the screen.

6. Demonstrate to others and iterate

Your first narrative storyboard is now complete. Try other variations of this scenario by building alternate scenarios, such as the airport and bus stop situation described earlier. Also try developing a separate interface storyboard showing what the person does on screen; use this to explain the details the person must do in frame 3 above. Finally, use the techniques shown in Chapters 6.4 and 6.5 to demonstrate this storyboard to others. Get feedback: colleagues, friends, or clients. At this point, use that feedback to see if your storyboard is effective: do they understand your story, i.e., how you envisage the context of use of the system by the actors portrayed within it?

1. Take photo snapshots

Take a series of photos of a person in front of a public announcement board. Vary the camera shots: long shots for overview, over-the-shoulder and point-of-view for people’s actions, close-ups for details of an interface or a particular action, etc.

Select five photos as your sources for your storyboard. Again, begin with a long shot introducing the setting, followed by three photos illustrating the interaction, and a single photo for the ending of the storyboard.

2. Manipulate your photos

Using your favorite image manipulation tool, decrease the contrast and increase the brightness of the photos, and then convert them to gray scale photos. This makes it easier for you to add annotations and sketch over the photos.

3. Print your photos

We recommend a minimum size of around 10×10cm (4″×4″).

4. Add annotations

Similar to our earlier sketched storyboard, we also add annotations to our photo storyboard. Again we use these to indicate a person’s movement (arrows for walking direction, or head turning). Use a thick marker and different colors to make these annotations stand out from the photo underneath. Alternately, use office supplies (Chapter 3.7) to add editable and movable annotations atop your storyboard. For example, if you place a transparency over the photo, you can draw your arrow atop of that. You can move that transparency to move the arrow, or replace it with a new transparency if you change your mind.

Annotations can also extend over the boundaries of the photo, such as the motion arrow in this sketch. In this case, the arrow’s extension out of the frame emphasizes that the person is walking away.

Add any additional elements (e.g., other objects or devices) as sketches over the photos. In this photo the bar code of the poster is added as a sketch over the original photo.

5. Use office supplies to create overlays

Drawing annotations on top of dark areas of the photo makes them difficult to read (e.g., the dark black area of the mobile phone’s screen). To overcome this problem, create small paper cut outs out of sticky notes in the size of the area (e.g., the screen). Or use paper and just glue it onto the photo printouts.

Sketch atop these paper cut outs. For example, in frame 4 you can sketch the user interface elements of the screen .

6. Add storyline text and comments

Write the storyline text below the printout of the photos. This makes it easier for others to follow the story you are telling when they read your storyboard.

Your photo-based narrative storyboard is now complete.

Note

Using sticky notes for your storyboard frames

Using sticky notes for each frame of your storyboard can make it easier to alternate and/or add to or subtract from the storyboard sequence. Here are a few examples of other storyboards created by students.