Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm implementing the forgiving format pattern for phone numbers and social security numbers on a web site.

Basically, the idea is the user types their (US) phone number:

5558675309

The system provides feedback that it understands the input by reformatting:

555-867-5309

When should the "echo back" happen?

  1. As soon as 10th digit is entered?
  2. When the field is blurred?
share|improve this question
add comment

2 Answers 2

up vote 12 down vote accepted

Do not rewrite until blur. Someone might type 7 digits, then go to the beginning and add '180'... all of a sudden before they get the second 0 on the area code, it gets re-written and their cursor position is lost.

Always format the input when they are leaving the control, never when their cursor is still there and they may still be editing or adding information. This is true of nearly any control (not just phone numbers).

You can do live validation (like password controls that give a in-progress idea of the password quality); but never do live re-writing.

share|improve this answer
    
+1. A very good answer; important aspect. –  Kris Apr 27 '12 at 6:27
add comment

Strictly as a user, I would want the inputs to behave consistently. If you do any other transformations or validations on blur, then I'd probably want this field to do its thing on blur also. But if any/all other fields typically validate or give feedback immediately (e.g., when you clear all text from a required field, it "turns red" immediately), then I'd probably want the transformation to happen immediately.

UPDATE: I agree with Myrddin Emrys's answer as well.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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