2

Basically this question, but with more usability focus:
https://stackoverflow.com/questions/48534229/what-is-the-correct-input-type-for-credit-card-numbers


So we have these two general keyboard layouts (at least that's how they look on my phone).
One is <input type=number> and the other <input type=tel>

   

Now by the logic they were designed, you would use the number one for credit cards.

But I'm wondering, aren't the buttons on <input type=tel> much easier to hit for a field where you only need numbers? It feels like all the extra symbols on <input type=number> are just cluttering the view, you can't use them for this field anyway.

Now the questions are:
Would you consider this a better user experience, even though we'd be using the "wrong" format?
What about possible drawbacks, would this possibly hinder the user in some way?

6

The fields should be configured in a way that directly relates to what data goes into it.

So, in this case, while it might be slightly easier to input the numbers with the tel format, that's not what the data actually is. You're breaking syntax rules. This has implications on accessibility, among other things. You don't want a screenreader user being informed that the field is a Credit Card field (by the label) but then being told to enter in a telephone number in the field. That's confusing. Not only during the entering of the data but also when the user is reviewing what they've entered.

Also, you can't be 100% sure that all the devices that the page is being accessed on will interpret the Tel in that format. They may end up defaulting to standard text input keyboard.

Keep the syntax correct for the data.

  • Yep, to my demise I just had to notice that it was an edge case with my special keyboard (SwiftKey). Native Android keyboards seem to display the number type just fine. So everything is working as it should. – Big_Chair Jan 17 at 13:01
0

I find that keyboard type tel is much more convienient for users because it is focused on numbers in their big keys layout. It is also (on Apple) resembles the numeric keypad seen everywhere. It is true that accessibility has a role here and syntax is important but I believe you can find a solution for it.

I found this —> “ Using the pattern attribute, pattern=”[0-9]*”, with the number input type will display the 10-digit numeric keypad similar to the tel keypad“

I like to add this keyboard layout to a credit card masked input field so the user focuses on numbers and no other symbols.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.