Perfect form

As they say, frontend and mobile developers mostly do two things:
1. Transferring JSON back and forth
2. Creating forms
While transferring JSON is a pretty trivial task, form creation can be challenging from a UX perspective.

I do see poor forms quite often. How do I know that they are flawed? I simply don't want to fill them out as I'm too lazy. And a mystery of the millennium remains unsolved:

"Do you really want me to google my postal code if I've already filled out my full address? Isn't there any "super-advanced" service that can match them?"

Here are some tips for better mobile form UX:
- It should be short and simple
As I said, when I see a form, I estimate my time and effort to fill it. I run away or become unhappy if it exceeds some pretty low value. Leave only necessary fields or if you actually need all this data from a user, make sure you don't show all the fields at once*.
- Automatic focus switching
When a user is done with one input and presses "okay" on the keyboard, switch focus to the next field, so he doesn't need to scroll down and explicitly tap on it.
- Dynamic validation
The most crucial thing. Validate fields and give feedback in real-time, not when the user hits submit button. But don't do it after every single modification. Make a small debounce. 500-1000 ms after the user stopped typing or moved to the next field is enough.
In 2009, Luke Wroblewski tested inline validation against post-submission validation and found the following results for the inline version:
✔️ 22% increase in success rate
✔️ 22% decrease in errors made
✔️ 31% increase in satisfaction rating
✔️ 42% decrease in completion times
- Matching keyboard type
For example, if a user is expected to type his phone number, display the numeric keypad.
- Provide placeholders and masked inputs
Sometimes when I fill out some complicated form, I don't know know how my tracking number should look like. Then I see a placeholder like "EZ987654321", which creates an "Aha!" moment, so I look for a similar-looking value in the receipt and copy-paste it.
The most popular use-case for masked input is a phone number input. It automatically formats the data you provide. You type 79998887766 or just 9998887766, you see +7 (999) 888-77-66.
- Avoid dropdowns
It's just not convenient on mobile devices.
- Do not clear the form on submit if some field is invalid
I'm too lazy to do it all over again
- Autocomplete
I'm too lazy to fill in my card details every time I want to buy something on the internet. This example suits well for web apps.
- Use biometrics instead of a login form
I'm too lazy to type my email and password every time to check my balance. But it's almost effortless to put my finger on the button.
- Disable the button during the submission process
By doing this, you prevent users from accidentally tapping the button again which creates duplicate submissions. Moreover, you give instant feedback: "We've received your submission".

Here is a great thorough article on this theme, where the author provides more useful tips with visual examples.

*Multi-step forms

#dev #ux