Feedback and error messages in an interface

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which message gives the user clear feedback after they submit a form?

A Thanks! Your form was sent.

B (No message, the screen just stays the same)

2. Which error message is more helpful?

A Password must be at least 8 characters. Please add more.

B Error 4002: Invalid input.

3. True or false: Feedback is a response from the interface that tells the user what happened.

A False

B True

4. A student taps 'Save' on a drawing app. Which is the best feedback?

A A message pops up: 'Your drawing was saved.'

B Nothing changes, so the student must check the files to see if it worked.

5. Which error message tells the user how to fix the problem?

A Something went wrong.

B Please enter your email with an @ symbol, like sam@email.com.

Match the Pairs

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

Left column		Right column
1Message sent!		APhoto saved to your album.
2Password must have 8+ characters. Add more.		BToo vague: the user cannot tell what happened or what to do. Better: 'Your username is taken. Try another one.'
3Feedback should confirm to the user that their action worked		CA confirmation message that gives feedback to tell the user their action worked
4A good error message says what went wrong and how to fix it		DUnhelpful error text: it does not say what went wrong or how to fix it. Better: 'Page not found. Check the web address.'
5Error 404		EEmail missing '@'. Check it and try again.
6Something went wrong.		FA helpful error message that says what went wrong and how to fix it

Definitions

feedback

Fill in the Blanks

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

_________________("File saved!")

__________("Add an @ to your email.")

IF length _ 8 THEN show_error("Too short")

IF ___ saved THEN show_error("Try again.")

IF age < 5 __ age > 15 THEN show_error("Enter an age from 5 to 15.")

Spot the Error

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

Question 1

A when user clicks Save

B save the document

C show "Delete failed"

Question 2

A if password is not empty

B show "Type a password"

C turn the box red

Question 3

A if email has no @ symbol

B show "Email needs @"

C close the form

Question 4

A show "Something went wrong"

B add a Retry button

C when tapped, try again

Question 5

A when user taps Upload

B hide all feedback

C send the photo

D show "Photo uploaded"

Answer Key

Feedback and error messages in an interface

Section A: Quick Questions

A — Thanks! Your form was sent.

A — Password must be at least 8 characters. Please add more.

B — True

A — A message pops up: 'Your drawing was saved.'

B — Please enter your email with an @ symbol, like sam@email.com.

Section B: Match the Pairs

Message sent! → A confirmation message that gives feedback to tell the user their action worked

Password must have 8+ characters. Add more. → A helpful error message that says what went wrong and how to fix it

Feedback should confirm to the user that their action worked → Photo saved to your album.

A good error message says what went wrong and how to fix it → Email missing '@'. Check it and try again.

Error 404 → Unhelpful error text: it does not say what went wrong or how to fix it. Better: 'Page not found. Check the web address.'

Something went wrong. → Too vague: the user cannot tell what happened or what to do. Better: 'Your username is taken. Try another one.'

Section C: Definitions

feedback — A response from the interface that tells the user what happened, like a confirmation message, or an error message that says what went wrong and how to fix it.

Section D: Fill in the Blanks

show_confirmation("File saved!")

show_error("Add an @ to your email.")

IF length < 8 THEN show_error("Too short")

IF NOT saved THEN show_error("Try again.")

IF age < 5 OR age > 15 THEN
  show_error("Enter an age from 5 to 15.")

Section E: Spot the Error

C — The confirmation message must match what happened. The document saved, so it should say something like "Saved successfully", not that a delete failed.

A — The error message should only appear when the password box is empty. The condition should be "if password is empty".

C — After an error the form should stay open so the user can fix the mistake. It should say "keep the form open".

A — This message is vague. It does not say what went wrong or how to fix it. A helpful message says the Wi-Fi is off and tells the user to turn it on.

B — Good feedback tells the user something is happening while they wait. The interface should show a progress bar, not hide all feedback.