UX1: Thinking like a product designer
Usability: what makes a design easy to use
🎯You'll be able to
Judge a screen against five usability qualities and a set of well-known heuristics, and explain each problem in plain words.
🏠The everyday picture
A good door tells you whether to push or pull without a sign. If a door needs a "PULL" label, its design is fighting its user. Screens work the same way: good ones show what can be done and what just happened.
📘What it really is
- Usability has five qualities often used in design teams:
- Learnability: can a first-time user do the task?
- Efficiency: once learnt, how quickly?
- Memorability: after a month away, can they still do it?
- Errors: how many mistakes, how serious, and how easy to recover from?
-
Satisfaction: is it pleasant and trustworthy?
-
Heuristics are rules of thumb for reviewing a design. Jakob Nielsen's ten are the best known; four of the most useful are:
- Visibility of system status: show what's happening and what was chosen.
- Match with the real world: use people's words, not internal jargon.
- Error prevention and recovery: stop mistakes where you can, and explain them in words when they happen.
-
Recognition rather than recall: keep information visible instead of making people remember it.
-
A heuristic review (an expert review) is quick and cheap, but it finds what the reviewer expects. It complements watching real people; it doesn't replace it.
📝A worked example
Input: the starter's details form (prototype/details.html).
Steps:
- Leave the phone number empty and press Submit.
- Compare what happens with the heuristics.
Expected output:
| Problem | Heuristic | Why it matters |
|---|---|---|
| Only a red border appears; no message | Error recovery | People who can't see red, or don't notice it, don't know what to fix |
| The field names are placeholders that vanish while typing | Recognition rather than recall | People forget which box is which |
| The button says "Submit" | Match with the real world | "Book appointment" says what will happen |
The red used (#e63946) on the page background reaches only 3.89 to 1 contrast, so even the border is hard for some people to see.
🌍Where it's used
- Design reviews use heuristics to give feedback that isn't just taste.
- Procurement: buyers of software for schools or hospitals run quick heuristic reviews before a trial.
- Before testing: teams fix obvious heuristic problems so that sessions with users reveal deeper ones.
📝Case scenario
An e-commerce checkout asked shoppers to retype their delivery address on the payment page. A heuristic review flagged "recognition rather than recall" and the guideline that people shouldn't have to enter the same information twice. After the address was carried over, fewer people abandoned the payment step.
🖱️Try it
Review the starter's search page against the four heuristics above. Find at least one problem per heuristic. Success: each problem names the heuristic and says who is affected.
⚠️Common mistakes
- Listing heuristics without evidence. Sign: "violates heuristic 4" with no screen or example. Fix: say what happens and to whom.
- Treating the review as the final word. Sign: no testing with people afterwards. Fix: use the review to prepare a test (UX2).
- Only the happy path. Sign: nobody tried a mistake. Fix: try empty fields, wrong numbers and no results.
🛠️For your project
Project 1's findings use the same habit: what happened, who was affected and why it matters, with evidence.
✅Quick check
Name the five usability qualities.
Show the answer
Learnability, efficiency, memorability, errors and satisfaction.
What can a heuristic review not tell you?
Show the answer
How real people behave: it finds what the reviewer expects, so it complements user testing.