Annotating an interface design

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

3. True or false: An annotation is a short note on a design.

A True

B False

4. Which annotation is a label on an element?

A Text box: type your name here

B I drew this on Monday afternoon

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

Match the Pairs

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

Left column		Right column
1Label: Play button		AAn arrow annotation showing which screen opens next
2Arrow: Menu -> Game screen		BThere 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.
3An annotation can say what happens when an element is used		CStart button: opens the Quiz screen
4An arrow annotation shows a change from one screen to another		DA label annotation that names an element and says what it is
5Label: Button		EThe 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'.
6Home screen Score screen (no arrow)		FHome screen -> Settings screen

Definitions

annotation

Fill in the Blanks

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

__________: Tap Play to start the quiz

Home screen __ Quiz screen

Label: Volume ______ Note: Drag to change the sound

Use an _____ to show the next screen

Use a _____ to name each element

Spot the Error

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

Question 1

A Screen 1: Home

B Button: Play

C Label: Starts the quiz

D Arrow: Play -> Home screen

Question 2

A Label: Slide to pick a colour

B Points to: text box

C Label: Press to save

D Points to: Save button

Question 3

A Element: Volume slider

B Note: Click to type a name

C Element: Back button

D Note: Returns to Home screen

Question 4

A Arrow: Menu button -> Score

B Note: Menu opens Settings

C Arrow: Back button -> Menu

Question 5

A Screen: Login

B Label: Password slider

C Label: Login button

D Arrow: Login -> Home screen

Answer Key

Annotating an interface design

Section A: Quick Questions

B — Play button: starts the game

A — Clicking Start opens the Quiz screen

A — True

A — Text box: type your name here

B — Back: goes to Home screen

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

Section C: Definitions

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.

Section D: Fill in the Blanks

annotation: Tap Play to start the quiz

Home screen -> Quiz screen

Label: Volume slider
Note: Drag to change the sound

Use an arrow to show the next screen

Use a label to name each element

Section E: Spot the Error

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.

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.

B — The note must say what the Volume slider does. It should say 'Drag to change the sound', not talk about typing a name.

A — The note says the Menu button opens Settings, so the arrow must point to the Settings screen, not the Score screen.

B — A password is typed in, so the label should name a text box. A slider is used for dragging, not typing.