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.

7 days of design reload

The most powerful speakers, the friendliest design community and the desire to make cool designs.
10% discount with UXPUB promo code

Join

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.

Do
Always use persistent descriptions for input fields. Sometimes you can use placeholders as descriptions to keep the design clean.
Do not do it
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

Do
Whenever the user is required to enter data, automatically focus on this input field.
Do not do it
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.

Do
Show the numeric keypad where the user only needs to enter numbers.
Do not do it
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.

Do
As soon as the user enters the required value in the input fields, automatically change the focus to the next required input field.
Do not do it
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.

Do
Make sure the main call-to-action button is always visible on the screen. And make it easily accessible.
Do not do it
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.

111
Do
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.
112
Do not do it
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.

Do
Check and report data entry errors in real time.
Do not do it
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.

Do
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.
Do not do it
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.

Do
If a payment fails, communicate it clearly and give users the option to retry the payment or contact you for help.
Do not do it
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.

113
Do
Try to tell the user exactly what will happen when the button is pressed, and where it might take him.
114
Do not do it
Avoid short, inaccurate button texts.

11. Show the delightful successful payment screen

Design to delight.

Do
Before showing other details, make it clear that the payment was successful.
Do not do it
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.

Leave a Reply

Your email address will not be published. Required fields are marked *