by anthony on 06/02/15 at 12:58 pm
Where you place your mobile form buttons can affect task completion and efficiency. If they’re not in a place where users expect to find them, they could abandon their task and your form.
Even spending a few extra seconds looking for the button can frustrate them and cause them to hit the back button. As soon as they finish filling out the form, you should have the button right in front of them.
Many mobile sites get this wrong when they place their form buttons in the action bar (i.e. navigation bar). Research shows that users often miss submit buttons placed in the action bar (source). It also shows that they miss save buttons in the action bar and exit forms without saving their settings.
Unexpected Submit Buttons
The reason users miss action bar submit buttons is due to where they fixate their eyes when they complete the form. As they fill out the form, their eyes move from the top of the page to the bottom.
When they complete it, their eyes are at the bottom of the page. The absence of a submit button leaves them confused and uncertain of how to complete the form.
Most users don’t expect to find the submit button in the action bar. It’s an inconvenient place because it forces them to move their eyes all the way back up to the top-right corner of the page.
It feels counterintuitive because users were progressing in a top to bottom direction to complete the form. Moving back up to the action bar feels like going in reverse. It’s not what users expect, and it’s not where you should put the submit button.
Fixing Your Submit Button
Users expect to find the submit button at the bottom of the page when they finish filling out the form. But placing the button there could cause them to lose sight of it if they scroll through the form.
Users might scroll back up to check or change their field input. When they do, they’ll lose visibility of the button and have to scroll all the way down to look for it.
To prevent the extra work, place your submit button in a fixed footer so that it is has persistent visibility. This allows users to submit the form as soon as they’re ready.
Don’t give users extra work when they finish filling out a form. If they have to move their eyes or finger to find or scroll to the submit button, your mobile form isn’t efficient enough.
Unclear Save Buttons
What causes users to exit forms without saving their settings are the unclear action bar buttons. The action bar contains the back button, page title and save button. But the save button is the hardest to distinguish.
After users select their settings, they tend to tap the back button because they don’t realize they have to save. The save button is the primary action of the task, but it’s hidden as a gray check icon in the corner.
Users assume they saved their settings on selection because nothing else tells them otherwise. Not only that, but the page title also looks like the call-to-action when placed next to the back button. The lack of clarity in the action bar is what causes user error.
Fixing Your Save Buttons
Instead of using the action bar for your save buttons, use a fixed modal form. This gives users a clear save and cancel button without the confusing back button.
The cancel button functions as a back button. But the difference is that it tells users that they need to save their settings before they exit, or they’ll lose them. The save button has a label and is much more visible in size and color.
The only thing that should remain in the action bar is the page title describing the task. The save and cancel button should move to a fixed footer. This gives them persistent visibility so that users can complete the form quick and easy.
The action bar is a good place for buttons that navigate pages, but not for ones that complete tasks. Placing your mobile form buttons in a fixed footer makes them hard to miss and meets user expectations.
Form button placement has a big impact on how users complete tasks. Don’t stuff every button in the action bar just because you’re designing a mobile site. Think about task completion and efficiency, and put your form buttons where they belong.