Common interface pitfalls

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A banking app shows 40 buttons, ads and links on one screen. What kind of pitfall is this?

A A helpful feature

B A cluttered screen

2. Which is an interface pitfall?

A A Submit button so tiny and faint that users can barely see it

B A Submit button that is large and clearly labelled

3. A form says 'Error 4021' when you type your email wrongly. Which statement is true?

A It is good design because the code looks technical and professional

B It is a pitfall because the message does not explain the problem

4. Which error message avoids the pitfall?

A Password must be at least 8 characters

B Something went wrong

5. A button labelled 'Download' actually signs you up for a paid subscription. What is this pitfall?

A Misleading design

B Good affordance

Match the Pairs

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

Left column		Right column
1pitfall		A<button style="font-size:6px">Submit</button>
2cluttered screen		BA design problem that makes an interface hard to use, such as clutter, hidden controls or unclear labels
3A pitfall: a hidden or tiny control that users struggle to find or tap		Cmessagebox.showerror("Error", "Error 4021")
4A pitfall: an unclear error message that does not tell the user what went wrong or how to fix it		DMisleading design: the label and colour suggest a safe action but the button actually deletes the user's work.
5A Delete button styled green with the label "Save"		EA pitfall where too many buttons, images and text crowd one screen so users cannot find what they need
6Home screen with 25 buttons, 6 fonts and flashing banners		FCluttered screen: too many elements compete for attention, so users cannot find the main task.

Definitions

pitfall

Fill in the Blanks

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

.ad { ________: fixed; top: 0; }

.menu { _______: none; }

button { _________: 4px; }

_____("Error 0x80: operation failed");

p { color: blue; ______: pointer; }

Spot the Error

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

Question 1

A btn = tk.Button(root)

B btn.config(font=("Arial", 4))

C btn.config(text="Save")

D btn.pack(pady=10)

Question 2

A age = entry.get()

B if not age.isdigit():

C msg = "Error 0x1F"

D show_error(msg)

Question 3

A def save_form():

B save(name.get())

C clear_fields()

D status["text"] = ""

Question 4

A page.clear()

B page.add(ads, popups, banners)

C page.add(search_box)

D page.add(content)

Question 5

A help_btn = tk.Button(root)

B help_btn.pack(side="bottom")

C help_btn.config(text="Help")

Answer Key

Common interface pitfalls

Section A: Quick Questions

B — A cluttered screen

A — A Submit button so tiny and faint that users can barely see it

B — It is a pitfall because the message does not explain the problem

A — Password must be at least 8 characters

A — Misleading design

Section B: Match the Pairs

pitfall → A design problem that makes an interface hard to use, such as clutter, hidden controls or unclear labels

cluttered screen → A pitfall where too many buttons, images and text crowd one screen so users cannot find what they need

A pitfall: a hidden or tiny control that users struggle to find or tap → <button style="font-size:6px">Submit</button>

A pitfall: an unclear error message that does not tell the user what went wrong or how to fix it → messagebox.showerror("Error", "Error 4021")

A Delete button styled green with the label "Save" → Misleading design: the label and colour suggest a safe action but the button actually deletes the user's work.

Home screen with 25 buttons, 6 fonts and flashing banners → Cluttered screen: too many elements compete for attention, so users cannot find the main task.

Section C: Definitions

pitfall — A design problem that makes an interface hard to use, such as clutter, hidden or tiny controls, unclear labels or error messages, inconsistency, or no feedback.

Section D: Fill in the Blanks

.ad { position: fixed; top: 0; }

.menu { display: none; }

button { font-size: 4px; }

alert("Error 0x80: operation failed");

p { color: blue; cursor: pointer; }

Section E: Spot the Error

B — A font size of 4 makes the button text tiny and hard to read or press. This is a tiny-controls pitfall. Use a readable size such as 14.

C — The message is a cryptic code that does not tell the user what went wrong or how to fix it. This is an unclear error message pitfall. It should say what to do, such as "Enter a number".

D — Setting the status text to an empty string means the user gets no feedback that the save worked. This is a no-feedback pitfall. It should show a message such as "Saved!".

B — Adding ads, popups and banners to the main screen creates a cluttered interface and hides what matters. This is a clutter pitfall. Only the main menu should be added here.

B — This placement is not wrong by itself, but the original line put the Help button in a visible spot at the top. Moving it to the bottom makes it easy to miss. A control should sit where users will look for it.