How can I tell whether to use input masking or magic inputs which accept any format?

Question

Inputs which are designed to accept a user's phone number, a date, or a Social Security Number can use input masks. Input masks are inputs which will show the format required within the text box (for example, the input would show this pattern for a phone number (___) ___-____), and input masks will ignore invalid input from the user (for example symbols or letters in a phone number input). Or specific inputs can use magic inputs which will accept any formatting and parse the value on the backend. Are there situations in which one or the other is preferred? If so, how can I tell which to prefer (input masks or magic format free inputs) for each situation?

Here's a related question and answer which gives the opinion that input masks should not be used for phone numbers. Instead, the answerer recommends an input that accepts any format, but I'm not sure there's much information in the answer to back up that claim.

Answer 1

I'm a fan of text boxes that accept free-form input, and then display it formatted appropriately when the user completes the field. You get the best of both worlds: It's easy for the user to enter the information quickly, but it's also displayed in a reading-friendly format that makes it easy for them to notice errors.

Obviously this wouldn't be possible with ambiguous input (e.g., knowing where to insert a decimal point) but in most cases (phone numbers, credit cards, SSNs) it should be straightforward.

Answer 2

As everything in UX, it all depends on context. Input masks are excellent at conveying the user the proper formatting you expect, and it also helps the user visualize data. for example:

Free form input: 1111111l11111111
Masked input: 1111-111l-1111-1111

It's easy for the user to see that after 7 characters s/he made a mistake that can be easily corrected. A similar case: Did I add the right amount of zeros? (this number is real and is part of my mother's form number, reason why I always wonder if I typed it right)

Free form input: 36000009
Masked input: 3600-0009

Another user case: my partner has a phone from England, but he lives in 3 different countries. Now, when asked for his phone, he will probably want to type something like

Free form input: 02577771111

but wait! that phone number is from UK, and he's filling this form in US. Wouldn't it be better to present him with the exact info he's required for? Like so:

Masked input: +44 (0)25 7777 1111

Another thing to consider is that we aren't always in control, and a front-end has to adjust to specific data requests from a back-end we have no way to modify. Thus, masking is a way to tell the user: "OK, we need data in this format" minimizing the need for validation errors (and user's frustration)

An approach:

An idea you can test when using masked inputs is to replicate natural language. For example, most western people tends to group numbers in blocks of 3 and 4 characters, CC numbers in blocks of four and so on. So there you have a good way to mask inputs improving legibility: just imitate natural language so users can easily see the input just as they think about it. It's way easier to do a visual scan of (123) 4567 8910 than to scan 12345678910

In short

Bottom line is that proper testing will show you whether to use one approach or the other. I like both approaches with a slight preference for masking, but both of them are equally useful depending on your needs. In short, rather than define the approach to follow, it's better to define your needs and then use he most adequate tools for those needs