Mobile money input, easiest method

Question

For a monetary input, I would have liked to use the input[type=tel], but sadly the decimal/period character is missing from most telephone keyboards on mobile devices.

This is a payment amount that a user chooses, so it can be any dollar value along with any decimal value between .00 - .99

For now, I'm using the input[type=number], but I feel there must a more user-friendly input, since on mobile devices, we try to prevent as much typing (via the standard keyboard as possible).

I'd thought about using 2 selects, one for the whole number dollar amount and the other for the decimal portion, although that may be difficult if you have to scroll through hundreds of numbers.

Answer 1

A lot of budgetary apps on iOS that use the telephone keyboard use the convention of displaying the input preformatted with a currency sign at the beginning and the decimal/period number built in:

As the user presses numbers, they display preformatted. No need for the user to add the decimal/point themselves. For example, I pressed the numbers 1, 2, 3, and 4, and this is what the app displayed:

Answer 2

Consider native mobile controls

The number input will show a number pad with decimal. It is probably best to keep it straight-forward and provide a single number input with help text with an example input. You can always validate with regex to check for decimal, etc. Append a $ for USD or other if localization is a concern.

Using input[type=tel] for a money would loose semantic meaning, a less optimal solution.

Pardon the old phone but here's an example of a simple approach. The user simply types it in, less clicks less UI.

Ultimately you'll want to test a couple of different designs with users to validate assumptions.

Phone http://gyroscopestudios.com/stackexchange/phone-number.png

Answer 3

Take the typepad an ATM uses (context of money is kept and buttons are big). Note that ATM and phone are using same layout ;)

Add a point and a delete button on it.

And an okay/ done button.

That's it.

Test with users which order of typing numbers in the field is prefered: first cents and then dollars or first dollars then cents. This can be culturally different. I did a mobile payment app in Germany.