7 rules for a better form design 🤘
Courtesy of @ux.ale
💡Forms are the one thing no one wants to fill, so the slightest complication can reduce your conversion rate by a huge amount.
⚠️ Things to remember:
🤖 Your users are not robots, make the placeholders, labels and feedback messages friendly. «An error was found < Oops, something went wrong».
🗒 Don’t ask for information you don’t need just because you want it. The bigger the form, the lower your conversion rate. Some times by asking «extra» information, you loose a client.
⚖ If you need lots of information from the user, try spreading out your form in different stages of the user journey. Example: Name and Email at the beginning, Phone Number and Address at checkout.
🚫DO NOT make a sign up mandatory for someone trying to use your services. Nothing is more annoying than trying to check if an app or web is useful or not and realizing that you can’t do it unless you create an account first. Let the users browse through your services and only ask them the information you need once they are going to use it.
🧠 Hope this helps!
Top-aligned labels require a single eye fixation to take in both input label & field, reducing completion times.
Multiple columns disrupt a user’s vertical momentum. Keep one field on the top of the other.
Placeholder not Label
Avoid using placeholder text as labels. Makes it harder to remember what information belongs in a field.
Give the user an example of what information goes on in that specific field. It’s a friendly way to assist them.
Highlight active fields to inform users that the field is selected and that they can proceed to fill it out.
The length of the field should show you the length of the answer. This brings clarity on what type of information is required.
Resist using dropdowns on small forms, this way all options can easily be seen and reduces interaction steps.
Bonus — 4 tools that may be useful in your designer way:
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.