The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Forgiving Format


From http://wunderground.com

What:

Permit users to enter text in a variety of formats and syntaxes, and make the application interpret it intelligently.

Use when:

Your UI asks for data that users might type with an unpredictable mix of whitespace, hyphens, abbreviations, or capitalizations. More generally, the UI can accept input of various kinds from the user -- different meanings, formats, or syntax. But you want to keep the interface visually simple.

Why:

The user just wants to get something done, not think about "correct" formats and complex UIs. Computers are good at figuring out how to handle input of different types (up to a point, anyway). It's a perfect match: let the user type whatever he needs, and if it's reasonable, make the software do the right thing with it.

This can help simplify the UI tremendously, in terms of how many brain cells a user has to use to figure it out. It may even remove the requirement for an Input Hint or Input Prompt, though they're often seen together, as in the example above.

You might consider Structured Format as an alternative, but that pattern works best when the input format is entirely predictable (and usually numeric, like telephone numbers).

How:

The catch (you knew there would be one): it turns a UI design problem into a programming problem. You have to think about what kinds of text a user is likely to type in. Maybe you ask for a date or time, and only the format varies -- that's an easy case. Or maybe you ask for search terms, and the variation is in what the software does with the data. That's harder. Can the software disambiguate one case from another? How?

Each application uses this pattern differently. Just make sure that the software's response to various input formats matches what users expect it to do. Test, test, and test again with real users.

Examples:


From Microsoft Outlook

This example comes from Outlook's tool for setting up a meeting. Look at the "Start time:" and "End time:" fields at the bottom of the screenshot -- you don't need to give it a fully defined date, like what appears in the text fields. If today is April 24, and you want to set up a meeting for April 29, you can type any of the following terms:

  • next Thu
  • nxt Thu
  • thu
  • 29/4/2004
  • 4/29/2004
  • 29/4
  • 4/29
  • five days
  • 5 days
And so on -- there are probably other accepted formats, too. The specified date is then "echoed back" to the user in the appropriate format for the user's language and location, as shown in this example.