Structured Format Design pattern

Problem summary

The user needs to quickly enter data into the system, without being forced choose data from combo-boxes or other selection mechanism.

Example

StructuredFormat

Usage

  • Use when the more explicit select boxes, radio buttons, and checkboxes make entering data a too complicated process to fill out for an every day task.
  • Use when filling out forms takes too much time for the user compared to what he or she wants to accomplish.
  • Use when the the input you want to collect is a specific data type. For instance a zip code, a date or time, a phone number.
  • Use when the expected input follows a specific given format which can readily be interpreted by a computer program.
  • Do not use for inputs that can possibly be interpreted in many ways. For this purpose, see the Forgiving Format pattern.

Solution

An input text form field is presented with a accompanying label describing what input is expected in the field. The label describes a specific structure the user must follow to input a valid value.

It is often seen that the user is also presented with the possibility to use helping mechanisms such as a date selection calendar to fill out the input box in the correct way. When the user has done this multiple times, he or she slowly learns how the input is formatted correctly by the helping mechanism, so that they can copy the same format on their own.

Rationale

Using a structured format in an input field saves time for the user, who fills out the same input field repeatedly as a part of a frequent task. Instead of having to go through half a dozen of select and checkboxes, the same input can be typed much faster if a specific input text structure is followed.

More example images of the 'Structured Format' pattern

  • homesite.com

    On a screen of the homesite.com insurance wizard, two types of structured format entries are used. One is for the social security number, where the number is parted into three parts separated by dashes. The other is for the date of birth field, which is an ordinary input field transformed on focus with javascript into three separate chunks: month, day, and year.

Be the first to comment!

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 60 votes, 90.00% like this one.

Example images

  • homesite.com