13 Laws of UX

and their use in digital interfaces Our Vehicles — landrover.inWe, humans, have always believed in simplifying all the things and experiences we interact with, but in this process of simplifying we consciously/unconsciously have complicated our lives overall, well that’s a different discussion altogether, let’s keep it for some other story, coming back to simplifying experiences! So after simplifying a certain experience/process/interaction we further tend to refine that experience by making it pleasant, fruitful and delightful but it all starts with that process of simplifying and making sense out of every interaction/experience. This habit of human beings of simplifying experiences and making sense out of each one of them was closely studied by various psychologists from all over the world for centuries. On the basis of these studies and observations, psychologists articulated them as laws of human psychology, these laws were further carried forward as foundational laws for User Experience Design. Interestingly, we all have come across or at some point have experienced most of these laws in our lives or whilst interacting with various digital interfaces, we always knew how we perceive and analyze different experiences/interfaces and try to make sense of even the abstract ones. The Laws of UX just bring forward the articulated format of human psychology and perceptions. So let’s get started! 1. Aesthetic-Usability Effect Users often perceive aesthetically pleasing design as a design that’s more usable. Hero Page - landrover.inI examined the Hero Page of Land Rover India, a luxury car manufacturing company. The minimalistic, clean and sober look and layout that the brand carries tell us more about the Brand and its products, making it look more authentic, reliable, strong and premium, it conveys all those emotions just by showcasing a simple, aesthetic and functional hero page! According to the Aesthetic-Usability Effect, an aesthetically good design creates a positive response in users’ brains and leads them to believe that the design actually works better. 2. Doherty Threshold Productivity soars when a computer and the users interact at a speed that makes sure neither has to wait on the other Loading explore exterior - landrover.inDigging deep into this Land Rover product, I found another interaction where the law of Doherty Threshold was used, the explore exterior tab, a 3D Rendering of the SUV took a few milliseconds to load, though the wait was negligible, the loading wheel gave me the assurance that the render would be soon ready to explore. According to the law of Doherty Threshold, an interaction should provide system feedback within 400 ms in order to keep users’ attention and increase productivity, animated elements can be one of the ways to visually engage users while loading or processing is happening in the background. 3. Fitts’s Law The time to acquire a target is a function of the distance to and size of the target. Our Vehicles - landrover.inShowcased above is the ‘Our Vehicles’ section in the land rover product which perfectly depicts the usage of Fitt’s Law in its design. We see multiple touch/click points in this section viz. the menu, chatbot, kebab menu and the vehicle cards (the most prominent ones), all of which are perfectly placed and spaced with a lot of breathing room and proper use of the negative space. An arrangement like this makes it easy for the user to identify, use and optimize the touch/click points to their benefit. The most prominent one here though are the images of cars in the vehicle cards, these images being the most visible ones and most easily accessible ones perfectly fit into the description of Fitt’s Law! Fitt’s Laws mainly focuses on three major aspects, according to this law touch/click targets should be large enough for users to accurately select them, the targets should have ample spacing between them, touch/click targets should be placed in such areas of an interface that allow them to be easily accessed. 4. Goal-Gradient Effect The tendency to approach a goal increases with proximity to the goal. Navigate your next — InfosysLet’s check this website of an Indian tech company, Infosys, where we find the use of Goal-Gradient Effect. See that thin blue line going across the page, right below the header? That blue line is actually a progress bar that tells the users how much more they need to scroll to reach a particular section on the page, it will complete at the end of the page indicating that the user need not scroll further. The Goal- Gradient Effect says the closer users are to completing a task, the faster they work towards reaching it, providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task. 5. Miller’s Law The average person can only keep 7 (plus or minus 2) items in their working memory. Navigate your next — InfosysLet’s check the choices we have on the header of the Infosys

13 Laws of UX

and their use in digital interfaces

landrover
Our Vehicles — landrover.in

We, humans, have always believed in simplifying all the things and experiences we interact with, but in this process of simplifying we consciously/unconsciously have complicated our lives overall, well that’s a different discussion altogether, let’s keep it for some other story, coming back to simplifying experiences!

So after simplifying a certain experience/process/interaction we further tend to refine that experience by making it pleasant, fruitful and delightful but it all starts with that process of simplifying and making sense out of every interaction/experience. This habit of human beings of simplifying experiences and making sense out of each one of them was closely studied by various psychologists from all over the world for centuries. On the basis of these studies and observations, psychologists articulated them as laws of human psychology, these laws were further carried forward as foundational laws for User Experience Design.

Interestingly, we all have come across or at some point have experienced most of these laws in our lives or whilst interacting with various digital interfaces, we always knew how we perceive and analyze different experiences/interfaces and try to make sense of even the abstract ones. The Laws of UX just bring forward the articulated format of human psychology and perceptions. So let’s get started!

1. Aesthetic-Usability Effect

Users often perceive aesthetically pleasing design as a design that’s more usable.
landrover
Hero Page - landrover.in

I examined the Hero Page of Land Rover India, a luxury car manufacturing company. The minimalistic, clean and sober look and layout that the brand carries tell us more about the Brand and its products, making it look more authentic, reliable, strong and premium, it conveys all those emotions just by showcasing a simple, aesthetic and functional hero page!

According to the Aesthetic-Usability Effect, an aesthetically good design creates a positive response in users’ brains and leads them to believe that the design actually works better.

2. Doherty Threshold

Productivity soars when a computer and the users interact at a speed that makes sure neither has to wait on the other
landrover
Loading explore exterior - landrover.in

Digging deep into this Land Rover product, I found another interaction where the law of Doherty Threshold was used, the explore exterior tab, a 3D Rendering of the SUV took a few milliseconds to load, though the wait was negligible, the loading wheel gave me the assurance that the render would be soon ready to explore.

According to the law of Doherty Threshold, an interaction should provide system feedback within 400 ms in order to keep users’ attention and increase productivity, animated elements can be one of the ways to visually engage users while loading or processing is happening in the background.

3. Fitts’s Law

The time to acquire a target is a function of the distance to and size of the target.
landrover
Our Vehicles - landrover.in

Showcased above is the ‘Our Vehicles’ section in the land rover product which perfectly depicts the usage of Fitt’s Law in its design. We see multiple touch/click points in this section viz. the menu, chatbot, kebab menu and the vehicle cards (the most prominent ones), all of which are perfectly placed and spaced with a lot of breathing room and proper use of the negative space. An arrangement like this makes it easy for the user to identify, use and optimize the touch/click points to their benefit. The most prominent one here though are the images of cars in the vehicle cards, these images being the most visible ones and most easily accessible ones perfectly fit into the description of Fitt’s Law!

Fitt’s Laws mainly focuses on three major aspects, according to this law touch/click targets should be large enough for users to accurately select them, the targets should have ample spacing between them, touch/click targets should be placed in such areas of an interface that allow them to be easily accessed.

4. Goal-Gradient Effect

The tendency to approach a goal increases with proximity to the goal.
Infosys
Navigate your next — Infosys

Let’s check this website of an Indian tech company, Infosys, where we find the use of Goal-Gradient Effect. See that thin blue line going across the page, right below the header? That blue line is actually a progress bar that tells the users how much more they need to scroll to reach a particular section on the page, it will complete at the end of the page indicating that the user need not scroll further.

The Goal- Gradient Effect says the closer users are to completing a task, the faster they work towards reaching it, providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task.

5. Miller’s Law

The average person can only keep 7 (plus or minus 2) items in their working memory.
Infosys
Navigate your next — Infosys

Let’s check the choices we have on the header of the Infosys website, we have the Infosys logo which takes the user back to the home page, navigate your next dropdown, share/search icon, let’s talk, and the hamburger menu, out of all these, the logo, let’s talk and the hamburger menu are of the highest prominence giving very clear choices to the user to explore more, connect with the customer care or go back to the home page, such an arrangement showcases the Miller’s Law which emphasizes on organizing content into smaller chunks to help users process, understand, and memorize easily.

6. Law of Proximity

Objects that are near, or proximate to each other, tend to be grouped together.
Infosys
Success Stories — Infosys

Another section of success stories in the Infosys applied AI, depicts the use of the Law of Proximity. In this section of the success stories, we can see four different cards, closely arranged to each other, which carry similar designs and layouts. When the users land on this section they perceive all the four cards as components of the same section (success stories) that narrate four different success stories of applied AI at Infosys.

According to the Law of Proximity, proximity helps to establish a relationship with nearby objects, it helps users understand and organize information faster and more efficiently.

7. 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.
Flipkart
Home — Flipkart

Here we have the home page of the Indian eCommerce product, Flipkart, the service competes primarily with Amazon’s Indian subsidiary and domestic rival Snapdeal. This example of Flipkart’s Home Page showcases Jakob’s Law as it carries not the same but similar design, layout and overall experiences like its competitors Amazon and Snapdeal, surely it has its own brand language and identity but the functionality of the product remains similar to its competitors.

According to Jakob’s Law, users will transfer expectations they have built around one familiar product to another that appears similar and by leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.

8. Law of Common Region

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Flipkart
Home — Flipkart

Another screen from the Flipkart product which uses the Law of Common Region, not once, not twice but thrice on a single screen! The Header which is majorly blue would be perceived as a different section in the screen that contains specific elements like the Flipkart logo, search box, login Button, more and the cart. Similar is the case with the Tvs/Appliances and the Featured Brands section, both separated by different background colours/shades and shared margins containing cards of their respective categories with different content, designs and layouts.

The Law of Common Region says a common region can be created by defining a background of an element or group of elements, adding a border around an element or group of elements is an easy way to create a common region.

9. Hick’s Law

The time it takes to make a decision increases with the number and complexity of choices.
Flipkart
Checkout — Flipkart

I went ahead to purchase a Robotic Vaccum Mop through this Flipkart product without logging in, during the checkout this screen immediately popped up which clearly showcased the steps I need to follow to successfully make a purchase and checkout, the steps were divided into four small stages and there weren’t any confusions or distractions while going through this interaction. This was the usage of Hick’s Law was identified.

Hick’s Law emphasizes minimizing choices when response times are critical to increase decision time and to break complex tasks into smaller steps in order to decrease the cognitive load.

10. Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Mobikwik
Online Prepaid Mobile Recharge — Mobikwik

This is the home page of a digital payment company, Mobikwik, if we observe the Online Prepaid Mobile Recharge section, it consists of a form that is built using a group of text boxes and a button. When the users land on this page, they perceive this component as a whole form rather than four individual text boxes and a button, that’s the Law of Similarity.

According to the Law of Similarity, the elements that are visually similar will be perceived as related, color, shape, size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality.

11. Law of Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.
Mobikwik
Credit Card Bill Pay — Mobikwik

On the same screen of Mobikwik, there is this sidebar that contains various items which redirect the user to their desired page when they click on a specific one. This is where we see the Law of Uniform Connectedness, all the items are contained in a sidebar that is navy blue in colour and stands as a separate section from the rest of the page, the items within the sidebar are perceived as more related similar and are expected to carry similar functionality by the users.

According to the Law of Uniform Connectedness, a group functions of a similar nature so they are visually connected via colours, lines, frames, or other shapes.

12. Von Restorff Effect

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.
Mobikwik
Offers and Deals — Mobikwik

Here is the offers and deals page from the Mobikwik product, notice the group of chips which are titled as Offer by categories, the cashback chip is selected and has changed its colour to blue which makes it look different and memorable from the rest of the chips, hence creating the Von Restorff Effect.

13. Law of Prägnanz

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.
Mobikwik
Mutual Funds - Mobikwik

Here is the Mutual Funds section of Mobikwik, the graph which we see on the right showcases the user’s return on investments if they invest through Mobikwik, the form of the graph changes with changing values on the left. The user however when studies the graph, perceives it as a whole rather than a group of straight lines, a couple of curves and dots. This depicts the application of the Law of Prägnanz.

According to the Prägnanz Law, the human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information.

That was all about the 13 Laws of UX, you must have surely noticed how the various laws interplayed in various other designs at the same time, there were hardly any screens that showcased one law at a time, but for the sake of clarity and reader’s convenience all the laws were explained separately and these aren’t the only laws, there are many more if you wish to dig deep into these surely visit lawsofux.com

Until Next Time…..Happy Designing :)


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