15 Tips for Perfect Forms
A visual thread
A visual thread
01. Use Labels
Always use labels and keep them visible all the time.
Nothing is more annoying than guessing what an input field is about.
Always use labels and keep them visible all the time.
Nothing is more annoying than guessing what an input field is about.
02. Avoid "Z Pattern"
Try to keep your form fields in a vertical line.
In that way, you help the users scan the form with a quick vertical look and assist them to complete their task (fill the form).
Try to keep your form fields in a vertical line.
In that way, you help the users scan the form with a quick vertical look and assist them to complete their task (fill the form).
03. Place Labels Above Fields
Prefer to put your labels above the form fields to help users scan your form with ease.
Again, horizontal labels create a less scannable form that might confuse/distract users.
Prefer to put your labels above the form fields to help users scan your form with ease.
Again, horizontal labels create a less scannable form that might confuse/distract users.
04. Use Right-Aligned Labels
If you decide to use labels on the left of the form, make sure the labels' text is right-aligned. This makes it easier to scan the page
If you decide to use labels on the left of the form, make sure the labels' text is right-aligned. This makes it easier to scan the page
05. Group Relevant Fields Together
For long forms, structure multiple fields by visually grouping them together in sub-sections.
For long forms, structure multiple fields by visually grouping them together in sub-sections.
06. Respect User Flow
Leverage Fitts's Law by placing your CTA near the end of the user flow.
For forms, users expect to click the "Submit" button once they have filled in all the fields. So place the CTA near the form's end.
More about Fitts's Law 👉
Leverage Fitts's Law by placing your CTA near the end of the user flow.
For forms, users expect to click the "Submit" button once they have filled in all the fields. So place the CTA near the form's end.
More about Fitts's Law 👉
https://twitter.com/d__raptis/status/1389161577224581129
07. Give Space
White-space is always your best design buddy!
Leave enough space between fields to make your form more aesthetically pleasing.
Most users will avoid engaging with a too dense form.
White-space is always your best design buddy!
Leave enough space between fields to make your form more aesthetically pleasing.
Most users will avoid engaging with a too dense form.
08. Avoid Label Repetition
Always try to avoid repeating the same information & state only the required data.
If you have 3 required fields and 1 optional. Notify the user about the optional field ONLY.
If you have 3 optional fields and 1 required. Do the opposite!
Always try to avoid repeating the same information & state only the required data.
If you have 3 required fields and 1 optional. Notify the user about the optional field ONLY.
If you have 3 optional fields and 1 required. Do the opposite!
09. Descriptive Error Messages
Errors happen! It's common and users know that.
But they expect to understand why the error is there & how they can fix it.
Always describe the error's source with details and help people overcome them.
Errors happen! It's common and users know that.
But they expect to understand why the error is there & how they can fix it.
Always describe the error's source with details and help people overcome them.
10. Use Dropdown When They're Necessary
A common rule-of-thumb is to use a dropdown when you have more than 3 options.
For fewer options, go with radio buttons that allow users to see all the options.
A common rule-of-thumb is to use a dropdown when you have more than 3 options.
For fewer options, go with radio buttons that allow users to see all the options.
11. Leverage Placeholders
Placeholder text is a great way to guide people in a form.
Show an example value to demonstrate to them what's the expected format for any filed.
Placeholder text is a great way to guide people in a form.
Show an example value to demonstrate to them what's the expected format for any filed.
12. Use A Single CTA
Don't overwhelm users with multiple CTA buttons! Keep it simple and use a single CTA.
If you need more CTA buttons, always try to incorporate them as secondary buttons. Less prominent than your main CTA.
Don't overwhelm users with multiple CTA buttons! Keep it simple and use a single CTA.
If you need more CTA buttons, always try to incorporate them as secondary buttons. Less prominent than your main CTA.
13. Actionable CTA Copy
Avoid words like submit, send, next, go
Use actionable words that highlight the upcoming action. Some examples:
• For a signup form: "Create Your Account"
• For a waitlist form: "Join 1000+ Developers"
• For a feedback form: "Send Us Your Feedback"
Avoid words like submit, send, next, go
Use actionable words that highlight the upcoming action. Some examples:
• For a signup form: "Create Your Account"
• For a waitlist form: "Join 1000+ Developers"
• For a feedback form: "Send Us Your Feedback"
14. Choose The Right Input Type
Don't use text fields for everything!
Adapt fields to their content. There're many content types that have specific requirements and need special treatment. Some examples:
• Phone number
• Credit Cards
• URLs
• Countries
• Dates
• Colors
Don't use text fields for everything!
Adapt fields to their content. There're many content types that have specific requirements and need special treatment. Some examples:
• Phone number
• Credit Cards
• URLs
• Countries
• Dates
• Colors
15. Highlight Limitations
Some fields might have limitations (eg. character limit, number range, date range)
Make users aware of limitations beforehand to prevent their frustration.
Some fields might have limitations (eg. character limit, number range, date range)
Make users aware of limitations beforehand to prevent their frustration.
If you love these UI tips, you can...
Follow me on Twitter to learn how to design better interfaces with practical visual tips
And/Or...
Join my fresh design newsletter where I post similar tips & in-depth landing page teardowns 👇
learnuidesign.eo.page/jim
Follow me on Twitter to learn how to design better interfaces with practical visual tips
And/Or...
Join my fresh design newsletter where I post similar tips & in-depth landing page teardowns 👇
learnuidesign.eo.page/jim
• • •
Missing some Tweet in this thread? You can try to
force a refresh
