The Poka-Yoke principle in UX design

The art of preventing errors

Krisztina Szerovay
UX Knowledge Base Sketch

--

The Poka-Yoke principle in UX design — UX Knowledge Piece Sketch #59

Origins

The Poka-Yoke principle was originally applied by Toyota’s industrial engineer, Shigeo Shingo. The term “poka-yoke” means “error-proofing”, the main goal is to minimize the likelihood of human errors in the process.

Examples from the world around us

  • USB stick with a specific orientation
  • Medicine bottle with childproof opening
  • Automatic turn-off on home appliances
  • Microwave oven that stops running if you open the door

Case study: Chrysler’s gear design

In 2016, Chrysler recalled 1M+ of their cars due to a problematic gear shifter. The problem was that after shifting, it returned to its central position, so there was no positional feedback (only lights), so drivers had to look. In many cases, drivers thought that the car is in park, go out of the car, then the car drived off. This caused several injuries and accidents.

“Gear-selection is conveyed to the driver by multiple sets of indicator lights, not gear-selector position, and unless due care is taken, drivers may draw erroneous conclusions about the status of their vehicles.” (Source: cnet.com)

So basically according to Chrysler, it is not their fault, it’s a “driver error”.

Check out my sketch about mental models.

How to apply this principle

You, as a designer should ask:

  • What can go wrong?
  • What are the existing mental models?
  • What are the risks?
  • What are the worst case scenarios?

Create journey maps / user story maps, then add potential risks, errors to each steps. Then ask: how can these be prevented?

The key takeaway is that in many cases, it is not a user error, it is bad design.

Poka-Yoke in UX design: some examples

Some examples in digital product design:

  • Provide meaningful and timely feedback to the users
  • Add confirmation dialogs
  • Apply additional deliberate friction e.g. at high-consequence steps (e.g. account deletion)
  • Add autosave, revision history, undo and redo
  • Form design, e.g.: validation, input constraints
  • Password requirements, strength indicators
  • Suggestions, e.g. Gmail’s forgotten attachment reminder
  • However, instead of using disabled controls, in many cases it is better to enable & give feedback
Press Ctrl+S inside Framer, you’ll get this snackbar telling you that don’t worry, Framer autosaves your work
Autosaving, undo and redo options inside MS Word
Some examples for deliberate friction when you want to delete your account
Gmail’s forgotten attachment reminder

Do you like my sketches? Support my work!

Coffee is my fuel — you can buy me one if you want to boost the sketch-creation process! ;)

If you like my sketches, you can buy me a coffee to support my work! Thanks, I really appreciate your encouragement! 🙏

Sketching for UX designers course on Udemy

If you like my sketches, check out the Sketching for UX Designers course on Udemy, use the coupon code SKETCHFORUX_SALE to get 80% off! Click here to apply the code.

You can subscribe to my Sketching for UX newsletter to get early access to my newest UX Knowledge Piece Sketch (and receive it directly to your inbox each month). I also share my favorite design and visual thinking links.

Get my Sketching for UX Designers Workbook here for free (and you can choose to support me by paying a couple of dollars, I really appreciate your support!)

You can also grab a copy of my 100-day Long UX Visual Library Building Challenge book (also on a pay-what-you-want basis).

💬Please let me know what you think, I always appreciate you feedback!

--

--