The Laws of UX with real-world examples
Hey there! Let’s talk about something super important — making stuff that people love to use. Whether it’s a digital product or a physical product, the key is User Experience (UX). Now, when we’re dealing with digital stuff, it’s like figuring out how people think, feel, and react. It’s about making their lives easier when they’re using or interacting with our creations.
So, when we’re in the digital design zone, we have to think about what makes the user’s journey more memorable, easier, and enjoyable. It’s not just about making things look good; it’s about making sure people can easily do what they want with our stuff. And that’s where the 21 Laws of UX play an important role. Get them right, and suddenly, using your digital thing becomes smooth and fun for the user.
In this blog, I’m going to break down the 21 Laws of UX in the simplest way possible, using relatable and easy-to-understand examples from our everyday interactions with products and things.
1. Aesthetic pleasing effect:
Imagine two rooms — one which is messy and chaotic with stuff lying around, untidy and disorganized. On the other side, there’s a room that’s clean, and minimalistic, and everything is neatly in its place. Which room would you choose to spend your time in? Most likely, a tidy and clean room will automatically attract you more compared to a chaotic one. This concept extends to entering a restaurant with a minimalistic and well-designed interior — it creates a positive and clean impression in your mind, making you more inclined to spend time there. This is the essence of the Aesthetic Pleasing or Aesthetic Effect in UX. As humans, we are naturally pulled towards cleaner and tidier options because they are easier for us to understand and choose over the chaotic alternatives.
Given two options for online wedding invitation makers, you’d naturally lean towards choosing the one that not only makes your life easier but also has a pleasing and attractive design.
2. Goal Grdient effect
Imagine you start a fitness challenge to walk 10000 steps every day. So it’s evening time you have started walking after sometimes you look at your watch/Phone, you’ve walked 2000 steps and the progress tracker shows 20% completion. Seeing that 20% mark feels like a mini-win. Psychologically, it motivates you to keep going because you’ve made a significant dent in your goal.
The Goal Gradient Effect is at play here. As you see yourself getting closer to the target, you’re more likely to stay committed and put in the effort to achieve that goal. It’s like breaking down a big task into smaller, more manageable chunks, with each step forward boosting your motivation to reach the finish line.
In the above example, the progress indicator in a job portal, showing the steps to complete your profile, serves as motivation. When you’re on the second step, and you see the progress bar indicating that you’re making headway, it boosts your motivation. It breaks down the task into manageable pieces, allowing you to fill in your details gradually. This approach prevents the need to complete everything at once, encouraging users to make progress step by step and reach the goal efficiently.
3. Fitts Law
Think about trying to grab your TV remote from the coffee table. If the remote is right in front of you, it’s a quick reach. Now, imagine if the remote is tiny and placed far away — that would be a harder and slower reach.
So, in simple terms, Fitts’s Law tells us that the time it takes to reach for something depends on how far away and how big it is. The closer and bigger, the faster and easier it is to grab or click. It’s like nature’s way of making things more accessible when they’re close and visible.
In the Netflix app, when you begin watching a series, the “Skip Intro” button is smartly positioned within easy reach, right around the thumb area. This is a deliberate design choice. It highlights why all our essential buttons, like CTAs and navigation bars, are typically placed at the bottom. It makes them consistently accessible and effortlessly reachable for users.
4. Hicks Law
In my previous workplace, my manager consistently wore black clothes every day. I initially thought it might be a coincidence, but after observing him for a week, it became apparent that he intentionally wore black attire. Curiosity led me to ask him about it during one of our conversations. He shared a practical reason that made complete sense. He explained that he owned around 15 black shirts and four black T-shirts, simplifying his mornings by eliminating the need to decide what to wear. If he had a wardrobe filled with various colors, it would have made choosing an outfit more challenging.
Hick’s Law, a principle in psychology and design, says that the time it takes for a person to make a decision increases with the number of choices available. In simpler terms, the more options you present to someone, the more time and effort it takes for them to choose.
Twitter keeps things simple with its menu at the bottom. There are only a few main options: Home, Explore, Communities, Notification, and Message and gives an additional button for post and once you click on it then only get the additional option to add stuff. This makes it easier for you to decide where you want to go on the app. It’s like having a clear path so you don’t waste time figuring out what to click.
5. Jakob’s Law
Think about your smartphone’s home screen. Imagine you’re looking for your camera app to quickly take a photo. If your camera app icon is a familiar and easily recognizable camera symbol, you’ll spot it right away. But if the icon is a complex and unfamiliar design, it might take you a bit longer to locate it among all your apps. So, Jacob’s Law encourages simplicity and familiarity in design, making everyday tasks more straightforward.
Many online shopping websites, like eBay or Nikon, and various other businesses, follow a similar style in their design. They often place the search icon at the top, and their navigation setup looks alike. Why? Well, users like things they recognize. When a website’s layout is familiar, it’s like meeting an old friend — you know where everything is. This is why online food delivery apps or movie streaming apps often have a similar look and feel. It’s all about making it easy for you to find what you need because it feels like something you’ve used before.
6. Miller’s LAW
Think about organizing your closet. Instead of mentally listing each piece of clothing individually, you might naturally group them by type: shirts, pants, and jackets. When you decide what to wear, it’s easier to recall these broader categories rather than every single item. Miller’s Law is like your brain’s way of simplifying things, breaking down complex information into manageable chunks, making it simpler for you to navigate through your closet of clothes.
In everyday scenarios, the application of Miller’s Law can be seen in the formatting of credit card numbers, where the digits are spaced for easier recall. Similarly, on messaging platforms like WhatsApp, phone numbers are structured with a country code followed by smaller segments, facilitating both communication and memorization. This principle is also evident in systems like OTPs, where the segmented presentation aids users in remembering and inputting the code effortlessly.
7. Doherty Threshold
Consider using a messaging app like WhatsApp. When you send a message, and the recipient receives it almost instantly, without noticeable delays, the interaction feels smooth and responsive. This quick response time contributes to a seamless conversation, where neither you nor the app is waiting on each other. It’s like having a real-time exchange, making the interaction efficient and enhancing the overall user experience.
Doherty Threshold states that Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
You know those little ghost or skeleton-loading animations you sometimes see when you open an app or a webpage? They’re not just there for show. They’re like a heads-up saying, “Hold on, something’s happening in the background.” Instead of staring at a blank screen, these animations give you feedback that the app is working on fetching or loading something.
8. Occam’s Razor
Let’s say you’re planning a party. Applying Occam’s Razor in UX would mean choosing a simple and clear invitation method, like sending a text or using an easy-to-understand online invite. Instead of creating a fancy, complex invitation that might confuse your guests, you go for the straightforward option to ensure everyone gets the message easily. It’s about simplicity making things smoother.
Perplexity.AI has done a great job by applying Occam’s Razor in its design. They’ve removed unnecessary elements, keeping the interface clean and straightforward. This focus on simplicity ensures that users can easily navigate and know exactly what to do which is simply searching for answers! Prioritizing usability over unnecessary complexity aligns well with Occam’s Razor.
9. Pareto Law
Think about your kitchen spices. You might find that you use 20% of your spices for about 80% of your cooking. The majority of your dishes rely on a handful of key spices, while the rest of the spice rack sees less frequent use. It’s like a small group of spices doing the heavy lifting in the flavor department. This is a simple example of the Pareto Principle in action. I hope this explanation is more aligned with your request.
Amazon is smart about making it easy for you to buy things. They put the “Add to Cart” button right where you can see it easily. It’s not just luck — it’s on purpose. Amazon knows that this button is a big deal. They focus on making it super simple because that’s what gets people to buy more stuff. It’s like they’re saying, “We get it, you want to shop without any hassle.” That’s why Amazon is so good — they make the important things easy for us shoppers.
10. Tesler’s law
Imagine you are packing for a trip. No matter how much you try, there’s a minimum amount of stuff you need to bring. For instance, you can’t avoid taking clothes and essentials. Similarly, in systems or designs, there’s a basic level of complexity that you can’t completely get rid of. It’s the necessary stuff to make things work, just like the essentials you need when traveling.
Imagine you’re signing up or creating an account. Tesler’s Law, Conservation of Complexity, means there will always be some essential steps you can’t skip. You’ll need to create a username, set a password, and maybe provide an email/Phone number. These steps are like the unavoidable basics for the system to work. No matter how user-friendly they make it, there’s a certain amount of necessary complexity in creating your account, just like the essential steps you go through.
11. Postel’s Law
When someone sends you a message with a few typos, you understand and don’t make a big deal out of it. That’s being liberal. But when you send a message, you take a bit more time to ensure it’s clear and without mistakes. That’s being conservative. It’s like being chill about what you receive but being careful about what you send to avoid confusion.
The above example shows that, when you send a message to chat GPT or ask anything, It accepts the message with typos or errors, understanding what you’re trying to say. But when it responds, Chat GPT makes sure there are no mistakes in what they provide. It’s similar to Google — when you type something wrong, it says, “Did you mean XYZ?” So, it’s kind of being okay with your input but making sure the output is spot on and helpful.
Similar to UX we can let the user make mistakes, understand what they are trying to do or say, and give them the best result for a better user experience.
12. Law of Similarity
Think about when you’re at a party and you see a group of people wearing the same sports jersey or the same clothes. They stand out because of their similar outfits. The law of similarity is kinda like that. It’s the idea that if things share some common features or look alike, our brains automatically think they must be connected in some way. It’s like when you see a bunch of people wearing the same team colors, you assume they’re all fans of that team. Our brains just love to group things based on similarities!
The camera icon on a website or app is a perfect example of the law of similarity. Think about it like this: when you’re using your phone or computer, and you see that little camera symbol, it usually means you can take a photo or video. The icon might have a similar look across different apps — maybe a small outline of a camera or a recognizable shape. Because these icons share similar features, like the camera shape or outline, our brains quickly recognize them and know, “Oh, this is where I can take pictures or videos.
13. Law of Proximity
Certainly! Imagine you’re organizing your bookshelf. By placing fiction books on one end and nonfiction books on the other, it feels like each group has its own space. When you keep them together, it’s like your brain automatically sees them as distinct groups, making it easy to grab a novel for a thrilling story or pick up a nonfiction book for some facts and knowledge. It’s like creating cozy corners for different reading experiences right on your shelf!
In Google Maps, the layout is organized. You choose your destination, and all the relevant details, such as the route and estimated time, are neatly arranged in one place. Additionally, there’s a tab for details information, like nearby places. Our minds recognize it as a group, as these details are logically placed together, making it easy to follow in a step-by-step order.
14. Law of common region
Imagine you’re packing for a trip. In your bag, you place all your clothes together in one section, your toiletries in another, and your snacks in a separate area. When you open your bag, it’s easy to find what you need because everything is organized in its own space. It’s like creating visual boundaries in your bag, so you know where each type of item is located.
In the Airbnb homepage example, you’ll notice how they’ve arranged things smartly. They’ve put the property image right at the top, and right below that, you’ve got all the important details — the property name, location, date, and price. It’s like they created a little ‘zone’ for each property, making it super clear that all this info belongs to that specific place. This way, when you scroll through, your brain quickly connects the image with its details as it is close to each other.
15. Law of uniform connectedness
let’s talk about organizing your daily to-do list, Imagine you have a list of tasks for the day written on a notepad. If you have tasks related to work, they could be highlighted in one color, and personal tasks could be in another. Your brain easily recognizes the groups because of this visual connection. It’s like saying, “Okay, these tasks in the same color or under the same heading are related or connected in some way.” This way, when you look at your to-do list, it’s more organized and your brain quickly understands the relationships between different tasks due to this visual uniformity.
On Instagram, you’ll notice they use the heart icon to represent likes and the speech bubble icon for comments. This consistent design is maintained throughout the app, whether it’s on post or reel. This uniformity makes it easy for users to instantly connect these icons with their functions. When you see the heart, you know it’s for likes, and when you see the speech bubble, it’s for comments. This consistent visual language across the interface helps users understand and use these features effortlessly.
16. Parkinson’s Law
imagine you have a week to complete a project. Parkinson’s Law suggests that the time it takes to finish the project may expand to fill the entire week, even if you could have completed it in less time. So, instead of finishing the project early, you might find yourself working on it until the last minute, using up all the available time.
Think about your phone’s system updates. When there’s no urgent reminder, like a red light flashing, it’s easy to forget. If there’s no set deadline, you might keep postponing the update. For example, if you’re busy and hit “postpone,” it gets delayed, and you might forget about it. But what if there was a clear deadline? If you knew you had to update by a certain time, you might get it done sooner, avoiding the constant postponement. It’s like saying if a task has too much time and no deadline, we tend to keep delaying it.
17. Law of pragnanz
When I was a kid, my brother and I loved staring at clouds and finding shapes like dinosaurs or hearts. Back then, it was tricky for me to grasp why our minds turned fluffy clouds into familiar things. Now, I get it. Our brains just prefer making things simple. So, instead of getting caught up by all the details in the clouds, our minds choose the easiest route — turning them into shapes we recognize, like dogs or hearts. It’s like our brains saying, “Let’s make this easy and fun!”
The Apple logo is a simple, iconic image of an apple with a bite taken out. Despite the complexity of a real apple, the logo simplifies it into a clean, recognizable shape. The design aligns with the law of Pragnanz, making it easy for our minds to interpret and remember. This simplicity contributes to the logo’s effectiveness and widespread recognition, showcasing the practical application of the law in design.
18. Von Restorff effect
Imagine you’re at a trendy coffee shop with a menu full of similar-looking coffee options. Most of the items have standard names and descriptions, but there’s one drink that stands out because it has a unique name or a special ingredient. When you later reflect on your visit to the coffee shop, you’re more likely to remember that distinctive drink. The uniqueness makes it more memorable in the context of the otherwise similar coffee menu, demonstrating the Von Restorff effect.
Let’s take the example of a website with a clean, minimalistic design featuring a white background and text. As you scroll down, suddenly, a section with a vibrant background, perhaps a contrasting color, appears. This section contains crucial information, like a unique product feature. The distinct background color and placement instantly grab your attention amid the otherwise straightforward design. It’s like a spotlight on something significant, making it stand out from the rest of the content.
19. Peak-End rule
Let’s say you’re watching a movie. The entire film is entertaining, but what you talk about later are the most exciting scenes and how the movie ended. Maybe there’s a surprising twist or a heartwarming moment. These high points and the way the movie wraps up leave a strong impression.
Imagine using the Swiggy app to order food. While the overall app design matters, what sticks in your mind is smoothly adding your favorite dishes to the cart, hassle-free checkout, and the anticipation of your delicious meal arriving at your doorstep. Even if the app’s layout is just wonderful or there’s a brief moment of searching for the perfect restaurant, the satisfaction of ordering and the excitement of receiving your meal create a memorable experience.
20. Serial position effect
When planning a house party, the initial tasks like sending invitations and setting up decorations are easy to remember as they mark the start of preparations. Similarly, the final touches, such as preparing a special dish or welcoming guests, stand out as the last tasks before the party begins. However, tasks in the middle, like arranging seating or checking supplies, might be less memorable as they fall between the initial excitement and final preparations. This example highlights the serial position effect in house party planning, where the first and last tasks are more vividly recalled than those in the middle.
In website design, the navigation menu is placed at the top, serving as a guide for users, much like the starting point on a roadmap. It provides easy access to key sections such as “Home” and “About Us.” On the other hand, the footer, typically located at the bottom, acts as a conclusion to the webpage journey, housing additional information and links to policies. This strategic placement aligns with the serial position effect, a psychological concept where people tend to remember the first and last elements more than those in the middle. By placing essential navigation at the top and additional details in the footer, websites leverage this cognitive tendency, ensuring users easily recall and access crucial information.
21. Zeigarnik Effect
Picture this: you’re cooking something new, and you stop to grab more ingredients. Now, you’re in the middle of making something tasty, and it’s like a little break. Your brain says, “Hey, we’re not done cooking!” It’s like a signal that there’s more fun in finishing the recipe. So, you get excited to wrap it up and find out how delicious it turns out. That break in cooking becomes a hint that there’s more to explore, making you want to finish the recipe and see what you’ve made.
Let’s take the example of shopping online. You’re about to buy something, but oops — a tech issue, payment trouble, and the purchase fails. That glitch sticks in your mind. Now, another time, you almost bought something but changed your mind last minute. Even though you didn’t buy it, that decision stays with you. Funny, right? It shows we remember the things that didn’t quite work out more than the happy stuff. Our brains like to hang on to the moments that didn’t go as planned.
Keep learning, Happy designing!
Also, check — https://lawsofux.com/
