.svg){kind=small}
This article is part of a series on optimizing specific form fields. Links to other articles in the series are below:
Optimizing the Phone Number Field
Put simply, a failed submission is when someone makes it through your form or checkout, having given you all their precious personal information, clicks submit but doesn’t manage to make it to the next stage of the process.
This is like leaving money on the table - these people want to spend / register with you. They’ve gone through the effort of filling out your form but they can't progress because something’s gone wrong.
It’s not an uncommon problem. When we look at Zuko data for forms, we often see that the submit button has the highest abandonment volume and, frequently, the highest abandonment rate as well.
This article examines issues around the submit button that may cause user drop-out. It looks at how to identify, diagnose and fix those issues to increase conversion (you can read an article on more general form abandonment here).
The first thing to note is that high abandonment rates on the submit button may not indicate a problem with the button itself but reveal issues with the experience of the form prior to that point. There’s more on that later but to begin with we’ll look at some of the possibilities you can check and fix to get the submit button UX as smooth as possible.
Hopefully, with good QA this isn’t likely, but over the years we’ve seen many examples of broken submit buttons kiboshing any chance of the user submitting the form successfully. Here are some of the things to look out for:
Submit is too slow
Is your submission just taking too long? Maybe the user is rage clicking multiple times which is causing the form to submit more than once and possibly gumming up the process.
The submit trigger is resetting fields
Not strictly a purely technical matter but close enough. Some forms reset field entry (i.e. delete what has previously been inputted) if the submit is not successful due to an error. Needless to say, this can be very frustrating for the user if their hard work is undone due to one single error (as this skit on forms by the British comedian Michael McIntyre aptly demonstrates).
The button is just broken
Sometimes things just break - your button is no longer working and won’t submit the form.
So how do you discover and diagnose these types of issues? Some level of back-end error tracking through a provider like Sentry can be helpful or you can use the alerting functionality in Zuko to notify you when there is a sudden drop-off in submissions so you can go and check if there is a problem.
The way you design your form can sometimes have a negative impact on the user experience. That funky looking colour scheme that looked great in the meeting may be causing confusion and abandonment in the real world. Keep your eyes open for issues like these:
The submit button is difficult to see or click
If the user can’t see the submit button they can’t click it!
You need to make sure that it is obvious where to click to submit. Firstly, you need to ensure the button is properly sized - a minimum of 44px to make it properly accessible and tappable on the mobile format.
Then, take a look at the colours and contrast of the background, button and text and ensure they are clearly distinguishable and visible. This guide is a good place to start.
Finally, make sure that your button looks like a button. Jakob’s law, or the law of familiarity, infers that doing something different to other websites that the user is not used to can lead to confusion. Now is not the time to be original. Don’t try to be too smart with your button. Don’t think that using a text link would be helpful and definitely don’t opt for a ghost button that can hardly be seen (this case study cited 20% fewer clicks on a ghost button Vs a solid button).
The CTA is unclear
Are you labelling your submit button with dull text like “Submit”? You may be missing a trick. If you change that to what the user will accomplish by submitting the form you’ll make things much clearer, especially helpful for those using screen readers. Consider CTA’s such as:
Are you running false validation?
Inline validation is great for reducing errors and eliminating frustration but if you do it wrong you can make things worse.
To be specific, are you running “false” client side validation on the field but then validating server side on submit? This can result in situations where the user completes an email field and gets a positive green tick because they have followed the formatting rules. However, on submit the validation determines that an account exists with that email address and rejects the input.
Set-ups like these can bring confusion and frustration into the process. If you are going to validate server side do it at the time of input, not later when the user thinks they have successfully completed the field.
Is your submit button in an inactive state?
Some form designers like to keep their submit button in an “inactive state” until all required fields have been completed - like the example on the left here:
This pattern can be detrimental to UX, leading to frustration and potential abandonment for these reasons:
Are you unambiguously confirming the submission?
When a user submits successfully you need to tell them that. Use a clear thank you message, either on the page or on a redirect, so they know they are done. Don’t tuck the message away under the fold or right at the top of the form so they can’t see it. Lack of clarity will lead to the user hammering the submit button, possibly blasting your back end with multiple submissions.
The dreaded time out
If you have a time limit on your form you are likely to have some users who make it to the submit but are thwarted when they get the fateful message that they have taken too long. There are few things guaranteed to anger a prospective customer more than that.
If you absolutely must use a timer, ensure that it is long enough to cover the vast majority of cases and give them a warning before you do it. Also, you’d better save the users’ inputs so they don’t have to go through the whole rigmarole again.
In the vast majority of cases, if your data shows a lot of friction around the submit button it probably isn’t a technical issue or UI problem (although you should look at the above possibilities to rule them out). Instead, it is likely a reflection of the fact that most forms run a validation check on submit.
It is at this point that users will be confronted by a sea of red error messages that they have to try and fix. In many cases they won't be able or willing to do that and will quit after one last tap of the submit button.
The problem essentially is to do with some of the fields before the submit button.
So how do you know if this is happening and how do you diagnose where the real issues are?
The best way is to delve deeper into your form analytics tool. The first thing you could look at is which error messages are triggering at the point of submission so you have an idea of which fields are being missed or completed invalidly.
One other option is, if your tool offers a field flow capability (which, of course, we have built into Zuko), you will be able to isolate the segment of abandoners who have hit the submit button and analyse what they are trying to do next.
Take a look at the example below. It shows what happens immediately after people in the “abandoners” segment click ‘Submit’.
This tells us that 42% of people are quitting straight after they submit. However, we can also see sizable groups of users doing something else. 19% of them jump back to the password field and 15% to the phone number field, presumably to try and fix the error they’ve just been told about.
This method allows us to identify the fields that users are trying, and failing, to complete after they have attempted to submit.
How do you prevent this issue from happening? An effective way is to use live inline validation. Trigger error messages immediately after the user has input their answer and moved to the next field. Don’t wait until they reach the end of the form before telling them what they have done wrong. This will lead to much lower frustration levels at the submit stage,
Of course, an even better way is to help make sure they don’t make any errors in the first place. Some common things you can do are:
If you’d like help with your form design feel free to contact us or download our Big Guide to Form Optimization and Analytics.
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
