Mapa Research is part of the Business Intelligence Division of Informa PLC

This is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Filling in forms

10 ways banks can build better application processes

If you subscribe to our quarterly dashboards and reports, you’ll see that one of our areas of interest is the process of applying for new banking products online, particularly on mobile devices. Which banks allow customers to apply online and in-app? How smooth is the process? And what are the outputs – do customers get an instant decision?

We’ve taken a look around the world of web design and ecommerce to see what improvements could be made to application forms, and how some small changes could greatly improve the user experience.

1. Use autofill & prefill

If someone is logged into digital banking and chooses to apply for a new product, why should they have to enter their details again? You already know a fair bit about them. Ideally, whatever information you need that you already know should be pre-filled, with the option to edit fields if appropriate.

Our recent Credit Card Dashboard highlighted that NatWest has added the functionality to apply for a loan or credit card within its mobile banking app. Although the form opens in the mobile browser, not in the app, the form is pre-filled with the customer details – making it far quicker to complete.

Natwest's mobile credit card application

Sadly, the form has not been optimised for mobiles.

2. Add real-time validation

If someone has entered an invalid value (like an email address without the @ sign), why not tell them straight away? Real-time validation means not letting users proceed to the next question if they haven’t answered the question before correctly. As long as you make it clear what people need to do to fix the problem (see point 3) this can save a lot of time and scrolling.

However, be careful how quickly you berate people for getting it wrong. John Gallagher, a Ruby developer based in Scotland, says: “Real-time validation sounds easy to do, but it’s more complex than you’d think. Don’t bug users about a field being invalid before they’ve finished typing and pay attention to the details – that’s what makes or breaks the experience.”

RBS (see screenshot) lets customers apply for Instant Saver accounts within the app, but as soon as you open the form it displays error messages beside each input. Give users a chance!

RBS's mobile savings application

Meanwhile, Virgin Media validates the form as you actually fill it out…

Auto validation on Virgin Media application form

3. Put helpful error messages in the right places

As above: guide your customers to get it right, at the right time. When something goes wrong, how and when do your customers know? Are they given clear instructions on what to do next? Even better, does the tone of voice continue to support your brand or does it sound like a robot?

Gallagher comments, “With real-time validation, make sure you show the error messages next to the field with the errors. If you don’t, you’re forcing the user to scroll around to figure out what went wrong.”

4. Choose the right input

Do you need a checklist, a yes/no toggle or a free-entry text form? The answer is generally: whatever is simplest for your customers. Of course, the type of input you require will also depend on the back-end systems that are collecting and ultimately using the data.

Pete LePage on the Google Developers blog writes, “Users appreciate websites that automatically present number pads for entering phone numbers, or automatically advance fields as they entered them. Look for opportunities to eliminate wasted taps in your forms.”

Make sure you use the correct HTML5 ‘type’ attribute for the data you want to capture – this will drastically improve the experience on mobile. You can also use the ‘datalist’ element to give users suggestions as they type.

5. Avoid placeholder text

The main issue with placeholder text is that it disappears after you start typing. So whether it contains a hint (‘must contain at least 6 characters’) or the actual label (‘password’), users generally won’t see it once they click inside the field. (Even worse is when they have to manually delete the placeholder text to enter the correct information!)
password placeholder as label

An empty field is also visually more helpful when it comes to completing forms. Have I answered all the questions?

It may sound obvious, but do give each field on the form a label that makes sense. Labels can help provide instructions: think ‘Full name’ and ‘Last name’ versus ‘Name’, or ‘6-Digit Password’ versus ‘Password’.

6. Don’t forget automatic return

Most users expect to move to the next question when they hit ‘return’. Make sure that they can.

7. Consider tooltips

These are not always necessary if you have a simple form with great labelling and relevant, helpful error messages, but occasionally a form warrants the inclusion of tooltips to guide people through the trickier parts.

8. Choose the right size for form fields

Change the length of fields to suit the information you expect the user to enter. For fields like postcode, make the field short. Varying the size of the field helps the user by giving them a visual clue about how to fill out the form and gives less of a “wall of boxes” effect.

You can use the HTML5 ‘size’ attribute to vary the length of a field.

9. Indicate progress on long forms

Sometimes you do need to capture a lot of information from people (see point 10). But, since long forms can be really off-putting for customers, a progress bar like this one from Santander can be useful.

Santander mobile form

Santander not only shows app users where they are in the process, they also offer handy tooltips and avoid the dreaded placeholder text.

10. Capture the minimum input

The less information you capture, the more likely users are to complete the form. Only capture information you’re going to use. It’s as simple as that.

Gallagher says, “When people say ‘we’ll use this data later’ they have good intentions. But ‘later’ never comes. No matter how well done, forms are a pain to fill out. Make sure each item you’re asking for is absolutely essential.”

We know that banks have regulations to meet and legislation to follow – it’s not always straightforward to create simple forms. But wherever possible, and within the confines of your legal obligations, painless forms help to create a better customer experience and increase the likelihood of conversions.

Our quarterly dashboards record the changes that we see across the world of digital banking. Subscribe to these and see which banks have launched new application processes across their desktop, mobile and tablet banking, whether that is for a new credit card or a personal loan. For more information, contact us today

Like what you see?

Subscribe to our newsletter to receive a regular summary of our latest articles


Sign Me Up

Fill Details Below

We only use your details to send you information about Mapa.