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.

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?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer
    
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 '11 at 22:07
    
@Jonas - Ah. I should have thought of that. –  ChrisF Dec 10 '11 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 '11 at 22:35
    
@Jonas - Yes it would. –  ChrisF Dec 10 '11 at 22:35

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.

share|improve this answer

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.