I'm working on a financial web-application, and in some pages, the user has to fill an amount. We are dealing here with large amounts, and they are generally thousands or millions of $ / €.
In previous versions of the application, the pages contained a text field, where the user filled the amount value, and a radio button to choose the unit (K
, M
or B
, where M
was selected by default), like that:
download bmml source – Wireframes created with Balsamiq Mockups
But now, we decided to remove the radio buttons. The text field now accepts values such as 120 M
for 120,000,000
. However, we faced some situations where the user simply filled the text field with 120
, and did not define the unit, which makes the amount to be 120
and not 120,000,000
.
One solution we may develop is to have a client validation that forces the user to put a K
, M
or B
in the field, so he will have to input 120 M
and not 120
. However, what I don't like with this solution, is that the user will not be able to fill a precise amount (such as 120,250,500
, or he will have to write 120.250500 M
or 120250.5K
which is not really great I think).
Another idea is to have something like an auto-suggestion in this field that selects the M
by default (a little like in the Google search field, when you start to type something). This way, if the user does not fill any amount, and just type tabulation, the field will automatically add the M
to the amount.
I prefer the second solution, but maybe there is a better way to implement this feature...
So, what are your suggestions?
Edit, regarding the current answers
Here is another idea: I let the user inputs a value, using eventually the K
, M
or B
suffix. I add a visual indication of the real amount just below, so the user can double check if the input is correct.
If the user does not add any suffix, I display the value in red, with a little warning icon (and a tooltip that explains what happens). Something like that:
What do you think of that?