Is constantly updating the formatting of a numeric input box a good idea?

Question

I have a numeric input box, as part of a form. I'm implementing delimited splitting, to make large numbers easier to read. ie, 1000000 would become 1,000,000.

Would it be a good idea to automatically update the input with commas as the number is typed? So that typing 1,000,000 would show:

1
10
100
1,000
10,000
100,000
1,000,000

As the number is being typed.

Initially I thought it would be a neat feature to have, but I'm concerned it may be confusing. Would it be better to format the number when focus on the input box is lost?

Edit:

A similar question. These input boxes also have a maximum value that can be entered. If the user types a value outside the valid range, should the input instantly auto correct to the max value, or only do so when input focus is lost? If waiting till focus is lost, should you 'silently' change to the max value, or highlight the box with some kind of error display?

Answer 1

Do not update what users enter when they're still typing. It fuddles up their ability to edit as they type, and it makes the field a moving target. If you were to type 25000 straight, no typo's, no backspacing, it might make sense to format it right when you're done. However, what happens when you enter a 0 between the 2 and the 5? Or when you hit backspace?

Also, research into feedback in forms has shown that people slow down when the feedback is instant on each update. They will hit a key, wait for the system to give feedback, then perhaps hit another key. I think the same thing may happen here: add a number, check how the formatting shifts, add another number, check again.

A text input is a simple control to interact with. Numbers are simple enough too. Keep it simple and give feedback (i.e. change formatting or give feedback on wether it's within bounds) after a user has finished. To quote A List Apart: "...give feedback after the user finishes providing an answer. Or in situations in which people need help sooner, give feedback while they work toward an answer, but use an appropriate delay so premature error messages don’t frustrate them."

Answer 2

Firstly, the thousands separator is not common among all regions of the world. When in doubt the recommended solution (SI/ISO 31-0 standard) is to use a non-breakable thin space as a separator.

You also have to take into account that not all countries group by thousands. From Wikipedia:

• In China, comma and space are used to mark digit groups because dot is used as decimal mark. There is no universal convention on digit grouping, so both thousands grouping and no digit grouping can be found. However, grouping can also be done every four digits: 123,4567.89, since names for large numbers in Chinese are based on powers of 10,000 (e.g. the next new word is for 108). Japan is similar.

• In India, due to a numeral system using lakhs (lacs) (1,23,456 equal to 123 456) and crores (1,23,45,678 equal to 12 345 678), comma is used at levels of thousand, lakh and crore, for example, 10 million (1 crore) would be written as 1,00,00,000.

If you know the system of grouping that your customers are likely to use, I would automatically add in the separators (as is commonly done on ATMs or cash machines), but I would use a non-breaking thin space as the separator. You are probably fine using a thousands separator most of the time and simply switching to an alternative version if in India or any other country that uses an alternate system.

Answer 3

We had the same question and after a lot of heated discussion we decided to not format while the user was editing.

While the user type he can add grouping or decimal separators if he would like and as soon as he blurs we add them if the user didn't.

so the user can type

100000
100,000
100,000.00
100000.00

but as soon as he blurs we format it as

100,000.00

obviously without the decimal point for integers

As @Gildas wrote, you should consider culture settings as well.

Answer 4

Be careful that this notation is not common for all users.

Simplified table of numbers formatting :

1000000   < nobody that cares about readability
1 000 000 < Sweden, France
1,000,000 < UE
1.000.000 < Germany

Is it going to be an amount of money ? Because if its so I would recommend you to input right to left (have a look to currency formatted cells in excel).

As a general rule the input has to be expected. If your user is not typing a [,] or a [ ] you should not display it in editing mode.

In the other hand you can format the data when not in editing mode. A good example is phone numbers. (Check contact information in your Facebook account)

Same thing for the maximum value, let her write what she wants and give her some information about the system limitations when relevant (remember that it is always the system's fault never the user's).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

Even more than just applying formatting during input doing anything to actively change the input during an edit is extremely user hostile.

ex Your system limit is 1,000,000 and your user attempts to change a value from 230,015 to 330,015; begining by typing a 3 with the intend of following up with a delete to remove the 2. With an immediate force value to upper limit function instead the value of 3,230,015 would immediately be slammed to 1,000,000 forcing the user to reenter the entire value from scratch.

Doing it immediately on the termination of editing isn't much better. ex as a typo the user enters 3300015 and tabs to the next field only to have their input replaced with 1,000,000 instead of just being flagged as an error allowing them to edit out the extra zero.