The UX behind designing better forms
Forms are omnipresent on the internet these days. We all come across them, be it before purchasing items, signing up for subscriptions, social networking or joining a discussion forum. It’s hardly an overstatement that they’re an indispensable element for information sharing today.
However, signing up is often perceived as an unavoidable evil for businesses, as maximum drop-offs are witnessed at this page. They’re mostly time consuming, complicated and sometimes get too personal.
Well, let’s see how this humdrum experience can be made more intuitive and effortless for the users.
Before we dive in, I should caveat that while most of these guidelines are based on experiments and statistically valid data, they shouldn’t be considered as the ultimate truth. Forms are highly-contextual design elements and depend on more that just these guidelines too increase conversions. With that said, let’s jump in.
We’ll be working on revamping this rudimentary TV subscription form in the next 10 steps 👇
1. Align the sections
This is a very simple trick which helps provide structure to the content. Alignment is nothing but arranging text in the most efficient way- allowing for efficient, effective scanning and limiting errors or missed fields.
Various approaches can be taken to organise content, but let’s look into just the text arrangements. Have a look at these 4 options which have center, left , right and top-left aligned elements.
Basically, having the label text as close to the input field makes the grouping more relatable. It is easier to associate them due to their proximity. So the top-left aligned labels work pretty well in this case. It has upper edge as it required fewer ‘visual fixations’, helping the viewer scan the form in one go.
2. Group related fields
Grouping information into chunks is an easy way to highlight association. If the form has more than six fields, it is recommended to group them into logical sections. These steps are even more emphasised if each section is given their respective header, and are neatly arranged in a top-down order.
🔔 Tip
Don’t forget to provide a good amount of breathing space (padding/ distance) between the individual sections to distinguish them.
3. Write clear labels
Using succinct and crisp labels. It helps the user understand what information is required in one glance. Avoid using complete sentences to explain simple questions, just one or two words generally suffice.
4. Input field format
Don’t make the user guess the input the information format. It’s considered a good practice to design the input fields in a customised manner, which explicitly shows how the information is to be fed in. Even short help messages (like password setting guidelines) mentioned clearly next to the input box reduce errors while form filling.
🔔 Tip
To create a clear distinction between the foreground and background, a different shade can be used for the input fields. Here, the rectangles are filled in with a solid white while the borders are made subtler.
5. Adding visual cues
Generally users find it tough to answer questions in which they have to manually type in the input. Giving a few suggestions upfront is a good way to get their thoughts running. And representing these options with additional visual cues can turn out to be even better, as it requires minimal congitive load and provides a direction of thought.
6. Optional vs compulsory
This is a very simple trick to de-clutter a form page. Rather than mentioning ‘compulsory’ next to every header, just put an asterisk and mention the optional ones in words. Also, make sure to align this text next to the top label, and not the input field.
7. CTA conversion
Now that the form looks pretty neat, let’s concentrate on the call to actions. Most forms will have at least two call to actions — proceed and cancel. Here, submitting the form is definitely more important, hence it is the primary CTA, whereas cancel the Secondary one. Prominence must be given to these accordingly depending on their significance.
CTAs can either look like a solid rectangular button, or a text link. Depending on your use case, make sure that only ONE of them is the prominent one.
8. Tailor your CTA
The most effective CTAs work because they offer a clear value proposition. They exactly mention what’s going to happen once you hit on the button. This clarity is essential for great CTAs, and can go a long way in making the design more compelling and trustworthy.
9. Validate the form
Generally speaking there are three important messages that a good form validation should convey to the user:
- An error has occurred. Display clearly that there is an error in the form, preferably using a red color signal to attract attention
- Where the error occurred: Highlighting the fields that caused the error
- How the error can be repaired: Provide information on what needs to be different in order for the field to validate
All these have one clear goal: to avoid confusion. To minimise drop-outs, make sure to create validation that eliminates any risk of customers being confused.
10. Use colors efficiently
Colors can be cleverly used to direct the user’s attention, and add an aesthetic appeal to the design. The trick is to stick to not more than 2 main colors in the page. Just make sure to use them wisely, keeping the main goal of the form in mind.
Alright then! We’ve come to the end of this form revamp.
Using the most basic of design principles, a simple form can easily bemade more engaging, aesthetic and usable. Do have a look at the drastic difference between the before and after. 😲
Thanks for reading guys! Hope this was helpful. 🤗
Also, do let me know if there are any particular elements or patterns you’d like to learn about.
