Poka-Yoke in UI design
Poka-Yoke in UI design
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
The purpose of Poka-Yoke is, according to Wikipedia "to eliminate product defects by preventing, correcting, or drawing attention to human errors as they occur. The concept was formalized, and the term adopted, by Shigeo Shingo as part of the Toyota Production System. It was originally described as baka-yoke, but as this means "fool-proofing" (or "idiot-proofing") the name was changed to the milder poka-yoke."
If you search for Poka-Yoke you will find some nice examples such as 3.5" floppy disks, where the shape of disks prevents people from inserting them improperly. But Poka-Yoke can be used in user interface design as well. Applying it to UI design means to prevent an error using constraints and correction, and to warn/inform users about the reasons for prevention.
Prevent actions and disable elements
Naturally, forms are ideal for applying Poka-Yoke. Its most obvious usage is preventing an action to begin until all of the conditions necessary to perform that action are met. For instance, don't allow form submission until all required fields are filled in. Disable submit button if input field is empty. Disable Delete all link if less than two items in the list are selected. Examples are numerous.
I'd recommend you to read (a bit old but good) discussion on ixda.org Hiding and Disabling Menu Items.
Restrict user's input
You can restrict user's input in many ways - allow only numeric characters, disallow special characters, limit user's input to a specific range or limit the size of user's input. This is usually done by rejecting user's input if invalid characters are detected. You should always make clear to the user why rejection happened (e.g. "You can enter only numbers"). Plugins like alphanumeric can be a good choice here.
Mask user's input
Similar to previous technique, masking forces users to enter information in a specific format. It is a good practice to reveal mask in input field upfront and make it clear to the user which format is allowed. The problem with masking is that help text is not always clear enough - would users know what "~9.99 ~9,999.99" means? In case when masking pattern is not easily understandable, it is better to show users an example of usage.
Correct user's input
In some cases, the application will be able to correct the user's input automatically without interrupting her/him. For instance, the application can automatically add "http://" to an URL if user omitted it. Another example is when user enters a value that is larger than maximum allowed. In this case the application can replace the user's input with maximum allowed value while letting the user accept it or change to another value.
Other helpful techniques
In some cases defaults can help further in error prevention. If user wants to book a flight and have to choose a number of passengers, you can set 1 as default (instead of leaving this field empty which will trigger validation later). Another good example I can think of is my android-based mobile phone. Each time user starts a new SMS message, upper-case button is turned on. When user types the first letter it turns off.
Use appropriate controls
Another good way to provide fail safe is to use specialized controls. Instead of using input fields for dates, use date picker controls and disable associated input fields.
Those were just some of the examples of how to apply Poka-Yoke in user interface design. The important thing to remember is that whenever an error is detected, make sure you provide a clear explanation of why the process is stopped.
Published at DZone with permission of Janko Jovanovic . See the original article here.
Opinions expressed by DZone contributors are their own.