Forms often cause more abandonment than any other UI component.
UX research quantifies this: many checkout flows require 11‑13 fields, though studies show only 6‑8 are necessary when well optimised.
Here are five principles grounded in peer‑reviewed and large‑scale usability research to reduce friction, errors, and abandonment.
📌 What’s Inside
- Minimising field count
- Single-column layouts
- Required AND optional fields
- Inline validation with correct timing
- Mobile context and input type
✂️Minimising field count
Most websites collect significantly more information than necessary.
According to Baymard Institute’s longitudinal checkout studies, the average e-commerce checkout flow contains 11.3 fields.
However, high-performing sites often complete transactions with just 6 to 8 fields.
The excess fields like “Company Name” or “Address Line 2”usually serve no functional purpose for the majority of users but introduce additional cognitive and interactional friction.
Abandonment rates reflect this problem.
Roughly 26% of users in Baymard’s test environments cited form complexity as the reason for abandoning a purchase.
Optional fields should be removed or collapsed under progressive disclosure patterns unless critical. Where they do exist, they must be explicitly marked, rather than assuming users will infer intent from context or layout.
This not only improves completion rates but also reduces backend validation errors and shortens the support funnel.
📐Single-column layouts
Multicolumn layouts are visually appealing in static mocks but routinely fail in usability testing.
Research has shown that users frequently misread the order of fields when forms are presented in two or more columns.
The eye does not naturally zigzag across columns when reading a form; instead, users tend to scan vertically.
As a result, parallel inputs, such as “First Name” and “Last Name” placed side-by-side, are often missed or completed out of order.
A single-column layout improves scannability, supports natural reading patterns, and performs reliably on both desktop and mobile devices.
It also simplifies responsive behaviour, removing layout ambiguity that arises at breakpoints. Structurally, one-column forms reduce the probability of skipped fields and lower overall completion time.
🏷️Required AND optional fields
Assumptions about which fields are required cause user error.
Many forms label optional fields but omit indicators on required ones, expecting users to infer necessity.
This is incorrect and inefficient.
Baymard’s usability sessions showed that nearly a third of users missed required fields when only optional ones were labelled.
A reliable approach is to consistently label all fields as either “Required” or “Optional.”
Avoiding any ambiguity here ensures users don’t proceed with partial input, only to be blocked later during submission. This prevents unnecessary error states and improves user confidence as they move through the form.
Labelling should be placed adjacent to the field label itself (ideally in top-left alignment) rather than buried in tooltips or footnotes.
The more predictable the rules, the fewer errors users will make.
✅Inline validation with correct timing
Inline validation improves form accuracy, but only when implemented correctly.
Studies summarised by Wroblewski and later corroborated by analytics platforms like Zuko show that inline validation increases form success rates by approximately 22%, decreases completion time by over 40%, and raises user satisfaction by 30% or more.
However, timing is critical.
Instant validation, where errors trigger on every keystroke, often causes more harm than good. This approach increases cognitive load, especially for complex inputs like email addresses or credit card numbers, where partial input is temporarily invalid. A more effective strategy is to validate on blur or after the field is completed, not while the user is still typing.
Error messaging should be descriptive, not generic. “Invalid input” is insufficient. Messages must specify the nature of the error and how to correct it (“Enter a valid 5-digit postal code,” not “Invalid ZIP”).
Validation indicators, such as red outlines or green checkmarks, should be placed adjacent to the field, not grouped at the top or bottom of the form.
Users must be able to see the problem and the solution without scrolling.
📱Mobile context and input type
Mobile form performance is highly sensitive to input handling.
Mistakes like splitting phone numbers into three separate fields, or failing to trigger appropriate keyboards (e.g., numeric for card numbers, email-specific for email inputs), introduce avoidable friction.
Baymard’s mobile usability studies confirm that segmented inputs and inappropriate keyboards lead to higher error rates and longer completion times.
Avoid field segmentation unless there’s a strong technical justification.
Where segmentation is necessary, auto-tab between fields and allow users to paste full values (blocking paste for card numbers, for instance, is not only frustrating but also unnecessary from a security perspective).
Autofill and autocomplete should be enabled wherever applicable as they directly affect abandonment rates.
Google’s UX playbooks show that enabling autofill in checkout forms can reduce time to completion by over 30%.
Good forms feel pretty much invisible and they are measured by their efficiency, clarity, and performance under stress.
But they only get that way through deliberate, evidence-driven design.
If your form still looks clean but performs poorly, the problem might be in what you’re asking, how you’re asking it, and when.
Subscribe on Substack⬇️
You might also like:
📚 Sources & Further Reading
- Cart & Checkout Usability Research by Baymard Institute
- Checkout Optimization: From 16 Form Fields to 8 Fields (keynote presentation) by Baymard Institute
- Form Field Usability: Avoid Extensive Multicolumn Layouts (16% Make This Form Usability Mistake) by Baymard Institute
- E-Commerce Checkouts Need to Mark Both Required Fields and Optional Fields Explicitly (Only 14% Do So) by Baymard Institute
- The Ultimate UX Design of Form Validation by designmodo
- Inline Validation in Online Forms – Should You Use It? by Zuko
- Mobile Form Usability: Avoid Splitting Single Input Entities by Baymard Institute
Share this article:
