UX Laws and Principles
Table of Contents :
What is User Experience
- Aesthetic-Usability Effect
- Doherty Threshold
- Fitts’s Law
- Goal-Gradient Effect
- Hick’s Law
- Jacob’s Law
- Law of Common Region
- Law of Proximity
- Law of Pragnanz
- Law of Similarity
- Law of Uniform Connectedness
- Miller’s Law
- Occam’s Razor
- Pareto Principle
- Parkinson’s Law
- Peak-End Rule
- Postel’s Law
- Serial Position Effect
- Tesler’s Law
- Von Restorff Effect
- Zeigarnik EffectTake Away
Conclusion
What is User Experience?
In simple terms “User experience is the experience a user has when interacting with a product”. The goal of UX design is to create easy, efficient, relevant and all-around pleasant experiences for the user.
For example, if you want to use a pen, first your action will be to interact with the pen. The design of the pen including the look, feel and material may impact your experience of the interaction.
User Experience is an umbrella term that covers visual design, information architecture, usability, interaction design, user research, content strategy, and business analysis; it covers all the aspects which users have with the product.
If we want to go deeper into UX so that we can build awesome usable products for the users then there are a few psychological laws and guidelines that every designer must follow. This article will focus on the laws of UX based on Jon Yablonski, a product designer in his book and the resource Laws of UX. We’ll also look into a few examples for better understanding.
“You don’t learn to walk by following rules. You learn by doing, and by falling over.”
— Richard Branson
1. Aesthetic-Usability Effect
Users often perceive aesthetically pleasing design as design that’s more usable.
Just a simpler term “first impression matters”. Even though your design is perfect in every nook and corner and works well too but if the overall look is not up to the mark then there is a high chance that the user will neglect it and will think it is a cheap design. So make sure your design is the perfect visually appealing one.
2. Doherty Threshold
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
This one is all about how your design responds to the user’s action. You need to make sure that the user feels that the design is responding only based on their interaction. Somehow engage your users within the design rather than lose them just because of loading delay. If the design is surely going to get delayed because of the content, you can use progress bars and simple animations to tell users that you are working on the backgrounds and content. On the other hand, making users wait for the design even if the design can be loaded within a few seconds that will create a sense of trust in them but anyhow speed matters for that also.
3. Fitts’s Law
The time to acquire a target is a function of the distance to and size of the target.
According to this law how usable a design is will be reflected based on the interactive element that is used for major change to the design, it’s like
- The appearance of it is where the user can find and select it more easily.
- It must be different from the others like bigger, bright colored, etc.
- The element should be clickable anywhere so that it is easy to complete the action rather than finding the exact place to do the action.
The main example will be the Floating action button in mobile apps and the call to action button in websites where it will be unique and more easy to find so that the action is completed easily.
4. Goal-Gradient Effect
The tendency to approach a goal increases with proximity to the goal.
This effect indicates that the user will perform their action much faster if there is a sign that they are going to complete the task. Goal gradient effect is like encouraging user where they are, progress they are making in order to achieve with the task like that.
Examples will be progress bars, to-do lists, rewards for free gifts etc.
5. Hick’s Law
The time it takes to make a decision increases with the number and complexity of choices.
The Law is simple if you overload the users with too many options there is more chance that they might get confused and will never select any. You don’t want that to happen so in that case just a few options which are more needed to be given so that it will be crisp and clear for users about what they are doing within the design. Apply this law in your design like “ if you want to make users accept the approval request rather than deny then you can highlight the accept button as more eye catchy”.
Examples of this law will be menu categories, forms, options for approval, pricing cards, best seller tags, etc.
6. Jacob’s 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.
The Law explains that a user will expect your design to function in a way that they experienced in other designs. Users mental model will be working in a way that once they started using designs with the same functions their mental model will be fixed that this is the way the design will work, so as designer you need to make sure that your design is capable to satisfy users mental models and make your designs more usable. You can even break it but it must be in a way that at least for a limited time users need to use the familiar version.
An example for Jacob’s Law will be in every shopping website users will expect their shopping bag icon should be placed in the top right corner because their mental model is fixed after experiencing lots of similar websites that the bag will be in the top right only.
7. Law of Common Region
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Users will be judgemental when they visit a new design for the first time. They will understand in their own way just by exploring, you need to make sure that the design elements are easy to find. The Law of common region concept is like if similar elements are within a boundary they will be considered as a single group.
Example for the concept is in the photoshop tool the tools are grouped in the same area, profile-related content will be available near profile icons, etc.
8. Law of Proximity
Objects that are near, or proximate to each other, tend to be grouped together.
A simple way to understand this is if we are asked to form a 10 member group within a large crowd of people our quick reaction will be to go near our members, its a way of telling that we are grouped together. Law of proximity is similar to that users understanding will be if elements are nearby or related to each other its a sign that they are a group. Implementing this concept in the design will be you need to make sure that user gets what they want instead of getting lost in the design. Just by having a similar background, organized contents that are related into a group is a way of increasing the usability.
Example will be in any article or blog related sites, the sections will be grouped together to differentiate between new article, old, sports sections etc.
9. Law of Pragnanz
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.
Our users doesn’t like cognitive load, they will always try to understand and interpret ambiguous or complex images in a most easiest way possible. Your design should be in a way that users cognitive load should be reduced, must not confuse users with complex design implementations .
Example will be call to action button will be rectangle or oval, if it has been changed to either hexagon or pentagon shapes then user way of perceiving will be difficult.
10. Law of Similarity
The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
This Law states that if your design elements appear visually similar either by shape, size or color they will be considered as a related group. In your design, differentiate the navigations and normal texts for easy understanding.
Example will be if there are finance ranges listing for a company the profit and loss will be mostly differentiated by their colors, either green for profit or red for loss. This helps them understand the range more easily. Another example will be the offer contents will always be much bigger in size than normal products in order to differentiate to the users
11. Law of Uniform Connectedness
Elements that are visually connected are perceived as more related than elements with no connection.
The law states that elements that are connected to one another by color, lines, frames, or other means are perceived as more related and grouped than elements with no connection. This law creates stronger connections than elements that get grouped together based on similarity and proximity.
Design implementation will be grouping navigations together with same visual design, links can be placed with the content itself etc.
12. Miller’s Law
The average person can only keep 7 (plus or minus 2) items in their working memory.
A person working memory will be functioning in a way to remember around 7(plus or minus 2), that will be the reason users couldn’t remember any design categories if it is more cluttered. Designers need to help our users by reducing their cognitive load by reducing the options and need to be clear about their interactions. The options must be minimalistic like Hick’s law else the options can be segmented into smaller chunks.
Example for this law will be in any dashboards the insights will be displayed in chunks so that user can remember it more easily.
13. Occam’s Razor
Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
The concept is you need to select the simplest design among all the options. Make sure that there is no complications in design and need to reduce the unwanted elements as much as possible to land a clean and simple design.
Example is google search engine where there is no congested design elements like suggesting, previous searches etc, the design is just so minimalistic and clean for users.
14. Pareto Principle
The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
The pareto concept is around every industry not just design focused where there are tight timelines and less resources. The concept is that you need to work in areas where there will be less input but the output will be vast.
Example is like working in prototype where UX researchers explains the concept with minimalistic tools and concepts but they will cover the main problem and will figure out better results.
MVP ( minimum viable product ) is a best understanding for pareto principle where within limited time a simple and effective product can be developed.
15. Parkinson’s Law
Any task will inflate until all of the available time is spent.
The Law explains that if the user expects a task will be completed in a specific time then that task should be designed in away that the time taken to complete should be less. Make sure of every possible way of guiding the user to complete the task.
Example for this law is “remember me” concept in any login where the time limit for user to type their username and password has been reduced by remembering the credentials on their behalf.
16. Peak-End Rule
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.
If you are working on a project or a task the stages of working on it will be remembered much equal to the final process when the task has been completed. The peak end rule is that users will remember the end progress more vividly than the progressing flow. Make sure that the design communicates easily with the users for a task completion that they are working on.
Example for the rule is error pages, success pages etc.
17. Postel’s Law
Be liberal in what you accept, and conservative in what you send.
Users will always be exhausted when they are asked to give too much information about themselves, if they are fed up then it will lead to discontinuing the task so in order to avoid it follow this law which explains that as a designer you need to be liberal in what you are accepting from the users that are whatever the users mispronounce or just a clue, make sure that you grasp the word. Another one is be conservative in what you ask from them.
Example is the google search engine where whatever we spelled wrong it will give suggestions of what we expect. Another example is getting signed in based on email address alone instead of the full form process.
18. Serial Position Effect
Users have a propensity to best remember the first and last items in a series.
Users working memory will function in a way that it will remember the first and last items more vividly than any other items placed in a sequence. There is a concept called “F Pattern” in reading where the user eye tracking a page is analyzed and reported that they will read a site in F pattern only where top right and left will be noted and then the middle part will be most probably avoided and again will concentrate on the last part. This concept is used in mostly every website with respect to hierarchy.
In our design the most important details or CTA buttons should be placed in first and last. Example will be navigations , footer sections, signup & cart icons etc.
19. Tesler’s Law
Tesler’s Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.
Though we try to make our designs more simple as possible there are some details that cannot be missed. It might looks complex but the details are must means then no other go we have to add it but we can try helping users to complete the task somehow.
Example will be the checkout process where there is no other go user need to fill in their delivery details and card details. In this process, we can reduce the time by grabbing their location or getting their card details prior etc.
20. Von Restorff Effect
The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
We know a term called “ Odd one out “ yes it is true in this effect, users memory will always remember the odd one only than the rest which is more of same. This is the reason we have CTA button more different and much bigger than other buttons because we need to make sure that user sees that action button.
21. Zeigarnik Effect
People remember uncompleted or interrupted tasks better than completed tasks.
Users mindset will be they will remember their uncompleted tasks more easily than their completed tasks. This effect will be useful to make users complete their task. We can push them to complete it by providing progress bars.
Take Away
Design is a vast area where it will cover lots of fields, whatever the field is there will be a few set of rules that needs to be addressed so that the design is useful to users. The laws and effects listed above if applied correctly, can help you create a better user experience for your users.
Thanks for Scrolling !!!
Clap 👏 If this article helps you.