How should we format numbers on a mobile device for a POS app?

Question

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
  0

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
  0

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

Answer 1

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-outer-spin-button,
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.

Answer 2

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.