Good UX design is more than just making things look pretty. It’s based on how people think and act, and there are proven rules, called the laws of UX design, that explain this. These rules aren’t just random tips; they’re like established truths. For example, Fitts’s Law in UI design explains how easy it is to click a button based on its size and distance, and Hick’s Law shows that too many options can confuse people. These laws help designers create websites and apps that feel natural and easy to use.
In this article, we’ll explain 21 important UX design laws, show how they’re used in real life, and answer common questions like the difference between UI and UX laws and or how many types of UX laws are there. Whether you’re new to design or have been doing it for years, understanding these principles will make your design ideas clearer and more effective.
These laws are necessary for any UX designer aiming to create interfaces that facilitate complete tasks, reduce cognitive load, and ultimately, enhance user satisfaction. Ready to enhance your designs? Let’s delve into the 21 Laws of UX to make user-friendly interfaces that make people happy.
What Are The Laws Of UX?
The laws of UX design are fundamental principles that guide how users interact with digital platforms. These UX laws of design are based on cognitive science and human behavior, providing a roadmap for UX designers to create intuitive and engaging user interfaces. How many types of UX laws are there?
These UX laws aren’t completely separate entities. They often relate to each other and can definitely be grouped based on the underlying psychological principles or the aspect of user experience they address.
Here’s a common way to group them:
1. Gestalt Principles (How We Perceive Visual Information): These laws describe how humans naturally organize visual elements into groups or unified wholes.
2. Information Processing & Decision Making: These laws relate to how users process information, make choices, and react to complexity.
3. User Behavior & Motivation: These laws describe how users interact with systems and what influences their engagement.
4. Memory & Recall: These laws influence how users remember and recall information.
5. Usability & Interaction: These laws directly impact the ease and effectiveness of user interaction.
6. Subjective Experience & Perception: These laws relate to how users perceive and feel about their interactions
The “Law of Magic”: This one is a bit more metaphorical. It often refers to making complex processes feel simple and effortless for the user, almost like magic. While it doesn’t fit neatly into a specific psychological category, it’s a guiding principle that can be informed by many of the other laws (like reducing complexity with Occam’s Razor or making interactions feel fast with Fitts’s Law and the Doherty Threshold).
We will learn about each of these laws if UX design one by one.
What Is Gestalt Principles & Why They Are Used?
Imagine you’re looking at a bunch of individual dots on a page. Your brain doesn’t just see random dots; it tries to make sense of them by grouping them together based on things like how close they are or if they form a pattern. That’s essentially what Gestalt Principles are all about. They are a set of rules that describe how our minds naturally organize visual elements into unified wholes when we perceive the world around us.
Let’s break down these Gestalt Principles and how many types of UX laws are there:
Law of Uniform Connectedness
The Law of Uniform Connectedness highlights that elements sharing visual links (like lines or frames) are seen as related. This is key in UI/UX to make interfaces easy to grasp. Designers should visually connect similar items using consistent cues like color or shape. For example, on a website, all product images might have the same size, signaling their shared purpose.
This law works with others, like the Law of Proximity (close items are related) and Fitts’s Law (easy-to-click elements). By clearly connecting related items, designers create clean, focused interfaces that guide users smoothly, improving usability on websites, apps, and forms. Ignoring this can confuse users in testing, while following it enhances control and satisfaction.
Use Case: Navigation menus often use lines or background boxes to visually connect related items, making it clear they are part of the same group.
Prägnanz’s Law (Law of Simplicity)
Prägnanz’s Law, a key UI/UX principle, states that our brains naturally simplify complex shapes into easier-to-understand forms to minimize mental effort. In UX design, using simple shapes helps users quickly grasp the interface structure, preventing information overload. This leads to designs that are both visually appealing and easy to comprehend, creating a smoother user journey and reducing task interruptions.
This law connects with others like the Law of Proximity (nearby elements are grouped) and Fitts’s Law (easy-to-interact elements). During usability testing, Prägnanz’s Law helps identify confusion caused by overly complex or ambiguous elements. By prioritizing simplicity and clarity, designers can create more intuitive and engaging interfaces for websites, apps, and forms, ultimately improving the user experience.
Use Case: Company logos are often designed to be simple and memorable, making them easy to quickly understand and recall.
Law of Common Region
The Law of Common Region, a vital UX principle, explains that when elements are enclosed within a shared visual boundary, our brains perceive them as belonging together. This boundary could be a box, a background color, or any distinct container. By visually grouping related items, designers can create clear and organized interfaces, making it easier for users to understand relationships and navigate content.
For instance, grouping related settings within a bordered area helps users quickly identify and manage specific options. This law works in harmony with the Law of Proximity, but Common Region provides a stronger sense of connection. Effectively using visual containers enhances clarity, reduces cognitive load, and improves the overall user experience across websites, apps, and forms.
Use Case: Grouping related settings or options within a bordered section on a settings page makes it clear they belong to the same category.
Law of Proximity
The Law of Proximity, a fundamental UX principle, highlights that objects placed close to each other are naturally perceived as being related or belonging to the same group. This grouping happens automatically in our visual perception, even without explicit visual connectors. Designers leverage this by strategically spacing elements to convey relationships and hierarchy.
For example, placing labels directly next to their corresponding input fields clearly associates them. Conversely, separating unrelated elements with sufficient space helps distinguish them. Effectively using proximity simplifies interfaces, reduces visual clutter, and allows users to quickly understand the structure and organization of content on websites, apps, and other digital products, leading to a more intuitive experience.
Use Case: In a contact form, labels placed directly above their corresponding input fields are clearly associated with that field.
Law of Similarity
The Law of Similarity, a core UX principle, states that elements that share visual characteristics such as color, shape, size, texture, or orientation are automatically perceived as being more related or belonging to the same group.
Designers utilize this principle to create intuitive interfaces by making related items look alike. For instance, using the same color for all primary action buttons signals their similar function. Conversely, differentiating elements visually helps users distinguish between them.
By consistently applying visual similarities, designers can establish clear patterns, improve scannability, and enhance the user’s ability to understand the purpose and relationships between different elements on websites, applications, and other digital interfaces, leading to a more cohesive and user-friendly experience.
Use Case: Displaying different categories of products on an e-commerce site with distinct colors helps users quickly identify and group items of interest.
Information Processing & Decision Making
Our brains have limits when it comes to taking in information and making decisions.
The Information Processing & Decision Making laws in UX design focus on these limitations. They explain how the number of choices, the amount of information presented, and the overall complexity of a system can significantly impact how easily and efficiently users can interact with it.
These laws guide designers to create interfaces that respect these cognitive boundaries, making experiences feel intuitive and manageable rather than overwhelming or frustrating. By understanding these principles, we can design in a way that supports the user’s mental flow and leads to faster, more confident interactions.
Hick-Hyman Law (often referred to as Hick’s Law in UX)
This principle states that the time it takes for a user to make a decision increases proportionally with the number of available choices. Simply put, more options mean more thinking time. This is especially critical in multi-step processes like online checkouts, where too many choices can overwhelm users and slow them down.
UX designers should aim to simplify interfaces by breaking down complex tasks and limiting the number of options presented at any given time. By monitoring how users interact, designers can identify areas where decision-making takes too long and then refine the design to reduce choice and cognitive load, leading to a smoother and more efficient user experience.
Use Case: Instead of showing all possible filters on an e-commerce product listing page at once, progressively reveal them or group common filters to reduce the initial number of choices users face.
Miller’s Law
This core UX principle highlights that our working memory, the part of our brain that actively holds and processes information, has a limited capacity often cited as around seven pieces of information, plus or minus two.
In UX design, this means we should avoid overwhelming users with too much information at once. When interfaces are cluttered with choices, complex interactions, or dense text, users can feel overloaded, leading to confusion and task abandonment.
Designers should prioritize essential elements and break down information into smaller, manageable chunks to respect this cognitive limit. Techniques like using clear headings, bullet points, and grouping related items visually (as supported by the Law of Proximity) help users process information more easily. By respecting Miller’s Law, we design interfaces that are easier to learn, navigate, and use, ultimately enhancing the user experience by reducing cognitive strain.
Use Case: Instead of presenting a long list of all possible features on a product page, group them into logical categories (e.g., “Key Features,” “Technical Specs,” “Customer Reviews”) to make the information more digestible.
Occam’s Razor (Law of Parsimony)
This principle, crucial in UX design, advises that the simplest solution is usually the best. When designing interfaces, this means favoring clarity and eliminating unnecessary elements without sacrificing functionality.
Avoid adding multiple features that do the same thing, as this can clutter the interface and overwhelm users’ limited working memory. By stripping away the non-essential, designers can create more intuitive and efficient experiences.
Use Case: When designing a sharing feature, offering a direct link copy option might be preferable to including numerous social media icons if the primary goal is quick sharing, thus simplifying the user’s choice and action.
Tesler’s Law (Law of Conservation of Complexity)
This UX principle states that every system has a certain amount of inherent complexity that cannot be eliminated, only moved. When you simplify something for the user, the underlying complexity often shifts to the development side.
Designers face a trade-off: making the user experience easier might require more intricate engineering. The ideal balance depends on the project, the target users (beginners vs. experts), and available resources. While reducing user-facing complexity generally improves usability and lowers cognitive load, it’s important not to oversimplify to the point where experienced users feel a loss of control or functionality.
Understanding Tesler’s Law helps designers make informed decisions about where complexity should reside to create the most effective and user-friendly product.
Use Case: A video editing software could offer a simple “Auto Enhance” button (shifting complexity to the algorithm) while also providing advanced manual controls for experienced users who want fine-grained adjustments.
User Behavior & Motivation
Ever wondered why you’re more likely to finish a progress bar than abandon it halfway? Or why a familiar website feels instantly comfortable?
The laws of User Behavior & Motivation in UX design unlock these secrets. They reveal the hidden drivers behind our digital interactions, showing us what makes users click, scroll, and ultimately connect with a product.
By understanding these principles, we can craft experiences that not only work well but also tap into users’ intrinsic desires and tendencies, turning mere interactions into meaningful engagements. Let’s explore these fascinating forces that shape how we experience the digital world.
Fitts’s Law in UX design
Think about how much faster it is to tap a big button right under your thumb on your phone compared to a tiny link in the corner. That’s the essence of Fitts’s Law. It basically says that the closer and bigger something is on the screen, the easier and faster it is for users to click or tap it.
For designers, this is super useful. It means that important actions like the main button on a page should be large and placed where users can easily reach them. On phones, that’s often near the bottom. Less important things can be smaller and further away.
Also, remember that the edges and corners of the screen are like “easy targets” because your mouse stops there. That’s why menus are often at the top. But don’t make everything huge! Too many big things close together can be messy. The key is to make the important stuff big and easy to reach, making the whole experience smoother and faster for everyone.
Use Case: On a mobile e-commerce app, the “Add to Cart” button on a product page is typically made large and placed prominently near the bottom of the screen, within easy reach of the thumb. This makes it quick and effortless for users to add items to their basket, directly impacting conversion rates.
Jacob’s Law in UX design
Jacobs law UX design is a fundamental principle in UX design, named after the renowned usability consultant, Jakob Nielsen. This law emphasizes that users expect websites to function similarly to how other websites they’ve used. In other words, users interact with new interfaces based on their existing mental models formed from their experiences with other websites.
This law highlights the importance of designing interfaces that are consistent with users’ expectations, which can significantly reduce cognitive load. For instance, users typically associate certain colors with specific actions, such as red for stopping and green for proceeding.
Adhering to Jacobs law UX design can guide UX designers in leveraging existing mental models to create intuitive and user-focused experiences. This can result in user-friendly digital products that not only meet users’ expectations but also facilitate completed tasks with the least cognitive effort.
Use Case: Placing the main navigation menu at the top of a website with a logo on the left and links to key sections in the middle or right aligns with established user expectations, making it easier for them to find their way around.
Goal-Gradient Effect In UX Design
This principle highlights that as users get closer to achieving a goal, their motivation and effort increase. Think of it like running a race – you tend to speed up as you approach the finish line. In UX, this means that showing users their progress and how close they are to completion can significantly boost their engagement.
Use Case: A multi-step online application form often uses a progress bar. As users fill out each section and see the bar getting closer to 100%, they are more motivated to complete the final steps and submit the application. Even visually indicating “Step 3 of 4” leverages this effect.
Pareto Principle (80/20 Rule)
The Pareto Principle or the 80/20 rule is a key concept in the laws of UX design. It suggests that a significant chunk of your results, around 80%, comes from a smaller portion of your efforts, typically 20%. This principle can be incredibly useful when it comes to refining or updating your interface.
Understanding the Pareto Principle can help guide your design efforts more efficiently. It allows you to focus on the most impactful aspects of your design, ensuring that your time and resources are utilized effectively. When faced with limited resources, this principle advises prioritizing the resolution of the 20% of issues that impact 80% of your users.
Although the exact figures might vary, the essence of the Pareto Principle lies in understanding the uneven relationship between cause and effect. This understanding can lead to more efficient improvements in your design. By focusing on the most critical issues, you can significantly enhance the user experience with a fraction of the effort. This principle helps in creating user-friendly digital products that meet users’ expectations and enhance their overall experience.
Use Case: Through user analytics, a social media platform discovers that 80% of user engagement (likes, comments, shares) comes from just 20% of the features (e.g., feed scrolling, posting photos, direct messaging). Instead of equally focusing on all features, the design team should prioritize improving the performance and usability of these core 20% to maximize overall user satisfaction and engagement. This might involve optimizing the feed loading speed or making the photo posting process more seamless.
Memory & Recall Laws In UX Design
Ever struggled to remember a long list of items but could easily recall the first and last few? Or perhaps you’ve noticed how a highlighted word on a page sticks in your mind more than the surrounding text?
These are glimpses into the fascinating world of Memory & Recall Laws in UX design. These principles delve into how our brains encode, store, and retrieve information when interacting with digital interfaces.
By understanding these cognitive quirks, we can design experiences that are not only usable but also memorable and intuitive, making it easier for users to navigate, learn, and ultimately connect with our products. Let’s explore how these insights into human memory can shape more effective and user-friendly designs.
Serial Position Effect
Ever find it easier to remember the first and last items on a menu but struggle with the ones in the middle? That’s the Serial Position Effect at play. This UX principle highlights that we tend to recall the first (primacy effect) and last (recency effect) items in a list or sequence more easily than those in between.
Designers can leverage this by placing the most important options at the beginning and end of menus, navigation bars, or onboarding flows to increase their memorability. Less critical items can be positioned in the middle. By strategically ordering elements, we can guide user attention and improve the ease with which they navigate and remember key choices within an interface.
Use Case: On an e-commerce checkout page with multiple steps, placing the “Review Order” button (a critical last step) at the very end and a prominent “Contact Information” section (often the first step) at the beginning increases the likelihood of users remembering and focusing on these key stages.
Von Restorff Effect (Isolation Effect)
Also known as the Isolation Effect, this UX principle highlights our tendency to better remember things that stand out from their surroundings. When presented with a group of similar items, the one that is visually distinct is far more likely to grab our attention and stick in our memory. This distinctiveness can be achieved through differences in color, size, shape, animation, or any other visual property.
Designers can strategically use this effect to draw user attention to critical elements like primary call-to-action buttons, important notifications, or key pieces of information. However, it’s crucial to use this effect sparingly.
If too many elements are made to stand out, the impact is diluted, and the interface can become visually noisy and overwhelming. The power of the Von Restorff Effect lies in its judicious application to guide user focus effectively.
Use Case: On a list of similar product features, highlighting the most unique or compelling selling point with a distinct color or icon will make it more memorable and influence user decisions.
Zeigarnik Effect
Ever find yourself constantly thinking about an unfinished task, like replying to an email you started but didn’t send? That’s the Zeigarnik Effect in action. This UX principle highlights our tendency to remember incomplete or interrupted tasks more vividly than completed ones.
The Zeigarnik Effect is a key principle in the laws of UX web design that focuses on human memory and task completion. This effect can be seen in everyday scenarios, such as watching a TV series. When a plot is left unfinished, viewers typically find it hard to forget and remain engaged, eager to know the outcome.
In the realm of UX design, the Zeigarnik Effect can be leveraged to engage users and prompt them to remember and complete actions within an interface. By leaving tasks incomplete or interrupted, designers can pique users’ curiosity and motivate them to complete the tasks. This can lead to enhanced user engagement and interaction with the digital product.
Use Case: Showing a clear progress bar during a multi-step onboarding process or a profile setup encourages users to finish all the steps. The visual reminder of the incomplete task (the unfilled portion of the bar) creates a psychological tension that motivates them to reach the end and see the completed state. This can significantly improve completion rates for important workflows.
Usability & Interaction
Ever found yourself frustrated by a website that takes forever to load after you click a button? Or perhaps you’ve appreciated how quickly a well-designed app responds to your taps? These experiences highlight the importance of Usability & Interaction Laws in UX design.
These principles directly influence how smoothly and effectively users can engage with digital products. They focus on minimizing friction, maximizing efficiency, and creating interfaces that feel responsive and intuitive.
By understanding and applying these laws, designers can craft experiences that empower users to achieve their goals with ease and satisfaction. Let’s delve into the key principles that define seamless and effective user interactions.
Aesthetic Usability Effect
The Aesthetic Usability Effect is one of the crucial laws of UX design which suggests that users interact with an interface based on its aesthetic appeal. If an interface is visually appealing, users often perceive it as easier to use. This is because an attractive design can create a positive impression, leading users to be more forgiving of minor usability issues.
However, it’s important to note that while a pleasing design can enhance user experience, it cannot compensate for significant usability problems. Therefore, a UX designer should strive for a balance between aesthetics and usability when creating interfaces.
The Aesthetic Usability Effect highlights the importance of visual appeal in interface design, but it also emphasizes the need for effective functionality. The ultimate goal for any UX designer is to create interfaces that not only look good but also function well. This means reducing cognitive load, facilitating completed tasks, and meeting users’ expectations.
Use Case: Two similar software applications might have the same core features, but users might find the one with a cleaner, more modern visual design easier and more enjoyable to use, even if the underlying functionality is equally complex.
The Doherty Threshold
Ever feel like you’re talking to a wall when a website takes too long to respond after you click something? The Doherty Threshold principle states that for optimal productivity and engagement, systems should provide feedback to user actions within 400 milliseconds (0.4 seconds).
The Doherty Threshold is a principle in UX design laws that emphasizes the importance of system response speed. This principle suggests that user productivity is significantly influenced by how quickly a user interface responds to input. In essence, faster response times lead to more efficient task completion and overall better user experiences.
This near-instant response makes users feel in control and encourages them to continue interacting. Delays longer than this can lead to frustration, uncertainty, and a feeling that the system is slow or broken. Designers should strive for quick feedback to maintain a seamless and responsive user experience.
Use Case: When a user clicks a button to like a post on social media, the heart icon should change color almost instantly. This immediate visual feedback assures the user that their action was successful and encourages further interaction. Delays in this feedback can make users doubt if their action was registered.
Postel’s Law or Robustness Principle
Postel’s Law, also known as the Robustness Principle, is a fundamental concept in the laws of UI design vs laws of UX design. Originally formulated for data transfer protocols, it has found relevance in user experience design.
Think of a helpful friend who understands your slightly messy requests. That’s the essence of Postel’s Law in UX: “Be liberal in what you accept and conservative in what you send.” When users input data, design your system to be flexible and forgiving of minor errors or variations in formatting.
However, when your system outputs information, be precise and adhere strictly to established standards. This principle enhances usability by reducing user frustration with rigid input requirements and ensuring reliable system behavior.
In the context of UX design, this means that designers should prioritize creating robust and flexible interfaces. It suggests that interfaces should be designed to accommodate a wide range of user inputs while providing clear and precise feedback.
Use Case: When a user enters their phone number in a signup form, the system should ideally accept various formats (e.g., “(123) 456-7890”, “123-456-7890”, “1234567890”) instead of rejecting anything that doesn’t perfectly match one specific format. However, when the system displays the phone number later, it should present it in a consistent, standardized way.
Subjective Experience & Perception
Ever had a digital experience that left you feeling surprisingly satisfied, even if it wasn’t perfect? Or perhaps one that left a bad taste, even if it functioned flawlessly? These reactions highlight the crucial role of Subjective Experience & Perception in UX design.
These laws delve into how users interpret and emotionally respond to their interactions with digital products. It’s not just about usability; it’s about crafting experiences that feel good, meet expectations, and leave a positive lasting impression.
By understanding these principles, we can design beyond mere functionality and create products that resonate with users on a deeper, more personal level. Let’s explore the subtle yet powerful forces that shape how we feel about the digital world around us.
Peak-End Rule
The Peak-End Rule is a fundamental principle in UX laws of design that focuses on the user’s memory of their experience. According to this law, users tend to remember the peak moments and the end of their interaction more vividly than other parts. This understanding is crucial when designing user-friendly interfaces, as it guides designers to focus on optimizing the key moments in the user’s journey.
Applying the Peak-End Rule in UX design involves identifying and enhancing the emotional highs in the user’s journey. These peak moments can significantly shape the user’s overall perception of the interface. If users encounter challenges or difficulties at these crucial moments, these negative experiences will be remembered, potentially leading to a poor overall user experience.
To mitigate this, UX designers should strive to ensure that the emotional peak during user interactions is positive. This can be achieved by simplifying tasks, providing clear instructions, and ensuring that the interface is intuitive and easy to use.
The end of the user’s journey is equally important. Designers should consider how to make the conclusion of the user’s interaction a better experience. This could involve providing clear confirmation messages, helpful next steps, or even a simple thank you message.
Use Case: For a software update, even if the download has waiting periods, a visually engaging progress animation (positive peak) and a clear, celebratory “Update Complete!” message with a checkmark (positive end) can significantly improve the user’s overall perception. Conversely, a sudden error (negative peak) or a vague completion message (negative end) can sour the experience, even if other parts were fine. Focus on making the most intense and final moments positive.
Key Takeaways Out Of All 21 Laws Of UX Design
- The laws of UX design are grounded in cognitive science and help designers predict user behavior, reduce friction, and enhance usability.
- Principles like the Aesthetic Usability Effect and Fitts’ Law show that beauty and interaction speed influence how easy an interface feels to use.
- Laws like Miller’s Law, Hick’s Law, and Tesler’s Law guide how much information and complexity you should expose to users at once.
- Jakob’s Law reminds us that users expect familiar patterns based on their past digital experiences consistency builds trust and ease. Applying these laws doesn’t mean designing by formula, but designing with clarity, intention, and user empathy in mind.
Final Words
Understanding and applying these laws of UX design can significantly enhance the user experience, drive engagement, and ultimately, lead to the success of your digital product. However, the process of designing user-friendly interfaces can be complex and time-consuming.
That’s where Visily comes in. With its AI-powered design assistance, Visily simplifies the UX design process, making it easy and straightforward. It helps you adhere to these fundamental UX laws, ensuring your designs are intuitive, engaging, and user-friendly.
So, why wait? Start leveraging the power of AI in your UX design process with Visily today. Create digital products that not only look good but also function well, meeting users’ expectations and providing a seamless user experience.
