UX design in ecommerce is largely about reducing the impact of any points of friction and making the experience as pleasurable as possible for your users.
One aspect that is ripe for causing friction is form design, as it’s quite natural for users to find the process tedious.
Therefore site owners have to take care to make forms as simple as possible for their users and reduce any unnecessary barriers or the need to re-enter information.
This process is even more important for mobile commerce as the small screen size makes form filling quite fiddly and increases the likelihood of site abandonment.
Luckily there are a few simple rules that designers can follow to limit user frustration, and we’ve previously highlighted how these apply to desktop.
However the rules have to be adapted for mobile, so here are 10 simple tips for improving the UX on mobile forms.
And for more information on this topic, read our post looking at how top retailers deal with mobile checkouts…
Align labels vertically
Due to the limited space on mobile screens, horizontal label alignment should be avoided as it can cause a number of UX issues.
In order to fit a label beside a form field you have to reduce the size of both elements, which causes the design to appear cluttered and makes the fields difficult to click.
The difference is highlighted in these forms from Debenhams and New Look, with the former far easier to use.
Use large fields
It greatly improves the UX if your users are able to easily click on the forms without accidentally pressing the wrong page element. Often brands will design large CTAs but fail to give the same screen space to their form fields, when in reality both need to be simple to click.
If the form requires the user’s location, such as a setting a default retail outlet, then GPS makes the process incredibly simple.
Thanks to Google Maps nearly all smartphone owners will have used GPS at some point, so it makes sense to use it as a shortcut where relevant.
Make calls-to-action as large as possible
This is seems like an obvious point and yet so many retailers still expect their users to press a CTA the size of a pinhead in order to submit the form.
I’ve covered this topic in more detail in a post detailing eight tips for designing mobile CTAs, but the main points to note are that CTAs should:
- Be at least 44×44 pixels.
- Have plenty of white space around them to prevent erroneous clicks.
- Use a colour that’s distinct from the rest of the page elements.
Following these simple rules makes it far easier for users to submit forms and greatly reduces the potential for any friction. For example, just check out the difference between Topshop and Walmart…
Avoid optional fields
The overall strategy for mobile form design should be to strip out any unnecessary elements and simplify the process for your users.
Therefore it’s a good idea to do away with any optional fields, as unless it’s compulsory then nobody is going to waste their time filling it in anyway.
Condense into a single page if possible
Again this ties in with the previous point, but some of the best mobile forms that I’ve come across have been condensed down into a single screen.
This both allays any concerns that the form is going to take ages to fill in and also reduces the chances that slow 3G signal will slow the process down between pages.
Office Depot is a great example of this as its guest checkout only requires the card details, address, phone number and an email address before you can confirm the payment. This makes the process feel extremely short and should help reduce the amount of dropouts.
Simplify the design
When designing a mobile form sites should consider what the user will be trying to achieve, ideally based on behavioural data.
It’s likely that mobile users will have different aims than desktop visitors, so it might be feasible to strip out certain functions in order to simplify the design.
For example, Expedia’s mobile flight search tool has very few fields compared to the desktop version as mobile users are potentially less likely to need all the different filtering options at the initial search phase.
Expedia desktop version
Expedia mobile version
Use a progress bar
If it’s not possible to reduce a form to one screen then it’s a good idea to use a progress bar to inform users how many pages they are going to have to click through.
People don’t like the unknown and users are less likely to become impatient if they know how many stages there are in the process.
Give users the right tools for the job
The best example of this is when filling in fields that require numerals, such as telephone numbers, as sites should show the user the numeric keypad so that they can easily tap in the digits.
In general sites still display the normal keypad for telephone numbers, which means the user has too press an extra button to find the small numeric keys. This is another rather obvious UX point of which surprisingly few site owners take notice.
To give a different example, H&M’s otherwise excellent app presents you with a text keypad when entering your date of birth, when in fact a numerical keypad or even a dropdown menu would be of more use.
In contrast, when searching for a date on Expedia’s site it gives you this handy calendar view. Obviously these are different use cases but it demonstrates the fact that you need to give users the best tools for the task in hand.
Security is a major concern on mobile so it’s important to mask passwords in case somebody is peering over the user’s shoulder, however this does cause problems when people are unable decipher what they’ve entered and might be unsure if they’ve managed to press the correct keys.
In order to get the best of both worlds many sites now display the last character before altering it to a bullet point after a short delay.