Design vs Art Blog » Errors

Poka-Yoke Design

Alexis Brion — Thu, 29 Oct 2009 13:31:23 +0000

Poka-Yoke is a concept coming from Japan and means mistake-proof. It could be any mechanism helping users to avoid making mistakes while using an interface or product. The concept it’s focus on prevention, influencing the users’ behavior through the design of the product or interface. Poka-Yoke not only improves the user experience, it also helps improving safety.

I would like to show you some Poka-Yoke examples.

SIM Cards. Thanks to the trimmed corner, a SIM Card can not be put into a cell phone in a wrong way.

SIM Card. Picture by Declan Jewell.

On Search. Poka-Yoke concept is used by Google’s search box and by other search engines to suggest users possible search terms. In the example, I mistyped “Poka-Yoke” so the search box proposes to search for the right term. The problem with this behavior is that these suggestions could influence what users search.

Google search box.

iPhone. Every time a user starts a new note on the Notes application for iPhone, the upper case option is on and ready for the first letter. This is a way to prevent orthographic mistakes.

iPhone Notes application screenshot.

USB Connector. Thanks to its inner shape, an USB connector can not be connected in the wrong way.

USB Connector. Picture by PJstoneson.

…actually, the shape of the connector not only prevents from connecting it upside down but also to connect it in the wrong place.

Different shapes for each connector. Picture by Goodrob13.

Padlocks. Good padlocks do not release the key if it is not totally locked, making sure that the mechanism is totally closed and avoiding mistakes. In this case safety is a big issue.

A padlock. Picture by Greenkozi.

A Problem That Happens, a Solution Designed

Alexis Brion — Thu, 17 Jul 2008 11:58:14 +0000

Accidents are gonna always happen, you can prevent them but nothing is going to stop them happening. Users loosing passwords, usernames, invoices with wrong prices, etcetera, etcetera…

An important part of a good design is the prevention, how to avoid erros and headaches. But, as problems can not be totally avoided it is very important to design a good "recovery" experience, a way to solve those issues. The iTunes Store gives us an example of good problem solving design.

After buying an album I got the following invoice per email. The underlined text "Ein Problem melden" means in German language "Notify a problem". This is great. Users could have problems with downloads or audio quality, for example. If this happens they can contact Apple in a very handy way.

Problems make users unhappy but if you provide a way to solve those issues users will understand that you are trying hard to make things work.

Making Clear Error Messages

Alexis Brion — Fri, 15 Feb 2008 05:00:09 +0000

Explaining errors is one of the basic concepts in usability for the web. It is as simple and obvious as telling the user what was wrong and how to solve that problem.

"It is important that error messages are clear…"

There are many ways of explaining errors, like going back to the web form marking the erroneous fields. It is important that error messages are clear, avoid things like "error 4055".

Digg, the social bookmarking website, displays from time to time an error message at the end of the submission procedure. I don’t really know why this happens because the error message is not clear, no solution is proposed and there is no entry about that on the FAQ section. The user experience could not be worse in this situation.

See previous entries about this topic.

Better User Experience With Meaningful Errors Messages

Alexis Brion — Fri, 18 Jan 2008 05:39:14 +0000

Giving users meaningful error messages is very important but, maybe, even more important to improve the user experience is to provide a solution to the error that is rising the error message.

"Give always an explanatory error message…"

It is very frustrating for users to get error messages and no way to solve the problem. Give always an explanatory error message and include in your design an obvious way to keep on with the process.

Lufthansa, the airline, gave me the other day an example of poor web design. After choosing a flight I got the option to enter my frequent flyer username and password. The system didn’t recognize my username and asked me to "Create new user profile". Well, there was NO "Create new user profile" link on that page.

Improve usability and user experience with a web design that avoids error messages that tell the users that she was wrong and don’t provide solutions. More Design vs Art articles about error messages.

Meaningful Error Messages, Usability Issue

Alexis Brion — Fri, 11 Jan 2008 06:08:08 +0000

Reddit provides an example of poor usability during the site submission form. They try to make fun of users’ errors. If the user enters a wrong CAPTCHA the website displays a "your letters stink" message.

"websites should have meaningful and explanatory error messages…"

Even worse, the instructions of what to do with that weird image (many users don’t know what a CAPTCHA is) were inside the "human?" field, so after entering something there the instructions disappear.

Error messages are not something users like seeing. Usually they are frustrating, so websites should have meaningful and explanatory error messages, they should tell users how to resolve the problem. Remember that if your users are not allow to finish a process, you might be loosing money.

Remember that after an error users usually want an explanatory message that helps them reach their goal (e.g. for example buying something at your site!)