E-commerce: Succeeding in the UX of your payment

Users tend to evaluate an experience as a whole by estimating their perception corresponding to the peak and end of the experience. On an e-Commerce site, payment is the final step in the user journey. Taking care of this step is therefore essential to improve the user experience on your entire site.

However, PCI DDS compliance requires all e-commerce players to entrust their payment to an external service provider. It is therefore advisable to choose your payment solution carefully according to your company (sector, size, cost, transaction flow, payment methods, etc.) and the degree of customization it offers.

Focus on some best practices for a successful payment experience.

Tip #1: Fully integrate the payment module into your site

If possible, avoid opening the payment module in a new window. Best practice is to maintain the site environment and respect your charter to avoid disruptions in the purchasing process.

Tip #2: Think about reading comfort

Favor an “airy” payment page to promote maximum reading comfort and use white spaces with a focus on the payment, without frills that could disturb the user.

Tip #3: Guide the user

The user needs to be guided by optimizing affordances. This involves suggesting actions to take to avoid cognitive “efforts”.

Affordance is a term coined by Donald Norman that can be summarized as “The appeal of a thing to use it”. You can find our dedicated article to learn more

Tip #4: Favor vertical reading

A single payment form that can be read vertically will be easier for the user to understand, particularly on mobile interfaces.

Tip #5: Position the labels correctly

Labels should ideally be placed above or inside fields, provided they remain visible when clicked or tapped.

Tip #6: Prioritize the buttons

Still with the idea of ​​reducing the cognitive effort of users, it is advisable to group the buttons in the same area because it is an important reference point and to take care of their hierarchy by playing on their size and their color.
As a reminder, green is the color of hope, luck and stability. It is associated with the positive action of validation. Conversely, red is associated with prohibition, danger, error.

Tip #7: Managing error messages

As with all forms, but this is even more true for payment, prioritize managing error messages in real time and do not wait for complete validation of the form.