How to save time to your users and to not lose them

If you are designing a ALWAYS remember: one user out of four leaves the process because of the high number of to fill. This article would help you giving on how to your checkout and not loose users.

Detect “City” from “ZIP Code”

Once the user inputs his ZIP Code, you can easily detect her City from it.

Use Google Geolocation API

Using Google Geolocation API you can reduce from five (Address, City, ZIP Code, State and Country) to one (Address) the forms to fill.
If you see some errors you can tap on “Edit” and BOOM! The forms are ready to be edited.

Get all the information from the Postal Code (UK)

This is for our British friends. Starting from the Postal Code you can get a list of all the addresses related to it.
This list could be veeeery long so, on Mobile, it’s better to keep the browser default style in order to keep it more user friendly.

Suggest the most used E-Mail domains on your e-commerce

You can save time to the user displaying the 5 most used e-mail domains. The user starts typing her e-mail and when she input the @ the list appears.

Show/Hide password

This tip saves time to the user because we don’t need to force her to input the password twice.
She can input her password once and then tap on “Show” to see if it is correct. Then she can go back to the previous state by tapping on “hide”.

Input manually dates or numbers that you remember well

There are some dates or numbers that we remember well (date of birth or the expiration date of our credit card). It’s better to let the user input those dates manually instead of slowing her down forcing to choose between n options in a dropdown.
Even better it would be if we display a / (slash) after the user inputs the two digits of the Month and of the Day. This would speed up the form filling even more.

Merge “First name” and “Last name” to “Full name”

Unless you have a valid reason for having your first and last name divided, please merge them to a unique form.

Collapse optional forms

Optional forms could be collapsed in order to get more space in the page.
If you need to fill even those forms you tap on them and do the job.

Use the right keyboard

Always remember to use the right keyboard on your checkout. e.g. If the user is inputting her “Date of birth” it’s better to show a numeric keyboard. If the user is inputting her “E-Mail Address” it’s better to show a keyboard with the @ ready to be used.

BONUS: All you need to know about forms

It’s a very famous article and probably you already know it but if you didn’t, you MUST read Andrew Coyle ‘s Design better forms. This was my bible during the checkout redesign I did and it is still a great starting point when you must design forms.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here