Useability principles for an interface
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. A form has large text, high-contrast colours and works with a screen reader. Which useability principle does this show?
2. An app shows a message 'Are you sure you want to delete this?' and lets users undo a deletion. Which principle is this?
3. A school canteen app lets a regular user reorder their usual lunch in two taps. Which principle is this?
4. A new user can work out how to book a library room without reading a manual because the labels and icons are familiar. Which principle is this?
5. True or false: Useability principles are used to judge how well an interface works for its users.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1Accessibility | AA magnifying glass icon labelled Search | |
| 2Error tolerance | BPoor error tolerance: one accidental click permanently loses data. Add a confirmation message or an undo option. | |
| 3Efficiency: users finish a task quickly with few steps | CEveryone can use the interface, including people with vision, hearing or movement difficulties | |
| 4Ease of learning: a new user can work out how to use it without much training | DCtrl+S saves a file in one step | |
| 5Delete button removes a student record at once with no warning and no undo | EPoor accessibility: low contrast and missing alt text make the screen hard to read for users with low vision or screen readers. Use high contrast and add alt text. | |
| 6Light grey text on a white background with no alt text on images | FThe interface prevents mistakes and makes it easy to recover from them |
C
Definitions
useability principles
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<img src="logo.png" ___="School logo">
2.
try:
age = int(input("Age: "))
except __________: print("Numbers only")
3.
<input type="text" _________>
4.
<input type="text" ___________="dd/mm/yyyy">
5.
<label ___="email">Email address</label>
<input id="email" type="email">
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<form>
B
<label for="name">Age</label>
C
<input id="age" type="number">
D
</form>
Question 2
A
def delete_item(item):
B
if not confirm("Sure?"):
C
item.remove()
D
show("Item deleted")
Question 3
A
print("1. Add student")
B
print("3. Remove student")
C
print("3. Show students")
D
choice = input("Choose 1-3: ")
Question 4
A
user = load_saved_user()
B
if user is not None:
C
address = user.phone
D
else:
E
address = input("Addr: ")
Question 5
A
body {
B
font-size: 16px;
C
color: #222;
D
background: #333;
E
}
Answer Key
Useability principles for an interface
Section A: Quick Questions
Q1
A — Accessibility
Q2
A — Error tolerance
Q3
A — Efficiency
Q4
B — Ease of learning
Q5
B — True
Section B: Match the Pairs
Q1
Accessibility → Everyone can use the interface, including people with vision, hearing or movement difficulties
Q2
Error tolerance → The interface prevents mistakes and makes it easy to recover from them
Q3
Efficiency: users finish a task quickly with few steps → Ctrl+S saves a file in one step
Q4
Ease of learning: a new user can work out how to use it without much training → A magnifying glass icon labelled Search
Q5
Delete button removes a student record at once with no warning and no undo → Poor error tolerance: one accidental click permanently loses data. Add a confirmation message or an undo option.
Q6
Light grey text on a white background with no alt text on images → Poor accessibility: low contrast and missing alt text make the screen hard to read for users with low vision or screen readers. Use high contrast and add alt text.
Section C: Definitions
Q1
useability principles — Six criteria for judging an interface: accessibility, effectiveness, ease of learning, efficiency, error tolerance and engagement. A good interface does well on all of them.Section D: Fill in the Blanks
Q1
<img src="logo.png" alt="School logo">Q2
try:
age = int(input("Age: "))
except ValueError: print("Numbers only")Q3
<input type="text" autofocus>Q4
<input type="text" placeholder="dd/mm/yyyy">Q5
<label for="email">Email address</label>
<input id="email" type="email">Section E: Spot the Error
Q1
B — The label's for value must match the input's id (age). Without a matching id, screen readers can't link the label to the box, which hurts accessibility. It should be for="age".
Q2
B — A confirmation step gives error tolerance, but 'not' makes the item delete when the user says no. It should be: if confirm("Sure?"):
Q3
B — Two options are numbered 3, so the menu is confusing and hard to learn. A clear, consistent menu makes the interface easy to learn. This line should be numbered 2.
Q4
C — A saved user's address should be reused so they don't retype it, which makes the interface efficient. This line wrongly uses the phone number. It should be user.address.
Q5
D — Dark grey text (#222) on a dark grey background (#333) has very low contrast, so many users can't read it. Accessibility needs strong contrast, such as a white background (#fff).