| This blogger has moved! |
I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs |
My earlier post about the mobile Text Input Field was met with quite a bit of interest. A little surprising perhaps, since it's a somewhat mundane problem area. But understandable, because its so important to get right. So, to complement it, here is an input control for bound numerical data.
The little brother of the text input field is the Multi-field editor. While the Text input field is suitable for general free form text and numbers, it is not ideal for structured data like dates, time, monetary values, number ranges, etc.
Multi-field editors are numeric editors with multiple linked and bound fields. To the user it apperas as a single control with the selector moving from value to value. An editor for entering time would typically have two fields, for a date three fields and for entering an IP-address, four fields.
Most mobile OS'es have Multi-field editors and they behave somewhat differently. Sony Ericsson uses a mix of numbers and text (not so great), Microsoft selects each digit separately, Nokia selects values instead of digits. Apple (touchscreen) has big slot machine-type date and time pickers, but they are Multi-field editors all the same.
Example
To get a feel for how it works, you should play around with different phones, a text explanation is not enough. But let's look at an editor for a Date:
A Multi-field editor for entering a date consists of 3 input fields, one for the day, one for the month and one for the year. The fields are linked; the selection moves from field to field. A Multi-field editor is never empty. It always displays a value, for example today's date.
A number-key press replaces the existing number with a new. The next number-key press is interpreted as a second digit. Since a maximum of 2 digits is possible for a day number value, selection is now moved to the next field. If the user wants to enter only a single digit value, they can move to the next field with the arrow keys (or precede the digit with a zero).
If the number entered is higher or lower than allowed, the user is alerted. Use visual, audible and haptic alerts, or a combination thereof.
The 3 input fields are interdependently bound. The highest allowed day value depends on the value in the month and the year fields.
Data types
These are typical data types for Multi-field editors :
- Number
- Date
- Time
- IP-number
- Number range
The individual fields of a Multi-field editor typically have these properties:
- Maximum value
- Minimum value
- Maximum length (the number of digits)
- Default value (there is always a starting value)
- Delimiter (often depends on locale)
The Date Multi-field Editor typically has these properties:
- Minimum Date
- Maximum Date
- Date format:
- dd.MM.yyyy
- MM.dd.yyyy
- yyyy.MM.dd
The Time Multi-field editor typically has these properties:
- Minimum Time
- Maximum Time
- Time format:
- hh:mm
- hh:mm:ss (in case you really, really need the seconds)
- hh:mm AM/PM (since AM/PM is a binary selection, you can toggle on any key-press)
- hh:mm:ss AM/PM
etc.
Multi-field editors in Nokia Series 40 Edition 5.
Active validation
The Multi-field editor actively validates input. If you try to enter '40' into a date field you are alerted as you type. By the time you have entered a complete date, a time, an ip-number etc, the system knows that the number is valid. There is no need for a roundtrip to the server just to check the format.
But what about calendars?
I hear you saying: Ok, fine for time or monetary values, but a calendar surely must be better for entering a date?
A Multi-Field Editor is smaller and takes up less screen real-estate. You can edit in-place and see the rest of the screen. Usually it is easier to type in the date than to pick it from a calendar, especially if you need to enter the year. For example if you need to type in a date of birth.
A calendar always takes over the entire screen. A calendar is great if you want to show the date in context with other dates, for example if you want to schedule a meeting and want to find a suitable time. Each has its strengths depending on what you need it for.
But whatever you do, don't use dropdown lists for entering dates! :-)
Recent Comments