Every day more and more processes are moving online. Payment forms, account signups, and even online merchant applications are quickly moving to online-only formats. Not surprisingly, the design of your online payment form can increase or decrease your customers’ completion rates significantly, and therefore affect the volume of online payments you’re receiving!
Here are 10 tips to design an effective online payment form:
1. Make it easy to read.
Make sure your text is legible and properly coordinates with your form fields. This tip may seem like an obvious one, but that doesn’t make it is any less important. Your form field labels should be in a simple font style (typically a sans-serifs like Arial work best), as well as a standard size and color. The same rules apply with field text; the user should be able to easily read what they are typing into your form.
2. Create a natural visual flow.
Optimal alignment and field layout often depends on the type of information being requested. For example, top aligned fields like those pictured below, typically have the fastest completion times since they requires the least amount of eye fixations. If you have a few fields and you want users to breeze through them, then this layout is your best bet.
Right-aligned fields have the next speediest completion times and also have the benefit of creating a shorter page. Right-aligned labels can create a vertical “seam” down the page, making it visually easier for the user to complete the form. However, they can create a limitation for field length and cause awkward line breaks for longer field labels.
Finally, there are left-aligned labels. Although these typically have the slowest completion time, they have the benefit of a shorter form, and also the flexibility of longer labels (very often found on online payment forms). A left-aligned field layout can also work best for longer forms that use a two-column layout with clear section dividers.
3. Create a natural functional flow.
Have you ever tried tabbing through a form and realized that you didn’t get to the field you expected? Tab order, when not proactively coded into a form, is defaulted by your web browser and can tend to jump around to links and other elements on the page other than the field you’re trying to reach. Having to click separately into each field of a long form can be very annoying for users.
4. Create a clear destination.
A brightly colored or boldly designed “submit” or “continue” button placed, when possible, above the fold (the visible part of a screen without scrolling) can also help increase your conversion rate and gives the user a visual end point to the form.
5. Keep it simple.
On longer more in-depth forms, make sure to use multiple pages or clear section headers to break the form into digestible chunks. Shorter, more segmented forms can help avoid user frustration and increase conversion. Also, segmented forms with a progress indicator help users know where they are in the process, which can help them plan time for completion.
6. Remove excess items from your sign up form.
If your user came through a link or button to visit your sign up page, chances are they don’t need extra navigation or other products to distract them from the form. You want to keep them focused on completing the online payment form and not exiting the page. The less opportunity you give users to exit the form (even if it is to visit other areas of your site) the better the chance they will complete it and submit their online payment.
7. Complete as much information as you can for the user.
If your online payment form software can store customer account information, and you know customers will be repeat users, have them create accounts upon making their first online payment. By doing so, contact information, billing address, and payment information will be auto-populated for their next payment, greatly increasing completion rates. Customers will be able to simply log in, review their information and click “submit,” with little or no data entry.
8. Use a security logo or seal.
If you’re hosting the form yourself, provide a logo or security seal of the company providing your data security protection. If you’re using a 3rd party service, make sure they use a seal that shows who is processing the payment. Providing that “safe and secure” reminder can increase conversion rates by 20 percent or more.
9. Use in-screen help tools.
Using tooltips is a great way to give your user the information they need without having to exit your form page. Tooltips are generally displayed as a question mark or other image that a user can hover or click to get more information about a field or section.
Field validation is also a great way to ensure an improperly completed field is alerted to the user without leaving the page. If you have a short form, validation can be done dynamically upon leaving the field. However, be careful of using dynamic validation on longer forms. If users like to jump around to fields in a non-linear order, dynamic validation can be more of an annoyance than a help. Whichever validation style is used, make sure your validation text is informative so that the user knows how to correct the errors.
10. Make support easy to find.
Finally, provide a support phone number, chat option, or email address so users have an option to contact you if they need help. If you have a robust online support center, then provide a link to it.
While accomplishing all of these best practices can be easier said than done, especially if you’re using a 3rd party service or need to contact a developer to make changes to your payment form, even making slight updates can have drastic improvements in completion rates. Not sure what to prioritize first? Ask your customers. They can provide clear, if not unanimous, feedback of the biggest pain points in sending you an online payment.