Interface element: buttons

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. What is a button in an interface?

A A place where the user can only read text

B Something the user clicks or taps to make something happen

2. Which button label is clearer for a game that starts when pressed?

A Start Game

B Click

3. A quiz app has a button that both submits your answer AND deletes your score. Is this a good design?

A No, each button should do one action

B Yes, one button doing many things is best

4. Which button is easier for a Year 5 student to tap on a tablet?

A A tiny button squashed next to other buttons

B A big button with space around it

5. Which label tells the user what the button does?

A Save Drawing

B Button 1

Match the Pairs

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

Left column		Right column
1Button: "Play"		AA button that does just one action when it is clicked
2Button: "Save" -> saves the file		BButton: "Start" and Button: "Stop"
3A button should be big enough for a finger or mouse to press easily		CA button with a clear label that tells the user what will happen when they click it
4Use one button for each action so the user knows what will happen		DButton: "Next", size: large
5Button: "Click here"		EThe button does two actions at once, which is confusing. It should be two buttons, "Save" and "Delete".
6Button: "Save and Delete"		FThe label is vague. It does not tell the user what the button does. A better label is "Play" or "Send".

Definitions

button

Fill in the Blanks

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

ADD ______ WITH label "Play"

WHEN Save button _______ SAVE the drawing

SET Play button _____ TO 120 pixels

SET Start button _____ TO "Start game"

BUTTON Mute ON CLICK: turn sound off ACTIONS: _

Spot the Error

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

Question 1

A Button: Send

B label: Click here

C action: send the message

D size: 60 x 40 pixels

Question 2

A Button: Play Music

B label: Play Music

C action: play and open shop

D size: big enough to tap

Question 3

A size: 5 x 5 pixels

B label: Send

C action: send the message

Question 4

A Screen: Quiz

B Button 1 action: check answer

C Button 1 label: Delete

Question 5

A Button A label: Play

B Button A action: start game

C Button B label: Pause

D Button B action: start game

Answer Key

Interface element: buttons

Section A: Quick Questions

B — Something the user clicks or taps to make something happen

A — Start Game

A — No, each button should do one action

B — A big button with space around it

A — Save Drawing

Section B: Match the Pairs

Button: "Play" → A button with a clear label that tells the user what will happen when they click it

Button: "Save" -> saves the file → A button that does just one action when it is clicked

A button should be big enough for a finger or mouse to press easily → Button: "Next", size: large

Use one button for each action so the user knows what will happen → Button: "Start" and Button: "Stop"

Button: "Click here" → The label is vague. It does not tell the user what the button does. A better label is "Play" or "Send".

Button: "Save and Delete" → The button does two actions at once, which is confusing. It should be two buttons, "Save" and "Delete".

Section C: Definitions

button — An interface element the user clicks or taps to make something happen. It needs a clear label, should do one action, and must be big enough to press easily.

Section D: Fill in the Blanks

ADD BUTTON WITH label "Play"

WHEN Save button clicked
  SAVE the drawing

SET Play button width TO 120 pixels

SET Start button label TO "Start game"

BUTTON Mute
  ON CLICK: turn sound off
  ACTIONS: 1

Section E: Spot the Error

B — A button needs a clear label that tells the user what it does. 'Click here' is vague. The label should be 'Send'.

C — A button should do one action only. This button does two things. The action should be just 'play the music'.

A — A button must be big enough to press easily. 5 x 5 pixels is far too small. It should be a size like 60 x 40 pixels.

C — The label must match what the button does. The button checks an answer, so the label should be 'Check', not 'Delete'.

D — The Pause button must do what its label says. Its action should be 'pause game', not 'start game'.