UX Rules: Learn simple (Part 1/2)

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.

Image by Toptal Designers

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:

Figma: Recreate the most useful interactions using Figmotion

InVision Studio: How to design a circular loading bar?

Adobe XD: Everything about resizable components

1- Fit’s Law:

Illustration Credit: Sandro Rybak

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:

1- Distance

2- Size

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!

Image Credit: Google

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:

1-

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.

A big enough 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.

Samsung One UI which was introduced last year is a great example! Korean giant focuses on redesigning the Android OS with user behaviour in mind.

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.

From my previous article about Figma — Share, Edit, Google Lens and Delete buttons are seated next to each other.

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.

Sometimes in your pocket, you press the power button and if Apple didn’t use this trick, you shut down your iPhone accidentally.

2- Hick’s Law

More Options = Users need more effort and time to select from them

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.

Hick’s law:

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.
Instead of showing a long process, Apple designers broke it down into several simple and short processes. This encourages users to complete their order.

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).
You can search for your desired country or since we used the “A-Z sorting”, you can find your desired country easier.

3- Jacob’s Law

This time it’s Jacob Nielsen turn to teach us his law:

Jacob’s 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?

Two different stores that work similarly

4- Zeigarnik Effect

As the fourth rule, I’m going to explain the Zeigarnik effect.

Every time I watch an episode of “The Handmaid’s Tale”

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.

Do you see? This encourages users to complete their profile because something inside of users tells them “You have a few uncompleted tasks, buddy!” and you’re going to be discovered by recruiters.

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.

A simple example of Zeigarnik Effect

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.

Complete this task (Upgrade account) → Read the article

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)

When you see the red apple for the first time, it steals your attraction.

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).

By using the purple colour and a different style for the “Explore” button, users realize this is a button and it’s different than the other texts on the image.

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.

Netflix — The premium plan is distinguished by using a bolder red colour. Also, the colour of the descriptions of the Premium plan is distinguished by using a red colour and by using grey colour for other plans, Netflix tried to steal your attention from other plans and draw your attention to the most profitable plan.
Hulu — The most popular and most profiting option is distinguished by using the shadow effect for its container and also, a black button. The first time you see something like this, your eyes scan the “Most Popular” card first because you think it’s closer to the screen because of the shadow is used for this card.
By Joe Burud — The difference between these cards is not too visible! When you don’t want to steal your user’s attention and draw it on a specific plan, use a style like this. This encourages users to check all plans carefully.

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.

Gestalt Theory

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

Do you see 4 groups of circles in this picture?

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.

In this example, it seems the sender/recipient name, message text, contact Image, send/receive date of the message, and a button is in a group. Also, the line between the messages helps us to understand the messages are separated.
The homepage of Facebook is created based on this law: The information about facebook (The information on the left side are distinguished from the “Sign up” form) and users think First Name field, Surname field, Number filed, Birthday field, Gender field and CTA) are related to each other.
Do you see? We have 3 groups: Video Games, Watches, and Computers. Amazon used Law of Proximity and placed the items (Products + Title) next to each other and users without any effort, notice they have formed a group.

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).

A simple example of this law. If we use a different colour for circles (or lines) the difference between these things will be more visible and users will understand this difference easier.

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.

The difference between title, the source and the time these posts have been published, is clear.

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.

When you use multiple buttons, indicate the more important action by placing it in a contained button!

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

Forgive him!

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!

Every card has two elements: Image and Text / The users rather than grouping the elements by their type, grouping them in their mind by borders (Card). So, they say we have 3 groups (Cards)!

A more common example:

Using cards (which everyone has many elements) makes easier for users to scan this page. Instead of using shadow or border, we used a different colour for the background of cards which helps users to find out that there is a specif border around each card.

9- Law of Closure

Apple logo is designed based on the 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”.

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.

World Wide Fund for Nature

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).

You can more similar elements that are designed based on this law.
If Instagram used this style, you couldn’t notice there are more stories and you need to swipe the stories to the left to see them.
My design on Dribbble — Do you see? Just part of the Relaxation card is visible and the user knows should swipe to the left to see more cards.

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!).

A simple example of the Law of Closure in Progress bar (Loading bar) design

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.

As an example, the Negative space which was used to design the Messages icon makes this icon simple and understandable. The users notice easily there’s a message icon behind the top one, even if it’s not visible.

10- Law of Figure and Ground

A good example of this rule

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.

Focal point = Dialogue
Focal point = Navigation drawer

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.

Material Design:
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!

The options appear when you press an icon in iOS, is the example of this law.
Another example of the Law of Figure and Ground

2- Using a different colour helps us too to steal the user’s attention.

11- Law of Common Fate

You see two groups

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.

The way each category is opened, as well as its subcategories, is the same and this shows the user that they are related to each other.

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 :)

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — — PORTFOLIO: emportfolio.webflow.io