The 48 UX Laws Every Dev Should Know by Heart

You’ve hit the “vibe.” Your AI agent just scaffolded a full-stack SaaS in forty seconds. The database is migrated, the API routes are humming, and the frontend is technically functional. But when you open the browser to look at your creation, something feels… wrong. It’s clunky. The buttons are in odd places. The user flow feels like a fever dream.

This is the “Vibe Coding” trap. When we move at the speed of thought, assisted by LLMs, the first thing to die is the User Experience (UX). We focus so much on the logic of the feature that we ignore the psychology of the human using it. In an era where AI can write the code for you, your value as a developer shifts from being a “syntax machine” to being an “experience architect.”

To build products that actually stick, you need to internalize the universal laws of human-computer interaction. These aren’t just “design suggestions”—they are hard-coded psychological constraints of the human brain. Here are the 48 UX Laws (categorized by their impact on the dev cycle) that every advanced developer should know by heart.

1. The Laws of Cognitive Load: Protecting the User’s Brain

Vibe Coding often leads to “feature bloat” because it’s so easy to ask the AI to “add a chart here” or “put a filter there.” However, the human brain has a limited buffer.

Hick’s Law states that the time it takes to make a decision increases with the number and complexity of choices. If your AI-generated dashboard has 50 toggle switches on the first screen, your conversion rate will crater.

Actionable Step: Use Progressive Disclosure. Don’t show the advanced settings until the user explicitly asks for them.

Miller’s Law posits that the average person can only keep 7 (plus or minus 2) items in their working memory. When you’re designing a navigation bar or a dropdown menu, if you exceed 9 items, the user begins to lose track of the beginning of the list.

Actionable Step: Group related functions into sub-menus. If your “Settings” page has 30 inputs, break them into “Account,” “Privacy,” and “Notifications.”

The Zeigarnik Effect is a developer’s best friend for retention. People remember uncompleted or interrupted tasks better than completed tasks.

The Vibe Coding Solve: When building an onboarding flow, show a progress bar that starts at 20% (the “Endowed Progress Effect”). Seeing an incomplete task creates a “psychological itch” that the user wants to scratch by finishing the setup.

2. The Laws of Physical Interaction: Fitts and the Thumb Zone

In the world of mobile-first Vibe Coding, physical reach is everything.

Fitts’s Law dictates that the time to acquire a target is a function of the distance to and the size of the target. This is why “Delete” buttons shouldn’t be 10px wide and tucked in the top-right corner of a giant smartphone screen.

Code Tip: When prompting your AI to build a mobile UI, explicitly state: “Ensure all touch targets are at least 44x44 pixels and placed within the natural reach of the thumb.”

The Doherty Threshold is perhaps the most important law for high-performance apps. It states that computer-human interaction is most productive when both parties interact at a pace of less than 400ms. If your AI-generated backend takes 1.2 seconds to respond, the user’s focus will drift.

The Vibe Coding Solve: Use Optimistic UI. Update the state locally before the server confirms the change. Use skeleton screens to provide immediate visual feedback.

3. The Gestalt Principles: How the Brain Groups Your Code

When an AI generates a UI, it often treats elements as individual units. But humans see “patterns.” If your CSS doesn’t respect these, your app looks messy.

The Law of Proximity states that elements close to each other are perceived as a group. If your “Save” button is closer to the “Cancel” button than it is to the form it’s saving, users will feel a subconscious sense of dread.

The Law of Similarity: Elements that look similar (same color, shape, size) are perceived as related. If your “Submit” button looks identical to your “Logout” button, you are inviting disaster.

The Von Restorff Effect (The Isolation Effect) predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Actionable Step: Use this for your CTA (Call to Action). Your “Upgrade to Pro” button should be the only element on the page with that specific vibrant accent color.

4. Behavioral Laws: Postel and Jakob

Postel’s Law (The Robustness Principle) is the ultimate rule for backend and API development: “Be conservative in what you do, be liberal in what you accept from others.”

The Vibe Coding Solve: When your AI agent builds a form, ensure the validation is “human-friendly.” If a user types a phone number with dashes, don’t throw an error. Accept it, strip the dashes on the backend, and format it correctly.

Jakob’s Law is a hard pill for “creative” devs to swallow: Users spend most of their time on other sites. This means they prefer your site to work the same way as all the other sites they already know.

The Lesson: Don’t vibe-code a “revolutionary” new way to scroll or a “unique” hamburger menu that opens from the bottom. Stick to established patterns so the user doesn’t have to “relearn” how to use the internet just to use your app.

5. Practical Example: The “Vibe-Coded” Dashboard Refactor

Let’s look at a real-world scenario. You’ve asked an AI to “Build a crypto trading dashboard with a list of coins, a buy/sell form, a news feed, and a chart.”

The “Default” AI Output:

A giant table of 100 coins (Violates Hick’s Law).
Buy and Sell buttons are tiny and right next to each other (Violates Fitts’s Law).
The news feed and the coin list have the exact same padding and borders (Violates Law of Common Region).
When you click “Buy,” the screen freezes for 2 seconds while the API calls (Violates Doherty Threshold).

The “UX Law” Refactor Prompt:

“Refactor the dashboard using UX best practices. Apply Hick’s Law by showing only the top 10 coins with an ‘expand’ option. Apply Fitts’s Law by making the ‘Buy’ button large and green, and the ‘Sell’ button distinct and separated. Group the news feed into a card with a different background color to satisfy the Law of Common Region. Finally, implement a loading state and an optimistic ‘Order Placed’ notification to meet the Doherty Threshold.”

6. The Laws of Experience: The Peak-End Rule

The Peak-End Rule states that people judge an experience largely based on how they felt at its peak (the most intense point) and at its end, rather than the total sum or average of every moment of the experience.

The Dev Strategy: Identify the “Magic Moment” of your app—the moment the user gets the value they came for. Make that moment spectacular with animations or haptic feedback. Then, ensure the “Exit” or completion screen is clean and rewarding.

The Aesthetic-Usability Effect is the “Halo Effect” of software. Users often perceive aesthetically pleasing design as design that’s more usable.

The Harsh Reality: If your app is ugly, users will assume it’s buggy, even if the code is perfect. If it’s beautiful, they will forgive minor bugs. This is why “polishing the vibe” is not just vanity—it’s a functional requirement.

7. Best Practices for the Vibe Coder

Internalizing these laws allows you to “steer” your AI agents with much higher precision. Here are three tips for applying these laws in a high-speed development environment:

Constraint-Based Prompting: Instead of asking for “a nice UI,” ask for a UI that “minimizes cognitive load using Miller’s Law” or “maximizes accessibility by following the Thumb Zone rule.”
The “Squint Test”: Squint at your screen until the text is unreadable. Can you still tell what the most important button is? Does the grouping make sense? If not, you’ve failed the Gestalt Principles.
The 2-Second Rule: If a user can’t understand what your app does and what the primary action is within 2 seconds of landing, you have violated Occam’s Razor (the simplest explanation/UI is usually the best).

Conclusion: From Coder to Architect

In the world of Vibe Coding, code is cheap. Intent is expensive.

Any AI can generate a <div> or a SQL query. But an AI cannot (yet) feel the frustration of a user trying to find a hidden “Save” button on a 10-inch tablet. It cannot feel the anxiety of a spinning loader that provides no feedback.

By mastering the 48 UX Laws, you stop being someone who just “makes things work” and start being someone who “makes things right.” You become the guardian of the user’s attention, the architect of their habits, and the engineer of their delight.

Don’t just code the vibe. Code the law.