← VCE Software Development U3O2

Navigation and 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.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 118, VCE Data Analytics - U3O2 - Analysis and Design — Module 135, 7-8 Digital Technologies: Designing user interfaces and experiences — Module 11, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 56, QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 73, QCE Digital Solutions Unit 2 — Prototype Data Solutions — Module 94, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 65

Understanding Navigation and user flow in VCE Software Development U3O2

What it does: Arrows between screens show the order a user moves through to reach their goal, which is what a user flow is. Fewer steps to a goal means less effort and less chance the user gives up. A Back button lets users undo a move and return to where they just were. Arrows show the direction of travel from one screen to the next along the path. 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.

Common mistakes: 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'. The arrow points the wrong way. The Pay button should lead from Cart to Checkout, so it should be 'button Pay -> Checkout'.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Navigation and user flow to a class →

This module's key terms are also in a printable crossword (Modules 110–119) and word search (Modules 86–119).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which describes a user flow?

The colour scheme used across every screenThe path of screens a user follows to finish a task

Matches

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.

Applying

Meanings

Term

user flow

Meaning

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.

Practice

Flow: Buy a ticket

Testing

Gaps

Home Search -> Results -> Ticket

Check Answer

Spots

3Pick Event -> Choose Seat

4Choose Seat -> Home

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

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 ✓

A user flow shows the steps and screens a person moves through to reach a goal, like buying a ticket.

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

A. Ordering a pizza in 9 steps

B. Ordering a pizza in 3 steps ✓

Fewer steps to a goal means less effort and less chance the user gives up.

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

A. Return to the previous screen ✓

B. Delete the user's account

A Back button lets users undo a move and return to where they just were.

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

A Home button gives users a quick way to restart or reach the main screen if they feel lost.

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

Arrows show the direction of travel from one screen to the next along the path.

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.

Key Term

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.

Fill in the Blanks

1. Home -> Search -> Results -> Ticket

Hint: Type the arrow symbol that shows the user moving from one screen to the next

2. Tap Back to return to the previous screen

Hint: Type the word for the screen the user was on just before this one

3. Tap Home to jump to the start screen

Hint: Type the name of the navigation button that takes you straight to the start screen

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

Hint: Type the word meaning the smallest number, which is what a good flow aims for

5. A user flow is the path of screens to a goal

Hint: Type the two-word term for the path of screens a user follows to finish a task

Spot the Error

Question 1

A flow BuyTicket

B Home -> Pick Event

C Pick Event -> Choose Seat

D Choose Seat -> Home

E Pay -> Confirmation

Line 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'.

Question 2

A screen Cart

B button Back -> Shop

C button Home -> Home

D button Pay <- Checkout

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

Question 3

A steps ← 5

B WHILE screen != Goal

C tap next button

D steps ← steps + 1

Line 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'.

Question 4

A screen Settings

B button Home -> Settings

C button Back -> Previous

Line 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'.

Question 5

A start: Home

B Welcome -> Username

C Username -> Password

D Password -> Home

Line 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'.

Student with a class code? Join your class →