With 74% of businesses using web forms for lead generation. It’s no wonder that UX designers and businesses are going through their forms with a fine tooth comb. They need increase the conversion rate and completion percetage as much as possible.
But with the dozens of rules on crafting the perfect form. Where do you begin?
Here we’ll go over some basics to make sure your form is off to a good start.
Common use cases for forms
Forms are not only used for lead gen. They offer a wide variety of shapes, sizes, and uses. With online forms being so prevalent, you can be forgiven for overlooking them. Here are a few you may not even realize are forms.
Surveys - Surveys are one avenue to gather user research. They can be as simple as you want. Such as a “tell us how we did”. Or as complicated. Like a multipage, survey on what the customer needs. They are appropriate throughout a customer’s journey.
Contact forms - Free consultations, sweepstakes entrances, etc. Contact forms should ask for as much as you believe the consumer will give.
Email sign up forms - the most important form field as considered by 97% of B2B businesses .These often pop up when you first land on a page. Sometimes giving an incentive such as a discount or free information guide.
Booking forms - Whether you're hiring movers or booking a flight. Booking forms allow you to verify who you are and your needs. Along with allowing the business to handle your request.
Subscription forms - Credit card information is a prerequisite for any subscription. That along with your name, email and possible phone number. These tend to be on the longer side of forms.
Free trials - often the lead up into a subscription. Like a subscription, you have to enter credit card information. The hope is that you forget to cancel. Then they can charge you for the first month.
12 form design best practices
The goal of any form should be to get it filled out by the maximum amount of people. However, a caveat is that strong arming users may get them to fill it out once. But the churn rate by doing so will cause more harm than good.
Here are 12 ways to immediately improve your forms.
1. Limit clicks per form
Making filling out your form effortless greatly increases the chance of people filling it out. With the 2nd biggest reason for abandoned forms being length. Your business needs to limit the amount of work users need to do. One huge mistake businesses make is including an aburd number of fields. Limiting clicks can look like:
Minimizing drop down menus - Display radio buttons instead of adding another unnecesary click.
Don’t slice input fields - Having a first and last name box does nothing but ask the user to do more work. Combine them and you already limit one click.
Use sliders for specific range instead of two boxes - Sliders are more intuitive than numeric boxes. And often people don’t move the minimum box anyway!
Don’t do this: make the user input too much information.
Do this: Combine fields when possible( full name, date, etc).
2. Use inline form field validation
We’ve all had the frustration of filling out a long-winded form, maybe for a package. Clicking submit in the hopes the tedium is over. Only to be denied by an error. Frustrated, we then comb through the page to find the one tiny mistake.
Inline validation, kindly corrects the user before they move onto the next box. Allowing it to be fixed then and there.
Don’t do this: Only reveal errors after an attempted submission
Do this: reveal errors as they are inputted.
3. Chunk the form
What’s more of an intimidating ask? Running 10 miles or running half a mile 20 times. Most would say the 10 miles, even though the distance is the same. Running ten miles implies there is only mile 0 and mile 10 as far as progression is concerned. Running half a mile 20 times will have 20 progression markers.
We can use this same phycology in the creation of our long forms.
If users know they are on 50% through a form instead of x number page. They will be more likely to finish it.
How you chunk the form should be based off what your users respond to. Chunking it on one page with headers works. Or each section can be it’s own page.
Don’t do this: layout your form as one big page
Do this: segment your form based on questions or users.
4. Empathize call to action
Call to action(CTA) is simply telling your audience what to do.
Above is the email sign up for Neville Medhora’s copywriting course. He knows people are coming to this page because they are business owners or newbie copywriters. So his CTA pushes on that desire.
A CTA is the corner stone of every business. The only difference between a stall owner shouting from his stand in the bazaar. And an email form with an action button, is delivery.
With forms, the CTA will ask the recipient to fill it out and explain why it’s in their best interest to do so.
A few things to note:
Personal beats generic every time
“Nobody cares about you, they care about themselves”- Your CTA should talk about them, not your business.
For example: If you sell seashells and donates to oceanic venues.
Don’t do this: Buy now to help us save the oceans!
Do this: Get yourself these rare seashells, with a percentage of proceeds going to the oceanic fund!
5. Be polite
The example from #2 was so good we used it twice!
As Tommy Lee Jones once said, “Kindness and politeness are not overrated at all. They’re underused” As a business, you need to make the user feel appreciated. Letting them know their patronage hasn’t gone unnoticed. A few ways to get this done are through greeting/farewell messages and error messages.
Greeting and farewell messages give the impression that the user is seen.
Error messages can very easily rub users the wrong way. Rule of thumb: don’t blame the user.
Don’t say this: “Fill your email out correctly.”
Say this: “Please fix this box.”
6. Remember Hick’s law
Hick’s Law states that as the amount of stimuli increases, so does the amount of time in the decision-making process.
UX designers often fall into the trap of giving users all the options based on user research. It can get so overwhelming that users will refuse to engage with the form. The fact is, users don’t want all the options, they want the “best of” the collection.
The easiest way to lower option overload:
Keep your form single column-Forms that are formatted single column give users a clear path. On the contrary, multicolumn forms force the user to make multiple decisions before even starting. Starting left or right, working down or right, etc.
Don’t do this: give the users too many options.
Do this: guide the user through the process.
7. Offer field focus
45% of form data is submitted on a mobile device. With how often people are filling out forms on mobile. Making sure the experience is as smooth as possible needs to be a priority.
Sadly, this isn’t the case. As most forms on mobile devices are hit or miss. You either get a form that forces you to manually zoom in with your thumbs, the scrolling can be wonky, etc.
Field focus autofocuses on the box your are filling in at that moment. Allowing for seamless stansition from one box to the next.
Airbnb does it mobile booking well. When landing in an input box you are only given the option to fill that box or exit.
Don’t do this: Layout out the mobile form exactly as the desktop form
Do this: Offer in field focus among other mobile friendly options.
8. Don’t mask passwords.
Masking passwords always made me think of being held hostage while inputting the information. Or maybe being in a seedy place while ordering my Uber eats.
Masking passwords serves very little purpose other than to inconvenience the user. If you're going to keep it in. At least make is optional
Don’t do this: Force mask passwords.
Do this: Allow them to unmask their passwords. Or don’t include masking at all.
9. Distinguish between optional and mandatory fields
Pretty straight forward one here. If something is more convenient for you as a business, but not needed. Put it under optional. When formatting your forms:
Don’t do this: Use a red asterisk to signal mandatory. It requires brain power to understand that.
Do this: Simple say optional inline with the label.
10. Labels, Label, Labels
Speaking of field labels. They can be a major source of frustation if placed incorrectly. They have one universally approved placement. That is to the left above the input box. That way users always know what information goes where. When companies deviate from this standard. It’s gets aggravating for users.
Here are the common mistakes with labels:
If you put it inside the box, the label dissapears once the cursor is inserted. Once the user starts inputting they may forget what information is needed. They then need to delete the information and begin again. Totally frustating and totally avoidable.
Aligning the label to the left is simply a waste of space.
Labels in all capitals takes longer for the brain to recognize. Normal capitalization flows in the mind like a surfer riding a wave.
Avoid placeholders as they put a burden on short term memory
Don’t do this: get fancy or creative with labels.
Do this: align your label top-left of the input box.
11. Allow the option to autofill with google or facebook.
This is a contention topic among the sofware community. Some view logging in with these corps as putting your eggs in one basket. With the valid argument that if you’re information was to be exposed it could put multiple apps in danger. However if your worred about Apple or Google being hacked. Set your mind at ease. They haven’t been hacked in over a decade(Google in 2009 and Apple in 2013).
Disclaimer: Data breaches has happened as recently as 2021. However they were user and developer side breaches. Exercise caution.
Again don’t force them to sign in with Apple or Google. But it’s an option you can give them.
Don’t do this: Force manual input of information.
Do this: Allow the option of autofill in with Apple or Google.
12. Explain why you need sensitive information.
On the topic of sensitive information. Users are more cautious than ever as the lais fare attitude of the internet has swung in the oposite direction. As 29% polled that they abandoned a an online form due to security concerns
Information like their name and email is fair game. But to get a user’s phone number or address, you need to have a good reason.
A simple trust badge works works wonders. These are interrogation points attached with the explanation. As long as your truthful.
Don’t do this: Force input of sensitive information without explanation
Do this: Know your users. Add a trust badge or explanation inline with label.
13. Match field length and structure to intended input
Keeping uniform input boxes may look pretty. But they can confuse your customers. For example, above is a credit card form. There is alot of wasted space for both the expiration and security code. Some customer may even feel they are completing it wrong by not filling up the space.
Dont do this: Use uniform input boxes.
Do this: Keep the input boxes’ size appropriate to thier contents.
5 examples of great form design
1. Vanguard
The Vanguard Group is an asset management firm. Since they 1975 they have been offering a wide variety of investment vehicles. From student savings plans to 401k’s to IRAs, they have you covered. Above is the transaction screen users use when purchasing assets.
What’s great:
Easy to hard question format.
Everything is sectioned out.
Offers a real time quote of product so you don’t have to leave the page.
Reads left to right.
What could be improved:
Blue and white color scheme is hard to read.
I would put the left section in a box.
2. Spotify
Founded in 2006, Spotify is a popular music streaming platform and main comptetitor of Spple music. Spotify pets is a feature that allows you to make a music playlist for your animal. 3 minutes out of your day and your animal could have its very own playlist.
What’s great:
Limited the animal options(remember Hick’s law)
Heavily visual
sliders for pet personality questions
Form is chunked.
What could be improved:
No critique, for a simple premise it was executed well.
3. Duolingo
Duolingo is a language learning platform the puts emphasis on gamification of it’s lessons. . There are login bonuses, challenges, and a leader board. With 500 million registered users and 37 million active once a month, it’s certainly doing something right.
Opening up a new language course shows you this screen above.
What’s great:
Doesn’t force you to do a level test. Which new learners may find disheartening.
Images are immediately recognizable
Two options
What could be improved:
No changes needed
4. The Hustle
The Hustle is a newsletter offering the latest in business news and tech trends in 5 minutes or less. Their email signup empasizes not only what users get but who they become.Over 1.5 million people became apart of this cool group of tech/business people.
What’s great:
Clear CTA.
Empazises not only logical beenfit(keeping up to date with news) but emotional benefit( being part of a group).
Only one thing available to click on
What could be improved:
Word coloring is a bit hard to read
5. Design It
The “experience innovation company”. Design it is a design studio with a dozen locations all over the world. Above is their contact form. We’ve showcased Design It’s work in our post on UX case studies
What’s great:
The lable starts in the box then moves above the cursor.
Easy to hard question format.
Single column format.
What could be improved:
The form itself is great. Above it however is a large font sized paragraph that doesn’t provide anything of value. Along with a picture of a phone off the line.
Conclusion
When companies first begin, they don’t take spend much consideration on forms and how user interface design affects their succes . But as they mature, companies realize the user experience in forms is just as important as anywhere else.
