The 21 Laws of UX: A Comprehensive Guide

We're all human here (I assume you are - if you're an AI bot, just nod and smile). You’ve probably experienced an Upload button that actually downloads a file, or been trapped in a never-ending maze of modal windows, each one more maddening than the last.

These are the types of sins that the Laws of UX help prevent.

In 2020, Jon Yablonski, a UX designer from Detroit, published ​​”Laws of UX: Using Psychology to Design Better Products and Services”. It contained 21 Laws of UX, split into 4 categories: Heuristic, Gestalt principles, Cognitive bias, and Principles. Yablonski didn’t invent these of course, all these laws were borrowed from the various disciplines UX is built on—psychology, behavioral science, design thinking and more. He also did a fabulous job with translating dense academic research into accessible, visual nuggets of wisdom. 

Humans have some hard-wired tendencies for how we perceive and process the world. If we design against those tendencies, we're essentially asking people to slam their heads against a cognitive brick wall. The Laws work like a cheat code for understanding that human "blueprint"- the quirks, biases, and mental shortcuts evolution gave us. By mastering these principles, UX designers and product managers can create experiences adapted to real human behavior, not vice versa.

Of course, the Laws aren't magic wands that solve everything. But they give us a foundation to build on - a shared language for discussing why certain designs just "feel right." 

Where do the Laws of UX come from?

The engineers, designers and scientists who developed UX didn't do it out of nowhere. They borrowed from a lot of other disciplines to create guiding principles for user experience design.

Psychology

Imagine trying to design a product without understanding how people think, feel, and make decisions. It would be like building a house without a blueprint – you would have no idea what you’re building towards.

Thanks to the power of psychology, we truly understand concepts like cognitive load, visual perception, attention span, and emotional design theory. 

By borrowing from principles like Hick's Law and Miller's Law, we can create experiences that feel intuitive and effortless. The Mere Exposure Effect and Serial Position Effect also come from cognitive psychology. We’ll go into detail on each law soon enough.

With the help of psychology, UXRs can craft user experiences that feel as intuitive as a good friend and as delightful as a surprise birthday party (but without the awkward singing).

It also isn’t just about cognition – it's also about emotion. UX researchers tap into fields like emotional design and positive psychology to create experiences that evoke joy, delight, and a sense of accomplishment.

Behavioral Science  

Behavioral sciences is the study of human behavior, through systematic experimentation and observation.

On a macro-level, user research involves understanding larger patterns and tendencies in user behavior, as behavioral science might uncover.

With behavioral science's guidance, we can understand why that mobile app that every edgy teen in Brooklyn is obsessed with might as well be written in ancient Greek for a middle-aged dad in Milwaukee. It's all about those deeply ingrained cultural lenses and experiences, at the end of the day. By applying social norms, cognitive biases, and contextual nudges, we can design choice architecture that gently encourages desired behaviors without making users feel boxed in (unless that's what they're into - we don't judge).

Ingrained UX laws like mere exposure effect, Von Restorff effect, and principles around choice architectures and nudges are also informed by behavioral science research.

Data Science

But what good are all these rich human insights if we can't decode the hieroglyphics of raw data? Enter Data Science.

From statistical analysis and data visualization to machine learning and predictive modeling, data science provides a powerful lens through which we can make sense of vast amounts of information.

For example, by analyzing user interaction data from a website or app, we can identify common pain points, bottlenecks, and areas for improvement. 

Laws like Fitts' Law, Hick's Law, and the ability to run experiments to validate design principles are enabled by data science methods.

Human-Computer Interaction (HCI)

HCI is all about understanding how humans interact with computers and technology. It studies the way we perceive and process digital interfaces. 

Jakob’s Law, the Paradox of the Active User, and Doherty’s Threshold are all UX laws that originate from human-computer interaction studies.

HCI doesn't just offer design principles; it also provides the methodologies for evaluating and improving user experiences. Usability testing, heuristic evaluation, and user-centered design? All HCI-approved techniques that web designers and UX researchers use to identify issues and optimize digital experiences. 

The Laws of UX

The 21 Laws of UX can be divided into 4 categories:

1. Heuristics: These laws include rules of thumb that can help with decision-making and problem-solving.
2. Gestalt principles: These laws deal with how the human brain organizes and perceives visual elements as unified wholes.
3. Cognitive biases: These rules are about the ingrained mental tendencies that cause systematic patterns of deviation from rational judgment.
4. Principles: These include general guidelines and best practices borrowed from disciplines like psychology and design.

Heuristics

Heuristics are mental shortcuts or rules of thumb that help with decision-making and problem-solving. UX borrowed them from cognitive psychology, to better understand how the human mind processes information and makes judgments.

1. Parkinson’s Law

Law: Any task will inflate until all of the available time is spent.

Let’s say that you have to fill out a survey. It’ll only take 3 minutes of your time. But if someone tells you that the survey will take 15 minutes to complete, the odds are that you will end up taking the whole of 15 minutes, using up all the allotted time.

For workflows that require human action, Parkinson’s Law reminds designers to create tasks and workflows that are speedier than what the user expects, and to provide a shorter estimate than required.

2. Miller’s Law

Law: The average person can only keep 7 (plus or minus 2) items in their working memory.

Try it out yourself. Just go to our blog page and look at the titles. Once you’ve read at least 9, close the tab and see how many you can remember.

Unless you’ve been practicing memory games everyday, chances are that you will only remember 7, give or take a couple of titles.

Miller’s law plays a big role in designing interfaces that are clutter-free, with information presented in manageable chunks. This is why e-commerce sites usually show you 3 products in a row at a time, reducing the cognitive load on your brain.

3. Hick’s Law

Law: The more options a user is presented with, and the more complex those options are, the harder it is to make a decision. 

This one’s quite obvious. If I ask you to pick between a burger or a burrito bowl for lunch today, you can pick one easy. But if I ask you to pick from a list of 20 restaurants from Yelp, you’re going to take way longer.

The lesson for designers? Build interfaces that offer intuitive workflows for users to make a decision. Also, don’t give them too many options. Break it down to 3 or 4.

4. Aesthetic-Usability Effect

Law: Users tend to perceive aesthetically pleasing designs as more usable.

Imagine that you’re looking for a new tool to help with research analysis. You narrow it down to tool A and tool B. You come across their websites - one with a sleek, modern design using high-quality images and a clean layout, and another with a cluttered, outdated design. Even though both products offer similar features and pricing, you're likely to perceive the one with the visually appealing website as being more usable and trustworthy.

The takeaway? Don't underestimate the power of aesthetics. Don’t listen to the skeptics who say that UI doesn’t matter, only UX does. Invest time and effort into creating interfaces that are not only functional but also visually appealing and consistent with your brand's identity.

5. Fitt’s Law

Law: The time to acquire a target is a function of the distance to and size of the target.

Fitts' Law is all about how easy it is to hit or acquire a target with your cursor/finger. Basically, the bigger the target and the closer it is, the easier it is to hit it. 

Fitts’ Law is especially crucial for mobile design, where screen real estate is limited, and precise interactions are more challenging. One example is designing menus or navigation. If you have teeny tiny menu options crammed together, users will struggle to click on the right one without activating a magical cursor-targeting jiu jitsu. Following Fitts' Law, you'd want to space things out nicely and make those menu items generously sized. 

Notice how pop-up ads usually have the X close button in a corner, in minuscule sizing and usually surrounded by a bunch of other hyperlinked images? You have to try a couple of times and press exactly on the X, else you end up on a scammy website for online poker. This is a violation of Fitts’ law.

6. Jakob’s Law

Law: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

No one wants to think. Especially when you’re shopping for a new pair of jeans.

Jakob's Law (of Nielsen Norman fame) says you should reuse navigation, structure and visual hierarchy patterns people already expect. 

While innovation is great, don't reinvent the wheel on nav bars. Follow established conventions and patterns that users are already familiar with, especially for common tasks like navigation, checkout processes, or search functionality. This reduces the learning curve and cognitive load on users, making your interface more intuitive and user-friendly.

7. Paradox of the Active User

Law: Users never read manuals but start using the software immediately.

How many apps you signed up for have a guided tour?

How many guided tours have you actually taken? 

 You’re not alone, most of us dive right in and try to figure things out as we go. This is what the Paradox of the Active User refers to – users want to start using a product immediately, without reading lengthy instructions or tutorials.

The takeaway for UX-ers? Design interfaces that are self-explanatory and intuitive from the get-go. Use clear labels, visual cues, and familiar patterns to guide users through tasks and functionalities. If instructions or tutorials are necessary, make them concise, engaging, and easily accessible within the product itself.

8. Goal-Gradient Effect

Law: The tendency to approach a goal increases with proximity to the goal.

There’s a reason every survey form shows you a progress bar.

The closer you get to completing something, the more motivated you feel to reach that 100% bar. That’s the Goal-Gradient Effect.

When it comes to applying this in UX, it could mean:

1. Progress bars to show how much work is left, and to encourage completion
2. Artificial goals, badges and milestones for long, complex tasks (think of the badges Duolingo gives you for completing a lesson) 

By giving your users little wins throughout the experience, you keep them motivated, as well as lessen the perceived workload and cognitive effort required.

Gestalt Principles

Gestalt principles are all about how our brains make sense of the visual world around us. They describe the ways our minds naturally group and organize different elements into meaningful “wholes”. These principles come from Gestalt psychology, which focuses on how we humans perceive patterns and relationships.

9. Law of Prägnanz

Law: People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.

Have you ever looked at a random collection of rocks or stains on the wall and your brain instantly made it into a recognizable shape or image? Like seeing a smiley face in a pair of door knobs and a light switch? That's the Law of Prägnanz (aka Law of Good Figure 💃) at work.

Essentially, our minds are hardwired to take ambiguous or complex visuals and interpret them in the simplest, most coherent way possible.

This is also a big factor in web design. If you present users with overly complicated, ambiguous layouts or graphics, their brains will instinctively try to simplify and make patterns out of it.  

There’s a reason we see faces when we this vase:

The takeaway? Keep visuals clear, simple, and free of ambiguity. Ditch the abstract complexities and weird formats. Stick to basic shapes, familiar layouts, and straightforward graphics that require minimal brain power to comprehend correctly.

10. Law of Common Region

Law: Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

Basically, when elements are visually contained within a distinct area or boundary, our brains automatically perceive them as belonging to the same group. It's our mind's way of making sense of things and understanding relationships quickly.

If you see a website with different sections separated by borders or color-coded backgrounds,, your brain immediately recognizes that all the elements within each distinct area are related and part of the same category. Even without reading the text.

This visual grouping through borders, backgrounds, or spacing acts like a shortcut for your brain. Instead of parsing every single element individually, you can scan the groupings and understand the broader relationships at a glance.

11. Law of Proximity

Law: Objects that are near, or proximate to each other, tend to be grouped together.

When you see a group of people standing next to each other at a party, you assume they’re there together. 

Cliques apply to websites as well. If you’re designing a website, group related information and elements close together to make it easier for users to perceive them as a single unit or concept.

12. Law of Similarity

Law: The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

Let’s say that you're making an e-commerce website that displays various product images on the homepage. Some products are shaped like squares, while others are circles or rectangles. According to the Law of Similarity, users will instinctively group and visually connect all the square-shaped products together as one unit, and the circular ones as another, despite the space between them.

This mental grouping happens rapidly and requires very little conscious effort from the viewer. It's our brain's efficient way of making sense of visual information by identifying related pieces and assembling them into coherent wholes.

For designers, this law can be incredibly useful for establishing visual unity, hierarchy, and organization without relying too heavily on other grouping techniques like borders or spacing. 

13. Law of Uniform Connectedness

Law: Elements that are visually connected are perceived as more related than elements with no connection.

Think about a family tree diagram or an organizational chart on a Miro board – the lines or connectors between elements create a clear visual relationship.

It helps to use visual connections like lines, arrows, or other connectors to explicitly show relationships between elements. This helps users follow logical flows or hierarchies within your interface.

Cognitive Bias

Cognitive biases are those quirks in our brains that cause us to think or behave in certain ways, even if they might not be entirely logical or rational. Understanding these biases can help UXers design interfaces that work with, rather than against, the way our minds naturally operate.

14. Peak-End Rule

Law: People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.

Anyone who has had a breakup gets this one. You always remember the peaks and the ending of a relationship, instead of an average of every moment. That's the Peak-End Rule at work.

Let's say you're designing a checkout process for an e-commerce site. If the initial steps are smooth but the final payment page is confusing or glitchy, users are likely to remember the negative "end" of the experience more than the positive parts leading up to it.

Pay special attention to the peak moments and end points of user journeys or experiences. Make sure these are as smooth, positive, and memorable as possible, as they can heavily influence a user's overall perception. Like confetti on your screen when you complete a task!

15. Serial Position Effect

Law: Users have a propensity to best remember the first and last items in a series.

Memorize this list of items.
Apple
Churro
Racket
Lawn mover
Basket
Pen
Flask

Close your eyes and try to remember. Chances are, you'll remember the first few items and the last few items better than the ones in the middle.

When designing a navigation menu or a list of options, the items at the beginning and end are more likely to catch a user's attention and be remembered.

Place the most important or frequently accessed items at the start or end of lists or menus. These positions are prime real estate for ensuring visibility and recall.

16. Von Restorff Effect

Law: This predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

You know how someone wearing a dress with polka dots in a sea of black suits immediately catches your eye? That's the Von Restorff Effect– our brains are naturally drawn to things that stand out from the norm.

While designing a website or app for instance, you might use a contrasting color or design element to highlight a specific call-to-action button or important piece of information.

Use strategic contrast or novelty to make certain elements pop out and be more memorable. But be judicious – too much contrast can be overwhelming or confusing.

17. Zeigarnik Effect

Law: People remember uncompleted or interrupted tasks better than completed tasks.

Have you ever been working on a project, got interrupted, and then found yourself constantly thinking about the unfinished task? That's the Zeigarnik Effect – our brains have a harder time letting go of incomplete tasks.

If you’ve not completed a task, you’ll remember it every waking moment of your day.

If it’s done and dusted? You forgot about it yesterday.

This is why TV shows sometimes end with cliffhangers, viewers are then more likely to remember and mull over the unresolved plot twists. This is also why if you study really hard for an exam, it feels like you’ve forgotten everything you learned once the test is over. 

In a multi-step process like a checkout flow or form for example, users might be more likely to remember and return to an unfinished task than one they've already completed.

The takeaway? Show people that their task is still incomplete with progress bars and reminders (you didn’t complete checkout!).

Principle

The last category covers some general principles to guide UX design decisions and help create better user experiences.

18. Doherty Threshold

Law: Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.

We all hate seeing the Mac color wheel.That's because our brains expect real-time responsiveness, especially when it comes to digital interactions.

While designing interfaces, aim for interactions and responses to happen within 400 milliseconds (0.4 seconds) or less. This ensures a smooth, seamless experience where users don't feel like they're waiting on the system.

19. Occam’s Razor

Law: Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.

In other words, keep it simple! Occam's Razor is all about favoring the simplest solution or explanation when faced with multiple options.

When designing a form for example, you could include a ton of fields and options to cover every possible scenario. Or, you could streamline it to include only the essential information needed, making it simpler and easier to complete.

Avoid unnecessary complexity or assumptions. When faced with multiple design options, choose the one that requires the least effort or assumptions from the user.

20. Tesler’s Law

Law: For any system, there is a certain amount of complexity which cannot be reduced.

As much as we strive for simplicity, Tesler's Law reminds us that some level of complexity is unavoidable, especially in more advanced or feature-rich systems.

Example: Think about a professional photo editing software like Adobe Photoshop – no matter how well-designed the interface is, there will always be a certain level of complexity due to the nature of the task and the number of features involved.

The takeaway? While simplicity is generally preferable, recognize that some complexity might be necessary based on the requirements and use cases of your system. The key is to manage and minimize complexity as much as possible, while still providing the necessary functionality.

21. Postel’s Law

Law: Be liberal in what you accept, and conservative in what you send.

This law is particularly relevant for software and systems that need to communicate or interact with other systems or users.

Let's say you're designing a web form that accepts user input. Following Postel's Law, the form should be flexible and tolerant in accepting different formats or variations of input (liberal in what it accepts). However, when submitting that data to a backend system, it should follow strict rules and conventions (conservative in what it sends).

Conclusion

While these laws provide a solid foundation for creating intuitive and user-friendly experiences, it's important to remember that they aren't hard-and-fast rules! UX is a multifaceted practice that requires critical thinking, creativity, and the ability to adapt to specific contexts and user needs.

So, use these laws as guiding principles, but don't be afraid to apply your own insights, observations, and good old-fashioned common sense.