Poka-Yoke in User Interface Design

Jun 20 2014 by Jacob Gube | 2 Comments

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

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

2 Comments

Alexis Smith

June 22nd, 2014

Some brilliant minds who developed this. You know how they say a small mistake can lead to bigger consequences? Imagine if something goes horribly wrong with your car just because of a small mistake. Aren’t we all thankful for poka-yoke?

Heather

June 25th, 2014

Informative, easy to read article. Understanding the background of UI terms will help me speak more eloquently with clients and advocate for better design/solutions. Thanks!

Leave a Comment

Subscribe to the comments on this article.