validation - Why do so many forms use input masks in for input fields?

To be honest, I find input masks annoying. Different masks on different sites sometimes work differently, such that their behavior unpredictable and it actually makes me take more time to type out information because I have to be careful that it doesn't mess it up.

For example, some of them automatically go to the next tab index for you, while some don't (and don't get me started on trying to delete/replace characters). Some of them prevent you from continuing until you've entered correct information, while some don't. I would much rather type in the '/', '-' '(', or whatever else character because that way I know exactly what I'm going to type and what the field requires, so I can do it as quick as I would normally type. I would also much rather have a small error box pop up next to the field in question if the format is off, telling me the format it should be in.

• Why are input masks seemingly the required norm? Is there a standard/study of users that this is based on that shows it truly makes it easier for the user?


• Also, a worry: might not using input masks alienate less tech-savvy users, since there is no "template" provided? Or, will input masks actually confuse them even more, causing unexpected (and sudden) behavior?

Answer

Input masks are often done poorly as you describe, but done right they can be very helpful by reducing typing and showing expected formats. Doing them right is key.

Maybe I have an input for social security number, which is always in the form [nnn-nn-nnnn] so I may display the field with the dashes already present in the mask [ - - ] but if I do so I will let you type the dashes or skip the dashes. Entering the whole number on the numeric keypad as 9 straight digits is faster than having to put the dashes in the right places, but if you type a dash while you're on the dash position of the mask I will accept it and move on. Likewise, if you paste any of these: 123-45-6789, 123456789, or 123 45 6789 I will accept it.

I have done this as both a single field with dashes and as three fields with dashes between the fields and both cases would properly accept any of these forms either typed or pasted, with auto-tab among split fields, ignoring (but accepting) the extraneous dash typed.

For a 10-digit phone number I would prefer to use a single input field with no mask, and allow you to enter the number in any of several common formats, say (nnn) nnn-nnnn (with or without the space), nnn-nnn-nnnn or nnn.nnn.nnnn or nnn nnn nnnn or just 10 digits nnnnnnnnnn — as long as I can make sense of it. Apply a mask for your site's preferred format when the user leaves the field if you want to do so.

Doing this allows users to enter information in formats they expect and they personally are comfortable with, and lets them learn the can omit unnecessary "punctuation" as they get to know your system.

Masks can act as hints for what is expected in a field, and properly implemented they should not punish the user for actually typing the mask characters. (And always allow paste!)