TinyCreditCard: A clear and animated credit card input workflow implement

此文章同时提供中文版本：TinyCreditCard：一个清晰并带动态效果的信用卡输入流程实现

Under the mobile platform, keyboard input is a cumbersome behavior. The UI needs to provide enough prompts and guidance. The user operation is much more complicated than watching content, especially the form input.

The most form input we face in the app should be credit card input and address input. Although the address has to be entered more information, but I think the credit card input is way more difficult for the user. Because the address is clear in everyone’s mind, but I believe very few people can remember credit card information. Most people need to look at the credit card to enter the corresponding information. And the credit card relate to money, every money related operation will be especially cautious for most people.

So I write TinyCreditCard library to make credit card input progress more simple for user. The following content is my view on the implementation of the credit card input process. The basic design is inspired by a post of Paweł Szymankiewicz(@p_szymankiewicz).

And I am very grateful to Paweł for sharing the used font resources. In addition to the basic design in the prototype, all interactions and details are my own idea. Look like this:

This article mainly shares the concept of interaction design, programing related content will be share in the next article. Of course, if you are interested, you can always view the source code of the project.

Let users know what they need to input

In fact, there aren’t many contents to input for the credit card, just four short information:

• card number
• card holder name
• card expired time
• card security code

But although everyone uses credit cards very often, they are not familiar with these informations. Because we just hand over our card when we use it offline and never care about the information on the card. Of course, there are some credit card scanning libraries try to solve this problem. But camera scanning has certain requirements for operation and environment as well as device cameras, so manual input is the easiest and most direct way for many users.

The easiest way to input content is to simply place four input boxes. But because the information on the credit card is usually not used at all, for some users, finding the content on the card also has a certain learning cost. After all, there is no clear correspondence between the card and the name of the input box. I think this is the biggest cost of understanding. So TinyCreditCard shows the icon of the card in the basic design, the user only needs to hold the card to view the position and then input, no need to find the content location or familiar with the meaning of the content.

As you can see, the top side is look like the entity of the credit card, the content of the physical card is brought to the interface in an intuitive way. The orange prompt box is used to remind the user of the content location that needs to be input currently. Then the bottom side is a virtual input box, which contain the raw input value from user, and the content is reflected on the card in real time to realize an associated prompt of the inpu content and physical card, and is also convenient for the user to check.

Allow users to easily switch input box

Since there are four required content, we certainly need four input boxes. But if four input boxes appear on the interface at the same time, the user need to understand the four seemingly identical content, then we need to add the description text. The interface complexity is also higher. So here I use the horizontal switch mode, you can distinguish whether there is the next input box, and your focus and interface description are always focused on the current input.

There are several ways to switch to other input boxes:

• When the input content is identified as “possible complete”, a button will appear in the input box, and the user can click the button to proceed to the next step.

• Because the user’s main operations are concentrated in the keyboard below, the keyboard’s returnKey also achieves the same effect in order to make it easier for the user's fingers to move too far. But because the numeric keyboard does not have returnKey, So I added a simple toolbar on top of the keyboard to achieve the effect of dismiss the keyboard and returnKey

• The input box can be swiped horizontally to switch to any input box

• The input content area on the card can also be tap directly, and it will switch to the corresponding input.

It seems that the same behavior has too many different ways to execute. But because most operations do not add elements to the UI. And all operations are matched with existing elements, such as tap operations with the orange prompt area, the swipe operation is combined with the horizontally arranged input boxes, so adding these operations is convenient for different user habits.

Tricky security code hints

Security code entry has always been the most difficult to understand. The card number is in the most conspicuous position on the card, and most cards have the concept of a card number. Card holder names and expired dates are content that has a specific format and can be read and understood by human, and many cards have a subtitle for them. However, the security code is only some numbers without any description, and the only one be placed on the back of the card. And the concept of security code is a unique concept of credit cards, not to mention it even without a unified name. Here is a description on Wiki:

In the design of many credit card input, the security code requires additional prompt content, telling the user that the information is on the back of the card, then use an example diagram to circle the approximate location of the security code, and then provide an input box to user.

But it is not needed in the design of TinyCreditCard. Need to remind the user that the content is on the back of the card? Let’s flip the card to the back side when we need to input the security code. The information location prompt is also implemented through the orange prompt area. Because the user has already experienced the input of three contents, the prompt area become very easy to understand.

The above content is some key processing in TinyCreditCard for the cumbersome problem of credit card input process. I hope to be instructive to everyone. The next article will share some of the code experience when writing TinyCreditCard.

• All code in this article can be found in the GitHub project.
• If you have questions or suggestions, welcome to leave comment for discuss.
• If you feel this article is valuable, please forward it so more people can see it.
• If you like this type of content, welcome to follow my Medium and Twitter, I will keep posting useful content for everyone.