1

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.

1
  • The "try to avoid typing on mobile" rule-of-thumb is useful general guidance, but should not be over applied. If one spends effort inventing some UI that is uncomfortably novel, slower or more inaccurate than typing, that would not make sense.
    – Jason A.
    Nov 5, 2014 at 22:29

3 Answers 3

3

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:

enter image description here

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:

enter image description here

1
  • Compared to everything else I've tried, this approach of taking in numbers in reverse order works the best! ESPECIALLY considering that iOS' input[type=num] keyboard has no decimals. Thanks!
    – Riveascore
    Nov 12, 2014 at 18:16
1

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

5
  • That's what I'm using right now, I was looking for a better approach.
    – Riveascore
    Nov 5, 2014 at 17:42
  • 2
    Even if there was a magical article out there titled 'best approach for Feng' the only way to know is involving your users. Do some Think-Aloud user testing with ~5 people. This will give you your best approach. It is the only way to validate a guess.
    – Ken
    Nov 5, 2014 at 17:48
  • @Ken For me "test with users" or "it depends" is a kind of none-answer. There are best practises out there and it's sound to ask for it.
    – FrankL
    Nov 12, 2014 at 15:45
  • @FrankL you are suggesting that best practices are a replacement for user-driven design? Best practices are inherently flawed because they are designed to suit most situations pretty well. While it can be a good starting point, it is not a replacement for real user centered design work.
    – Ken
    Nov 13, 2014 at 5:36
  • @Ken Sure. Feng was asking for a good starting point.
    – FrankL
    Nov 13, 2014 at 14:57
0

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.

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.