Best practices for improving the digital payment experience
Every day we make digital payments in different applications and on different sites. In today s world, most of the business relies on digital payments. In the fintech space, hundreds of companies are working to make them more affordable, hassle-free, and reliable.
In my experience, most apps and websites miss out on the last mile of user experience that defines digital payments.
The difference between good and great is the attention to detail.
Below I have listed the small design and interaction details that make a great experience great.
The most powerful speakers, the friendliest design community and the desire to make cool designs.
10% discount with UXPUB promo code
This list is far from complete. I will continue to add to it. If you d like to contribute you can reach me at @designaive on medium.com
1. Make permanent descriptions for input fields
Leave no room for guesswork.
Always use persistent descriptions for input fields. Sometimes you can use placeholders as descriptions to keep the design clean.
Don t rely solely on placeholders to educate users on what data to enter.
2. Automatic focus on the required input field
Help the user
Whenever the user is required to enter data, automatically focus on this input field.
Don t wait for the user to click on the input field. This is an unnecessary tap that can be avoided.
3. Open the correct keyboard
Don t be stupid.
Show the numeric keypad where the user only needs to enter numbers.
Don t show the default alphanumeric keyboard when the user only needs to enter numbers.
4. Move to the next input field as soon as the user enters valid information
Be smart.
As soon as the user enters the required value in the input fields, automatically change the focus to the next required input field.
Don t wait for the user to click and change focus manually. It takes time.
5. Make sure your call-to-action button is visible
Make it easy to find.
Make sure the main call-to-action button is always visible on the screen. And make it easily accessible.
Don t let the main call-to-action button go out of the viewport or hide behind any element.
6. Add safety icons and badges
Build trust.
Make your payment page visually secure by adding security badges / icons. This will help the user perceive the page as secure and willingly share financial data.
Do not leave your page without any security badges / icons. Lack of trust is one of the main reasons for abandoning a purchase.
7. Show error in real time
Be less annoying.
Check and report data entry errors in real time.
Don t wait for the user to submit the form to validate the input fields.
8. Give instant feedback when a user submits a form
Provide instant feedback.
When the user clicks on the button, give instant feedback, either by disabling the button and showing the bootloader, or by taking the user to the next page.
Don t leave the user guessing whether the form was submitted or not.
9. In case of payment failure, give users the option to continue working
No dead ends.
If a payment fails, communicate it clearly and give users the option to retry the payment or contact you for help.
Don t just inform the user of a payment error without providing them with the means to complete the payment.
10. Descriptive call-to-action buttons
Make them obvious.
Try to tell the user exactly what will happen when the button is pressed, and where it might take him.
Avoid short, inaccurate button texts.
11. Show the delightful successful payment screen
Design to delight.
Before showing other details, make it clear that the payment was successful.
Don t show too many details along with the message that the payment was made. Do it after.
12. Add an action to clear the input field
Save the user s time.
Do
Save users time by adding quick clearing of the input field.
Do not do it
Don t force users to waste time on tedious work.
Thank you Adit, Rahul & Samir for help. Feel free to write to the author if you would like to contribute.
This list will be added soon.