Storyboarding a user's path through a system

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which describes a storyboard for an app?

A A row of numbered screen sketches with arrows between them

B A single paragraph of code that runs the app

2. What are the numbers on the panels of a storyboard for?

A They show how many users have opened the app

B They show the order the screens are visited

3. What does an arrow between two panels show?

A Which screen opens next

B Which screen is the best design

4. Your storyboard has panels 1, 2 and 3. Which is the better way to set them out?

A 3, 1, 2 scattered with no arrows

B 1 → 2 → 3 with arrows pointing from each panel to the next

5. A user taps 'Play' on the home screen, and the game screen opens. In a storyboard, what would you draw?

A An arrow from the home screen panel to the game screen panel

B An arrow from the game screen panel back to nowhere

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1Panel 1, Panel 2, Panel 3		AThe panels have no numbers and no arrows, so you cannot tell which screen comes first or what opens next
2[Home] -> [Search]		B[2: Menu] -> [3: Order]
3A storyboard is a row of screen sketches, each with its own number so the order is clear		CThe arrows point backwards, so they show the user moving from the last screen to the first instead of from first to last
4An arrow joins two panels to show which screen opens when the user taps a button		DNumbered panels that show the order of the screens, from the first screen to the last
5[Login] [Menu] [Order]		EAn arrow showing that the Search screen opens next after the Home screen
6[1: Login] <- [2: Menu] <- [3: Order]		F[1: Login] [2: Menu] [3: Order]

Definitions

storyboard

Fill in the Blanks

Complete each line of code by filling in the missing parts.

Panel _: Home screen

Panel 1 __ Panel 2

_____ 2: Login screen

Panel 1: Home screen Panel 2: Search screen Panel _: Results screen

__________: Panel 1 -> Panel 2 -> Panel 3

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A Panel 1: Welcome screen

B -> Panel 2

C Panel 5: Sign-up screen

D -> Panel 3

E Panel 3: Home screen

Question 2

A Panel 1: Menu -> Panel 2

B Panel 2: Search -> Panel 3

C Panel 3: Results -> Panel 1

D Panel 4: Song page (end)

Question 3

A Storyboard: Order a pizza

B Panel 1: Pick size <- Panel 2

C Panel 2: Add sides -> Panel 3

D Panel 3: Pay -> Panel 4

E Panel 4: Order done (end)

Question 4

A Panel 1: Log in -> Panel 2

B Panel 2: Home -> Panel 3

C Panel 3: Profile -> Panel 4

D Panel 4: Settings

E Panel 5: Log out (end)

Question 5

A Panel 1: Start -> Panel 3

B Panel 2: Level -> Panel 3

C Panel 3: Play -> Panel 4

D Panel 4: Score (end)

Answer Key

Storyboarding a user's path through a system

Section A: Quick Questions

A — A row of numbered screen sketches with arrows between them

B — They show the order the screens are visited

A — Which screen opens next

B — 1 → 2 → 3 with arrows pointing from each panel to the next

A — An arrow from the home screen panel to the game screen panel

Section B: Match the Pairs

Panel 1, Panel 2, Panel 3 → Numbered panels that show the order of the screens, from the first screen to the last

[Home] -> [Search] → An arrow showing that the Search screen opens next after the Home screen

A storyboard is a row of screen sketches, each with its own number so the order is clear → [1: Login] [2: Menu] [3: Order]

An arrow joins two panels to show which screen opens when the user taps a button → [2: Menu] -> [3: Order]

[Login] [Menu] [Order] → The panels have no numbers and no arrows, so you cannot tell which screen comes first or what opens next

[1: Login] <- [2: Menu] <- [3: Order] → The arrows point backwards, so they show the user moving from the last screen to the first instead of from first to last

Section C: Definitions

storyboard — A row of numbered screen sketches with arrows showing the order a user moves through them, so you can plan how someone gets from the first screen to the last.

Section D: Fill in the Blanks

Panel 1: Home screen

Panel 1 -> Panel 2

Panel 2: Login screen

Panel 1: Home screen
Panel 2: Search screen
Panel 3: Results screen

storyboard: Panel 1 -> Panel 2 -> Panel 3

Section E: Spot the Error

C — Storyboard panels must be numbered in order. The arrow from Panel 1 leads to Panel 2, so this sketch should be labelled Panel 2, not Panel 5.

C — The arrow sends the user back to Panel 1, so the path never reaches the last screen. It should point forward to Panel 4.

B — The arrow points the wrong way. Arrows show which screen opens next, so it should be -> Panel 2.

D — There is no arrow after Panel 4, so the user's path stops here. It needs -> Panel 5 to show which screen opens next.

A — The arrow skips Panel 2, so the user would miss the Level screen. It should be -> Panel 2.