Here is a classic mistake that never gets less dumb: Insisting your customers format their phone number a certain way. In this case, the business added on to the shabby effect with clumsy formatting, creative capitalization, and poor error handling.
The message this business sends out to customers is, “We're lazy.” It lowers people's expectations towards your business as a whole: It these guys are lazy about stuff that's right in front of me, what else are they lazy about?
First, why is it dumb to require phone numbers in a certain format? It's dumb because it's unnecessary: We have JavaScript. Formatting some characters the way your database wants them is not rocket science. Dumping the job on your customers is just lazy. It's as if you went to a doctor's office, filled out the intake form, and got told by the receptionist to do it again because you entered your phone number with parentheses where there should be a dash.
Next, this company (I'm not going to name names, because this kind of laziness is so common that it could have been any number of businesses) piles on a minor irritation with some really bad error handling. See that error message “Please enter your valid 10 digit Work Number using the correct format: 999-999-9999“?
- It more or less repeats the instructions that were there already. That's redundant.
- It's just slap-dashed onto the end of preceding sentence, but for some reason in a bigger font.
- It didn't go away after I put focus back in the field and corrected my phone number formatting.
- Punctuation matters, people. Could we at least add a period to one sentence before appending another?
- The word correct. If you want to sound like a school marm, that is exactly the word to use.
Also, while I'm at it, why is “Work Number” proper cased, as if it were a name? No, not everyone notices, but consider this: How many of your customers are, e.g., English teachers? Nouns aren't capitalized in English. In German, yes, but this is clearly not German.
How do you prevent this?
Don't be those guys. One, pay attention to formatting requirements. Get rid of them wherever possible; if your developers don't know how to do string formatting, they're not good front-end developers. You need a JavaScript resource. Rule of thumb: If a field requires an explanation, there is a problem. You should not need to explain how to enter a number into a field.
Here, try this. See if you can type in an incorrectly formatted phone number.
How hard was that? Nine lines of JavaScript, counting the brackets. The only error you'll have is someone entering too few digits or leaving the field empty. I've added a placeholder (that faded text in the empty field, which dissappears as you type) “xxx-xxx-xxxx”, not because it's strictly necessary but because it takes the guesswork out of it for people who anticipate some sort of formatting restriction. The phone number field could be as clean as that.
Next, make sure your error messages disappear as soon as your customer has made the correction. This should go without saying.
Have a competent designer draw up a standard format for error messages. There are multiple ways to do them that are all good; just make sure they clearly point to the field that contains the error and don't push the rest of the page's contents around.
Last but not least, have a copywriter check all the words. All the words, not just the welcome message.
