Yesterday I wrote about Best-in-Class e-commerce Research Study 2018 and it got a lot of engagement.

It showed 12 examples of mobile and desktop elements used by the best e-commerce businesses.

To follow it up, today I have an article about helping you with mobile forms.

Ideally, you wouldn’t need to fill out the forms at all, especially on mobile. But it’s not possible yet. So while we still have to do it, let’s make it as easy as possible.

The 5 mobile form design principles and examples below will help you with user experience and winning market.

1. Logical clarity

2. Try to use a single column design

3. Reduce input

Minimize the number of input fields to make your forms load faster, especially when you ask the user for a lot of information. Keep the form as short as possible.

If you can’t reduce the number of things you ask for, at least reduce the number of form fields to fill. Replace dropdown date selections with calendars etc.

4. Provide suitable input methods

Provide different keyboards, such as when input account, password, fill in the mailbox, enter the nickname, etc.. That will minimize input errors, help users quickly complete the fill.

5. Avoid using labels as placeholders

There is a design pattern, it uses a label as a placeholder in the input box and disappears automatically when the user clicks on the input. This kind of design is simple, but it’s easy for users to forget what fields they need to enter when they type, and it also creates problems.

I would never do it on mobile.

Conclusion

Whether it is to fill in a mobile form or a web form, the user’s hesitation is inevitable. An excellent form design should be highly targeted, have thoughtful details and experience, perseverance in improvement and adjustment, efficient and quick submission, and smooth processes.

5 Most Used Mobile Form Design Principles and Examples for Learning

PS. And above all, avoid confusion at all costs. The famous “Don’t make me think”.