3

How should I design a form that is easy to use and understand that has a few textfields for currency?

Should the currency symbol be put outside or in the textfield?

One variant is to show the currency symbol inside the textfield when the textfield doesn't have focus. And when the textfield get focus the currency symbol is removed and only a decimal number is shown in the textfield.

Examples:

enter image description here

enter image description here

I think that is easy to understand. But what to do if the focus is lost and the input is invalid? I guess it should be left in the invalid state but with some colors that indicate that the input is invalid.

Are there any recommendations for this? Are there any practice for using the currency symbol within or outside the textfield in the financial world?

Improve this question

2 Answers 2

Reset to default
1

If you use a suitable converter to get the text from the form you should be able to leave the currency symbol as part of the input. For example, the standard currency converter in Silverlight/WPF includes this functionality so the user can enter "$ 100,000" or "100,000" into the text field and either is recognised correctly.

However, it might be simpler to move the symbol outside the text box and incorporate it into the label (in the same was as you have with the percentage). It might be less confusing for your users as the symbol doesn't appear and disappear as the focus changes. However it does have the drawback that if the currency symbol comes after the amount you need to have two labels rather than one.

You can still get this to reflect the currency of the locale easily enough.

Improve this answer
4
  • Hmm, I must add that here in Sweden we use the currency symbol, after the value, e.g. 100 000 kr so I have to use another label after the textfield, in case. But it's easier to implement, as you say.
    – Jonas
    Dec 10, 2011 at 22:07
  • @Jonas - Ah. I should have thought of that.
    – ChrisF
    Dec 10, 2011 at 22:09
  • Interesting about WPF. So in a WPF-application the currency symbol is best to have within the textfield, and not besides? (since the functionallity is built-in)
    – Jonas
    Dec 10, 2011 at 22:35
  • @Jonas - Yes it would.
    – ChrisF
    Dec 10, 2011 at 22:35
3

I would recommend having the currency symbol outside the field - it looks a bit cluttered having the symbol inside the fields. Also, having symbols appear and disappear is adding unnecessary code and complexity to your site.

If you like, you can make the currency symbol: A - part of the label, as you have done with the "APR (%)" label or, B - have all the symbols line up next to the input fields, so that the currency and % symbols all line up underneath each other in a neat row to the left of the input fields.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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