UX laws we adopt on the regular
UX laws every UX designer should keep in mind
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
At Yext Consulting, we design products used by many people. To better user experience is our number one goal. Luckily, there are many UX laws we can refer to that can help us get there. These laws reveal underlying principles about human visual perception and give insight into how we can use this information to design better interfaces. Here is our take on a few UX laws.
Fitts’s Law:
Fitts’s law states that “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”. To explain the law in a more UI specific way: the further two elements are from each other and the smaller the elements are, the longer it takes for users to move from one element to the other. One way to shorten the time is to bring design elements closer together. If you work with a grid system, this can be done by keeping the grid gutters narrow. Another good example is to set a minimum height and width of an element so it is large enough to be clicked or tapped. WCAG AAA requires a target size for pointer inputs to be at least 44px by 44px, which is a standard the Yext Consulting design team follows.
Gestalt Law of Grouping:
There are six principles under the Gestalt law of grouping. All of them are widely used in the world of UX/UI design. We will deep dive into 3 of them in this article:
Law of Proximity:
The first law is the Law of Proximity. It states that “elements that are close together tend to be perceived as a unified group”. In other words, even if two elements don’t resemble visually, they will still be seen as related if they are right next to each other. A good example is when designing web pages for businesses, we put store front photos alongside other local store information, such as phone number, address and hours of operations. That way, it is clear the store front photo is for this particular local store.
Similarity:
The Law of Similarity says human eyes deem things with similar appearance to be in a unified group. This law is very commonly used in our design system. In our web page design, we give call-to-action buttons a consistent styling across the page so the page branding is coherent. All link styles are consistent in our design for the same reason.
Figure/Ground:
This law points out that human eyes can quickly spot an object from its background. A good user case is adding a shadow to a component’s hover or active state to call attention to it. On a map, we also try to keep the map pin design simple and vibrant so they won’t get lost in a complex map background.
Jacob’s Law:
This law states that users expect your design to look and work like other sites they’ve used before. This includes matching our design to our client’s corporate brand and sites as well as designs of popular apps and websites.
Miller Law: The Magical Number Seven, Plus or Minus Two
Miller has many laws. This is one of his most adopted one. Human brain has a capacity of how much information it can process at a time. This law states that 5 to 9 are the numbers of objects brains can comfortably remember and process. In our design interface, whenever we have to provide search results to our users, we only show up to 10 results. This way our users are not overwhelmed by the information overload.
