7 Tried and True Laws of UX

Vinayak Gupta
Software Incubator
Published in
8 min readApr 29, 2020

Design just for the sake of designing does not make any sense. Design differs from art, it makes the worlds living more comfortable by providing solutions to particular problems and aims to achieve some result. Any Design won’t ever remain in isolation, It surely will come into interaction with end-users. Hence, professional Designers try to make out things by stepping into the user’s shoes itself and try to gather their pain points and how they feel. This is where the coined term, User Experience Design (UX Design) comes into play.

“Want your user to fall in love with your Design? Fall in love with your User.” — Dana Chisnell

UX design always happens. Whenever anyone thinks of interaction between product and user, there occurs a process of UX Design. But Good Design happens when these thoughts are developed in an organized way by following certain principles and guidelines of Design, to understand and fulfill the need of users and the business. This can be achieved with the help of effectual design laws and use proven formula as a guide to achieve optimal user experience in designs.

As we all know, Graphical representations are much easier to remember than a huge lot of thesis. In “Laws of UX”, each law gets its Graphic representation inspired by the classic covers of minimalist books. And of course, when these laws will be strung with real-life instances, it’ll surely make your implementations go smooth. So Let’s begin!

1. Fitt’s Law

Fitt’s Law Graphical Representation.

“The time to acquire a target is a function of distance to and size of the target.”

This law states that the time required for a user to move to its target area is a function of the distance between the pointer of the user divided by the size of the target area. It demonstrates how to ease interactions through the careful sizing and positioning of interface elements. Touch targets should be large enough to be recognized and accurately selected by users.

Let’s relate it to real-life instance, Many of you have wondered that, why “Add to Cart” and “Buy Now” buttons are comparatively bigger than any other buttons, this law proves the fact. These buttons are closer to the user’s pointer, since we are western and we read from left to right, and it falls in the reading zone of the mouse.

Fitt’s Law Instance on E-commerce.

This can also be felt on the mobile view that, these buttons are mostly present in the area where our thumbs are easier to reach naturally (know as UX Thumb zones).

Fitt’s Law verifying UX Thumb Rule.

2. Hick’s Law

Jakob’s Law Graphical Representation.

“The time it takes to make a decision increases with the numbers and complexity of choices.”

This law makes sure that the product is not confusing and misleading for the users. It can be done by providing them with a concise set of options or by breaking down complex tasks into smaller steps. This can also be performed by highlighting the recommended options for the users.

Rule of Thumb for UX: More Options, More Problems.

Hick’s law reflects a Usability Principle in UX i.e KISS: Keep it Simple, Stupid. This comes out that the users want everything on point, simple and straightforward.

What would you prefer?

A.) A form with 20 Input fields?

B.) A 4-stepper form with 5 Input fields on each?

It mostly depends on type and sector of the product and person, but according to Hick’s law, the second option is more preferable because it tends to simplify the questionnaire and accumulate similar types of the question at the same place, reducing its complexity.

Hick’s Law In The Real World.

One of the greatest examples of Hick’s law in the real world is the TV remote. Most remotes are so confusing that they need to make a button diagram before people can understand how to use it. Apple’s reaction was to make the remote simpler. The apple remote is much easier to understand. More importantly, users don’t have to spend so much time figuring out how to use it.

Hick’s Law practical use.

3. Jakob’s Law

Jakob’s Law Graphical Representation.

“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.”

The best way to make something new is to take reference from some similar pre-existing products so that clients can understand what is it about and can associate with it properly. By leveraging the existing mental model, we can build better User Experience so that the user can focus more on the task rather than building any new mental model. That’s why it’s better not to be over-original or over-creative.

Do not make them think.

Most of you would have noticed that in approx 90% of the websites, the logo of the company is on the top-left corner. Its because people have this regular fixation of finding the logo on that particular place. To accumulate these kinds of erudition that what people are already up to, a 5-second usability test can be performed, with the help of which you can get the keynotes that what users tend to remember on its first shot, and hence use it for making superior User Experience.

Jakob’s Law practical example.

Another practical example of Jakob’s law can be heeded in most of the E-Commerce website that, for any particular product, the information related to the product and “Add to Cart” button will be on the right side whereas the image of the product will be on left. This is because a potential client expects it in the same way.

4. Law of Prägnanz

Prägnanz’s Law Graphical Representation.

“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.”

Also known as “Law of Simplicity”, which confronts that people opt for simple and ordered shapes rather than any complex structure because the interpretation of simple shapes requires less mental efforts. Hence, when confronted with complex shapes, we tend to reorganize them into simpler components or a simpler whole.

Law of Prägnanz’s practical Example.

Which of these caught your sight at first? The one on right, as it is organized of recognizable shape you are familiar with and you didn’t have to stress your mind to figure out what is it?

Ever Wondered? Why most of the buttons are rectangular? Why don’t people try other shapes like a rhombus, pentagon, etc for a button?

5. Law of Proximity

Law of Proximity Graphical Representation.

“Objects that are near or proximate to each other, tend to be grouped together.”

This law describes how the human eye builds up a connection between the objects that are grouped as visual elements. Elements that are close to each other are perceived to be related when compared with elements that are separate from each other.

Just like any book or any written story, different subjects and ideas are separated with the help of paragraphs, stating the practical implementation of the law of proximity.

E-commerce following Law of Proximity.

Nowadays, every E-commerce Website tends to obey The Law of Proximity, by grouping similar objects and hence making it more manageable for the user to understand the placement of objects.

6. Serial Position Effect

Serial Position Effect Graphical Representation.

“Users have prosperity to best remember the first and last item in the series.”

This law states that the human mind can store the first and last item of the series in its long-term working memory, Hence it is suggested to keep the important matters either at last or at first and place the least significant item in the middle.

For a practical example, we can refer to the navigation bar of Instagram. The Home button is in the first place and the Profile button is at last. The most important and core parts of the use of the application. Positioning key actions on the far left and right within elements such as navigation can increase memory.

Instagram obeying The Serial Positioning effect.

7. Von Restorff Effect

Von Restorff Effect Graphical Representation.

“The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.”

The Isolation effect, as the name suggests, the most important information needs to be visually different. The most distinctive object draws the attention of the user and is striking. It should be notably diverse from other objects in the series in terms of color, size, etc.

Evernote serves The Von Restorff effect.

Here is an example of using the Von Restorff effect in their pricing plan, by having a black label on top of their premium plan to highlight it.

Making an item stand out will make its surroundings fade away, therefore balance should be an important factor when using the art of isolation, and it should only be used when there’s a specific goal or objective.

Winding Up!

Here are some Tried and True Laws of UX which were illustrated with help of some real-life examples to make it feel more happening, Furthermore, some more basic guidelines can be followed while pursuing User Experience Design, you can check it here Laws of UX by Jon Yablonski. However, these were also referred from the following website itself.

‘Don’t make users think’ is a common adage in the product design. Designers should strive to reduce the user’s cognitive load and lower the cost of interaction by designing easy-to-use products. The principles above should be a part of your design toolbox. Applied correctly, they can help you create a better user experience for your users.

“Perfection is achieved not when there is nothing more to add, but there is nothing left to take away.”

--

--

Vinayak Gupta
Software Incubator

Product Designer 🤹‍♂️ | Occasional Developer 👨‍💻 | Practicing Writer ✍️