Breaking credit card inputs into atoms — why is perfect UX design so important?
As a UI designer at Netguru, I was involved in various fintech projects during the last few months. Considering all of the pain points of these apps, I realised that one pattern is not thought-through enough — forms that let you input payment card details. There are various contexts of this procedure, but always, regardless of the situation, it is a crucial and mandatory step to either finish the purchase or start using the app.
The data: European Central Bank statistics
Currently we have hundreds, if not thousands, of payment methods — it varies depending on the region and its development. However, according to the European Central Bank, in 2017, 51.6% of payments were done using payment cards. This gives us 135 card payments per capita. E-money payments had only a 2.6% share but, what is more important, their share grew 20.3% from the previous year. The conclusion from these statistics is rather clear — payment cards are at their highest — they are reliable, easy to use, available across the world and, most importantly, firmly implanted in our daily routines.
What does it mean for people involved in the creation of digital interfaces? First of all, we are obliged to deliver perfect solutions that support users across the whole process of entering the data found on a physical card. Secondly, we shouldn’t ignore e-money payments, which are steadily growing and getting better along the way. We certainly don’t know what the future holds but, based on the current trends, we can try to predict it — payment cards will be used less often and e-money will, slowly, but inevitably, become more accessible. However, for now, let’s focus on the present: what are the available methods to input data into our devices?
Huge development in technology
Modern smartphones are packed with data, thus they have various input methods. We have on-screen keyboards, cameras, and microphones. All of these are evolving and improving, and thanks to the constant progress of the hardware industry, each year they are getting closer to being perfectly engineered.
Keyboards are getting closer and closer to being ideal — mainly thanks to more accurate touch sensors and better design choices, e.g. contextual hints, use-case specific display (like numeric keyboards), etc. Photos from cameras that can be found on every modern device are now unbelievably sharp. How we can put all of that great tech into use?
Scanning: Cameras found in modern devices are extraordinarily precise and accurate. Adding a modern piece of self-improving code allows us to read the data found on the card in seconds. Due to privacy concerns, the security codes are often put in manually.
Multi-input forms: A common pattern based on dividing the process of entering the data into a few input sections. One section asks a user to input their name and surname, another asks for the card number and so on.
Single-input form: The idea is to aggregate all the necessary information in a single input. Luckily, it is a relatively uncommon pattern, as it only overcomplicates the process that isn’t easy in the first place. But why does it happen? Because of skeuomorphism!
“Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.”
But isn’t it dead already? Yes and no. When considering the visual aspect, it was indeed mostly buried with the release of iOS 7 and OS X Yosemite but, according to the definition above, skeuomorphism is not only about how things look, it’s also about how they work.
Before designing an input form, make sure to spend a few moments on research. Take out one of those plastic cards from your wallet and investigate its design thoroughly. How do you know this is a payment card? What are its distinctive features? Besides considering specific elements such as a magnetic strip or electronic chip, pay close attention to its layout — the order of information.
Scanning as the most reliable, secure and fastest method
In my opinion, using scanning as the primary method of inputting the data has many benefits. Firstly, it is much faster than typing the data in manually. If properly implemented, it shouldn’t cause any issues, like misinterpreting information on the card. Another huge benefit is making a small contribution to fraud prevention, as to scan a card you have to have it on you.
The ideal form — 7 golden rules
As with everything, it is difficult to provide strict rules for every possible scenario. However, consider these seven rules to make your form lead your user to the goal in a pleasant manner.
- Right and logical order and form
As I have mentioned before, it’s very important to keep the order similar to a physical card. This helps users to scan the form faster. They read the information in order and fill it in accordingly. In addition, avoid using date pickers — just look at the card. It doesn’t say January 2020, but 01/20. The same goes for the card number, which is usually divided into 4 digit chunks. Make sure to present it in the same way. - Ask for necessary information only
Asking for the cardholder’s full name and address may be an additional security measure, but you don’t always need to do it. For instance, if your app does KYC (identity verification process based on a document and photo) beforehand, you already know the full name. Make sure to reuse information given before. The card number includes much more information than you may expect. For example, you don’t have to ask about the card type, as this can be easily decoded from the number. - User the right keyboard type
This rule is simple to implement, but very often forgotten. Our smartphones have a few types of keyboards depending on the context. We have a special version to input our email address, phone number or webpage address. Use a numeric keyboard to make entering the CVV number easy for the customer. - Visual representation is a nice addition
If you have the necessary resources, show a visual representation of the card which updates as the user inputs details. Checking if the data is correct will be much faster this way. - Minimise errors, inform clearly if they occur
Make sure to follow basic accessibility rules such as proper contrast, font size, and so on. This will most likely minimise the number of errors, because your form will be easy to read and scan. However, if some errors occur, make sure to put a hint next to the place where the user has to correct some information. - Enable third-party services that already have the details (ex. Apple Pay)
If possible, enable third-party services your user’s already using. It could be as simple as enabling Apple Pay or implementing PayPal as a payment method. Following this simple rule might greatly improve your conversion rates! - Security — provide a trustworthy solution
Make sure that the users’ private data is safe on your side. Another step would be to inform your users about the precautions. It could be anything — a subtle icon, a small hint or just a clean design. Reassuring your users about their privacy will make your product more trustworthy. Do not complicate, don’t add big elaborates about security in this place — a small hint will be more than enough.
To sum it up…
Considering the provided data, we can be sure that payment cards are the most universal and accessible method of payment for the majority of users. In fact, it is the second most popular method, just after cash. That’s why perfectly crafted designed forms come in handy. E-payments are dynamically chasing other methods of payment, but it will be a long time before they are equally popular.
- Follow the same layout of information as found on the physical counterpart,
- Scanning should be a primary, but not the only method,
- Follow accessibility design principles,
- Inform the user about security,
- Always remember about the user.
What is your opinion? Have you faced any similar problems while designing for fintech? Share your opinion in the comments section and if you found this information useful — leave a clap.
Check out the Netguru blog for more interesting design articles, and Swap Behance Case study which was base for this article.
Thanks for all of the people involved in the proof reading and feedback: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Natalia Chrzanowska
