Structured format

Tagged as: ,
 

The Design Need:

The user needs to enter data into an input field in a predefined format.

Design Examples:

Fortis supports auto-tabbing to guide users through the different input fieldsWhen the user enters a date at on momondo.com he can choose between typing and selecting from a calendar.

Design Solution:

When requiring a strict syntax for data entry you should map your requirements with the habits of your users as closely possible. These habits often depend on where they live and the products they use. For example, dd/mm/yyyy is the common way of writing down dates in Europe, whereas mm/dd/yyyy is common in the US.  Depending on how big the differences are among your audiences you should choose different ways of presenting the required syntax, as follows:

  • If differences are limited and ordering of data is consistent, an example of the required syntax is often sufficient, e.g. phone number: 012 3456978
  • If syntax is more complex and ordering of data inconsistent, it is best to give users more guidance and use separate fields for each part of the syntax, or a widget such as a “date selection calendar”

When you use a structured format the design best practices you should take into account are:

  • Allowing the experienced user to type in the data when you offer help widgets such as a “date selection calendar”
  • Let the cursor jump to the next input field (auto-tabbing) if you use separate fields for each part of the syntax
  • Be consistent with the required syntax everywhere on your website.

When to use:

Users might know the data you are asking for but the syntax they normally use can vary considerably. Use a structured format if the data really needs to be entered into the graphical user interface in a given syntax and differences in syntax cannot be filtered out behind the scenes. Examples are dates, checking accounts, serial numbers, etc..

Why use this solution (rationale):

Strict requirements on data entry make entering data more difficult. Using structured formats in a sensible way helps to limit the amount of input errors and might even enhance the time needed to fill in the data.

More info elsewhere:

• Categorized as Design Patterns