Testing interactive content with its audience

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Your quiz site is for Year 7 students. Who should test it?

A Only you, because you built it

B A few Year 7 students from your audience

2. During a test, a user struggles to find the Submit button. What should you do?

A Stay quiet, watch, and note where they got stuck

B Point to the button so they can finish faster

3. Which plan best tests a page that people will open on both phones and computers?

A Test it only on your laptop, since phones are similar

B Test it on a phone and on a computer

4. Which note is the better feedback record?

A Maya tapped the map twice, then asked what to do. Add a 'Tap here' label.

B Maya did not like it.

5. True or false: if one tester is confused by a menu, you can ignore it.

A False: check whether other testers get stuck there too

B True: one person's problem never matters

Match the Pairs

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

Left column		Right column
1user testing		AThe creator argues with the tester and explains instead of watching and recording what confused them
2<meta name="viewport" content="width=device-width">		BWatching real members of your audience use your content, then noting what confused them and what to change
3Record what a tester says and where they got stuck, so you can decide what to change		CTester 1: Could not find the Submit button. Fix: make it bigger
4Test the same page on both a phone and a computer, because layouts can break on one		DMakes a page fit the screen width so you can test it properly on a phone
5Tester: I was confused by the menu. Me: No, it is easy! Look, you just click here.		EOnly testing on one device misses problems on phones, where buttons and text may be too small
6Tested on my laptop only. Works fine, so it is ready to publish!		FTest 1: phone (390px wide) Test 2: laptop (1440px wide)

Definitions

user testing

Fill in the Blanks

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

<label for="notes">What confused you?</label> <________ id="notes"></textarea>

@media (_________: 600px) { img { width: 100%; } }

<input type="________" id="found"> <label for="found">Found the menu?</label>

Spot the Error

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

Question 1

A choose 3 people from your team

B give them a task to try

C watch without helping

D write down where they get stuck

Question 2

A open page on a phone

B open page on a computer

C try each button on both

D ignore any layout problems

Question 3

A <form>

B <label>Confusing part?</label>

C <textarea><textarea>

D <button>Send</button>

E </form>

Question 4

A tester: Sam, Year 9

B device: phone

C problem: could not find Back

D change: tell Sam to read more

Question 5

A for each tester in group:

B tell them where to click

C write down what confused

Answer Key

Testing interactive content with its audience

Section A: Quick Questions

B — A few Year 7 students from your audience

A — Stay quiet, watch, and note where they got stuck

B — Test it on a phone and on a computer

A — Maya tapped the map twice, then asked what to do. Add a 'Tap here' label.

A — False: check whether other testers get stuck there too

Section B: Match the Pairs

user testing → Watching real members of your audience use your content, then noting what confused them and what to change

Record what a tester says and where they got stuck, so you can decide what to change → Tester 1: Could not find the Submit button. Fix: make it bigger

Test the same page on both a phone and a computer, because layouts can break on one → Test 1: phone (390px wide) Test 2: laptop (1440px wide)

Tester: I was confused by the menu. Me: No, it is easy! Look, you just click here. → The creator argues with the tester and explains instead of watching and recording what confused them

Tested on my laptop only. Works fine, so it is ready to publish! → Only testing on one device misses problems on phones, where buttons and text may be too small

Section C: Definitions

user testing — Watching real members of your audience use your content on a phone and a computer, then recording what confused them and what to change.

Section D: Fill in the Blanks

<meta name="viewport"
  content="width=device-width">

<label for="notes">What confused you?</label>
<textarea id="notes"></textarea>

@media (max-width: 600px) {
  img { width: 100%; }
}

<input type="checkbox" id="found">
<label for="found">Found the menu?</label>

<label>Ease of use (1-5)</label>
<input type="range" min="1" max="5">

Section E: Spot the Error

A — User testing needs members of the intended audience, not your own team, who already know how the content works. The line should be 'choose 3 people from audience'.

D — Testing on a phone and a computer is meant to find layout problems so they can be recorded and fixed. The line should be 'record any layout problems'.

C — The closing tag is missing its slash, so the feedback box never closes and testers' feedback may not be recorded properly. It should be <textarea></textarea>.

D — When a tester gets confused, the content should be changed to fix the problem, not blamed on the user. The line should be 'change: add a Back button'.

B — Observing a user means watching without guiding them. If you tell them where to click, you hide the problems. The line should be ' watch them use the page'.