← Years 5–6 Creating Digital Solutions

Annotating an interface design

A short note on a design that says what an element does or what happens when it is used, like a label on a button or an arrow showing which screen opens next.

Part of: 5-6 Digital Technologies Vic Curric - Creating Digital Solutions — Module 40, VCE Applied Computing - U1O1 - Data analysis — Module 73, VCE Software Development - U3O1 - Programming — Module 9, VCE Software Development - U3O2 - Analysis and Design — Module 88, VCE Data Analytics - U3O2 - Analysis and Design — Module 124, 7-8 Digital Technologies: Designing user interfaces and experiences — Module 16, 9-10 Digital Technologies: Designing user interfaces and experiences — Module 17, VCE Applied Computing U1O2 Programming: Requirements and design tools — Module 21, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 32, QCE Digital Solutions Unit 3 — Innovative Digital Solutions — Module 17

Understanding Annotating an interface design in Years 5–6 Creating Digital Solutions

What it does: This note names the element and tells what happens when it is used, which is the job of an annotation. The arrow points from the first screen to the next one, so it shows the screen change. Arrows are annotations that show screen changes, so they tell us which screen opens next. Annotations help others understand the design without needing the designer to explain it. Annotations should be short and say what the element does.

Common mistakes: The label says Play starts the quiz, so the arrow should point to the Quiz screen. Pointing back to Home does not show the screen change. This label points to a text box, so it should say what a text box does, such as 'Type your name here'. A text box is not slid.

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 Annotating an interface design to a class →

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

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which is the best annotation for a Play button on a game screen?
Play button: starts the gameA big blue button
Matches
Label: Button
↓
The label is too vague. It does not say what the button does, so the note does not help anyone. It should say something like 'Submit button: saves your answer'.
Applying
Meanings
Term
annotation
Meaning
A short note on a design that says what an element does or what happens when it is used, like a label on a button or an arrow showing which screen opens next.
Practice
Label: Start button - starts the quiz
Testing
Gaps
: Tap Play to start the quiz
Check Answer
Spots
3Label: Starts the quiz
4Arrow: Play -> Home screen

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

The 'Blobfish' badge — Pressure Handler, 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 is the best annotation for a Play button on a game screen?
A. A big blue button
B. Play button: starts the game ✓
An annotation says what an element does. The correct answer tells us what happens when the button is used.
2. What does an arrow drawn from the Start button to the Quiz screen show?
A. Clicking Start opens the Quiz screen ✓
B. The Start button is the biggest thing on the screen
Arrows are annotations that show screen changes, so they tell us which screen opens next.
3. True or false: An annotation is a short note on a design.
A. True ✓
B. False
An annotation is a short note that explains what an element does or what happens when it is used.
4. Which annotation is a label on an element?
A. Text box: type your name here ✓
B. I drew this on Monday afternoon
A label on an element tells the reader what that element is for. When the drawing was made does not help.
5. A student draws an arrow from the Back button to the Home screen. What should the arrow's note say?
A. Back: looks nice
B. Back: goes to Home screen ✓
A good note on an arrow says what happens next, such as which screen will open.

Match the Pairs

Label: Play button → A label annotation that names an element and says what it is
Arrow: Menu -> Game screen → An arrow annotation showing which screen opens next
An annotation can say what happens when an element is used → Start button: opens the Quiz screen
An arrow annotation shows a change from one screen to another → Home screen -> Settings screen
Label: Button → The label is too vague. It does not say what the button does, so the note does not help anyone. It should say something like 'Submit button: saves your answer'.
Home screen Score screen (no arrow) → There is no arrow, so the design does not show which screen opens next or in which direction. Add an arrow such as Home screen -> Score screen.

Key Term

annotation
A short note on a design that says what an element does or what happens when it is used, like a label on a button or an arrow showing which screen opens next.

Fill in the Blanks

1. annotation: Tap Play to start the quiz
Hint: Type the word for a short note that says what an element does.
2. Home screen -> Quiz screen
Hint: Type the arrow symbol that shows one screen changing to another.
3. Label: Volume slider Note: Drag to change the sound
Hint: Type the kind of interface element the label names, judging by the note.
4. Use an arrow to show the next screen
Hint: Type the drawn shape that shows which screen opens next.
5. Use a label to name each element
Hint: Type the word for a short name written next to an element.

Spot the Error

Question 1
A Screen 1: Home
B Button: Play
C Label: Starts the quiz
D Arrow: Play -> Home screen
Line D — The label says Play starts the quiz, so the arrow should point to the Quiz screen. Pointing back to Home does not show the screen change.
Question 2
A Label: Slide to pick a colour
B Points to: text box
C Label: Press to save
D Points to: Save button
Line A — This label points to a text box, so it should say what a text box does, such as 'Type your name here'. A text box is not slid.
Question 3
A Element: Volume slider
B Note: Click to type a name
C Element: Back button
D Note: Returns to Home screen
Line B — The note must say what the Volume slider does. It should say 'Drag to change the sound', not talk about typing a name.
Question 4
A Arrow: Menu button -> Score
B Note: Menu opens Settings
C Arrow: Back button -> Menu
Line A — The note says the Menu button opens Settings, so the arrow must point to the Settings screen, not the Score screen.
Question 5
A Screen: Login
B Label: Password slider
C Label: Login button
D Arrow: Login -> Home screen
Line B — A password is typed in, so the label should name a text box. A slider is used for dragging, not typing.

Student with a class code? Join your class →