UX design principles: the 6 rules that separate products people use from ones they delete

Expedia had a form field called “Company.” It was optional. Users typed their bank name, then entered their bank’s address instead of their home address. Credit card verification failed. Users called support or abandoned the booking.

Removing that one field generated $12 million per year in additional revenue [1].

That’s a UX principle violation with a price tag. Not a theory about “user-centered design” – a single form field that cost twelve million dollars annually because it confused people.

You’ve built a working product. Users sign up. Then they bounce in 10 seconds and you can’t figure out why. The analytics show clicks but no completions. Support tickets ask questions the interface should have answered. You’re losing users to confusion, not to competitors.

Every UX principle in this article has the same property: violate it and there’s a measurable cost. Follow it and there’s a measurable return. Six principles follow – they sound clean in isolation but contradict each other constantly. The real design work happens at the collisions, which we cover at the end.

$300M

[2] Jared Spool, UIE, 2009

1. Clarity: users should never ask “what does this do?”

Every screen should answer one question instantly: what am I supposed to do here?

Slack gets this right. Open a channel, the cursor is in the message field. The placeholder says “Message #general.” The primary action is obvious, pre-selected, and labeled. Contrast this with enterprise tools where you land on a dashboard with 47 widgets and zero indication of where to start. Build every screen the way Slack builds channels: one primary action, pre-selected, with a placeholder that tells the user exactly what to do.

The research backs this up. Users form a visual judgment about your product in 50 milliseconds [3]. They decide whether it’s worth exploring within 3-5 seconds. And in SaaS, ProductLed’s research shows users onboard for approximately 7 minutes before the first major dropoff [4]. That’s your entire window to prove the product does what they came for.

The test: Show a screen to someone who’s never seen your app. If they can’t tell you what to do within 5 seconds, the screen fails. This applies to every screen, not just the homepage.

Clarity compounds. One confusing screen is a friction point. Five confusing screens is an uninstall. When we wireframe products, the first question for every screen is: “what’s the one thing the user does here?“

2. Consistency: same pattern, every time

If your “Save” button is blue on one page and green on another, users hesitate. If “Delete” requires a confirmation modal in one section but not another, users will lose data. If navigation is a sidebar on desktop and a bottom bar on mobile – fine, that’s platform-appropriate. If it’s a sidebar on one desktop page and a top bar on another – broken.

Consistency reduces cognitive load. Users learn patterns once and apply them everywhere. Break the pattern and they have to re-learn your interface on every screen.

Google keeps 3 billion users productive across Docs, Sheets, Slides, and Gmail because the toolbar layout, keyboard shortcuts, and sharing flows are identical across products. A user who knows Docs already knows Sheets. That’s consistency doing real work at massive scale.

What this means for your product: Build a small design system – even just a shared set of button styles, form patterns, and navigation rules. It takes 2-3 days to set up and saves weeks of inconsistency fixes later.

3. Efficiency: every extra step costs 5-20% of users

A major retailer required registration before purchase. Jared Spool’s team replaced the “Register” button with “Continue” and added guest checkout. Result: $300 million in additional revenue in the first year [2]. The product was the same. The inventory was the same. Removing one step in the checkout flow unlocked $300 million.

Every extra form field reduces completion by 5-10% [5]. A 7-field signup form converts at roughly half the rate of a 3-field form. The math is brutal:

Fields	Relative completion rate
3 fields	Baseline (highest)
5 fields	-15% to -25%
7 fields	-30% to -45%
10+ fields	-50% to -70%

Third-party analysis estimated Amazon’s 1-Click ordering patent (US 5960411, filed 1997) was worth billions annually in reduced cart abandonment [6]. The patent eliminated multi-step checkout for returning customers. Apple licensed it for the iTunes Store. When it expired in 2017, an entire industry of “fast checkout” startups appeared overnight.

Apply this to your product:

• Reduce form fields to the absolute minimum. Name, email, and one more field. Everything else can be collected later.
• Pre-fill what you already know. If the user logged in, don’t ask for their email again.
• Default to the most common choice. If 80% of users pick “monthly billing,” make it the default.
• Let users complete the primary action in 3 clicks or fewer from any screen. If it takes 5 clicks to do the most common task, that’s an information architecture problem – and it’s cheaper to fix in wireframes than in code.

4. Feedback and error prevention: the $200 fix vs. the $15 support ticket

These two principles work as a pair. Feedback tells users what happened. Error prevention stops mistakes before they happen. Together, they’re the cheapest UX investment with the highest return.

Feedback: Click “Submit” and nothing happens for 3 seconds? Users click again. And again. Three duplicate submissions, one confused customer. A loading spinner costs $200 of development time. Google tested this at scale – adding just 400ms of artificial delay to search results caused 0.44-0.76% fewer searches per user. Even after the delay was removed, users still searched 0.21% less [7]. A brief bad experience permanently changed behavior.

Error prevention: A validation message that says “Email must include @” costs $50 to build. A support ticket from a user who entered their phone number in the email field costs $15 – every single time. The Expedia “Company” field from the opening didn’t even show an error. It silently corrupted the user’s path downstream. The worst UX errors are the ones that never show red text.

The best UX makes errors impossible. The second best makes them easy to recover from. “Undo” is always better than “Are you sure?”

5. Accessibility: build for the 65-year-old shop owner

You’re not building for compliance. You’re building for the 65-year-old Shopify merchant who needs reading glasses, the developer with a broken wrist using keyboard-only navigation, and every user squinting at their phone on a sunny patio.

The WHO estimates (as of 2023) that 1.3 billion people – 16% of the global population – live with some form of disability [8]. Not all affect software use. But contrast, keyboard navigation, and labels affect far more users than just those with diagnosed conditions. Shopify designs its entire merchant platform to WCAG AA standards because its merchants range from tech-savvy 25-year-olds to small-town shop owners who’d otherwise call support.

The business case isn’t theoretical. Target paid $6 million to settle a class-action lawsuit over their inaccessible website in 2008 – and spent millions more rebuilding it. Domino’s Pizza fought an ADA web accessibility lawsuit all the way to the Supreme Court and lost. These are large companies with large legal budgets. A startup facing the same complaint settles for less but the legal costs relative to revenue are devastating.

The minimum: 4.5:1 contrast ratio, keyboard-reachable interactive elements, alt text on images, visible form labels (not placeholders that vanish on focus). This adds $1,000-$2,000 to a typical project. Skip it and you’ll spend that much on the first support escalation from a user who can’t complete your checkout because the “Place Order” button isn’t reachable by keyboard.

6. Visual hierarchy: guide the eye, guide the action

Open Netflix. The homepage isn’t a grid of equal-sized thumbnails. It’s a carefully weighted hierarchy: a large hero at the top, personalized rows below, the first position in each row weighted toward content the algorithm predicts you’ll watch. Netflix reported in 2015 that 80% of hours streamed come from this recommendation interface, not from search [9]. Internal models estimate the recommendation system prevents over $1 billion in annual churn [9]. Every hierarchy decision – what appears first, what’s larger, what auto-plays – directly drives retention.

The same principle applies to every screen you build. The primary action should be the most visually prominent element – larger, bolder, higher contrast. A “Cancel” button should never compete with “Confirm.” A “Settings” link should never be as prominent as “Create New Project.”

On mobile-first designs, hierarchy is even more critical. A 375px screen has room for one clear action per viewport. Three buttons of equal weight means none of them gets clicked.

We rebuilt the task detail screen for a construction project management SaaS – the kind where a foreman on a job site taps through 30 tasks a day on a dusty iPhone. The screen had “Edit,” “Share,” “Delete,” and “Archive” as four equally-styled buttons across the bottom. Heat maps showed users hesitated for 3-4 seconds before tapping – and 22% tapped “Delete” accidentally, destroying task records that couldn’t be recovered. We made “Edit” full-width and primary-colored, moved “Share” to the header, and buried “Delete” and “Archive” in a ”…” menu. Accidental deletions dropped to near zero. Task editing went up 40%. Same features, different hierarchy.

When principles conflict: the tradeoffs nobody mentions

Here’s what every UX principles article skips: these principles contradict each other constantly. Real UX work is deciding which one to prioritize when they collide.

Efficiency vs. error prevention. A one-click purchase is maximally efficient. It’s also maximally dangerous if the user taps by accident. Amazon solved this by limiting 1-Click to users who opted in. That’s a tradeoff decision, not a principle application.

Consistency vs. context. Google Maps looks completely different in driving mode versus walking mode. The hamburger menu disappears. The map fills the screen. Voice commands replace taps. If Google prioritized consistency, both modes would look the same – and both would be worse.

Clarity vs. power. Photoshop’s interface is objectively confusing to new users. But professional designers need 400+ tools accessible without digging through menus. Figma chose the opposite tradeoff: simpler interface, fewer features, faster onboarding. Both products print money. They made different tradeoff decisions for different users.

The decision framework: When two principles conflict, ask which violation costs more for your specific users. If your users are first-time visitors who may never return, prioritize clarity and efficiency. If they’re power users who work in your product 8 hours a day, prioritize control and accessibility.

The $3,000 UX investment that saves $30,000

You don’t need a $50,000 design agency for good UX. You need:

1. Wireframes before code ($2,000-$5,000) – Test the flow before building it. The design thinking process front-loads these investments so you’re solving the right problems before writing code.
2. 5 usability tests ($500-$1,000) – Jakob Nielsen’s research shows 5 users uncover roughly 85% of usability issues. Later studies argue 8-10 for complex flows, but even 5 tests will surface the issues that make users quit. You don’t need 50 testers.
3. A basic design system ($1,000-$2,000) – Buttons, forms, navigation. Consistent patterns across every screen.

Total: $3,500-$8,000. On a $40,000 project, that’s less than 20% of the budget. The alternative – fixing usability issues after launch – costs 3-5x more and loses you users in the meantime.

---

We build products where users find value in their first session – not their fifth. If your signup-to-activation rate is below 20%, the product works but the experience doesn’t. Tell us what you’re building.

References

[1] J. Megibow (VP Global Analytics, Expedia), “The $12 Million Form Field,” widely reported. uxmovement.com

[2] J. Spool, “The $300 Million Button,” UIE/Center Centre, Jan. 2009. articles.centercentre.com

[3] G. Lindgaard et al., “Attention web designers: You have 50 milliseconds to make a good first impression!” Behaviour & Information Technology, 2006.

[4] ProductLed, “The First 7 Minutes of the Onboarding User Experience,” 2024. productled.com

[5] HubSpot, “Form Optimization Research,” 2024. hubspot.com

[6] Rejoiner, “How Valuable is Amazon’s 1-Click Patent? It’s Worth Billions.” rejoiner.com; Wharton School, “Amazon’s 1-Click Goes Off-Patent,” 2017.

[7] J. Brutlag, “Speed Matters,” Google Research, 2009. services.google.com

[8] World Health Organization, “Disability,” who.int, 2023; Shopify, “Polaris Design System – Accessibility,” polaris.shopify.com

[9] Netflix Engineering, “System Architectures for Personalization and Recommendation,” Netflix Tech Blog, 2013; C. Gomez-Uribe & N. Hunt, “The Netflix Recommender System,” ACM Transactions on Management Information Systems, 2015. The $1B churn prevention figure is from Netflix public investor communications.

[10] Userpilot, “First-Time User Experience SaaS Statistics,” 2025. userpilot.com; UserGuiding, “User Onboarding Statistics,” 2025.