Design vs Art Blog » Input Prediction

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.

Search Box Design, Things To Keep In Mind

Alexis Brion — Tue, 01 Apr 2008 05:40:58 +0000

Search boxes are very important elements in the web: if customers can not find what they are looking for they will not be able to buy it. Reality is as simple as that.

Designing a good search box is not that easy, things to keep in mind:

1. Position of the search box

2. Wording

3. Behavior

4. How the search button should look like

Here I put together some examples of search box designs:

The Amazon.com design has several things to point out:

1. The search box is in a prominent position. This is important in huge sites like Amazon where the people use the search as navigation option.

2. By default the search works website-wide.

3. Users can search in specific categories.

4. "GO" as search button. I would say that something different from "Go" or "Search" would not work properly.

The Amazon search in detail:

Safari Books Online has a, maybe, too complicated search box. It’s nice that they placed a link to the advanced search page but, then, why giving so many options to the basic search box design?

Giving so many options in the "simple" search could confuse users… if they are not able to find products they would not be able to buy them…

Google is the queen of the search boxes. Simplicity at its best. Remember that Google was the first making the search user friendly? (and accurate).

Use the button to help users

The Facebook friend search box has a dangerous design, it’s not standard as it lacks of a seach button. I would not recommend to think that all users would understand things in such an intuitive way as designers or programmers could do.

Ebay labels the search button "Search". No chance to confuse users.

Notice the button names at Yahoo, they clearly tell users where they are searching; the web or images.

If you place a button try to make it look like a button. Etsy.com has a flat button that does not really look like a button. If possible, make buttons 3D and more users will be able to understand your interface.

Predict entries

Part of usability is the behavior of a feature. The Google Docs search box helps users as they get suggested results while typing.

Search Box Position

I don’t know the reason why but placing the search box on the upper right corner seems to be the standard. Users look for it there.

Clean Air Gardening places a small search box on the left corner. Placing the search box under the the logo could make it more visible but it is dangerous to make it so small and to place it on a non standard position.

Proper wording

Best Buy use some extra wording to help customers. Sometimes using "Search for" instead of just "Search" could make the search box even more meaningful. Notice how the "in" (all categories) could add even more benefit to users.

This examples are taken from the web, I’m not trying to attack anybody. Keep in mind that a bad design could be the result of the lack of money or time.

Predicting User Input, An Important Trend

Alexis Brion — Thu, 20 Dec 2007 05:36:16 +0000

Predicting what users are typing is a very nice feature that is going to make your website visitors’ life easier. A typical example is the travel websites, more precisely Yahoo! Travel. As users type the departure city name the system shows possible matches.

This is a good example of how usability can have an economic impact, as predicting input will probably avoid a lot of errors. Imagine misspelled city names or unhappy users if your system does not identify a destination airport after clicking on the search button.

Other travel websites, like Expedia, Travelocity and Orbitz, are not taking advantage of this easy to implement feature. Bad for them.