Zuko Blog

Form Optimization Teardown: Personal Loans

Personal Loan Forms: Have we moved on from the 1990s?

There's a whole heap of advice on how to optimize the UX and conversion of your form out there.

Like high school science, though, just looking at the theory can be a little dull. It's only when you throw the (metaphorical) magnesium into the water to create the explosion that you really start to understand its value in real life.

So, we thought we'd try out our optimization skills on a live form to show how you form analysis techniques can practically improve your forms.

For the first tear-down in this semi-regular series, we decided to take the form of a global brand. Let us take you on the user experience of applying for a personal loan quote from HSBC, a worldwide bank with 

Whilst not wishing to pick on HSBC, the overall form experience did remind us of the past. Do you remember the time when you had to listen to a modem screeching at you as it tortured itself trying to connect to the internet? Perhaps even the era of Netscape Communicator, where installing it required you to borrow no less than 18 floppy discs from a mate who had managed to download it on the pinnacle of bandwidth envy with a 56k modem whilst you sobbed gently waiting for your 28k modem to even boot up? We do. And, whilst the 90’s did have some high points (such as genuinely thinking that pagers were going to become a thing, and playing Snake on our Nokia phones) it’s probably not a time we’d want to return to - especially when it comes to filling out forms online.

Are you ready to time - travel?

Brace yourself, it’s gonna be a bumpy ride as we pick out the good, the bad and the ugly of HSBC's form!

Blurb Page

We start with the blurb page which is always a good idea to set user expectations before they embark on the form journey. And here we are straight into 1991. The application form is contained within an iframe on the page and we have to wonder what optimizely is doing… Nonetheless, an iframe implementation isn’t always the better option especially when you consider the possible security threats of their usage (clickjacking for example).  But as this isn’t a security post we’ll move on in the hope that HSBC have done their very bestest to mitigate any security problems of this type of implementation.

HSBC Blurb Code
HSBC Loan Form Blurb

On the actual content:

The Good and the Bad

Good
Bad

Error Handling

HSBC Error Handling

We can’t fault the SIZE of the error message, but what is a bit rubbish is the fact that it appears at the very top of the page which isn’t where the actual problem is. In this example, the checkbox for the privacy notice has not been checked and it is THIS checkbox and associated copy that should be directly highlighted to the user in combination with the top error message.

Loan Details

HSBC Loan Details Form Image

The Good and the Bad

Good
Bad

Side Note: This error message lacks clarity and needs to be much more user friendly

Unfriendly Loan Form Error Message

Whilst error message text is shown in red, the corresponding input and labels the error message relates to are not highlighted.

Bad Error Message - HSBC

Your Details

HSBC Your Details Loan Page

The Good and the Bad

Good
Bad
HSBC Dropdown Menu

Date of birth entry is OK. At least you don’t have to scroll to enter your YYYY. However, eye-tracking research shows that text boxes are more efficient than drop downs for the DOB field so they should be used instead of the current execution.

Number of dependants. Goodness, that’s a massive input box, we wonder what sort of numbers they’re expecting here? Not to worry though, as actually when you start typing, the most you can enter is a 2 digit number, phew! We were wondering if they had potential guinness world record holders applying… It does beg the question, however, why the input needs to be so long, given the constraints applied to it. Input length should be appropriate to the data expected AND if a constraint is in place, it should be noted near the input.

HSBC Dependents box

Current address… The postcode look up doesn’t support partial postcode entry, just states that it’s invalid, even if you get as far as MOST of it being entered. It should be able to provide a list of suggestions with this much information, it’s just that the look up isn’t as clever as it should be. Note also there is no quick link to enter your address manually if you’d rather, or you know your postcode is a pig or it just comes up as invalid. 


HSBC Postcode lookup

To do that, you have to enter some sort of postcode to get the option to select “address not listed” at which point you can select “address not listed”. Not that the instructions state that, they suggest you just enter your address manually using some magic part of the form that is currently invisible.

HSBC Address Lookup

Well done form warrior for getting this far, now you can select not listed to enter your address manually. Far more work than it ever needed to be.

Once you have selected an address, the form then pre-populates the address information which is helpful. But can you spot what else has sneaked in here?

HSBC Address Field

On first view you might not notice a set of further questions being asked - the only indicator is some red error messaging about valid dates which tells the user they’ve done something wrong already (or something has gone wrong with the address selection) when they’ve only just been presented a whole load of new information to process. In these situations, visually chunking information for processing can help so stuff doesn’t get missed - something as simple as a horizontal divider between the address inputs and the subsequent questions below could make a massive improvement here to indicate that there is more to do. Not showing an error message straight away would also help.

However, if you get your email address wrong, it’s ok! Because there is a (un)helpful error message to tell you just that:

HSBC Email Error Message

There are many UX patterns you can use here to provide guidance (and even auto-suggestions) to fixing email addresses so they’re valid. Sadly, not today though.

Then just as you thought you were done with addresses, and hit continue expecting a new screen, BAM! You’re hit with more information requests on the same screen. Urgh, it’s exhausting. Yes, information about income probably is expected when applying for a loan, but this could easily have been put as a new “section” to break down the cognitive load for the user - with the expectation set in the progress bar that it’s something that will be need to be done, rather than springing it on the user like a scary clown at a birthday party for 3 year olds. 


HSBC Employment Details


Financials… where to start?! At the beginning I guess.

Employment status is always a tricky one to categorise. What is a key/part time - are they the same thing? What if you’re not a housewife / husband but a “partner” that is a homemaker? Receiving pension… but you’ve not retired from work? What if you’re part time employed? Users shouldn’t have to be deciphering categories here - make them clear! 

If you’re employed though, you do get the fun of categorising your employers business. These always feel like a multiple choice test when you’ve not revised and you’re just selecting something for the sake of selecting it. A bit like a pot luck dinner, you could say. What’s worse if that you happen to think your employer is “Financial A or B” then you need to find the help link. There is a help link, sure, but again this lacks any affordance whatsoever so good luck spotting it and even better look figuring out what’s what when the link opens.


HSBC Employment List
HSBC Financial A + Financial B List


Figured out your employer's business yet? Lucky you, now you can decide what occupation YOU have - what if you don’t fit into ANY of these particular boxes:


HSBC Job Picker

It doesn't matter what your employer's business is, the same list of occupations are shown for all of them. So if your employer is Finance A for example, you’ll see the same options as an employer who runs a quarrying operation. 


HSBC Income Details

Ah, a lovely long input again! It’d be lovely to fill it to its entirety wouldn’t it? Never fear though, you can only enter a 6 digit number here but don’t worry about specifying a currency because it’s a mystery! And of course no indication is given that a forced limit on data entry is in place.


Don’t worry though, if you mess up this field you get another (un)helpful error message:

HSBC Income Error Message

At least it tells you the currency - and a reminder you should only enter whole pounds. Not half pounds or quarter pounds, just the full ones. This is not a form for accuracy or decimals it appears. What would have been nice is consistency in terminology - total annual income (before tax) is your gross annual income - they are the same thing. So sticking to the same terminology would have been the better option rather than cracking out the financial term thesaurus. 


HSBC How often paid

Undefined? What does that mean exactly? You get paid once in a blue moon (freelancers, we hear ya!)? Isn’t 4 weekly the same as monthly pretty much? 

The Result

HSBC LOan Quote Rejection

It’s worth noting here that for the purposes of this audit we were never going to fill in factual data (no one needs an unnecessary credit check!) but remember, not all users are going to get that fairytale experience of a successful application. It’s always helpful to see what happens when things go wrong, and how you can recover the situation for the user (and let us tell you, 9 times out of 10 this is a woefully neglected user journey on most sites)

The Good and the Bad

Good

Bad

Final Score

You may wonder why we’ve done an exposé on what you’re probably thinking is an exception to the rule when it comes to form design, experience and interaction. Who could possibly conceive such a terrible online form in 2022? Well, here’s the thing. It probably wasn’t built this year, but it’s been left to fossilise in the depths of the underbelly of this particular website and long since forgotten, despite it being the primary method of applying for a personal loan on a major financial institute’s website.

The fact is though, these sorts of forms (or forms that follow similar patterns, layout, logic etc) are more common than you’d think. We’d know, we get to analyse thousands of forms every year and we’ve seen some corkers. So many businesses let their forms fester to the point they become a liability

So what’s the takeaway?

  1. Don’t neglect your forms - especially if they are your lead and conversion drivers!
  2. Monitor your forms - figure out where users are failing. Then fix the form and help your users fix problems with data entry when they encounter such a situation
  3. No excuses - there are reams of great content out there to help you figure out the best ways to present forms and interaction patterns to follow.
  4. Content and copy is just as important as the structural elements of a form. Remember, you’re dealing with fellow humans - treat them as you’d want to be treated yourself.
  5. We still want a DeLorean. And a hoverboard.

Looking to improve your form conversion?

Submit your form to get a free health check showing you:
  • Likely friction points leading to abandonment
  • Form elements contributing positively
  • Other areas for UX improvement
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

We wrote the book on form optimization!

"The best book on form design ever written - 80 pages of PURE GOLD"
Craig Sullivan, CEO, Optimise or Die
DOWNLOAD THE EBOOK
(No email needed)

More from our blog:

Video Workshop: eCommerce Checkout Teardown
We review an eCommerce checkout, looking at the good, the bad and the ugly
Video Workshop: Fixing your forms
Check your form for these common UX issues that are causing abandonment
How to Break Your Online Form and Why It’s Good for Business
Uncover UX issues by behaving badly on your form

Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.

PRODUCT TOUR
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io