10

There are new HTML5 input types being defined for commonly used numeric input types such as date, time, telephone number, etc. These terms refer to a specific input format based on the type of numeric data that needs to be captured and displayed.

I was wondering if there is a more generic term used for numeric input that is required in a specific format (but not any particular format), since the term 'specific format numeric input' is probably not commonly used. This would indicate that the input field is not a free text input that is then validated, but the format of the input itself would create some constraints in the type of numeric data that can be entered. An example of this would be credit card details with digits separated the same way as it is displayed on the credit card.

The only thing that comes to mind is a 'fixed' or 'formatted' numeric input field. Any other suggestions?

Free text format

Fixed input format Free numeric input field enter image description here

This should not be a 'technical' sounding term since it is also intended for UX specification for designers and other UX people, so I prefer not to use a developer term but something everyone can understand. Also, the term should reflect the fact that it is not a free text looking field, but something that already indicates to the user that it has a specific input format.

  • 1
    I think it's called a mask. – Vitaly Mijiritsky Feb 24 '15 at 12:01
  • @VitalyMijiritsky Is that just a technical term, or is there a more 'user friendly' way of describing it? – Michael Lai Feb 25 '15 at 21:33
  • 4
    It's pretty technical, I wouldn't try to use it with the general public. – Vitaly Mijiritsky Feb 26 '15 at 5:45
  • 1
    please don't try to change anything a user types in ever -- ux.stackexchange.com/a/74019/58111 -- you can give feedback to the user when their input doesn't make any sense but don't change it for them because it causes frustration and friction. – DaveAlger Feb 28 '15 at 14:27
  • 1
    @DaveAlger I think it is a balance of the input field format (e.g. letting the user know what format the input should be in), providing sensible instructions or help text where required, and some intelligent processing of user input that will solve the problem. I agree that it is not generally advisable to change what the user types in, so we should try as much as we can to let them know through the interface design or other interactions to avoid this issue. – Michael Lai Feb 28 '15 at 23:54
17
+50

The term used for these format-constrained inputs is masked inputs or mask input.

Here is a demo which includes a broad range of masks (date, time, phone number, etc). If you Google 'masked input' you will find plenty more examples.

http://igorescobar.github.io/jQuery-Mask-Plugin/

And a screenshot for posterity in case the link dies in the future.

screenshot

It isn't a particularly descriptive term for lay users (e.g. your marketing team). For that kind audience, I describe them as 'formatted inputs' or 'formatted number inputs', but then introduce the term 'masked input' so they know how to use it in the future.

Here's another common masked input, the Windows serial number widget:

windows SN input

For extra geek credit, the term is an evolution of an approach used in data entry in the early days of programming to ensure correct input. See:

  • I never heard about the term mask input before. First I wanted to go with constrain input (which dev colleagues are using) but it suggests allowing any input before validation. The other term would be strict input which prevent users from entering wrong input but sounds quite technical and misleading. Therefore, I'm going with your answer because it sounds and looks plausible to me! – ITJ Feb 27 '15 at 18:21
  • @IsgerJanson lol. I've added some references to the history of the term which may help you draw the connection – tohster Feb 27 '15 at 18:26
  • Quite obviously, a simple reversion of a technical term. (Should have known that!) – ITJ Feb 27 '15 at 18:36
  • But the term masked input only refers to the processing of the input, and not the format or layout of the input field that reflects the way the user interface element looks like (as in the second image in the question). – Michael Lai Feb 28 '15 at 22:22
  • 1
    @MichaelLai got it. For pure formatted masked inputs (e.g. credit cards) I usually just pass the FE developers the widget wireframe and tell them that's the mask design I want to use. There are some masked inputs that are more complicated....international phone numbers are an example where the mask format actually changes depending on the country-code used (e.g. +65 9385-2938 for Singapore, or (408) 293-5884 for US)...so in this case I lay out sample masks and sit down with the devs to make sure implementation is clear (e.g. using Google libphonenum) – tohster Mar 2 '15 at 22:13
4

These are units or formats you are talking about. For example a date is a numeric format that consists of three units: years months and days. It will depend on the context which term to use actually.

Since the question got edited it is now clear that it is about inputs that guide users to a valid format. In that case guided/guiding inputs could be an option.

If thats not the appropriate term to use, how about strict inputs, since it is a strict format to follow. Or you might prefer to talk about a precise format and precise inputs but as I said, it all depends on the context.

  • I agree with your thoughts here. I would also suggest Open Inputs (borrowing from the open source movement) vs Preformatted Inputs. I use the latter when communicating with my development teams. For me, preformatted inputs refer to the mask solution we put in place Mask JavaScript API which I received from Luke W's post. – JWMC Mar 5 '15 at 21:52
4

I am trying to come up with some common terms and definitions that are suitable to use for specification or design documents

I don’t think i can come-up with a better suggestion than the one you mentioned "formatted' numeric input field" Its the best possible outcome and I don't think you should worry too much because its long, though you can make adjustments when this is included in documentation. For example:

Formatted Input Field (numeric) where numeric becomes an additional attribute!

The most important thing is that its understandable and clear and given that it needs to go into documentation for an audience that might not be well versed in technical knowledge, the logic should be that descriptivness beats conciseness

If we look at this purely from labelling point of view then your suggestion is the least ambiguous and most descriptive of all alternatives I have seen so far and would be the most useful for a larger audience.

Input Field vs Input Type or Input Element:

If you are to ask as many people in your target audience to define this element than I am sure that the majority will use “input field ” or “input box” its a hypothesis but could be easily tested:)

The term “Input Field” will work well as opposed to "Input Type" or "Input Element" these being more ambiguous and could trigger further inquires when used in design documentation. Also the term "Input Field" focuses on a unique element with a descriptor "field" as opposed to using input or inputs only, which could be confused with other form controls.

Formatted Input Fields:

The term "formatted" is both descriptive, unambiguous and its meaning is widely understood which will help convey how the input field works as opposed to “fixed” which is very restrictive and unfamiliar and could lead readers to question it further.

In addition,the term "formatted" denotes the act of arranging or put into a format regardless of how this is done which in my opinion describes: What the field is rather than how it works.

2

You don't like the term type so how about structured or structured input.

Formatted is not a good as a date has many formats.

If I understand what you are asking why not just use what is called in HTML - type
Why not just go by the actual input type name and call them types
The tech name as in

<input type="text"

The type values/names are pretty clear even to non-developers
HTML5 added several new input types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

The type is more than just a format. It can dictate a behavior.
This link covers it much better than I can HTML5 input types.
I know that link is techy and this is a UX site but behaviors are part of UX.

Your example of date, time, and telephone number as specific formats is not correct. Date can be 1/31/2000 or 2000.01.31. Time can be 2:15 PM or 14:15.

I don't know why you are arguing with a masked input as if you want to restrict to a specific input format that is exactly what a mask does.

To call date a "format" is an over simplification. Not all months have the same number of days.

Beyond a mask is validated input. For example not all credit card numbers of 16 digits are valid. There is checksum type validation. Then there is a name matches the number validation.

  • A type means one thing but can have multiple formats
    A type will determine equality of different formats
    1/31/2000 = 2000.01.31 (date)
    12.00 = 12.0 (decimal)
  • A mask only accepts certain input
  • A validation performs advanced processing beyond just static input rules (e.g. 16 digits)
  • 2
    I am looking for a generic term that would cover the range of numeric input types that require a specific rather than free text input fields. – Michael Lai Feb 25 '15 at 6:14
  • Down vote care to comment? – paparazzo Mar 2 '15 at 21:04
  • But the types you reference are not a specific format. The HTML protocol calls them types for a reason. Date can be 1/1/2000 or 2000.01.31. Time can be 2:15 PM or 14:15. – paparazzo Mar 3 '15 at 3:09
1

Numeric Input Pattern, as suggested terminology from HTML5:

http://html5pattern.com/

I see it as a Subset of a Numeric Input.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.