In this article, we’re going to learn the most important rules of UX design and their use in application and website design.
You’re reading my fourth article and it’s gonna be a long article! After my previous articles which were focused on how to design micro-interactions, let’s learn something different about UX design.
This article is going to be published in two parts, the first part is about to recall some UX design rules and another part is about to complete the first one and will cover more complex rules.
Every law will be explained with a simple example and then, we will get familiar with their use in Web/App design. Also, try to learn the simple definition of each law rather than its complex definition.
In case you missed to read my previous articles:
InVision Studio: How to design a circular loading bar?
Adobe XD: Everything about resizable components
1- Fit’s Law:
When we want to create a digital experience for mobile phones, “Fitt’s Law” appears and say “I’m here to help you!” (If you talk with UX rules as I do, See a psychologist).
Paul Fitt created a way to notice how quickly people can select a target.
Now let’s be a little professional: Fitt’s Law says when a user wants to press a button or do something, the length of the time it takes to do this, depends on two factors:
For example, you’re going to press the “Add this to cart” button in a store on your mobile phone, the length of the time to takes to do this depends on the distance of your fingers to the button as well as the size of the button. If you do not take this law seriously, your negligence will incur huge costs to your business!
Although this article is not about only “Fit’s Law” but I will try to help you to learn it better. Before I say something about “Fit’s Law” you should know we have some guidelines in UX design which are originated from Fit’s Law. This law is a formula that we’re not going to talk about it right now (and never!).
Some UX guidelines are originated from Fitt’s Law and related to the mobile design:
A: Make important buttons large enough as the smaller ones are not easy enough to touch.
B: When you create a text button, make sure there are additional pixels around these buttons and the user can still select the button even if touch these pixels. This reduces the precision needed to press the button.
C: don’t use a small size for text buttons because this makes these buttons harder to tap! Using a combination of text and icon help too because it increases the size of the button.
2- Pay attention to the position of the necessary buttons and elements. Many users hold their smartphones with one hand and the required elements need to be in the direction of moving their fingers.
3- Similar actions (Buttons) should seat next to each other. This reduces the required distance your fingers need to travel to press the buttons. You should pay attention that there is enough space between two similar buttons to prevent the accidental touches.
4- It’s kind of the third rule:
When you want to complete an action, the required button should be clear and close to the action.
Imagine you want to sign in to your Gmail and Google asks you to input your mail address and Password. The Sign In button should be close to the text fields, so you will be able to find it easily.
5- Although the Fitt’s law emphasizes reducing the time taken to complete an action, sometimes you have to do something extraordinary to force users to pay attention to a particular action.
Example: If you use an iPhone, you know that you have to slide a toggle to the right to turn down your phone.
Do you think Apple didn’t know this swipe method would bother users more than pressing a button? This allows the user to focus on the action and avoid the accidental shutdown.
2- Hick’s Law
When you decide to call yourself a designer, you should think about designing the long lists for websites and mobile apps!
Imagine your CEO asks you to create a “sign-up” form for the website of the company you’re working at and one of the options that the users should complete is their nationality.
Hick’s law is your solution to categorize the information on the drop-down menu list.
More Options = Users need more effort and time to select from them
Hick’s law also created this rule:
If you have a complicated or lengthy process, break it down into several simple and short processes.
To learn better this:
- Check the Apple website and try to buy “iPhone Xs”. You will see there are several steps to order an iPhone Xs.
Let’s go back to our example!
In overall, Less is better! When it comes to options to choose from them by users, decrease the number of options (As long as it does not harm the nature of the process or the expectation of users) because users find them in a short time with minimal effort.
- In drop-down lists like “Select your country” and “the name of the countries” (That’s an example), give users a choice to find the option they want by searching.
- To improve the items on a list, you should pay attention to one important thing: Order the items. When you categorize the items of a list, users will be able to find their needed item quickly. For our example, we can sort countries based on the first letters of their name (A-Z sorting).
3- Jacob’s Law
This time it’s Jacob Nielsen turn to teach us his law:
“Users spend most of their time on other website (apps) than your website and if you want to create a website (and app) make sure it works like your rivals”.
What this law is trying to say, is that users expect you to design something similar to your rivals, instead of forcing them to think about your application and how it works. Don’t confuse the users with completely different design patterns! Many music apps have a similar style, why?
4- Zeigarnik Effect
As the fourth rule, I’m going to explain the Zeigarnik effect.
Let’s imagine you love “The Handmaid’s Tale” tv show like me. When you watch one episode of this popular TV show, what encourages you to watch the next episode? Something inside you encourages you to watch the other episodes of this TV show completely to finish it.
Zeigarnik Effect: People remember uncompleted tasks better than completed task.
In UX design: Remind users → Unfinished tasks
Like other rules, we have some rules which are originated from Zelgarnik effect:
1- One of the effects of this rule is visible when we want to create an account. Have you ever used Linkedin? When you create a new account, this social network shows you a progress bar and asks you to complete your profile.
Tempt users to complete their unfinished tasks, and also tell them what they will get if they do that.
- Also, let users complete a lengthy and complicated task in several parts. For example, you create a new account in Indeed to find your next job, this site doesn’t force you to complete your profile right away after you created your account and you can complete this part of the process, later.
This rule is not limited to create an account, also you can remind users that the task they started to do, is not completed yet and the magic thing happens!
2- When someone asks you to design a reminder app or an app with this feature, don’t show the completed task first! Users are wiling more to see the uncompleted tasks first. As an example, Install “Google Tasks” on your mobile phone or open it through Gmail. You will see this app shows the uncompleted tasks first.
2- Another example of this rule, is visible when you open an article on Medium but the app (or website) just shows a glimpse of the article and asks you to upgrade your account.
Let’s remember this again: “Tempt users to complete their unfinished tasks, and also tell them what they will get if they do that”.
5- Von Restorff Effect (The Isolation Effect)
This one is my favourite rule! Imagine that 12 people are standing in a line. Eleven of them are old men with white hair and a white dress. Another one is a little girl with black hair and a red dress.
Now, someone asks you to find the different person in the queue in less than 1 second. Without a doubt, your answer is the little girl.
Von Restorff Effect
When we see similar objects together, we highly remember the one which is different than others.
Like the other rules that we talked about their use in Web/Application Design, Von Restorff Effect (The Isolation Effect) is very useful when we want to design something.
1- One of the examples of this rule appears when you want to design buttons. To attract the users’ attention to a specific button, you can change its colour, shape or even use a different style (There are three styles: Filled button, Outlined button and Text Button). For text buttons, you can also use a bigger size for them or change the style of the texts (Text Styles: Light, Italic, Regular, Medium, Semi-Bold, Bold).
2- Another use of this rule is when you’re going to sell a specific service that users should pay for it. For example, open Hulu and Netflix websites with your browser and try to buy a subscription.
The following laws are principles based on the Gestalt Theory. But before you read them, let’s review this theory.
Our mind is always trying to make everything easier when we want to understand something. The first time we see something, our mind tries to understand it as a collection, instead of understanding every single part of it.
The whole is other than the sum of the parts.
As I said earlier, this theory has principles that we’re going to learn them.
6- Law of Proximity
When you walk with your friends in college, other students think you’ve created a friend group. I mean they expect to see you with your friends everywhere in the classes, clubs and ….
One of the UX laws mentioned something similar which is very important in UX/UI design and we know it as the “Law of Proximity”.
Law of Proximity:
X,X,X- Y,Y,Y — Z,Z,Z — … → [X,X,X] — [Y,Y,Y] — [Z,Z,Z] — …
Let’s be more professional:
Objects that are near to each other, tend to be grouped together.
In the above example, Xs are seated together and your mind defines them as a group. Or as a better example, you define your pen and notebook as a group because you expect to see them together.
Law of Proximity in Web/Mobile design helps designers to categorize the information that the users are going to see them.
7– Law of Similarities
To understand this important law, take a look at the above image and close your eyes. Now, You will categorize the circles in different groups based on their colour.
To understand better this law, use a piece of paper and pen. Draw a few circles and lines. When you close your eyes and open them again, you will categorize the elements based on their shape (Circle — Line).
Now, let’s review this law to look we’re professional:
Law of Similarities
The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Because I think you understood the law very well, let’s see its use in Web/App design:
1- Take a look at the below image. PhoneArena has used blue colour for the texts that act like a link (Hyperlink).
Using blue colour helps users to understand the difference between normal texts and hyperlinks. When you create a style for hyperlinks (We usually use blue), don’t change this style in different sections of your app or website. Let people get used to this style to find the hyperlinks easier. Otherwise, you will hurt the consistency of your website/app.
Forget overusing different font weights and sizes for your app and website! Colours, filled button and icons can help you to have some information differently than others.
2- Quote boxes are another example of this law. Using a nearly similar style for quote boxes helps users to understand the difference of the text inside the quote boxes from the normal texts.
3- How we make the headers different than the body texts, is another use of this law. We usually use bold fonts for headers and also, a bigger size of the font for them.
4- Another example is obvious when you take a look at your favourite app. For example, Google suggested designers use a different style for the more important button when they are creating an app/website based on Material design language.
If we want to look more professional, we should say “help people to distinguish the difference between the elements of your website/app” and also if you do something to help users distinguish the difference between the elements of your website/app, don’t change it for every section or page of your website/app because it hurts the consistency.
8- Law of Common Region
Pick a newspaper (Don’t be lazy!) and take a look at it. What helps you to understand the difference in the news? Borders! From borders, you can say a story is different than the other one. Law of Common Region says something like this!
Law of Common Region:
Different objects in an area with a border → They make a group!
Be more proffesional:
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
A simple example of this rule is Cards which is pretty common in UI design. By using a border for the elements of the cards or even shadow, users find out that the information of these cards has made a group!
A more common example:
9- Law of Closure
When we see something is uncompleted, our brain tries to complete it (If the missing part is a line or even the pattern). Let’s take a look at the below image when you see it your brain tries to trick you and you complete the picture by adding the required elements to complete the word and see it “Sense”.
Or even the last logo of WWF is designed based on this rule. Instead of seeing an incomplete logo, your mind tries to trick you to complete the panda.
Let’s review the Law of Closure rule together:
Law of Closure: When we see something is uncompleted, our brain tries to complete it.
But let’s be more professional:
The law of closure states that individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap.
But this law is useful even if you going design an app or website. But how to use this rule in UI/UX Design?
1- As I told you before, our brains always tries to find the uncompleted part of an object. Sometimes this object is news or a slider for images or contacts. Open “Instagram” and tell me what you see at the top of this app? You see a scrollable component which shows you the stories of your followings.
Since some of the stories are out of the screen, Instagram shows part of a story and users notice that they have more stories to check. This is designed based on the Law of Closure because our mind tries to see the whole of the scrollable component (See all stories of our friends).
2- Loading bars (and progress bards) are designed based on the Law of Closure. But to help users to understand the concept behind your design, you should use this law carefully because sometimes the implementation of the Law of Closure fails and users can’t understand your design (I mean don’t design very complex incomplete objects that users can’t guess it!).
3- Another use of this rule is visible when you see an icon. When we are going to design an icon, simplicity is one of the most important things we should pay attention to it.
10- Law of Figure and Ground
This rule is based on explaining how our brain recognizes background and object from one another. Actually, we use this law to show the users the focal point of our design.
In this law, the focal point is called “Figure” and And anything else that is not the focal point is called “Ground”.
1- One of the examples of the Law of Figure & Ground are the pop-up pages (or the dialogues), navigation drawers and dropdown menus. In the below example, our focal point is the dialogue.
In the application and web design, there are different ways to steal the user’s attention and draw it on the specific part of our application/site.
1- Dialogue (Text + Button + Container)
2- Layer (Color= #000000 / Opacity: 32%)
3- The content behind the dialogue box and black layer
- We change the Z-index of the dialogue boxes (Elevation) to make them more visible. Actually, we apply the shadow to the container of the dialogue box.
- Check this page for more information.
For iOS, sometimes we use a blurred dialogue (In iOS, it’s called “Alarm”) and a semi-transparent black layer and to steal the user’s attention and draw it to the dialogue. Sometimes, we blur the background too!
2- Using a different colour helps us too to steal the user’s attention.
11- Law of Common Fate
Imagine people are moving in a street. Some of them go to the right side of the street and the other ones go to the left side of the street. If you look at people from above the street, you may think there are two groups in the street.
Low of Common Fate
(Motion Design) The elements move in the same direction → We consider they are related.
Let’s be more professional:
Humans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions.
We use the Law of Common Fate in motion design to To make micro-interactions meaningful to the users.
1- Open the Instagram again. You will consider all stories as a group because their behaviour is similar. I mean when you swipe to the left or right, all stories move in the same direction.
2- Also dropdown menus are designed based on the Law of Common Fate.
Like this article, if you find it useful or you learn something from it. I spent a lot of time to make this article ready for you. Please share it with others :)