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.
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.