Form Design : Why it's important to consider UX while Designing a form?
Just imagine how you’d feel if you walked into a shop, collected everything in your basket, but couldn’t find the cashier. In the end, you’d likely get extremely upset and leave everything behind without spending a cent. Well, exactly that’s what happens with bad form design.
Clik here to view.
Lately, I was filling Job opening forms or signing up to a website for something or other. And I came across different forms, some of them were really annoying.
When I am buying something, Bad form designs have saved me hundreds of dollars. Long, painful forms have potentially lost your company a couple thousand bucks by scaring your customers away.
Forms look like the most innocent and straightforward UI components, yet they handle the most important interactions with your product. They channel your users to sign up and pay.
I don’t need to tell you the important role these steps play in a well-functioning business. But I’ve got some good news as well: Getting good form design does not have to come that hard after all.
Be specific about errors
“Something went wrong.” Well, thanks, I realized that… Still, how many times have I read this? It makes me extremely frustrated when I don’t even get a hint about what exactly went wrong. Has someone already taken my username? Haven’t I made my password strong enough? Do your users a favor and make it as specific as possible.
Clik here to view.
Have a crystal clear call to action
Users should feel confident about the consequences their actions have. Forget about general CTAs like “Submit”, “OK”, “Proceed”. Describe the action the user will take. Think more about “Sign in”, “Pay now” or “Create account”.
Give your users feedback when their action succeeds
You might think this whole form design thing ends when the user presses “Place order”. Wrong. Users need clear feedback on the success of their actions. Also let them know the next steps to expect.
For example, after someone has placed an order at your webshop, show a screen that indicates successful payment and order placement. Maybe even provide a timeline about the expected next steps such as when the product ships.
Avoid super long dropdown
Recently, I filled a form where I had to enter my University details, and guess what?? It was a drop down menu which did not have “other” as an option neither my University’s name. Apparently, if you select a country it shows that countries University only.
Clik here to view.
When it comes to form design , better let the users type rather than having preset list. It’ll need some additional work from your developers, but your users will thank you for it!
Use radio buttons when you have six or fewer items
While dropdowns might not bring the optimal solution for long lists, the same applies for very short lists. Why make users open a dropdown everytime they need to answer a yes/no question?
Just use good old radio buttons for choices of six or fewer items. For even better form UX, users scan vertical stacking more easily. Excessive dropdowns probably makes for the number one sign of bad form design.
Match field length to the expected length of the input
You might want to make sacrifices here, but keep in mind that short input fields for postal or CVV codes work better.
When you expect users to type longer answers, use a bigger text box. Sometimes making all those different length input fields look nice together can pose a challenge. But hey, we like challenges! We became designers, didn’t we?
Make your call to action button stand out
So now that the benefits are obvious, it’s time to make the call to action button clear. This can make or break your form design UX. This is the final action taken by your visitors before proceeding to another page. They want to know what’s going to happen when they press the button! In other words, your form is useless if they don’t know exactly what they get, or if it isn’t visible. Text and appearances are equally important here.
Clik here to view.
Keep it short
People are busy. The quicker the better. Keep text fields to a minimum and remember less is more. The shorter your form is, and fewer the text fields they need to fill in, the less time it’ll take and the higher your participation. You always have the option of gathering further information later with the contact information they’ve provided.
Clik here to view.
Display errors before submitting the form
This might sound like a no-brainer, but many forms still miss this. If a user has entered an incorrect email address, show the error before they submit the form.
However, take care not to validate too fast — it can get extremely annoying when you’re still typing but the form “shouts” that you have an invalid email address. “Hmmm OK, but you could you just wait until I’m done typing? Thanks!”
Clik here to view.
Proper layout for good form design
The following tips get more general, so use them in basically any case when gathering data from users. Unlike some of the tips above, they don’t require crazy development magic, simply good design. And well-designed forms always start with a well-selected layout!
Always show labels
In recent years it has gotten really trendy to use form labels as placeholder text. In many cases, it works well as it definitely makes design cleaner. But just imagine your user will have no clue about what information each field should contain once they’ve filled them in.
In some cases like an email address, it may seem obvious, but messing up the first name and last name happens so easily. So even if you decide to use the labels as placeholders, keep them visible when the field is filled, just like Google recommends.
Clik here to view.
Show and update password criteria
Many sites have strong criteria for passwords regarding the different characters it should contain. Some websites display these criteria in a tooltip. Not the best.
Users will only know of their password’s weakness once they’ve entered their usual password. So display the criteria once the field comes into focus at the latest. Even better, update them in real time as a user types. This makes it a lot easier to recognize what exactly they are lacking.
Clik here to view.
Warn users when they have caps lock on
I really like this feature on the MacOS. Why not use it on your forms as well? When entering passwords, we sometimes accidentally hit the caps lock. It has happened to all of us. Why not save users a few seconds by warning them?
Clik here to view.
What next?
Well, if you’ve made it this far, you’ve taken the first step: You’ve committed to well-designed forms in your product.
Some of these tips will increase completion rates for your form or just simply reduce the time users need to fill it out. Others represent just small tweaks which show you care. And what could make users love you more than showing them that you value their time?
But after all the reading, promise you’ll take action and improve the design of your forms, OK?
Image may be NSFW.Clik here to view.
Form Design : Why it's important to consider UX while Designing a form? was originally published in DETAUX (Designers Talks) on Medium, where people are continuing the conversation by highlighting and responding to this story.