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.
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.
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.
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.
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.
