We are working on an point of sale app, and need to figure out how to format the numbers on the screen for when a client is entering a credit card number.

The two options are:

1) The way a phone usually formats numbers:

1 2 3
4 5 6
7 8 9

2) The way a keyboard is formatted (a tool clients may be familiar with when entering CC numbers on a desktop.)

7 8 9
4 5 6
1 2 3

Any thoughts on what would be a better user experience? Or what other POS apps do?

  • For what platform(s)? – msanford Jan 10 '13 at 3:43
  • Good point. I actually read POS as online shop. However there is no reason that a POS cannot be multi-platform, including mobile. In fact there are many advantages to this. – Tims Jan 10 '13 at 3:51

Use an input field which triggers the numeric keyboard. Users will be familiar to this as it is a UI that is native to their device.

<input type="number">

When using this method don't forget that the chrome desktop browser will display a spinner control. The spinner can be hidden using a bit of css:

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;

If you want to show the keypad on the actual page itself (which is often done as a security measure against keyboard loggers) then I would still suggest your option 1 as it is the same as both a phone input (which people probably use more than a keyboard keypad) and the same as an ATM and EFTPOS keypad layout (which will have a natural association with credit cards).

Of course this is all just my opinion. The best option would be to do some tests with actual end users (probably A/B testing) and get some hard data on which is best.

  • I upvoted your solution because I like the idea of invoking the familiar UI. However, as the question stands, it's not been made clear that it's an HTML5 mobile app or a native app. I don't know enough about iOS / Android UI development to know whether you can style a native app with CSS in this manner… – msanford Jan 10 '13 at 3:45

Input fields related to credit cards and banks almost always use the first format rather than the second one. Think of ATMs or POS devices. They both have the first format. However, A/B testing always helps.

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.