Learning Hub

Top 10 Laws of UI / UX Design, with Simple Graphics Examples

Designers can use these laws when building user interfaces

Advertisement

The 10 laws of UX design based on several studies on human behavior and psychology by respectful scientists. These include:

  • Law of Proximity – Gestalt Psychology⁣
  • Von Restorff Effect – Hedwig von Restorff
  • Tesler’s Law – Larry Tesler
  • Law of Common Region – Gestalt Psychology⁣
  • Serial Position Effect – Herman Ebbinghaus⁣
  • Zeigarnik Effect – Bluma Wulfovna Zeigarnik⁣
  • Fitt’s Law – Paul Fitts⁣
  • Hick’s Law – William Edmund Hick and Ray Hyman⁣
  • Postel’s Law – Jon Postel
  • Peak-End Rule – Kahneman

These Laws demonstrate us how visual information is perceived and processed. If you understand how data is analyzed by our brain, you have a clear benefit in generating a good user experience. Check the legislation below and maintain them in mind when designing an interface for the next moment.

1. Law of Proximity

Overview

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

The law of proximity is useful by allowing users to group different clusters of content at a glance.

2. Von Restorff Effect

Overview

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.

Make important information or key actions visually distinctive.

3. Tesler’s Law

Overview

Tesler’s Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.

Advertisement

4. Law of Common Region

Overview

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

Adding borders (creating common regions) around an element or group of elements is an easy way to create separation from surrounding elements.

5. Serial Position Effect

Overview

Users have a propensity to best remember the first and last items in a series.

  1. Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory.
  2. Positioning key actions on the far left and right within elements such as navigation can increase memoriziation.

6. Zeigarnik Effect

Overview

People remember uncompleted or interrupted tasks better than completed tasks.

Thus increase the likely hood it will be completed.

7. Fitt’s Law

Overview

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

  1. Make elements you wish to be easily selectable large and position them close to users.
  2. This law especially applies to buttons, which the purpose of these elements is to be easy to find and select.

8. Hick’s Law

Overview

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

  1. More choices results in longer to think about these choices and make a decision.
  2. Simplify choices for the user by breaking down complex tasks into smaller steps.
  3. Avoid overwhelming users by highlighting recommended options.

9. Postel’s Law

Be liberal in what you accept, and conservative in what you send.

graphic

Be empathetic, flexible, and tolerant to any number of actions the user could possibly take. This means accepting variable input from users, translating input to meet the requirements, defining boundaries for input, and providing clear feedback to the user.

10. Peak-End Rule

Overview

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.

Have a look at this comics

  1. Pay close attention to the most intense points and the final moments (the “end”) of the user journey.
  2. Identify the moments when your product is most helpful, valuable, or entertaining and design to make those moments even better.
  3. Remember that people recall negative experiences more vividly than positive ones.

Tags
Show More

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close