patterns.intuio.at

Combined Input Field

Users need to enter different kinds of values in one field.

Interactive Example

Fill a number into the textfield. Look what happens, if the number starts with a 0 or a 1. Try to enter alphanumeric values to see how the field responds.

Context

This input field/label combination is used when the user needs to enter different kinds of data into one input field.

Forces

This special input field should only be used when there is very limited space. If more space is available, multiple input fields should be used.

Solution

The solution proposes a standard input field with several labels that show the kinds of data that can be entered. When the user starts entering text all labels, except the appropriate one, fade out to show the user what data he is entering.

This immediate response of the system tells the user if he is entering the right kind of data and builds trust into the system.

This is a combined pattern using following components:

• Input Validation
• Text Fields and Text Editing
• Command Button

Safety Impact

The input field is designed such that entering text immediately throws a response of the system. The input field also recognizes false characters, in our example non-numeric values.

Usability Impact

Error Prevention, user satisfaction

Your opinion!

Feel free to provide your comments, reports of usage of this pattern, or feedback in general!