Learn how to avoid common mistakes when designing forms.
18 cards with practical examples 👇
Try to avoid multi column layouts.
It's easier for your eyes to go through the form if it's a one-column layout.
This layout is also acceptable.
But the labels should be placed next to inputs to avoid Z-pattern.
You can put related inputs in the same row.
It not multiple-columns. It's like having one input that we break into separate.
So it's not bad, on the contrary, it's considered a good practice.
If you have a large form, make input sections.
Also, check out a very nice pattern from @steveschoger
There is no rule that you should always take all the available space on the screen.
Use reasonable width for inputs. This will help users understand what kind of data you ask from them.
Developers tend to hide hints under question marks.
Sometimes it's alright. But if possible, show the hints right away.
Don't ask users to make additional clicks/hovers to see what you've hidden under the icons.
Password inputs often have a lot of rules.
Show them right away and tell users how well they do.
A nice example of this is @Mailchimp sign up form login.mailchimp.com/signup/
Don't use placeholders as labels 🙅♂️
As soon as users start typing they disappear. And users should remember what the field is.
Plus after they've completed the form, they cannot check if they've filled it correctly.
Minimize cognitive load!
nngroup.com/articles/minim…
Show validation errors near the inputs they belong to.
Don't put it somewhere at the bottom, or at the top.
Otherwise, users will have to match an error with its corresponding input.
Also, check out WHEN to show validation errors in this tweet:
If you have a dropdown with up to 5-7 options, it'd be better to show them right away.
Pros:
🔸Reduce the number of clicks
🔸Users will see all available options right away
Don't use default file inputs.
They're ugly 🤮
Make your labels clear and succinct. Avoid unnecessary redundancy.
Validation is cool, but you can help users avoid making mistakes.
Related thread:
Consider positive feedback as well as negative. Especially for complex forms.
If you have a show/hid password icon, use a separate space for it.
Otherwise, it might interfere with password managers.
Don't ask users to repeat their passwords.
🔸Provide show/hide password button
🔸If they made a mistake, you should have the reset password by email feature
It's a good practice if you explain to users why do you ask them all that information.
This will increase the chance they'll provide the info.
If your form is complex, don't be afraid to make a wizard out of it.
It'd better have the form divided into separate pages, rather than showing all the inputs at once.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.