← Years 9–10 Creating Digital Solutions

Interactive prototypes

A clickable model of a design where buttons link screens together, so users can try a task before any code is written. It is used for testing, not the final product.

Part of: 9-10 Digital Technologies: Designing user interfaces and experiences — Module 18, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 38, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 72

Understanding Interactive prototypes in Years 9–10 Creating Digital Solutions

What it does: This chain of linked screens shows a user clicking through a task from start to finish in a prototype. A prototype exists to test and improve a design, so it is not the finished product that gets released. Prototypes let designers test ideas early, so problems can be fixed before the expensive coding stage. Low-fidelity prototypes are quick and rough, like paper sketches. High-fidelity prototypes look much closer to the final product. A clickable model of a design where buttons link screens together, so users can try a task before any code is written. It is used for testing, not the final product.

Common mistakes: An interactive prototype is a clickable model used for testing, not the final product. The line should say 'Prototype: Canteen App'. The Back button on Screen 2 links to its own screen, so the user cannot go back. It should link to Screen 1.

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 Interactive prototypes to a class →

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

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which best describes an interactive prototype?
The finished app that is released to the publicA clickable model where buttons link screens so users can try a task
Matches
Screen 1 (Login button has no link)
↓
The button is not linked to another screen, so the user cannot click through the task. Link it to the next screen, such as Screen 2.
Applying
Meanings
Term
interactive prototype
Meaning
A clickable model of a design where buttons link screens together, so users can try a task before any code is written. It is used for testing, not the final product.
Practice
PROTOTYPE FoodOrder (low-fidelity)
Testing
Gaps
onClick(PlayButton) -> (GameScreen)
Check Answer
Spots
1Product: Canteen App
2Screen 1: Home

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

The 'Ermine' badge — Tundra Streak, one of Cloodit's 106 collectible badges
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 best describes an interactive prototype?
A. A clickable model where buttons link screens so users can try a task ✓
B. The finished app that is released to the public
An interactive prototype lets users click through linked screens and try a task. It is a model of the design, not the final product.
2. When is an interactive prototype usually made?
A. After the app is fully coded and released
B. Before any code is written ✓
Prototypes let designers test ideas early, so problems can be fixed before the expensive coding stage.
3. In a prototype, what does a button usually do?
A. Links to another screen so the user can click through the task ✓
B. Saves the user's data to a real database
In a prototype, buttons are linked to other screens to copy how the finished design would flow. No real data processing happens.
4. Which one is a low-fidelity prototype?
A. A polished, full-colour mock-up with real images and fonts
B. Paper sketches of screens that a tester flips through ✓
Low-fidelity prototypes are quick and rough, like paper sketches. High-fidelity prototypes look much closer to the final product.
5. Why might a designer choose a high-fidelity prototype?
A. It looks and feels close to the real product, so testers give realistic feedback ✓
B. It is the fastest and cheapest to make because it has no detail
High-fidelity prototypes take more time to build but feel realistic. Low-fidelity ones are the quick, cheap option.

Match the Pairs

Button "Next" -> Screen 2 → A link that takes the user to the next screen when they click the button
fidelity = "low" → A rough, simple prototype such as paper or basic boxes, quick to make and change
An interactive prototype lets a user click through screens to try a task before any code is written → Home -> Search -> Results -> Book
A prototype is made for testing, so it is not the final product → purpose = "testing"
Screen 1 (Login button has no link) → The button is not linked to another screen, so the user cannot click through the task. Link it to the next screen, such as Screen 2.
Prototype = final app released to customers → A prototype is a test model, not the final product. It is used to find problems before the real app is coded and released.

Key Term

interactive prototype
A clickable model of a design where buttons link screens together, so users can try a task before any code is written. It is used for testing, not the final product.

Fill in the Blanks

1. onClick(PlayButton) -> goto(GameScreen)
Hint: Type the action that moves the user to another screen when the button is clicked.
2. onClick(MenuButton) -> goto(MenuScreen)
Hint: Type the event name that starts the link when the user presses a button.
3. prototype = "paper sketch" fidelity = "low"
Hint: Type the fidelity level of a rough, quick paper sketch. The quote marks are already there.
4. prototype = "coloured app mock-up" fidelity = "high"
Hint: Type the fidelity level of a detailed prototype that looks like the real app. The quote marks are already there.
5. prototype.purpose = "testing" prototype.isFinal = false
Hint: Type the Boolean value that shows a prototype is only for testing, not the finished product.

Spot the Error

Question 1
A Product: Canteen App
B Screen 1: Home
C Button Order -> Screen 2
D Screen 2: Menu
Line A — An interactive prototype is a clickable model used for testing, not the final product. The line should say 'Prototype: Canteen App'.
Question 2
A Screen 1: Login
B Button Go -> Screen 2
C Screen 2: Home
D Button Back -> Screen 2
Line D — The Back button on Screen 2 links to its own screen, so the user cannot go back. It should link to Screen 1.
Question 3
A Why use a prototype?
B To avoid user testing
C To save time fixing errors
Line B — A prototype exists so users can try the task and be tested before any code is written. It should say 'To test before coding'.
Question 4
A Prototype: Bus App
B Task: find the 7:15 bus
C Needs: full code written first
D Users click through screens
Line C — An interactive prototype can be clicked through before any code is written. It should say 'Needs: no code written yet'.
Question 5
A Screen 1: Home
B Button Play -> (no link)
C Screen 2: Levels
Line B — In an interactive prototype each button must link to a screen so users can click through. It should link to Screen 2.

Student with a class code? Join your class →