I am looking for best practices around how to design a UI for currency fields. I have been looking into ATM-style fields. This is when if you type in your value, it fills in cents first until you've hit a full dollar amount. My question is, when should you use ATM-style fields vs just regular input fields with potentially some input masking, such as adding in commas as the dollar value goes up. Does anyone have insight around ATM inputs? I see this being used in various places but cannot find best practices or when specifically to use/not to use.
-
+1 for a very interesting question. Paypal uses ATM style for instance. Would love to hear about research or insights.– greenforestOct 5, 2021 at 9:48
-
1There are some specific aspects of ATMs themselves that differ from other monetary systems. Such as a)The currency is fixed. b)The amount to withdraw is an integer. c)The max amount to withdraw amount is below that where comma separators would be used (so, not 2,000.00). These (and other) specific criteria helps lend itself to a fixed input format that isn't necessarily appropriate for general currency input fields in, for instance, a personal banking app.– JonW ♦Oct 5, 2021 at 14:59
Add a comment
|
1 Answer
The answer to this question is pretty logically straight forward.
First of all, whenever you have a numeric field—especially one that involves decimal arithmetic calculations—you should preferably use a right-to-left input scheme.
Now with that aside, while ATMs might differ in how they operate, the ATMs you've been accessing use that specific input formatting for the following reason.
Computers are not very good at accurately representing and manipulating decimal numbers that we use for currency arithmetic, since every floating point number is stored as a 32-bit binary value in scientific notation in the following format:
significand * 2^exponent
Note that the base of the exponent is 2 (for binary)
instead of 10 as we would use in decimal arithmetic
Simply put, this would lead to inaccuracy in the results if currency values were to be stored and manipulated as floating points numerals (Check the Further Reading section for delving into this in greater detail).
In order to circumvent this scenario, currency values are stored and manipulated as integers in all digital financial service applications. And as a consequence, what you see on your ATM screens is simply masking—not just with respect to the commas that you see for large numbers but for the position of the decimal itself.
Further Reading
Lindydancer's answer to How are floating point numbers stored in memory?
zneak's answer to Why not use Double or Float to represent currency?
