Rules of UX: Perspective of Psychology in UX Design

Photo by Mohamed Boumaiza on UnsplashUser Experience can be anything ( good or bad ) a user feels while interacting with a product or service, and as a designer, it is our job to make it better. Now there are multiple laws to follow for better user-centric design like Dieter Rams 10 principal of Good Design, 10 heuristic principles by NN Group, Gestalt Principals of Visual Perception. But still, there are some psychological design principles a designer should follow for designing a better user experience in their product. Here are some, Zeigarnik Effect This rule states that people remember uncompleted or interrupted tasks better than completed ones. In this rule, motivation plays a key factor, a designer can show a visual representation of users’ uncompleted tasks to make them aware of their progress and motivate them to finish that task. Example Progress Tracker (Source: Self-made) In the first example, we can see LinkedIn motivating users to complete their profile by giving a progress bar with a profile strength parameter to make users aware of their current profile strength and making them complete the process. Grammarly also follows the same process by giving a progress bar to make users add their google extension in their browser. Fitt’s Law This rule states that The time to acquire a target is a function of the distance to and size of the target. In this rule, better accessibility of touch targets of the users plays the key factor, like in a mobile screen a button should at least be the size of an avg thumb size and there should be proper spacing between two targeted touchpoints. Example Button accessibility (Source: Internet & Self-edited) In the first example, we can see buttons here are the user target and it should be close to the thumb in a mobile screen and the size should be proper so that the user can click on it. In this example, there should be proper spacing between two target areas so that users can access them easily. Hick’s Law This rule states that The time it takes to make a decision increases with the number and complexitiy of choices. In simple words, this rule states the more options we provide the users the more we will be making the user confused and it will take them longer to decide. Like in the physical scenario in an ice cream shop, the more flavor variety a shop has, the user will spend more time deciding which one to choose. Hick’s Law Example (Source: Self-made) In the first one, we can see there’s less option to select before clicking on the red CTA button that makes choosing an option easy for users. The second one has more options to choose from and the first option has two subcategories and multiple highlighted options that increase users’ cognitive load and makes it harder for them to determine an option. Jakob’s Law This rule states that 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. Jakob’s Law kinda resembles the consistency and system standards. Change is something we as human beings are uncomfortable with so when it comes to digital experiences we also feel the same way like expecting product details page containing the image at the left and description at the right and expecting a buy button at the end of the description, not at the header of the website. So when users go through similar kinds of websites they make a mental model of these and expect the next visited website to follow the same defined structure, so as a designer we should leverage the user’s mental model and design according to it. Header elements Similarity (Source: Self-made )In this example, we can see that 3 different e-commerce websites using the same elements in their header section to set consistency with the user mental expectations model and provide a better experience. Product extra image sorting Similarity (Source: Self-made )Also here, we can see that 3 different e-commerce websites using the same way to show the main product image and also the extra images of that product. Law of Prägnanz This rule states that 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. Law of Pragnanz kind of similar to closure from Gestalt Principles. The human eye tries to look for simplicity and order in complex design. According to research, it has been proved that users are able to better understand and process simple figures than complex figures in a design. Law of Pragnanz example ( Source: Self-made )Here from this example, we can see the first image, our brain can understand without any struggle, and the second image after connecting the dots, and the last image not so much. There are still multiple laws of advanced UX to follow like Miller’s Law, Parkinson’s Law, Serial Position Effect, Tesler’s Law, Von Restorff’s Effect. From this, we can conclude that these laws are essen

Rules of UX: Perspective of Psychology in UX Design
Photo by Mohamed Boumaiza on Unsplash

User Experience can be anything ( good or bad ) a user feels while interacting with a product or service, and as a designer, it is our job to make it better.

Now there are multiple laws to follow for better user-centric design like Dieter Rams 10 principal of Good Design, 10 heuristic principles by NN Group, Gestalt Principals of Visual Perception.

But still, there are some psychological design principles a designer should follow for designing a better user experience in their product.

Here are some,

Zeigarnik Effect

This rule states that people remember uncompleted or interrupted tasks better than completed ones.

In this rule, motivation plays a key factor, a designer can show a visual representation of users’ uncompleted tasks to make them aware of their progress and motivate them to finish that task.

Example
Progress Tracker (Source: Self-made)
Progress Tracker (Source: Self-made)
  1. In the first example, we can see LinkedIn motivating users to complete their profile by giving a progress bar with a profile strength parameter to make users aware of their current profile strength and making them complete the process.
  2. Grammarly also follows the same process by giving a progress bar to make users add their google extension in their browser.

Fitt’s Law

This rule states that The time to acquire a target is a function of the distance to and size of the target.

In this rule, better accessibility of touch targets of the users plays the key factor, like in a mobile screen a button should at least be the size of an avg thumb size and there should be proper spacing between two targeted touchpoints.

Example
Button accessibility (Source: Internet & Self-edited)
Button accessibility (Source: Internet & Self-edited)
  1. In the first example, we can see buttons here are the user target and it should be close to the thumb in a mobile screen and the size should be proper so that the user can click on it.
  2. In this example, there should be proper spacing between two target areas so that users can access them easily.

Hick’s Law

This rule states that The time it takes to make a decision increases with the number and complexitiy of choices.

In simple words, this rule states the more options we provide the users the more we will be making the user confused and it will take them longer to decide. Like in the physical scenario in an ice cream shop, the more flavor variety a shop has, the user will spend more time deciding which one to choose.

Hick’s Law Example (Source: Self-made)
Hick’s Law Example (Source: Self-made)
  1. In the first one, we can see there’s less option to select before clicking on the red CTA button that makes choosing an option easy for users.
  2. The second one has more options to choose from and the first option has two subcategories and multiple highlighted options that increase users’ cognitive load and makes it harder for them to determine an option.

Jakob’s Law

This rule states that 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.

Jakob’s Law kinda resembles the consistency and system standards. Change is something we as human beings are uncomfortable with so when it comes to digital experiences we also feel the same way like expecting product details page containing the image at the left and description at the right and expecting a buy button at the end of the description, not at the header of the website.

So when users go through similar kinds of websites they make a mental model of these and expect the next visited website to follow the same defined structure, so as a designer we should leverage the user’s mental model and design according to it.
Header elements Similarity (Source: Self-made )
Header elements Similarity (Source: Self-made )

In this example, we can see that 3 different e-commerce websites using the same elements in their header section to set consistency with the user mental expectations model and provide a better experience.

Product extra image sorting Similarity (Source: Self-made )
Product extra image sorting Similarity (Source: Self-made )

Also here, we can see that 3 different e-commerce websites using the same way to show the main product image and also the extra images of that product.

Law of Prägnanz

This rule states that 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.

Law of Pragnanz kind of similar to closure from Gestalt Principles. The human eye tries to look for simplicity and order in complex design. According to research, it has been proved that users are able to better understand and process simple figures than complex figures in a design.

Law of Pragnanz example ( Source: Self-made )
Law of Pragnanz example ( Source: Self-made )

Here from this example, we can see the first image, our brain can understand without any struggle, and the second image after connecting the dots, and the last image not so much.

There are still multiple laws of advanced UX to follow like Miller’s Law, Parkinson’s Law, Serial Position Effect, Tesler’s Law, Von Restorff’s Effect.

From this, we can conclude that these laws are essential for designing for a better user experience. And if you want to learn more about these laws check out Laws of UX.

Thanks for Reading ????


Rules of UX: Perspective of Psychology in UX Design was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.