.svg){kind=small}
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!
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.
On the actual content:
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.
Side Note: This error message lacks clarity and needs to be much more user friendly
Whilst error message text is shown in red, the corresponding input and labels the error message relates to are not highlighted.
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.
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.
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.
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?
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:
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.
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.
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:
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.
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:
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.
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?
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)
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
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
