Usability Heuristics

By the end of this lesson you will be able to explain the ten usability heuristics in your own words, spot them in real apps, and run a quick heuristic evaluation with severity ratings.

A heuristic is a rule of thumb: not a strict law, but a reliable guide. In 1994 Jakob Nielsen, co-founder of the Nielsen Norman Group, published ten broad heuristics for interface design. They are still widely used because they describe how people think, and people have not changed much.

The ten heuristics in plain words

1. Visibility of system status

Always tell people what is going on, quickly. A progress step ("Step 2 of 3"), a loading indicator, a "Saved" label. A railway display board that shows "Running late by 20 min" calms everyone on the platform; a blank board makes them anxious.

2. Match between the system and the real world

Use words, icons and order that people know from daily life, not internal jargon. Say "Lab reports", not "Diagnostic artefacts". Put dates as "19 Nov", the way people write them.

3. User control and freedom

People make mistakes and change their minds. Give them a clear way out: Back, Cancel, Undo, Edit. Like being able to step off a bus at the next stop if you boarded the wrong one.

4. Consistency and standards

The same thing should look and behave the same everywhere, and follow common conventions from other apps. If a heart means "save" on one screen, it should not mean "like" on another.

5. Error prevention

Better than a good error message is no error at all. Disable dates that are full, offer choices instead of free typing, and confirm truly risky actions. A slot picker that only shows free times prevents booking mistakes.

6. Recognition rather than recall

Show options rather than making people remember them. Recently viewed doctors, a visible list of family members, and autocomplete all reduce memory load. A shop with goods on display is easier than one where you must name exactly what you want.

7. Flexibility and efficiency of use

Let experienced users go faster without confusing beginners: shortcuts, "Book again" for a repeat visit, saved payment methods, keyboard shortcuts on desktop.

8. Aesthetic and minimalist design

Every extra element competes for attention. Remove what does not help the current task. This does not mean "make it plain"; it means "make it focused".

9. Help users recognise, diagnose and recover from errors

Error messages should use plain words, explain the problem and suggest a fix. "That slot was just taken. Here are the next three free slots." is far better than "Error 409".

10. Help and documentation

Ideally the product needs no manual, but some help is still useful. Keep it short, searchable and close to the task, such as a small "How do I share a report?" link on the reports screen.

See some heuristics in action

Run this example. It shows status visibility (a step indicator) and user control (an undo message) together.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Status and undo</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1a1a2e; max-width: 380px; }
    ol { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
    ol li { flex: 1; text-align: center; font-size: 13px; padding-top: 8px; border-top: 4px solid #d4d4dc; color: #4b5563; }
    ol li.done, ol li[aria-current] { border-top-color: #5b21b6; color: #1a1a2e; font-weight: 600; }
    .member { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
    .member button { min-height: 36px; border: 1px solid #b91c1c; border-radius: 6px; background: #fff; color: #b91c1c; }
    .toast { margin-top: 16px; background: #1a1a2e; color: #fff; padding: 12px 16px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
    .toast[hidden] { display: none; }
    .toast button { background: none; border: 0; color: #c4a5ff; font-weight: 700; font-size: 15px; }
  </style>
</head>
<body>
  <ol aria-label="Booking progress">
    <li class="done">1. Doctor</li>
    <li aria-current="step">2. Patient</li>
    <li>3. Pay</li>
  </ol>
  <h1>Who is the visit for?</h1>
  <div id="list">
    <div class="member" data-name="Papa"><span>Papa</span><button type="button">Remove</button></div>
    <div class="member" data-name="Meera"><span>Meera</span><button type="button">Remove</button></div>
  </div>
  <div class="toast" id="toast" role="status" hidden><span id="toastText"></span><button type="button" id="undo">Undo</button></div>
  <script>
    let removed = null, removedNext = null;
    const toast = document.getElementById('toast');
    document.getElementById('list').addEventListener('click', e => {
      const btn = e.target.closest('button');
      if (!btn) return;
      removed = btn.parentElement;
      removedNext = removed.nextElementSibling;
      removed.remove();
      document.getElementById('toastText').textContent = removed.dataset.name + ' removed';
      toast.hidden = false;
    });
    document.getElementById('undo').addEventListener('click', () => {
      if (removed) document.getElementById('list').insertBefore(removed, removedNext);
      removed = null;
      toast.hidden = true;
    });
  </script>
</body>
</html>

You should see a three-step progress bar with step 2 highlighted (heuristic 1), and two family members. Remove one: a dark message appears with an Undo button (heuristic 3). Undo puts the person back in the same place.

Running a heuristic evaluation

A heuristic evaluation is an expert review where a few evaluators inspect an interface against the heuristics. It is quick and cheap, but it does not replace testing with real users.

1. Choose 3 to 5 evaluators. Each works alone first, so they do not influence each other.
2. Each evaluator goes through the main tasks twice: once to get a feel, once to inspect details.
3. For every problem, note the screen, the heuristic it breaks, and a short description.
4. Rate each problem's severity on a 0 to 4 scale.
5. Combine everyone's lists, remove duplicates, and sort by severity.

Practise on a flawed screen

This screen has several deliberate problems. Run it and list as many as you can before reading the exercise solution.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flawed booking screen</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; max-width: 360px; }
    h1 { font-size: 15px; color: #8a8a8a; }
    .slot { display: inline-block; margin: 4px; padding: 6px 8px; border: 1px solid #ccc; font-size: 12px; }
    .go { margin-top: 16px; background: #eee; border: 1px solid #ddd; padding: 4px 8px; font-size: 12px; }
    #out { color: red; font-size: 12px; }
  </style>
</head>
<body>
  <h1>SLOT ALLOCATION MODULE</h1>
  <p>Enter preferred slot code from list given at reception:</p>
  <input id="code" size="6">
  <div><span class="slot">09:00</span><span class="slot">09:15</span><span class="slot">09:30 (full)</span></div>
  <button class="go" type="button" id="go">Submit</button>
  <p id="out"></p>
  <script>
    document.getElementById('go').addEventListener('click', () => {
      document.getElementById('out').textContent = 'ERR_SLOT_422';
      document.getElementById('code').value = '';
    });
  </script>
</body>
</html>

You should see a pale grey heading, a text box asking for a "slot code", three small slot labels and a weak "Submit" button. Clicking Submit shows a red error code and wipes your input.

Common mistakes

• Treating heuristics as a checklist to tick, instead of a lens for thinking.
• Evaluating in a group from the start. Independent reviews find more problems.
• Skipping severity ratings. Without them, teams fix easy cosmetic issues first.
• Replacing user testing with heuristic reviews. Experts are not your users.

Key points

• Nielsen's ten heuristics are broad rules of thumb for usable interfaces.
• Status, real-world language, control and consistency are the ones broken most often.
• Preventing errors beats explaining them; showing beats making people remember.
• A heuristic evaluation uses 3 to 5 independent evaluators and severity ratings from 0 to 4.
• Heuristic reviews are fast and cheap, but they complement, not replace, usability testing.

<h1 style="font-size:20px;color:#1a1a2e">Choose a time</h1>
<button class="slot" type="button">9:00 am</button>
<button class="slot" type="button">9:15 am</button>
<button class="slot" type="button" disabled>9:30 am · Full</button>
<p id="out">That time was just taken. Please pick another time.</p>