WE CREATE BRANDS PEOPLE L♥VE
Share

How to Design Forms for UI Design


Tegra - June 20, 2020 - 0 comments

How to Design Forms for UI Design

How to Design Forms for UI Design ✨

Courtesy of @leeohgonzalez

🖊 Forms are one of the most vital components of product digital design. ⠀

Whether it’s a check-box or sign-up flow, you should be optimizing the primary goal of each form & remove any possible friction.⠀

UX/UI designers often have to design various applications of forms such as contact, surveys, requests, reservations, etc.⠀

In this post, we will cover the following topics: ⠀

1️⃣ One Column⠀
2️⃣ Top Align Titles⠀
3️⃣ Show All Selections⠀
4️⃣ Inline Validation⠀
5️⃣ Color Primary Actions⠀
6️⃣ Organizing Checkboxes⠀

Form Design  Forms are one of the most vital components of digital design. Whether it's a check-box or sign-up flow, you should be optimizing the primary goal of each form & remove any possible friction. 
Are you constantly struggling to fill out any form? Here are some tips when designing forms.

Form Design

Forms are one of the most vital components of digital design. Whether it’s a check-box or sign-up flow, you should be optimizing the primary goal of each form & remove any possible friction.
Are you constantly struggling to fill out any form? Here are some tips when designing forms.

One Column  Users complete single column forms at a much higher rate since they only have to scan in one direction compared to two. They also translate better on mobile where a more vertical centered design is needed. Simplify your forms always.

One Column

Users complete single column forms at a much higher rate since they only have to scan in one direction compared to two. They also translate better on mobile where a more vertical centered design is needed. Simplify your forms always.

Top Align Titles  Similar to the one column format, users complete top aligned title forms at a much higher rate than left aligned titles. Top down is more a natural viewing experience for the users & creates more space for input fields. Left aligned input fields have to be shortened because of titles.

Top Align Titles

Similar to the one column format, users complete top aligned title forms at a much higher rate than left aligned titles. Top down is more a natural viewing experience for the users & creates more space for input fields. Left aligned input fields have to be shortened because of titles.

Show All Selections  It's important to remove all extra steps such as clicking on a dropdown to view all options. If there are over 5 options, consider using a dropdown with contextual text to let users know the amount of options & reduce clutter.

Show All Selections

It’s important to remove all extra steps such as clicking on a dropdown to view all options. If there are over 5 options, consider using a dropdown with contextual text to let users know the amount of options & reduce clutter.

Use Inline Validation  Inline validation after the user has completed the input field will completely remove errors & friction during the process Validation during typing should only be used to provide specific directions on a complex input field.

Use Inline Validation

Inline validation after the user has completed the input field will completely remove errors & friction during the process Validation during typing should only be used to provide specific directions on a complex input field.

Color Primary Actions  Highlight the primary goal of the form so users understand the final action after the form is completed. Don't leave any room for confusion, use clear CTA copy.

Color Primary Actions

Highlight the primary goal of the form so users understand the final action after the form is completed. Don’t leave any room for confusion, use clear CTA copy.

Organizing Checkboxes  A one column checkbox list is more familiar to the typical users Similar to a shopping list, users will go down the list and check off fields that relate to them.

Organizing Checkboxes

A one column checkbox list is more familiar to the typical users Similar to a shopping list, users will go down the list and check off fields that relate to them.

Keep These In Mind:  Familiarity creates comfortability & less confusion
Highlight CIA's with primary color 
Top down is typically the best format

Keep These In Mind:

Familiarity creates comfortability & less confusion
Highlight CIA’s with primary color
Top down is typically the best format

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.

Related posts

Post a Comment

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