10

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?
  • 3
    I wouldn't call that input masks as that makes me think of password input masking. It is more like input filtering. – Danny Varod Jun 2 '14 at 22:32
  • 1
    The filtering also often breaks copy-paste functionality e.g. copy automatically selects following space character, paste fails due to input control refusing to accept text with spaces in it. Good input controls for for serial numbers often know how to split text on deliminators and automatically fill in the following inputs with the next elements from the split e.g. "123 456" --> "123" "456". – Danny Varod Jun 2 '14 at 22:35
  • 1
    @Danny the term input mask was used in this sense well before password masking was being used. At that time password input typically either (a) didn't echo or move the cursor at all, or (b) echoed spaces as you typed. – Stephen P Jun 2 '14 at 23:22
  • @StephenP Show me evidence :-) - I have never seen it used in this connection, yet I have seen the filtering used in this connection more than once. – Danny Varod Jun 2 '14 at 23:24
  • 1
    @baldrickk, I wouldn't consider anything in MS Access a good example, however, thanks. – Danny Varod Oct 22 '14 at 18:23
13

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!)

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.