Navigation and user flow

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which describes a user flow?

A The colour scheme used across every screen

B The path of screens a user follows to finish a task

2. Which design gets a user to their goal better?

A Ordering a pizza in 9 steps

B Ordering a pizza in 3 steps

3. What is the main job of a Back button?

A Return to the previous screen

B Delete the user's account

4. What does a Home button do?

A Takes the user to the main screen from anywhere

B Closes the device and turns it off

5. In a user flow diagram, what do arrows between screens show?

A Which screen the user moves to next

B How loud each screen sounds

Match the Pairs

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

Left column		Right column
1Home button		AToo many steps: the user must go through seven screens just to change their name, so the flow is too long. Cut out screens to shorten the path.
2Back button		BHome -> Buy Ticket -> Done
3A user flow can be shown as screens joined by arrows, so the path to finish a task is clear		CLogin -> Menu -> Order -> Pay
4A good user flow reaches the goal in the fewest steps		DThe user has no navigation control to go back or return home, so they can get stuck. Add a back button and a home button.
5Home -> Menu -> Settings -> Profile -> Edit -> Name -> Save		EA control that takes the user to the previous screen they were just on
6Checkout screen with no back button or home button		FA control that takes the user straight back to the starting screen from anywhere in the app

Definitions

user flow

Fill in the Blanks

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

Home __ Search -> Results -> Ticket

Tap Back to return to the ________ screen

Tap ____ to jump to the start screen

Flow A: Home -> Pay (2 screens) Flow B: Home -> Menu -> Pay (3 screens) Best flow has the ______ steps

A _________ is the path of screens to a goal

Spot the Error

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

Question 1

A flow BuyTicket

B Home -> Pick Event

C Pick Event -> Choose Seat

D Choose Seat -> Home

E Pay -> Confirmation

Question 2

A screen Cart

B button Back -> Shop

C button Home -> Home

D button Pay <- Checkout

Question 3

A steps ← 5

B WHILE screen != Goal

C tap next button

D steps ← steps + 1

Question 4

A screen Settings

B button Home -> Settings

C button Back -> Previous

Question 5

A start: Home

B Welcome -> Username

C Username -> Password

D Password -> Home

Answer Key

Navigation and user flow

Section A: Quick Questions

B — The path of screens a user follows to finish a task

B — Ordering a pizza in 3 steps

A — Return to the previous screen

A — Takes the user to the main screen from anywhere

A — Which screen the user moves to next

Section B: Match the Pairs

Home button → A control that takes the user straight back to the starting screen from anywhere in the app

Back button → A control that takes the user to the previous screen they were just on

A user flow can be shown as screens joined by arrows, so the path to finish a task is clear → Login -> Menu -> Order -> Pay

A good user flow reaches the goal in the fewest steps → Home -> Buy Ticket -> Done

Home -> Menu -> Settings -> Profile -> Edit -> Name -> Save → Too many steps: the user must go through seven screens just to change their name, so the flow is too long. Cut out screens to shorten the path.

Checkout screen with no back button or home button → The user has no navigation control to go back or return home, so they can get stuck. Add a back button and a home button.

Section C: Definitions

user flow — The path of screens a user follows to finish a task, like logging in or buying a ticket. Navigation controls such as back and home buttons help them move along it in as few steps as possible.

Section D: Fill in the Blanks

Home -> Search -> Results -> Ticket

Tap Back to return to the previous screen

Tap Home to jump to the start screen

Flow A: Home -> Pay (2 screens)
Flow B: Home -> Menu -> Pay (3 screens)
Best flow has the fewest steps

A user flow is the path of screens to a goal

Section E: Spot the Error

D — The user flow should move forward to the Pay screen. Sending the user back to Home breaks the path to the goal. It should be 'Choose Seat -> Pay'.

D — The arrow points the wrong way. The Pay button should lead from Cart to Checkout, so it should be 'button Pay -> Checkout'.

A — The step counter must start at 0 before the user has tapped anything. Starting at 5 gives the wrong count. It should be 'steps ← 0'.

B — A Home button should take the user to the Home screen. Here it leads to the screen they are already on. It should be 'button Home -> Home'.

A — The login flow begins at the Welcome screen, because the next line leaves from Welcome. Home is where the flow ends. It should be 'start: Welcome'.