Interactive prototypes

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

2. When is an interactive prototype usually made?

A After the app is fully coded and released

B Before any code is written

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

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

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

Match the Pairs

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

Left column		Right column
1Button "Next" -> Screen 2		AHome -> Search -> Results -> Book
2fidelity = "low"		Bpurpose = "testing"
3An interactive prototype lets a user click through screens to try a task before any code is written		CA rough, simple prototype such as paper or basic boxes, quick to make and change
4A prototype is made for testing, so it is not the final product		DA prototype is a test model, not the final product. It is used to find problems before the real app is coded and released.
5Screen 1 (Login button has no link)		EA link that takes the user to the next screen when they click the button
6Prototype = final app released to customers		FThe 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.

Definitions

interactive prototype

Fill in the Blanks

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

onClick(PlayButton) -> ____(GameScreen)

_______(MenuButton) -> goto(MenuScreen)

prototype = "paper sketch" fidelity = "___"

prototype = "coloured app mock-up" fidelity = "____"

prototype.purpose = "testing" prototype.isFinal = _____

Spot the Error

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

Question 1

A Product: Canteen App

B Screen 1: Home

C Button Order -> Screen 2

D Screen 2: Menu

Question 2

A Screen 1: Login

B Button Go -> Screen 2

C Screen 2: Home

D Button Back -> Screen 2

Question 3

A Why use a prototype?

B To avoid user testing

C To save time fixing errors

Question 4

A Prototype: Bus App

B Task: find the 7:15 bus

C Needs: full code written first

D Users click through screens

Question 5

A Screen 1: Home

B Button Play -> (no link)

C Screen 2: Levels

Answer Key

Interactive prototypes

Section A: Quick Questions

A — A clickable model where buttons link screens so users can try a task

B — Before any code is written

A — Links to another screen so the user can click through the task

B — Paper sketches of screens that a tester flips through

A — It looks and feels close to the real product, so testers give realistic feedback

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

onClick(PlayButton) -> goto(GameScreen)

onClick(MenuButton) -> goto(MenuScreen)

prototype = "paper sketch"
fidelity = "low"

prototype = "coloured app mock-up"
fidelity = "high"

prototype.purpose = "testing"
prototype.isFinal = false

Section E: Spot the Error

A — An interactive prototype is a clickable model used for testing, not the final product. The line should say 'Prototype: Canteen App'.

D — The Back button on Screen 2 links to its own screen, so the user cannot go back. It should link to Screen 1.

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

C — An interactive prototype can be clicked through before any code is written. It should say 'Needs: no code written yet'.

B — In an interactive prototype each button must link to a screen so users can click through. It should link to Screen 2.