Field Notes · 4 min read
Good Design Avoids Mistakes: UX Errors That Cost Conversions
Short answer
The design mistakes that cost the most conversions are the ones that make people fail at a task: forms that reject valid input, navigation that hides key pages, pop-ups that block content, slow responses to taps, and controls too small or unlabeled to use; fixing them helps visitors and search performance at the same time.
Key takeaways
- Prevent form errors with clear labels, forgiving input formats and a review step before anything final.
- Replace full-screen pop-ups with small banners; Google's guidance treats intrusive interstitials as a search problem.
- Aim for an Interaction to Next Paint of 200 ms or less and tap targets of at least 24 by 24 CSS pixels.
When a visitor gives up on a form or cannot find pricing, analytics records an exit and nothing more. A surprising share of those exits trace back to small design errors that are cheap to fix. This page walks through the mistakes we see most in audits, why they cost money, and how to fix them in an order that pays back fastest.
Why does error prevention matter more than error messages?
A design that stops mistakes before they happen converts better than one that explains them afterward, because every error message is a moment when people quit.
Forms are where this shows most. Common problems:
- Rejecting phone numbers with spaces or dashes instead of accepting and cleaning them.
- Placeholder text used as the only label, which disappears as soon as someone types.
- Clearing the whole form after one invalid field.
- Asking for information you do not need yet, such as company size on a newsletter signup.
- No chance to review an order or booking before it is final.
The W3C accessibility guidelines set a useful bar for anything with legal, financial or data consequences: submissions should be reversible, checked for input errors, or reviewable and correctable before they are final (success criterion 3.3.4, level AA). Hypothetical example: a booking form that adds a one-screen summary step catches wrong dates before payment, which also cuts refund requests.
How does confusing navigation cost conversions?
When people cannot predict what is behind a menu label, they leave or land on the wrong page, and both look like weak demand in your reports.
Clever labels ("Solutions", "Discover") hide what you sell, and mega menus with forty links bury the five pages that carry revenue.
Fixes that usually pay off:
- Use the words customers search for as menu labels; search intent mapping helps you find them.
- Keep pricing, contact and the main service or product pages one tap from every page.
- Make the logo link home and keep the current section highlighted.
- Add clear breadcrumbs on deep pages, which also help search engines understand structure.
Do pop-ups and interstitials hurt search performance?
Google's guidance says interstitials that block content frustrate users and can make it harder for search engines to understand the page, so prefer small banners.
Google lists full-page covers and redirects to a separate input page as common mistakes, and suggests small banners or browser-supported app install banners instead. Mandatory notices such as age verification are treated differently, but should still overlay the content instead of replacing it.
What is INP, and why does responsiveness matter?
Interaction to Next Paint measures how quickly a page visibly responds to taps, clicks and key presses, and it replaced First Input Delay as a Core Web Vital on March 12, 2024.
A good INP is 200 milliseconds or less; above 500 milliseconds is poor, both measured at the 75th percentile of real page loads. A button that seems dead for half a second invites a duplicate tap or an exit.
| Mistake | What the visitor experiences | Fix |
|---|---|---|
| Heavy scripts on tap | Button lags, double submissions | Break up long tasks, defer non-essential scripts |
| Tiny tap targets | Wrong link tapped on mobile | At least 24 by 24 CSS pixels, with spacing |
| Full-page pop-up | Content blocked on arrival | Small banner or inline prompt |
| Placeholder-only labels | Forgets what the field was for | Visible labels above fields |
| Hidden pricing link | Cannot compare or decide | Pricing in main navigation |
| Missing alt text on key images | Screen reader users miss content | Short, specific alt text |
What accessibility basics should every site get right?
Labels, contrast, keyboard access and adequate target sizes fix problems for people using assistive technology and make the site easier for everyone.
WCAG 2.2 success criterion 2.5.8 sets a minimum pointer target of 24 by 24 CSS pixels at level AA, with exceptions for inline links and well-spaced targets. Beyond that:
- Every input has a programmatic label.
- Text has enough contrast against its background.
- All controls work with a keyboard, with a visible focus indicator.
- Error messages say what went wrong and how to fix it, next to the field.
Where should you start fixing?
Start with the templates that carry the most revenue: checkout or lead forms first, then the pages that feed them.
Pair design fixes with clear page titles and descriptions so people arrive with the right expectations; the title and meta checker previews how a page appears in results. Our UX for SEO conversion page covers layout patterns in more depth, and the on-page SEO service reviews templates for both search and usability issues. Before judging a fix, check the tracking with our pre-launch QA checklist.
Frequently asked questions
Does Google still use First Input Delay?
No. Interaction to Next Paint replaced First Input Delay as a Core Web Vital on March 12, 2024. A good INP is 200 milliseconds or less at the 75th percentile of page loads.
Are all pop-ups bad for SEO?
No. Google's guidance targets interstitials that block the content, especially full-page ones. Small banners and legally required notices such as age gates are treated differently.
What is the minimum tap target size?
WCAG 2.2 success criterion 2.5.8 (level AA) sets a minimum of 24 by 24 CSS pixels for pointer targets, with exceptions such as inline links in text or targets with enough spacing around them.
What is the quickest accessibility win for most sites?
Give every form field a visible label and every image that carries meaning a short text alternative. Both are cheap and fix problems for screen reader users and everyone else.
Sources
- Interaction to Next Paint becomes a Core Web Vital on March 12 (web.dev)
- Interaction to Next Paint (INP) (web.dev)
- Avoid intrusive interstitials and dialogs (Google Search Central)
- Understanding SC 2.5.8 Target Size (Minimum) (W3C WAI)
- Understanding SC 3.3.4 Error Prevention (Legal, Financial, Data) (W3C WAI)