How to design better forms. Part 1

Tegra - November 14, 2019 - 0 comments

How to design better forms. Part 1

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 are 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  Top-aligned labels require a single eye fixation to take in both input label & field, reducing completion times.
Single Column  Multiple columns disrupt a users vertical momentum. Keep one field on top of the other.
Placeholder not Label  Avoid using placeholder text as labels. Makes it harder to remember what information belongs in a field.
 Placeholders  Give the user an example on what information goes on that specific field. It's a friendly way to assist them.
Active Fields  Highlight active fields to inform users that the field is selected and that they can proceed to fill it out.
Field Length  The length of the field should show you the length of the answer. This brings clarity on what type of information is required.
Avoid Dropdowns  Resist on using dropdowns on small forms, this way all options can easily be seen and reduces interaction steps.
Thank you for your support!  If you found value in this post, share it!

Bonus — 4 tools that may be useful in your designer way:

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.

Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

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.

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *