WE CREATE BRANDS PEOPLE L♥VE
Share

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 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  Top-aligned labels require a single eye fixation to take in both input label & field, reducing completion times.

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.

Single Column

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.

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.

Placeholders

Give the user an example of what information goes on in 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.

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.

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.

Avoid Dropdowns

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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Leave a Reply