Skip to main content ↓
Screenshot of the WordPress admin dashboard displaying the 'Posts' section with options to edit, trash, preview, and purge from cache for a post titled 'My Best WordPress Post.'

Poka-Yoke in User Interface Design

Poka-yoke is a Japanese term that means “mistake-proofing”. It surfaced in the 1960s, and was first applied in the car manufacturing industry. Poka-yoke is credited to industrial engineer Shigeo Shingo. Shingo sought to solve a problem Toyota was experiencing: Their factory workers regularly made the mistake of forgetting to insert a couple of springs required for properly assembling a switch.

His solution was to redesign the assembly workflow of the switch so that it involved two steps. In the new workflow, the workers:

  1. Prepared the two springs for insertion by putting them on a placeholder
  2. Inserted the two springs from the placeholder and into the switch

Though the process of constructing the switch was lengthened, it resulted in reducing manufacturing mistakes, which in turn meant being able to produce a higher quality product. We can see poka-yoke applied today in software interfaces. For example, in WordPress, there’s mistake-proofing for the deletion of a post.

Removing a post from the system for good requires two steps: Step 1: Move the post to the Trash folder WordPress Drafts folder Step 2: Delete the post permanently from the Trash folder WordPress Trash folder

If we broke down the interaction flow for permanently deleting a post in WordPress, we can see that it requires five deliberate actions from the user:

  1. Hover over the post title, which will reveal a menu of actions
  2. Click on the “Trash” action from the menu
  3. Click the Trash folder link to switch to the Trash screen
  4. Hover over the post title again, which will reveal a different set of actions
  5. Click on the “Delete Permanently” action

Though the deletion procedure, by design, isn’t the quickest way to remove data from a system because the data is first staged in a temporary folder, the additional mistake-proofing layer lowers the chance that a user unintentionally deletes a post forever. Another example of poka-yoke can be seen in the USB connection interface. To connect a USB cable connector to a USB socket, you have to align the two components properly for the data exchange to work.

To avoid the error of inserting the connector in the wrong orientation, the connector and the socket have stoppers that will prevent them from being joined if the orientation is incorrect. USB connection interface As an added poka-yoke layer, there’s a USB logo imprinted at the top of the USB connector, serving as a visual clue for the connector’s orientation. Top view of USB connector But, the USB interface design isn’t completely mistake-proof because the user is still permitted to make an error: We can still make the mistake of trying to plug in the connector the wrong way, and the design of the interface requires us to correct ourselves by flipping the connector onto its other side.

As the first best option of poka-yoke, we should aim to design user interfaces in a way that removes any possibility of a mistake to occur in the first place. For example, Apple’s Lightning cable, a data interchange system just like USB, doesn’t have USB’s orientation issue because the interface is designed to function in either orientation. Lightning cable interface In the Lightning cable interface design, poka-yoke is applied by eliminating any chance of an error.

The most obvious benefit of poka-yoke applied to UI designs is our users are safeguarded from performing catastrophic errors, such as erroneously deleting a post they’ve been working on for a few hours. Poka-yoke, for me, boils down to making the user experience as efficient as we can for our users: Fewer mistakes mean the user is able to accomplish a task more quickly and frustration-free, thus improving the overall UX design of the system. By the way, poka-yoke is pronounced “po ka yo keh” and it rhymes with my last name.

Related Content

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator