{"id":10305,"date":"2024-04-30T15:18:50","date_gmt":"2024-04-30T15:18:50","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=10305"},"modified":"2024-05-16T15:20:50","modified_gmt":"2024-05-16T15:20:50","slug":"laws-of-ux","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/laws-of-ux\/","title":{"rendered":"What are the laws of UX? All 21 laws explained"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">The laws of UX are a guiding set of principles and best practices for UX, UI, and product designers. Steeped in psychology, they help us to understand how people perceive and interact with our products\u2014allowing us to make better design choices.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The laws of UX can be divided into four main categories:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Heuristics<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gestalt principles<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cognitive bias<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Principles<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In this post, we explain all 21 UX laws and provide an actionable key takeaway for each.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Are you ready to level up your UX? Let\u2019s go!<\/span><\/p>\n\n<h2><strong>The laws of UX: heuristics\u00a0<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">In psychology, heuristics are mental shortcuts that we use to make decisions and solve problems quickly and efficiently. These mental shortcuts allow us to make sense of the world around us without stopping to process and analyse every single piece of information we receive.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The following UX laws are steeped in heuristics, and they impact how we navigate and perceive different products and experiences.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Aesthetic-Usability Effect<\/span><\/h3>\n<p><b>The Aesthetic-Usability Effect states that users tend to perceive aesthetically pleasing designs as more usable.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">So, even if there are usability issues within your design, they may go unnoticed\u2014or be more easily forgiven\u2014if the design looks great.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That doesn\u2019t mean that you should prioritise aesthetics over usability, but it does emphasise that <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-vs-ui-design\/\"><span style=\"font-weight: 400;\">UX and UI design<\/span><\/a><span style=\"font-weight: 400;\"> go hand-in-hand: they both play a crucial role in creating delightful user experiences.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Ensure that your designs are both flawlessly functional and aesthetically pleasing.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Fitts\u2019s Law<\/span><\/h3>\n<p><b>Fitts\u2019s Law considers how quickly and easily a user can reach a particular target (for example, a button) in order to interact with it.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Named after psychologist Paul Fitts, this UX law describes the relationship between the size and distance of a target (e.g. a button) and the time it takes the user to reach the target.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s expressed using an equation which calculates the \u201cIndex of Difficulty\u201d (ID)\u2014that is, how difficult it is for the user to get from a particular starting point to the desired target.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In simple terms, bigger and closer touch targets are quicker and easier to access.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Consider Fitts\u2019s Law when determining the size and position of important interactive elements. Make sure that touch targets (such as buttons and menu items) are large enough for users to select them with ease, and that they\u2019re positioned in a convenient, easily accessible location on the screen.<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><span style=\"font-weight: 400;\">3. Goal-Gradient Effect<\/span><\/h3>\n<p><b>The Goal-Gradient Effect states that the closer a user gets to completing a task, the more motivated they are\u2014and the faster they work\u2014to complete it.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This is a UX law that many of us can relate to. If a goal feels like it\u2019s within reach\u2014if we feel close to the finish line\u2014we\u2019re more inclined to just get on and get it done. Our perceived proximity to the end goal makes it feel more achievable and less overwhelming.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The same goes for digital products and experiences. Imagine the task of filling out a survey. If you\u2019ve been answering questions for what feels like an eternity, with no indication as to when the survey might end, you\u2019ll probably feel like giving up at some point.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But, if the survey platform keeps you updated on your progress and lets you know that you\u2019re nearing the end, you\u2019ll be more inclined to see it through.<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Provide users with clear progress or task status visibility to keep them motivated\u2014such as a progress bar or some well-placed microcopy. For example: \u201cYou\u2019re almost there! Just three more questions to go.\u201d\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">4. Hick\u2019s Law<\/span><\/h3>\n<p><b>According to Hick\u2019s Law, the more options a user is presented with, and the more complex those options are, the harder it is to make a decision.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s like eating out at a restaurant. When you\u2019ve got a menu comprising five different types of cuisine and thirty options for each, choosing what you want feels practically impossible!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The same goes for design. If you want to create an experience that feels intuitive, make it easy for the user to decide what action to take. Don\u2019t give them too many options\u2014and, if a particular process is inherently long and complex, break it down into smaller, more manageable steps.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Fewer options will make it quicker and easier for users to make decisions and complete their desired tasks. Where possible, keep options to a minimum. You can also guide users in their decision-making by highlighting recommended options.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_free-course-introduction-to-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/free-ux-design-course\/?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[FREE UX DESIGN COURSE]<\/p>\n                    <span>Click Here to Dive into the World of UX<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><span style=\"font-weight: 400;\">5. Jakob\u2019s Law<\/span><\/h3>\n<p><b>Jakob\u2019s Law is all about familiarity. Users expect websites (and other digital products) to be designed in a way that\u2019s consistent with others they\u2019ve used in the past.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Even when using an app or visiting a website for the very first time, you usually have some ingrained knowledge of how it\u2019ll work. For example, we just know that the house icon will take us to the homepage\u2014or, when using dating apps, that swiping left will \u201cpass\u201d on a profile while swiping right is a virtual \u201cthumbs up\u201d.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now imagine the chaos that would ensue if designers went against these expectations. Imagine signing up for a new dating app and swiping left and right, only to realise that left now actually means \u201clike\u201d and right now means \u201cpass\u201d. Very confusing and counter-intuitive!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jakob\u2019s Law says that we should design in a way that aligns with people\u2019s existing mental models\u2014a user\u2019s set of assumptions, beliefs, and expectations regarding how certain things work. This ensures an intuitive, smooth, and user-friendly experience.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Don\u2019t try to reinvent the wheel. Leverage users\u2019 existing mental models to inform your designs\u2014for example, place menus at the top of the page or to the left-hand side, use <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/7-principles-of-icon-design\/\"><span style=\"font-weight: 400;\">familiar icons<\/span><\/a><span style=\"font-weight: 400;\">, and implement familiar interactions such as swiping left\/right on a photo gallery or scrolling to move down the page.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">6. Miller\u2019s Law<\/span><\/h3>\n<p><b>Miller\u2019s Law states that the average person can only hold 7 items in their working memory, plus or minus 2.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">In UX and UI design, you want to avoid overloading the user\u2019s working memory. In other words, minimise the cognitive load\u2014or the mental effort\u2014required for the user to interact with your product.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Present information in meaningful, manageable chunks. If you\u2019re building an ecommerce website, you might limit the number of products shown at one time. If you\u2019re designing a blog, you might present articles in horizontal blocks of three.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Aim for clear, concise, and clutter-free designs and you\u2019ll automatically reduce the cognitive load placed on the user. Break content down into manageable chunks, prioritising the most important information first.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">7. Parkinson\u2019s Law<\/span><\/h3>\n<p><b>According to Parkinson\u2019s Law, a task will expand to fill the time allotted for its completion.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">In other words, if you set aside a certain amount of time to complete a particular task, you\u2019ll usually use up all of that time\u2014even if you don\u2019t really need it. If you\u2019re allotted one hour to complete a five-minute job, Parkinson\u2019s Law says that you\u2019ll still use the whole hour.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designers can use Parkinson\u2019s Law to their advantage by making certain tasks even quicker and more efficient than the user expects. For example, if the user expects to spend one minute creating a new account, anything you can do to speed that process up will enhance the user experience.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Design tasks and processes so that they\u2019re even quicker than the user expects. Simplify forms, use features like autofill, and give the user an estimate for how long a particular process should take.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_product-design-programmep-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/product-design?utm_source=blog&utm_medium=%20blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN PRODUCT DESIGN (UX &amp; UI)]<\/p>\n                    <span>Enrol now in our Product Design Programme<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong>The laws of UX: Gestalt principles<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The Gestalt principles are a set of psychological principles that consider how humans tend to perceive and make sense of visual information. In UX and UI, we can use the Gestalt principles to design and arrange different elements according to how we want the user to group and interpret them. The next five UX laws on our list are all derived from Gestalt psychology.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">8. Law of Common Region<\/span><\/h3>\n<p><b>The Law of Common Region states that, when elements are positioned together in the same area\u2014i.e. when they share a common region within a boundary\u2014the user perceives those elements as belonging together.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Consider this screenshot taken from The UX Design Institute blog:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-10311 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-00.58.46.png\" alt=\"screenshot of the UX design institute&#039;s blog\" width=\"2182\" height=\"1244\" title=\"\">When you perceive this page, you can instantly ascertain\u2014without really thinking about it\u2014what elements belong together. You know that each image, article title, date, and reading time belongs to a particular blog article. That\u2019s because you perceive them as sharing a common region.<\/p>\n<p><span style=\"font-weight: 400;\">Designers can use borders, spacing, and colour to create common regions and group elements together, making it easier for the user to understand the relationship between different elements on the page. This, in turn, facilitates navigation and usability.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Group elements together logically and emphasise these groupings according to the Law of Common Region. Use borders, spacing, colour, and shading to define different regions on the page.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">9. Law of Proximity<\/span><\/h3>\n<p><b>According to the Law of Proximity, items or elements that are positioned close together are perceived as belonging to the same group.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This is similar to the Law of Common Region. When we see visual elements in close proximity to one another, we assume they have something in common\u2014that they belong to a particular group of elements or that they all function in a similar way.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Law of Proximity enables the user to quickly deduce the relationship between different elements and groups, making it easier to navigate the interface.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Use the Law of Proximity to signal which elements belong together. For example, if you\u2019re designing a form, place form labels and their corresponding input fields close together so the user knows exactly what information to enter where.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><span style=\"font-weight: 400;\">10. Law of Pr\u00e4gnanz<\/span><\/h3>\n<p><b>The Law of Pr\u00e4gnanz states that when we perceive complex or ambiguous imagery, we automatically interpret it in the simplest way possible.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s as if the brain carries out an automatic conversion, turning a complex image into something much simpler and therefore easier to comprehend. This is the brain\u2019s way of reducing the cognitive effort required to interpret the image.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So how does this relate to UX and UI design?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to design products and experiences that are easy and efficient for the user, you ideally want to reduce the amount of cognitive effort required. One way you can do that is by favouring simple, straightforward shapes like squares, circles, and rectangles.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Bear in mind that more complex, ambiguous images require more effort to comprehend. Opt for simpler shapes and imagery, especially for important elements such as call-to-action buttons.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">11. Law of Similarity<\/span><\/h3>\n<p><b>According to the Law of Similarity, elements that look similar will naturally be perceived as a related group.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This speaks to the power of consistency throughout a product or user interface. A classic example is the styling of hyperlinked text. In a Google Doc, hyperlinking a piece of text will turn it blue. This builds a connection in the reader\u2019s mind\u2014that all blue text has something in common; i.e. it contains a hyperlink.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another example is the distinction between header text and body text. If you\u2019re styling the text on a website, you\u2019ll probably use a large, bold font for header text\u2014and maybe even a different colour\u2014compared to smaller, lighter body text.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Use colour, shape, and size to differentiate between different elements and build meaningful connections between similar elements. For example, links should all be styled the same to signal that they share the same functionality.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">12. Law of Uniform Connectedness<\/span><\/h3>\n<p><b>The Law of Uniform Connectedness states that when elements appear to be connected in terms of their visual appearance, we perceive them as being part of a related group\u2014unlike visually dissimilar elements that appear to have no connection.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Just like the Law of Similarity, designers can play into the Law of Uniform Connectedness to help users understand and navigate an interface. Elements can be connected by colour, lines, frames, or even arrows. These visual cues tell the user that those elements have something in common and belong to the same group.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Use colour, borders, shapes, or visual connectors such as arrows to visually group different elements and help your users to understand the interface.<\/span><\/p>\n<h2><strong>The laws of UX: cognitive bias<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Some UX laws are based on cognitive bias\u2014our natural human tendency to interpret information and make assumptions based on previous experiences and preferences. If we understand the cognitive biases at play, we can design products that meet the users\u2019 expectations and feel more intuitive. Here are four UX laws shaped by cognitive bias.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">13. Peak-End Rule<\/span><\/h3>\n<p><b>The Peak-End Rule suggests that people don\u2019t judge an experience based on all the different moments along the way\u2014rather, they judge it primarily based on how they felt at the peak of the experience and at the end.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">While every step in the user\u2019s journey should be smooth and hiccup-free, designers can enhance the user\u2019s overall perception of the experience by paying special attention to the peak and the end.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The peak is a particularly key or defining moment in the journey\u2014for example, the user completing a task or achieving a goal. The end is the final step or interaction they have.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can enhance these moments with <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ux-writing\/\"><span style=\"font-weight: 400;\">memorable microcopy<\/span><\/a><span style=\"font-weight: 400;\">, a delightful animation, or some kind of unexpected surprise (perhaps a discount code or a gift, depending on the product and the experience in question).\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Identify key moments within the user journey and ensure that they\u2019re particularly positive and memorable.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">14. Serial Position Effect<\/span><\/h3>\n<p><b>According to the Serial Position Effect, users are most likely to remember the first and last items in a sequence.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Whether left to right or top to bottom, think about the order in which people will perceive your designs. With the Serial Position Effect in mind, place the most important elements where they\u2019ll be encountered first and last\u2014for example, to the far left and to the far right of the navigation menu, or at the top and the bottom of the page.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This applies to both visual and written content\u2014anything the user encounters when interacting with a product or completing a particular task.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Keep this UX law in mind when defining your product\u2019s <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-information-architecture\/\"><span style=\"font-weight: 400;\">information architecture<\/span><\/a><span style=\"font-weight: 400;\"> and visual hierarchy. The most important elements should appear first and last in the sequence, with less critical information in the middle.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">15. Von Restorff Effect<\/span><\/h3>\n<p><b>The Von Restorff Effect states that when we\u2019re presented with multiple similar elements, we\u2019re most likely to remember the element that differs even slightly from the rest.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This UX law is also known as the Isolation Effect, and it describes our tendency to be drawn to things that stand out. Imagine you\u2019re presented with a piece of paper with fifteen circles drawn on it. They\u2019re all the same size, but fourteen are blue and one is red. You\u2019ll likely be drawn to the red one, right?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can apply this principle to draw the user\u2019s attention to important elements such as CTA buttons or headings. This, in turn, guides them towards particular actions or influences how they perceive the content on the page.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Use shapes, negative space, colour, and typography to help important elements stand out.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">16. Zeigarnik Effect\u00a0<\/span><\/h3>\n<p><b>According to the Zeigarnik Effect, uncompleted or interrupted tasks stick in people\u2019s memories more than completed tasks.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This UX law is named after psychologist and psychiatrist Bluma Wulfovna Zeigarnik who discovered that starting a particular task creates cognitive tension in the user.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When cognitive tension is present, the user is able to recall specific information related to that task. But, once the task is complete, the cognitive tension dissipates\u2014as does the person\u2019s ability to recall task-related information.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In UX terms, the Zeigarnik Effect can be used to create task-related cognitive tension which can help to keep users engaged and encourage them to return to a particular task.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider the example of a fitness tracker that counts your daily steps. If your goal is to take 6,000 steps a day, a progress bar will remind you that you haven\u2019t yet reached your goal\u2014in other words, it\u2019ll keep you cognitively engaged. Once you\u2019ve hit your 6,000 steps, you can relax (both physically and mentally!)<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Provide the user with visual indicators of incomplete tasks. This will build task-related tension and encourage them to return to, and engage with, the task at hand.<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_free-course-introduction-to-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/free-ux-design-course\/?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[FREE UX DESIGN COURSE]<\/p>\n                    <span>Click Here to Dive into the World of UX<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong>The laws of UX: additional principles<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Last but not least, there are some additional principles that complete our 21 laws of UX. Let\u2019s explore those now.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">17. Doherty Threshold<\/span><\/h3>\n<p><b>According to the Doherty Threshold, users expect an instant response when interacting with a computer\u2014instant being 400 milliseconds or less.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This is a UX law we can all relate to. If you\u2019re interacting with a website, you expect feedback on your actions. For example, if you\u2019re shopping online and you click \u201cAdd to basket\u201d, you want clear confirmation that the action was successful\u2014and you want it fast.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Doherty Threshold states that users should receive feedback within 400 milliseconds if they are to perceive the experience as smooth and productive.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Reward every user action or interaction with clear and instant feedback. Even if the process itself takes longer, provide the user with a progress bar or a timer so they know that something\u2019s in motion.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">18. Occam\u2019s Razor<\/span><\/h3>\n<p><b>Occam\u2019s Razor is a problem-solving principle that suggests that the simplest solution is often the best solution.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">As a rule of thumb, every element in your design should serve a purpose. If it doesn\u2019t add any specific value for the user or help to enhance the user experience in some way, remove it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Occam\u2019s Razor helps UX designers to prioritise usability, functionality, and clarity, removing unnecessary clutter and complexity. It\u2019s similar to the <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/the-kiss-principle-in-ux-design\/\"><span style=\"font-weight: 400;\">KISS principle<\/span><\/a><span style=\"font-weight: 400;\"> which reminds us to \u201cKeep it simple, stupid!\u201d<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Consider your design complete when there\u2019s nothing more you could possibly remove without compromising functionality.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">19. Pareto Principle<\/span><\/h3>\n<p><b>The Pareto Principle is an 80\/20 rule that says that around 80% of the effects come from 20% of the causes.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Although the Pareto Principle derives from economics, it\u2019s also useful for UX design. Because not all features or design elements will hold equal weight in shaping the user experience, the Pareto Principle encourages designers to focus their efforts on the areas that will have the biggest impact.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re looking to improve your website, for example, you don\u2019t need to redesign it from top to bottom. Rather, you can focus on one or two aspects (the 20%) that will make the most difference (80%).\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Conduct research and testing to identify the features and elements that have the biggest impact on the user experience\u2014and focus most of your efforts there.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">20. Postel\u2019s Law<\/span><\/h3>\n<p><b>Postel\u2019s Law states that you should be flexible in terms of what you accept from your users while limiting what you ask of them.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">The easiest way to explain Postel\u2019s Law is with the example of a form. When designing a form, you want to make it as straightforward as possible for the user to fill out. One way to do that is to be liberal in terms of what answers and input you\u2019ll accept.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example: imagine one question on your form asks the user to enter their country of residence and they enter \u201cUK\u201d. If you\u2019re designing with Postel\u2019s Law in mind, you\u2019ll accept this answer, as well as other possible variations such as \u201cUnited Kingdom\u201d.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This flexible approach makes the experience hassle-free for the user. At the same time, you want to limit what you ask of them\u2014so, when designing your form, you\u2019ll only include questions that are really and truly necessary.<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Anticipate the different inputs your users might provide or the actions they might take within a given scenario, and design to accommodate them.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">21. Tesler\u2019s Law<\/span><\/h3>\n<p><b>According to Tesler\u2019s Law, every system has a certain degree of complexity that cannot be reduced.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">UX design is all about creating smooth, intuitive, hassle-free experiences. Often, this favours ease, simplicity, and clarity. However, Tesler\u2019s Law reminds us that simplification has its limits. Every system has a degree of intrinsic complexity that can only be boiled down to a certain point.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Oversimplification beyond that point compromises the system or product\u2019s functionality\u2014which results in a bad user experience. Ultimately, not all complications or complexities can be designed away.\u00a0<\/span><\/p>\n<p><b>The takeaway: <\/b><span style=\"font-weight: 400;\">Aim for utmost simplicity in the user experience, but don\u2019t seek to simplify the system itself to the detriment of functionality. <\/span><\/p>\n<h2><strong>How to use the laws of UX<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">I know, I know\u2014that\u2019s a mighty long list of UX laws! But don\u2019t get too hung up on remembering all of them, all of the time. As you develop your UX and UI design skills, you\u2019ll naturally adhere to these principles without even thinking about it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Most of the laws of UX can be boiled down to the following:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Prioritise simplicity and clarity<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Think about your users\u2019 mental models and how they expect your product or system to behave<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Limit the cognitive burden on your users wherever possible<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If you enjoyed learning the laws of UX, continue with these <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-design-principles\/\"><span style=\"font-weight: 400;\">fundamental principles all designers should know<\/span><\/a><span style=\"font-weight: 400;\"> and these <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-design-dos-and-donts\/\"><span style=\"font-weight: 400;\">8 dos and don\u2019ts of UI design<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The laws of UX are a guiding set of principles and best practices for UX, UI, and product designers. Learn all about the laws of UX and how to apply them here.<\/p>\n","protected":false},"author":22,"featured_media":10407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[279],"tags":[],"class_list":["post-10305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-explained"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/10305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=10305"}],"version-history":[{"count":10,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/10305\/revisions"}],"predecessor-version":[{"id":10320,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/10305\/revisions\/10320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/10407"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=10305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=10305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=10305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}