Why people leave a page they cannot use
Usability is how easily and how well people can reach their goal with a page, an app or a device. It matters because a product people cannot work out loses sales, fills the help desk and costs trust, however good it looks.
A teapot shop can have fair prices and still lose people at the checkout. Nobody complains. They quietly go somewhere else.
By the end of this lesson
Note
I can judge an interface against five usability principles.
Key words
| Word | What it means |
|---|---|
| Usability | how easily people reach their goal with a product |
| Visibility | showing the person where they are and what is happening |
| Feedback | a sign that the system has seen what you did |
| Consistency | the same thing looking and working the same way each time |
| Error prevention | making a slip hard to do in the first place |
| Error recovery | helping a person understand a mistake and fix it |
The cells students fill in are left blank in this preview.
A principle is a question about a screen
A usability principle is a rule of thumb that holds on many screens. Five are enough to start. Each one is a question you ask while you use a page.
Can I see where I am? Did it hear me? Does it say the same thing the same way? Does it stop me making a slip? Does it help me when I do?
Worked example: five principles on a shop
| Principle | The question | Poor example | Better example |
|---|---|---|---|
| Visibility | Can I see where I am and what is going on? | The basket never shows how many items it holds | The basket shows "3 items" on every page |
| Feedback | Did the system hear me? | Buy does nothing you can see | Buy shows "Added to basket" at once |
| Consistency | Does the same thing look and work the same? | One link says "read more", the next says "more" | Every link says what it leads to |
| Error prevention | Does it make a slip hard? | Delete removes an order with one press | Delete asks "Remove this order?" first |
| Error recovery | Does it help me fix a mistake? | The page says "Error 7" | The page says "Enter a postcode, for example SW1A 1AA" |
The cells students fill in are left blank in this preview.
Missing feedback makes people press twice
Observers sat beside twelve people using the lab's teapot shop and wrote down what they saw. Their notes are the first evidence in any test.
One person pressed the Buy button four times before it worked. The button gave no sign that it had heard the first press, so the person tried again. That is a feedback problem.
Read what the observers wrote
docker exec jupyter cat notes.mdShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The notes print eight observations
The command prints a heading and eight lines, one each for P2, P3, P5, P6, P8, P9, P11 and P12. Each line is something a person did or said, not an opinion about the page.
A good observation says what happened. "P3 pressed Buy four times" is an observation. "The button is bad" is not, because it hides the evidence.
Good error messages say what to do
A message that is only a code, such as "Error 7", fails error recovery. The person cannot tell what went wrong or what to change.
A good message says three things in plain words: what happened, why, and what to do next. It does not blame the person.
Count the common faults
docker exec jupyter python3 steps/audit.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
What each audit count points at
| Audit line | Printed for the shop | Principle it points at |
|---|---|---|
| Links with vague text | 5 of 6 on the home page | Consistency |
| Error messages that are only a code | 1 on the checkout page | Error recovery |
| Inputs without a label | 3 of 4 on the checkout page | Error prevention |
| Rules that remove the focus outline | 1 in the style sheet | Visibility |
The cells students fill in are left blank in this preview.
A common mistake
Warning
Many people think a good-looking screen is a usable one. Looks are about style. Usability is about whether people reach their goal. A plain page can be easy and a beautiful page can be hard, so judge by what people can do.
Going further
Choose an app you use every day. Find one screen that breaks a principle and one that keeps it well. Write each in one line: the screen, the principle, and what a person sees.
Then write the fix for the first one in a sentence a developer could act on.