16 Basic Laws of UX Design Every Product Designer Should Know

Basic laws of UX design

UX Designers, Product Managers and other key stakeholders in an organization spend quite a lot of time on many research methods to understand the habits, behavior and the needs of their end-users.

With the help of keen observation and multiple studies, its been found that there are many usage patterns that every consumer goes through consciously or not while using any product whether digital or physical.

Based on this understanding, UX designers and enthusiasts have been referring to a set of user experience laws formulated by scientists and UX pioneers. The purpose of this article is to introduce and educate people about some of these ‘laws’ of UX Design.

Laws of Great UX design

Law of Aesthetics

People tend to believe that things that look good will work better.

Researchers from the Hitachi Design Center first studied this effect in 1995. They found a strong correlation between aesthetic appeal and ease of use.

They concluded that users are strongly influenced by the aesthetics of a product.

This meant that users perceived attractive products to be more useful.

In other words, the more positive the response is to visual design, the more tolerant they are with minor usability issues.

So in the end, people do judge a book by its cover.

law of aesthetic usability in air pods,apple product

It’s a well-known fact that aesthetics is one of the core reasons why Apple has an edge over its competitors.

How to use Aesthetic Usability Effect

  • Make your Interface appealing. Design with people’s interaction model in mind.
  • Focus on the high-friction, high-value points in your user funnel (top landing pages, bottom of the funnel stages such as checkout flow).
  • Improve your aesthetics with continuous user feedback.
  • Don’t change usability when applying the aesthetic-usability effect, which means the core function of the product should be intact.

Fitts’s Law

You may or may not have heard about Fitts Law, but it’s a fundamentally important one that’s most frequently ignored.

In 1954, Psychologist Paul Fitts, while examining the human motor system, discovered that the longer the distance to a target, and the smaller the target’s size, the longer it takes to acquire that target.

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

This law applies primarily to buttons, where the purpose is to find and select.

This is why the more important keys on a keyboard like Space, Enter and Shift are often larger than the rest of the keys.

Or why the brake pedal is bigger than the accelerator pedal because you want the driver to access the brake pedal much more easily.

It also explains the reason why the off button on certain machines are big so that you can shut the machine off easily in the case of an emergency, and why the on button is small so that you accidentally don’t turn it on.

This law is applicable wherever visual interactions take place, i.e when humans interact with modern computer interfaces.

Applications for Desktop and Mobile experiences

There are many elements and areas to consider while designing UI elements.

Be it the size and distance, corners, edges and menus, chances are a user can accidentally hit the wrong button at any given time.

This is why you see the Windows Start menu and Apple menu in the corners of your screen.

If you think about it, pop up menus are dreaded for a reason. They are right in your face, reducing the travel time by creating smaller movements.

application of fitts law in flight booking website

You can see Fitts’s law doing its bit to make flight booking experience simple and effective.

Here you can see the call to action arrow placed right below where the passenger fills in his/her information, thus reducing the chance for the user to miss the button.

How to use Fitts law in UI designing?

  • With Menus, drop-drowns or any type of interactive list, shorter is smarter.
  • Buttons to complete an action should be closely beside the active elements.
  • Important actions should be larger so they are easier to select.

Hick’s Law

UI and UX designers have a big hand in the emotional state of their users.
Nobody wants to create interfaces, apps and websites that are frustrating.

Designers, thus rely on Hick’s law to enhance the user experience journey.

In simple words, Hicks’s law is a simple idea that says the time it takes to make a decision increases with the number and complexity of choices.

You can see Hick’s law at work in the navigation of websites.

If you think about, the law is omnipresent and we can most definitely see its influence in the number of switches on a console, washing machine or remote.

Good UX requires that you find out the functionalities that will answer the user needs, and guide them to functions they need at the moment.

If users end up in the decision making dilemma of what-next, they become frustrated and might leave that website or app altogether.

Not long ago, Twitter displayed a lot of choices on their homepage.

how twitter applied hicks law in their user login process

The new design reduces decision points and exhibits greater focus.

How to use Hick’s law?

  • If your payment process is long and complex, break it down and prompt users to register their email and create a password.
  • Use the card-sorting method to build categories and labels.
  • Use images properly. Taking away images will make the design unusable.
  • Apply Hick’s law when designing
    • Control display
    • Drop down menus
    • Contact pages
    • Sign up forms
    • Button selection
    • Navigation menus

Jakob’s Law

According to this law, a user will transfer expectations that are built around one familiar product to another that appears similar.

For instance, users prefer an app, product, website to work the same way as all the other sites they already know.

Jakob’s law recommends the use of familiar patterns in design, to facilitate better user experience.

It means that sometimes your urge to create something entirely unique and fancy might hamper the user experience simply because the user is not familiar with it.

The law was coined by Jakob Nielsen, director of Nielsen Norman group that he co-founded with Dr. Donald A Norman, Apple’s Vice-President of Research.

Any e-commerce website would be a practical case of this law.

Jacobs law followed in ecommerce websites

As you can see, this is how most of the e-commerce sites look these days.

Information about the best deals, names of products and its price, the purchase option and shopping cart.

If you are ever going to set up e-commerce, the smartest option is to follow this structure as the potential customer would be aware of how e-commerce sites work.

Think about the positioning of a shopping cart in these sites. There is a reason why they are at the end (Z Pattern is at work here) and it is being tediously followed across all other similar platforms.

Think about the last ten websites you visited. Pretty sure that the majority of them had the company logo on the top left corner and if you click it, it will direct you to the homepage.

This is one of the most common sights on a website, and users always expect it to work the same way on Facebook, Amazon, YouTube and your website too.

How to use Jakob’s law?

  • Strictly adhere to the visual hierarchy of reading patterns.
  • Tone down the individual appearances and distinct design of your app or site in all ways:
    • Visual design
    • Terminology and labeling
    • Interaction design and workflow
    • Information architecture
  • Simplify the learning process by providing similar design patterns.

Gestalt Theory

Gestalt theory was developed by German psychologists in the 1920s.
It was hypothesized that people tend to organize visual elements into groups or unified wholes when certain principles are applied.

gestalts principle with examples- infographics

Sound knowledge of these principles can help to effectively choose which design elements should be chosen in each situation, how to influence visual perception, users’ behavior, and create usable design elements.

Whilst there are several principles that Gestalt theory defines, the main ones are:

Law of Simplicity

This law states that people will perceive and interpret ambiguous or complex images in their simplest form possible.

law of simplicity with design example

According to many studies, the human eye tends to find order and simplicity in complex situations feeding their need to prevent their mind from information overload.

Because people are drawn to perceive something that requires less mental effort.

law of simplicity applied in ubereats website

For example, people find it easier to understand and comprehend the shape of a square than say, a hexagon.

 

How to use the Law of Simplicity?

  • The law of simplicity can be used when wireframing a website.
    Try wireframing a new concept and place it along with the current version. The eyes do not lie, and they will definitely pick out the variances and quickly provide material for iterations.
  • Always minimize the number of elements in a design.
  • Use designs that are symmetrical in nature in your UI prototype. This will help to grab the users’ attention.

Law of Proximity

According to the law of proximity, objects that are near each other or proximate, tend to be put together/grouped.

Proximity overrides similarity of color, shape and other factors that might differentiate a group.

law of proximity with example

It allows users to glance at a group of content in one go.

A prime example of this would be Spotify.

law of proximity applied in Spotify website

Despite the feeling of a bundle of information, it is clear where each group is.

Here, popular playlists are separated from the type of playlists that match your mood.

The nearness of each image and its corresponding text communicates to its users that they are related to each other.

This is how Spotify uses this law to distinguish between Today’s Top Hits, All out 10s and more.

Job well done, Spotify.

How to use the law of proximity?

  • Always bring elements that belong to a common group, closer together.
  • Distinguish between the images, headlines, descriptions, and other information for each of its stories with the use of black/white spaces. This is to show that these elements are unrelated.

Law of Similarity

The laws says humans perceive elements that appear similar as part of a unit that has the same function.

This similarity can refer to any number of features like color, orientation, size, and motion, which means that this grouping can occur in visual and auditory stimuli.

law of similarity with example,gestalts principle

For example, Google uses the law of similarity to distinguish its search results.

law of similarity applied in google search results page

One can instantly tell that the links that are purple in color were previously visited by the user.

This means that when objects are similar, another object can be emphasized by creating an anomaly if it is different to the others.

 

How to use the law of similarity?

  • Always design elements of the same color, feature, and function in a similar style as the user will recognize an identical element and its function.
  • To create an anomaly, break the design or text pattern, for elements that exhibit different functions.

Law of Closure

Our brains tend to fill in information and avoid contradictions as much as possible.

This is because people possess the innate nature to try and see the whole picture.

And we are so good at it that we understand the bigger picture even if the picture is missing, say a lot.

This means that users tend to look for a single, recognizable pattern in a complex arrangement of visual elements.

This lays the foundation for the law of closure where elements are grouped if they seem to complete some entity.

law of closure,gestalts principles, example

If you think about it, some of the world-famous logos that you’ll definitely see without fail everyday borrow the law of closure.

And as you can see in the examples above, this law is majorly used in the creation of logos, and our brains can easily recognize the panda, rabbit, and peacock even though there are empty spaces all around.

How to use the law of closure?

  • Decrease the number of elements, you need to let the user understand and what you aim to show. This makes it easier to design icons, pictures, and brand logos that are simple.
  • Play with positive and negative spaces and allow room for the cognitive ability of the user to kick in.
  • Always provide enough information to complete the pattern.

Law of Continuity

Do you want your users to have a smooth interaction with the website? Paying attention to this law is the quickest way to attain that.

This law states that human eyes naturally follow the elements in a line or curve because they believe continuation is a strong sign of relatedness.

Here, we perceive lines as a part of continuous movement.

law of continuity,gestalts principle

Elements in lines are seen as those that belong together that follow the smoothest path.

uber using law of continuity in their website for customer onboarding

Uber uses the law of continuity to communicate each step to the user and how it paves the way for the next step.

 

How to use the Law of Continuity?

  • Place elements in a way that the user can easily identify the elements that are in a group.
  • Add extra visual cues only when it is necessary.
  • Guiding the user through different segments and content can do its charm when the user is looking for a quick route through the website.

Law of Focal Point

This is kind of like arriving in a Lamborghini on a highway of old cars.

law of focal point with example, gestalts principle

Needless to say, the Lambo will be the center of attention as it visually captures the viewer’s attention.

This is what the law of focal point is also about.

law of focal point is used in slack website

Slack uses the focal point principle to draw attention to their call-to-action button.

 

How to use the law of focal point?

  • Contrast is a good way to create focal points as it calls for attention for being different. More dominant elements will attract the human eye and get noticed first.
  • Make the elements or focal points dominant by giving them more weight by choosing a different color or by increasing the size of such an element.

Miller’s Law

This law can put your memory to the test.

Not a joke, according to this law, having more than 7 elements can create confusion and a state of disarray in the user minds.

digital illustration of millers law

The rule/law goes like this, the average person can only keep 7 items (plus or minus 2) in their memory at one point in time.

Not too long ago, user registration forms used to be a tedious process and because of that, the users hated the idea of registration.

simplifying user registration process using millers law

Fast forward to now, sign-ups became effortless and easy, as it should be.

As you can see from the example above, Miller’s law is effective in grouping information and the user can read it within a quick amount of time.

In for more? Check out this cool product page from Starbucks!

There are only 2-3 actions to choose from:

  • Swipe through the products
  • Select your favorite drink
  • Choose the type of drink you want
  • Add the items to the basket

All the major products are chunked into a group of 4 with less than 3 sub-options to choose from.

With a UX like that, Starbucks does know how to throw the happiest hour of the year!

How to use Miller’s Law?

  • Always present content in a manageable way by putting them in a group.
  • Chunking is an effective method of presenting them in groups.
  • Try to organize content in groups of 5-9. Get rid of options that a user finds useless.
  • Create a clear visual hierarchy with headings and subheadings.
  • Short paragraphs containing 2-3 sentences should always be separated by white space.

Pareto Principle (80/20 rule)

Named after the revered economist Wilfredo Pareto, the Pareto principle defines that 80% of the consequences occur from 20% of the causes.

Also known as the 80/20 rule, this principle was derived from the imbalance of land ownership in Italy and it is used to illustrate that things are never equal and the minority often owns the majority.

The formula for Pareto principle goes like this:

Always focus on X% of the user tasks used by Y% of the users at Z% of the time.

In a perfect world, every feature would be important, every employee would contribute the same at work, and every bug would be equally important.

However, according to this rule, most situations have an unequal distribution.

For example, out of 5 great ideas, 1 idea maybe truly great and inspiring. This idea will result in a majority of the impact for the group.

This is why you have to realize that the majority of results come from a minority of inputs.

If 20% of bugs contribute to 80% of errors, focus on fixing these bugs first.

If 20% of customers contribute 80% of revenue, you should focus on satisfying these customers.

pareto principle, 80/20 rule

If 20% of workers contribute to 80% of results, try and reward these employees.

 

How to use the Pareto principle?

  • Make decisions that involve allocating time, effort and resources based on the 80/20 variable. By using this variable you can figure out where the imbalance exists.

[ X% of the user tasks used by Y% of the users at Z% of the time. ]

  • Focus attention on the elements related to the top 20% of the tasks used by 90% of users for 80% of the time.

Peak-End Rule

Created by the Nobel Prize-winning Israeli psychologist Daniel Kahneman, the peak-end rule is based on our recollection of events rather than the experience as a whole.

Don’t you remember the good old days of havoc when the final season of Game of Thrones aired and everyone was infuriated with how the show turned out?

It didn’t matter if the show kept everyone’s favorite character alive or not, or if it did justice to character arcs.

What really mattered was how it had ended!

Even the most loyal fans came out with spikes with total disregard for the show as a whole, giving us the finest example to date, of Peak-End rule.

This psychological rule tells us that people are more likely to draw judgment based on the experience they felt at its peak and its end rather than the whole journey or the experience of it.

Definition and graph of peak end rule

The onus here is to create moments of convenience and comfort that creates pleasant and positive experiences.

It may be a small change in an icon, a bright color or a lively illustration at the end of a successful interaction that can establish an everlasting experience with the user.

dulingo is using peak end rule in their entire customer journey

Duolingo in its app uses the cartoon mascot throughout the learning process to encourage the users.

It’s also important to keep in mind the impact of negative peaks, as people remember negative experiences more vividly than positive ones.

Hence, designers and UX advocates must avoid moments of confusion and frustration that can act as a negative peak.

How to use the Peak-End rule?

  • When designing experiences and interfaces, pay close attention to the most intense points of a user journey (the peaks) and the final moments (the end).
  • Use customer journey map/story mapping to design the best climax (peak) into user experiences.
  • Create emotional payoffs in the journey of a user.
  • Identify the moments when your product is most helpful and bank on that to make those moments even better.
  • Use lively illustrations and bright colors at the end of successful processes to transform a pleasant experience into a truly memorable one.

Tesler’s Law

About time simplicity got overrated!

You heard that right, this law right here is not much of a fan of simple things.

You must be scratching your head right now because Tesler’s law straight up contradicts what the rest of the UX laws dwell on.

However, on close inspection, we understand Mr. Larry Tesler, the creator of the law, does present a valid point.

The law is also known as ‘conversion of complexity’ states that in any system, there’s a certain amount of complexity that cannot be reduced.

 

system complaxity curve that shows teslers law

We know that the job of a UX designer is to simplify processes and make them faster, but we have to realize that there are things that cannot be simplified to a more basic idea.

application of teslers law in ecommerce website

As much as we want shopping to beat time, to purchase a product, there are still much data to go through.

Without this data, the process, however, cannot be completed.

How to use Tesler’s Law?

  • The goal should be to reduce functionality without messing with the website design leaving no room for a significant penalty.
  • Try to incorporate custom preferences so that some decisions are easily relatable with the user.
  • Reduce the number of distracting elements by showing the necessary options to complete a task.

Von Restorff Effect

Also known as the ‘isolation effect’, this law anticipates that when multiple similar objects are present, people will likely remember the one that differs from the rest.

illustration showing vonrestoff effect in UX

Coined by German psychologist, Hedwig Von Restorff, her work relates to Gestalt principles.

Sharing similarities with the law of focal point, this law too takes brownie points for being the main reason why all call-to-action buttons look different from the rest of the action buttons on the website.

The law is mostly found in use, in pricing pages of products, where most of the pricing packages are the same other than a few variations in the text.

Companies use this to their advantage by highlighting their preferred pricing in a different color, shape, and size to bring focus onto that item.

product pricing page designed using the ux law vonrestoff effect

Sumo uses the Von Restorff principle in their pricing plan, by highlighting their preferred plan’s name and price.

A darker shade in the pricing box isolates the chosen plan making it the anchor point of the user’s attention.

How to use the Von Restorff effect?

  • Make important info or key actions visually distinctive.
  • Use words like “special offer” and “new” for the product listings to stand out.
  • Seek out opportunities in the interface to learn how you can create positive experiences.
  • Maintain a balance. If you end up making too many different colors and shapes, users can easily get distracted with the noise.

Zeigarnik Effect

Remember the time when an episode of your favorite show ends in a cliffhanger, leaving you in suspense?

Chances are you won’t rest and you will move on to the next episode.

Don’t you think this happens a lot in our daily lives as well?!

Discovered by soviet psychologist Bluma Wulfovna Zeigarnik in the 1920s, Zeigarnik Effect suggests that an incomplete task creates mental stress which keeps it in the front of our memory.

Zeigarnic effect in designing progress bar

This means that people remember interrupted or uncompleted tasks better than completed tasks.

We can apply this concept to UX, where we could talk about new features and offer it for an X amount and tell the user if he wants to proceed, he must do Y action like register, buy, etc.

LinkedIn would be the best visual example of this effect.

linkeding uses zeigarnik effect in completing user profiles

When users see a message like “add skills to showcase your strength”, they are more likely to provide the missing information.

Well played, LinkedIn!
Check out how Instagram puts this effect to great use with its infinite scroll.

Even when you know for sure you have nothing more to see in your feed, Instagram draws its card – ‘infinite scroll’ to tempt you into continuing using the app.

It banks on the need/possibility of seeing a new story.

How to use the Zeigarnik Effect?

  • Gamify user interactions and introduce progress trackers to motivate users to complete the task.
  • Take advantage of the user’s state of mind once they’ve completed a task. Now, that is a perfect moment to focus on a user’s new goals!
  • Break down content into chunks of effective information.
  • Don’t disclose everything you have right at the beginning.
  • Give users a clear idea that they can scroll for more content.

Till the next time….

It’s important to understand that most of the time, your eyes and ears fail to carry what you can perceive.

Keeping this in mind, designers must think about perception and imagination and try to get them linked with the help of UX laws.

So how did you feel learning all of the laws?

Feel free to add your comments and share your side of the story.

Do get in touch with us and let us know how UX laws are making your lives better.

Till next time, your friendly neighborhood UX advocate 😊.

 

BY Deviprasad Ghosh

As WowMakers' content marketer, Deviprasad does more than squabble with commas. With more than 2 years of experience in advertising and inbound marketing, he’s obsessed with creating astounding content that’s straight out of the legends.

Deviprasad Ghosh

As WowMakers' content marketer, Deviprasad does more than squabble with commas. With more than 2 years of experience in advertising and inbound marketing, he’s obsessed with creating astounding content that’s straight out of the legends.

Digital Experience Studio - WowMakers