UX Design laws every developer should know

UX Design laws every developer should know

A list and brief explanation of the 6 UX Design laws I think developer, maintainers should know.

Featured on Hashnode

Introduction

I've worked as a UX designer on a number of projects, and I've found that most of the UI designers in my team don't adhere to the UX design principles while creating websites. Even worse, most of the time there aren't any designers and the developers themselves create the website while disobeying all the rules. This results in a website that is incredibly messy from both a user experience and a user interface perspective. As a result, I've compiled the 6 UX design laws that every person, whether they work as designers, developers, or project managers, has to be aware of.

Image from Laws of UX

Why is learning these laws important for you?

When starting a new project or website, people don't frequently look to hire a UX designer to conduct research and assess website designs. A UI designer is frequently present, or the developer may design the website from scratch. Self-designing the website is not a horrible concept; after all, every project needs a design. However, it is also not a good idea to ignore all UX laws. Because these UX Laws were not taken into account while creating the website, the final product falls short of your performance expectations.

I'm confident that after reading this blog, you will have at least a basic understanding of the UX Design field and, more importantly, the most crucial UX Laws and principles utilised when developing websites. Following this, you will be able to design websites that are superior in terms of both user experience and user interface even if you are not from a design background.

Difference between a UI Design Principles and a UX Design Laws & Principles

Laws are general rules and ideas that adhere to the nature of the universe while principles describe specific phenomena that require clarity and explanation.

I won't discuss UI Design Concepts, such as Hierarchy, Contrast, Alignment, and others in this blog. I'm going to discuss UX laws and principles that have an impact on how users interact with websites. However, because UI Design Principles are only derivable from Laws, you will find references to them frequently. Additionally, these rules are only concepts that have been discussed and investigated in the past, so you should feel free to develop your opinions on them rather than seeing them as restrictions or limits.

The laws

The laws & principles listed below, in my opinion, are some of the most crucial ones since mastering them will improve your understanding of how consumers interact with websites and your ability to design better websites.

These laws & principles are drawn directly from the Laws of UX and other reliable sources, and the concept was developed further. I suggest reading the articles 5 Essential Laws for UX Designers and UX Laws with practical examples if you want to learn more about Laws in UX Design.

Fitts’s Law

Paul Fitts, a psychologist, proposed the Fitts' Law in 1954. According to the statement, "The time to acquire a target is a function of the target's size and distance." The following calculus expression captures the following:

  1. The bigger the distance to the target, the longer it will take for the pointer to move to it. In other words, closer targets are faster to acquire.
  2. The larger the target, the shorter the movement time to it. In other words, bigger targets are better.
MT = Movement Time
a = The intercept
b = The slope
D = Distance between origin and target
W = Width of the target

Fitts' law now incorporates mathematical formulae, but we can still apply it to UX design. The Fitts' Law is applied in UX Design in the examples below.

  1. Touch targets have to be big enough for users to pick them correctly. There should be enough space around them for padding and margin. Additionally, the padding has to be stylized to indicate that it is the button's clickable region.

  2. There should be enough room between touch targets.

  3. Touch targets should be positioned on an interface so that they can be quickly accessed.

If you're interested in learning more about Fitts' Law, you can read more about it and find further resources at Laws of UX: Fitts' Law.

Jakob’s Law

According to Jakob'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. Design for patterns for which users are accustomed." This means that there is a risk associated everytime you attempt something new that your users won't grasp the aspect and will leave.

The argument over whether to create a brand-new website or keep it simple and generic goes on and on, but what you need to realise is that while your website doesn't have to look like other websites, its fundamental functionality and user interface must be somewhat recognisable and comparable to other websites so that users can easily understand it and feel at ease using it.

Users often project their expectations from one well-known product onto another that seems to be comparable. You may easily apply the ideas employed by others in your UX Design process, so you don't necessarily need to create the wheel from scratch or do more user research. By making advantage of pre-existing mental models, you may design better user interfaces that allow users to concentrate on their jobs rather than learning new models.

If you're interested in learning more about Jakob's Law, you can read more about it and find further resources at Laws of UX: Jakob's Law. You can also watch the video on Jakob's Law by Jakob Nielsen, the person who coined the term and concept himself.

Pareto Principle

If not under the title "Pareto Principle," then most surely under the "80/20 Rule," I'm very sure you must have heard of this idea. It is true that this idea applies to practically all aspects of life. Whether it be job, life, time management, or anything else.

Despite the fact that this theory is well recognised, few people are fully aware of how it applies to UX design. According to the Pareto principle, 20% of causes account for about 80% of the consequences for many occurrences. The Pareto Principle in UX Design influences the user experience rather than the UI directly. The main lessons to be learned from the Pareto Principle are as follows:

Pareto Principle Graphics

  1. Only 20% of the functions on your website will be used by 80% of people, thus while fixing problems and mistakes, you should concentrate on those 20% of the features. It won't work if you try to solve issues that resulted from the remaining 80% of features.

  2. Figure out where an imbalance of effects exists. Where are you pouring most of your money? What do you spend most of your time working on? What aspect of your product holds the most value? Try to figure out the 10–40% of inputs directly influencing most of your results, and, depending on the nature of the system, work to either amplify or downplay these inputs.

More information about it may be found in the articles The 80/20 Rule in User Experience and Laws of UX: Pareto Principle.

Law of Similarity

One of the five Gestalt laws of grouping principles is the law of similarity. All of the Gestalt rules of grouping's core tenets are closely related to the nature of the user interface and how the user will interact with it. Let's go more into the law of similarity.

The concept of similarity basically asserts that when two or more objects share a visual trait, it is considered that they are somehow linked. To be viewed as belonging to the same group, the things just need to have at least one obvious characteristic, such as color, form, or size. The human eye has a tendency to establish connections between like parts in a design. Shapes, colors, and size are fundamental components that may be used to create similarity.

Law of Similarity

One thing to keep in mind is that even when elements are not arranged in a group, a group can still be formed using this law. Therefore, even while proximity or a common region frequently outweigh the similarity principle, which isn't always the strongest grouping concept, it could be the most durable.

You may read the extremely in-depth and fascinating article "Similarity Principle in Visual Design" on the subject that was released by The Nielsen Norman Group.

Law of Proximity

Let's now discuss the law of proximity, the second fundamental in the Gestalt principles of grouping. It is among the simplest to comprehend, use, and yet is very important in UX Design legislation.

According to the Law of Proximity, objects that are close to or adjacent to one another tend to be grouped together. Another way to think about this concept is that by putting space between two items, you ungroup them and make them stand out from one another. This concept, which is one of the most important laws, is employed in every design nowadays and should be kept in mind while creating something from start. However, you must use caution while using this concept since a cluttered, loud arrangement will result from grouping too many elements too closely. Your design will become meaningless since the distances between each object will be so blurry.

When you initially hear about this law, it could seem apparent, and you might choose to ignore it as well, but as you get more expertise in UX design, the more cautious you will be with this law's application and avoid overusing it. These minute nuances elevate an ordinary website to remarkable status.

On the webpage for Laws of UX: Law of Proximity, you can read more about this law and discover further resources.

Peak-End Rule

One of the most intriguing and important cognitive biases is the Peak-End Rule. Due of how significantly this one prejudice may impact a company's overall performance and sales, it is crucial to comprehend and put into practice.

The "Peak-End Rule," states that 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 .Simply put, the end user will always remember the moment when he/she was at his/her emotional peak (whether the peak was happy or sad) and the end moment and he/she will use these 2 moments to judge how the overall experience was.

Trial Images

Let's discuss a little experiment that was done to confirm the same. A few persons were instructed to submerge their hand in 14°C water for 60 seconds. After some time, they were given the same assignment to do again, but this time, after the first 60 seconds, the temperature was raised by 1°C to 15°C, and they had to keep their hands there for 30 seconds. When asked which experience was more enjoyable after the experiment, the majority of participants chose the second trial. It was because participants preferred the lengthier trial that finished on a warmer note to the shorter trial that ended poorly, even though they had to leave their hands in the chilly water for an extra 30 seconds because it was 1° warmer.

Let's now discuss how we can use this in UX design. Examining Mailchimp's user interface will be an excellent starting point for comprehension. Mailchimp knew they had to design an end that made up for the stressful experience because creating an email campaign can be very challenging and stressful. Rather than designing a simple submit button like a typical website would, they created a delightful and relaxing illustration and user interaction so that any user will end on a positive note. Furthermore, they went a step farther and produced a comparable confirmation graphic.

Mailchimp's Confirmation Page

In a similar manner, you may make sure that your design comes to a satisfying conclusion so that the user will remember the encounter as enjoyable rather than stressful. Please keep in mind, however, that this does not imply that you should simply pay attention to the conclusion. In order for the user to recall the peak feeling as somewhat less stressful than it actually was, Mailchimp makes sure that all the difficult actions are precisely broken into phases.

The blog post on "Peak-end Rule" provides a fairly in-depth case study, so I would suggest reading it.

Conclusion

I'm hoping you now know something new. Additionally, make sure you go over this periodically until it becomes part of your muscle memory, and always put them into practice.

That brings this particular blog entry to a close. In order to conclude, I'd want to give you a little introduction of myself. I'm Adarsh Dubey, and I write about UX Design, Frontend Web Development and Machine Learning Python. My handle is @inclinedadarsh on most social media platforms, where you may find me. Visit my portfolio website and Twitter.

I appreciate you reading. I'll sign off.

Did you find this article valuable?

Support Adarsh Dubey by becoming a sponsor. Any amount is appreciated!