UX Laws with practical examples.

Carlos Beneyto
The Startup
Published in
10 min readFeb 12, 2018

--

🇪🇸 First. Do you want to read this article in Spanish? Check it here.

A few weeks ago, I saw that quite a stir was made about “Laws of UX”, a very simple web page that talks about the main laws of the UX (User Experience). It is a fantastic site that I 100% recommend.

If we had to generate a headline about UX laws…

The collection of laws or design standards that designers must take into account when thinking and improving the user experience”.

Good design tends to follow general principles that give designers general guidelines to work with. But for interface designers and user experience, there are also certain laws that everyone should consider.

In “Laws of UX”, each law gets its own graphic representation inspired by the classic covers of minimalist books. Instead of simply collecting them as a list, the goal is to help people memorize these laws.

“It’s easier to remember an object, whether it be an image or a video, than a text”

Obviously, these representations are more than discussed and disseminated on the web, and I do not intend to discuss them here (besides, I am 100% in agreement with them) but to pose some examples with real products on these laws. Let’s begin!

Fitts’s Law

It is based on the work of psychologist Paul Fitts in 1954, which determines ‘The time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target”.

This law directly affects the user experience when designing buttons, for example, larger ones, especially on mobile devices that are tactile, reaching the conclusion that with smaller buttons it is more difficult to interact. A practical example would be the following.

Kickstarter

This would be a case of application of Fitts’s Law, it is close to the one that presupposes the reading zone of the mouse (on the right, since we are Western and we read from left to right), it also covers a large space (it is not a small button) so the probability of “hit” and click on the button is high.

Hick’s Law

“The time it takes to make a decision increases as the number of options increases”

Thus, the time it takes for a user to make a decision increases the more options they have, it is obvious that the user tries to contemplate all the possible options and what they entail and will take what he or she considers the best option.

Which is better?

  • A single form with 20 options to complete
  • A step-by-step form with 4 stages and 5 options per stage.

It obviously depends on the sector and type of user, but Hick’s law tells us that the second option is the better one. A practical case would be the following.

Airbnb

A practical example of taking simplicity to extremes and applying Hick’s law. Airbnb does not cut and prefers to divide the process and simplify it.

“Tell me directly where you want to go, then I’ll ask you when and how”.

Jakob’s Law

The best way to create something new is to look for references so that the first clients understand what it is about and are able to make associations.

What does it mean? It means that users spend most of their time on other websites (in case they do not know yours). This means that they prefer similar sites to the ones they frequent and are already familiar with. That’s why it’s better not be over-original or over-creative.

This norm was coined by Jakob Nielsen, director of the Nielsen Norman Group that he co-founded with Apple’s vice president of research. I do not know, I get the impression that he does actually know something about the topic :).

A practical case of this law would be any e-commerce.

e-commerce example.

95% of e-commerce have a provision of this style. An image on the left and Name, price, configuration and “Add to cart”on the right.

If you are going to set up an e-commerce, the logical thing would be for you to consider this structure, since a potential client knows how e-commerce works and expects something like that. Do not make them think!

Law of Prägnanz

Also called “Law of simplicity”, which states that users perceive complex forms in the simplest way because it is the interpretation that requires less mental effort.

Basically, it describes that it is easier to understand and assimilate a square than an octagon. And it requires less mental intensity to obtain an appreciation of what that is and what it is for. A practical example of this would be the following.

Practical example of the Law of Prägnanz.

What does this mean? What do we see before, figure A, B or C? obviously the A, because our brain understands that it is the simplest possible way that we have to associate. An example of practical use would be:

Why is the “Add to cart” button not a cart, but a square?.

Law of Proximity

Objects that are close tend to join, and in the user experience, they are understood as members of the same group.

The principle holds that if you are handling a group of data, all the data that we understand that correspond to the same group should be together and if we start talking about different data there should be a space (air) between them. Our head will do the rest and differentiate them.

An example of this would be…

Amazon

Amazon is a practical example of this, despite the feeling of “chaos” at the data level, it is very clear where each group of these data is.

  • A) The latest news are clearly differentiated from the best sellers and you have no problems to differentiate the groups.
  • B) If you want to filter, you have each Technology (LCD, LED, etc) together and there is a separation between brands (LG, Samsung, etc …)

Miller’s Law

According to this law, people can remember up to 7 different elements in their working memory. That is why the menus of options and navigation in a web page more or less are based on this size. Having more than 7 elements generates confusion and loss of focus of the user, who is no longer able to remember where was the option that he now is looking for.

That is why in applications or services that have a multitude of options, they are grouped to reduce the memory load.

It is named in honor of George Miller, as it is part of his theory of communication. An example of this law would be:

Netflix

Although Netflix has thousands of categories for the films, it understands that it would be very difficult to remember, so it makes the user remember not the content, but the position. Instead, he prefers to have the 6 most ”Top” categories, and from there to navigate in depth.

Parkinson’s Law

This law says that any task is prolonged until the time available for doing it is completely exhausted. It is also a law of productivity.

Because of a cultural issue, we think that the more hours we dedicate to something, the better it is. But practice shows that it is not like that.

When we know we have more time, our brain relaxes. On the other hand, when we feel the pressure of the deadline, we focus on doing what is important and that we must finish on time.

What does this mean at the User Experience level?

That the user has established certain temporary “rules”, depending on the type of user obviously, but to give an example, making a purchase on Amazon (once you have selected the purchase obviously) has a duration of 5 minutes (between filling in the data, card, etc …) Anything shortening those deadlines will be positive.

Payment with Stripe.

Stripe, for example, simplifies the payment process and allows you to remember the data, so in subsequent sales, the time of purchase will be greatly reduced.

Serial Position Effect

According to this law, among the elements of a series, users will always remember better the first one and the last one.

And that is the reason why we see that in the application navigation bar, the most important actions are placed on the left or on the right, introducing elements such as start or profile taking into account the serial position.

A practical example of this law would be in Instagram.

Instagram

The first element is Home (People) and the last element is Profile (You). The most important and core parts of the use of the application.

Tesler’s Law

Also known as ‘conservation of complexity’, by Larry Tesler. It establishes that for any system there is a certain complexity that can not be reduced to the maximum.

Every UX designer would like to simplify processes and make them faster, but we have to take into account that there are things that cannot be simplified to be more basic. (Unless the format changes).

We would find an example in any agency to buy tickets.

Kayak

As much as we like it and want it, to book a flight there are 4 basic data. (Origin destiny, when and how many). Without those 4 data the process can not be completed.

Von Restorff Effect

This principle, also known as “isolation effect”, predicts that when there are several objectives, the one that differs from the rest will always be remembered.

It’s simple, different things attract us and are striking to us, the typical. “Go!” In UX is precisely a symptom of this law.

A practical example of this law would be the Customer Support like Intercom.

Intercom

In this case, the service comes out on the intercom website itself and does not differ so much, however, you do notice the change of “style”, as it is something superimposed that initially should not be there, with a background and even a different typeface.

At the end, we want to draw attention on something different, in form and colors.

Zeigarnik Effect

Defines the tendency to remember unfinished or interrupted tasks more easily than those that have been completed.

Applying this concept to the UX, we could talk about new features (services), offer them for certain moment, and tell the user that if he wants to continue he must do X action (register, buy, etc …). A visual example we could mention is one with a list of pending tasks to contemplate, such as in the case of Startupxplore.

Where you leave certain tasks “incomplete” so that your internal process wants to complete them, but you also have that feeling remembering you they are incomplete.

“A good UX contemplates or tries to contemplate all the options that a user is going to find, and tries to simplify the path to complete the service you are offering.”

In summary, a well-thought design, based on the user experience, must fulfill part of each and every one of these norms.

Also, as I mentioned before, always thinking about a MAP product (Minimum Awesome Product).

Did you enjoy the post?

Give it claps! you can clap up to 50 times, so more people are able to find and know about this post, and of course… do not forget to share.

Let’s see those applauses!

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 295,232+ people.

Subscribe to receive our top stories here.

--

--

Carlos Beneyto
The Startup

💼 Product guy @ Idealista / Inmovilla. Entrepreneur. Digital problem solver. Father (x1), rugbier and fall in love with #nocode. #startup #product #ai