5 Tips for Designing Kick-A** Forms

Almost every product we work with at ZoCo Design includes some kind of form experience. Whether you're signing up for a new product/service or filing a claim online, you're essentially filling out a form.

While nobody likes filling out forms (well, I guess there are some weirdos that do), we have an opportunity as designers to make the experience as easy as possible by following these 5 best practices for online form design.

1. Use a single-column form layout

Don't make your users' eyes work harder than they have to. Multiple columns in forms force users to scan across the page, making it harder to follow. Save your users' eye movement for EMDR therapy (which is actually quite fascinating!).

2. Don't use CAPTCHA to verify the user is human

Why? Because we lowly humans are just not that good at these frustrating and often tricky puzzles. Plus, robots are probably better at spotting the "obscure fire-hydrant looking object" than we are anyway! If you really want to be sure it's not a robot, you can use the ReCAPTCHA "I'm not a robot" checkbox, but at the rate technology and AI is advancing, I wouldn’t be surprised to see the next evolution of CAPTCHA technology sooner rather than later.

3. Use the right input field

Always consider what input makes the most sense for the information you’re asking for. For example, don’t use a drop-down for a Y/N question, or a date picker for a birthday selector. Think through the easiest and most intuitive interaction for your user to provide the information you need. Enable your users to work smarter, not harder.

4. Align labels to the top of form fields vs. putting them inline

Inline labels look clean and modern—I get it. But prioritizing function over fashion keeps users on track. When labels are placed on the same line as text fields, aligning them either to the left or right can create asymmetry and cause eye strain. Placing labels above the fields enhances clarity and reduces cognitive load, ensuring a smoother user experience.

5. Put error messages where the error is located

Placing error messages where the error is located might seem like common sense, but it's surprising how many forms fail to specify which field has an error. This ambiguity can be incredibly frustrating for users. Error messages should be specific and appear directly under the field in question, ensuring users know exactly what needs to be corrected. And don't rely on just color to indicate an error either. A combination of using error text alongside an input error state ensures that your form is easy to use as well as accessible, which is a win for everyone.

You don't have to be an expert product designer to build great form experiences. By following proven best practices like the tips listed above, you're 75% of the way there.

Pssssst, our team learned these best practices from Zoltan Kollin's master class “How to Design Forms Like an Expert” via the amazing resource Interaction Design Foundation. If you’re looking for an affordable and flexible learning resource for your budding UX team, check Interaction Design Foundation (IxDF) out!

Interested in seeing our team’s work? Check out our case studies!

What's next?

Have a project you’re working on and need some support? Reach out to us.

Do you just want to chat about product, UX, research, process, and methodologies? We’re down for that too. Let's chat.

Do you want to avoid talking to another human being right now? We get it. Sign up for our Curious Communications newsletter to stay up to date on all things UX and other curiosities. We’ll hit your inbox every few weeks.