Laws of UX
It has long been established that good digital design consists of more than just aesthetics. Understanding user needs helps us, designers, craft truly usable digital experiences that are meant to serve users. UX research has become an ever so integral part of the design and development cycle, to ensure that our designs solve real user problems while they also look good. However, we can only learn so much from user research and, in fact, often, the quantitative and qualitative data we need is either seriously limited or incapable of justifying more nuanced design decisions. Arriving at effective design solutions in such instances calls for a closer look at the intersection of user psychology and design.
Enter UX laws. In an effort to make complex psychology and behavioral science accessible to the wider designer community, Jon Yablonski’s Laws of UX streamlines user psychology findings into actionable information relevant to user experience design. These laws (also categorized into heuristics, principles, gestalt, and cognitive biases) help us understand how we, as people, perceive and process the world around us. This knowledge allows us to build (and evaluate) more intuitive and human-centric products and experiences.
Below we will go over 11 of the UX laws in detail and provide some examples of their implementation.
1. The Aesthetic Usability Effect
Users often perceive aesthetically pleasing design as a design that’s more usable.
This law points to the fact that well-designed interfaces will elicit positive responses from users and create an impression that the designs work well. What this means is that users will respond more patiently and tolerantly towards good designs with some usability issues as compared to poorly designed interfaces with flawless usability.
We mentioned earlier that good design has to do with more than just aesthetics. However, maintaining a level of aesthetic appeal to generate an all-around good response from the user audience is by all means still important. Paying attention to this law is especially helpful when we are in the testing stage of a new design. We don’t want poor aesthetics to overpower the user feedback and reduce its value towards usability improvements.
Striving to always create pleasant visual experiences, we make frequent use of this effect, such as with our work on Microtica’s website and product.
2. Law of Common Region
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Paying attention to the area in which we house multiple elements is crucial in suggesting meaningful relationships between those elements. Common regions or shared areas are usually and most easily defined by placing a border around or background behind a group of elements. This is particularly useful when creating interfaces where multiple groups of related functions exist on the same plane. When utilized, the common region adds structure and makes the interface more easily understandable and mappable for the user.
When it comes to website design, the law of common region applies (often without realizing it) to the way we organize and designate our page sections. Clearly defined sections help not only in relating the contained elements but also help the user more easily differentiate between the various groups of information, as they navigate through the web page.
3. Law of Uniform Connectedness
Elements that are visually connected are perceived as more related than elements with no connection.
Similar to the previous law, the Law of Uniform Connectedness helps us create meaningful visual relationships that the user can easily recognize. Unlike (or along with) the relationship defined by the common area mentioned in the previous law, here we make use of the perceptual features of specific elements and sections to emphasize when elements are related.
By creating similarities — in regard to sharpness, roundness, color, and other style parameters — between buttons, forms, and different sets of content, we are able to establish a connection in line with the branded experience. In instances where the elements’ features cannot be made uniform, we can convey those connections via visual guides such as lines, symbols, etc.
The example below employs Uniform Connectedness through uniform styling of all the icons, shapes, and type.
4. Doherty Threshold
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Doherty threshold is mainly concerned with the response time and speed of interaction between the user and the computer. 400ms is the maximum amount of time the computer should normally take to react to a user’s specific action. Longer interactions negatively affect the user experience by making the user feel like the system is not responding (and is holding them back). When users are made to feel such a way, they tend to give up or leave the interaction altogether.
To avoid this, interactions should stay well within the Doherty threshold. For processes that require a longer period of time, utilizing animations and progress bars is a way to visually indicate the performance behind slower system responses. Conversely, purposefully prolonging the response time adds anticipation and perceived value to the outcome (even when the response itself doesn’t require that much time).
One simple application of the Doherty Threshold is when dealing with longer loading times on a content-heavy website. By adding an engaging loading animation to the website, we are able to disguise the loading time and increase the perceived performance. In this example, the loading animation also contributes to the brand experience.
5. Fitt’s Law
The time to acquire a target is a function of the distance to and size of the target.
The dimensionality of the interface elements is just as crucial in improving the speed and in turn quality of interaction between the computer and its users. Users generally feel less frustrated and work faster with larger interaction targets, which in turn improves their impression of the design.
To apply Fitt’s law to your designs make sure you create large and easily accessible buttons and other interactive targets. They should be large enough, have sufficient space between them, and be located in easily acquirable areas of the interface. Fitt’s is especially relevant to the design of user interactions on touch screens and hand-held devices, but it’s still valid for mouse-operated interfaces.
6. Hick’s Law
The time it takes to make a decision increases with the number and complexity of choices.
When people are presented with multiple options they undergo a more complex and more time-consuming decision-making process to arrive at their final or sequential choices. This psychological phenomenon translates entirely to the way users interact with digital products, too. To avoid extensive decision-making, minimize the number of choices offered at once. When the task allows, break it down into smaller steps to decrease the cognitive load and decision-making process.
This also pertains to the onboarding process where present: progressive onboarding with smaller chunks of contextual information at every step decreases cognitive load and proves more effective. Be careful, however, not to oversimplify complex functionalities to the point of abstraction, which can also prolongate the decision-making process or make the user leave.
One way we have addressed Hick’s laws is in the content-heavy website shown below, where the perceived complexity cannot be resolved or simplified. To make the decision-making and navigation less overwhelming — especially for new visitors — we’ve added an onboarding process, accessible through the top bar, that gives new users a step-by-step introduction to the product offering.
7. Miller’s Law
The average person can only keep 7 (plus or minus 2) items in their working memory.
Miller’s observation of the capacity of our memory to process information, led him, albeit rhetorically, to suggest that 7 items is the optimal amount we are capable of actively managing in our short-term memory. Making the number the sole takeaway has led to many wrong interpretations and applications of the law. In the design field as a result, seven has been argued to be the limit of interface elements in a given area or component, for the design to be usable.
However, his theory was less centered on the number seven and more so on the concept of chunking (grouping) as it pertains to the effectiveness of our information intake. He found that people have similar success in managing 7 items as compared to 7 chunks of items in their short memory. This leads us to a more appropriate takeaway of Miller’s Law whereby chunking larger amounts of information, we provide a perceptual scaffolding that enables users to retain information more effectively.
There are many different examples of this law in action, but one of the most frequent considerations is when organizing text-heavy page sections. In the example below we break the text wall into various information chunks for a more readable, memorable, and visually interesting experience.
8. Prägnanz Law
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.
Prägnanz Law illuminates the intricacies of human perception. By defining the brain’s inclination to break down complex visual information into simple shapes, it informs us how to create user-friendly interfaces. Fundamentally, to prevent cognitive overload, we should always opt for simple shapes such as squares and rectangles for functional elements, components, and layouts.
More broadly, given that our brains are wired to prevent information overload, it is essential to consider simplicity as integral to a quality user experience. Even when the user interface aims to communicate a more complex aesthetic, thinking of Prägnanz Law helps us ensure that we balance such an approach with the simplicity of the visual user experience.
9. Tesler’s Law
For any system there is a certain amount of complexity which cannot be reduced.
As ambassadors of simplicity — perhaps unintentional Prägnanz Law advocates in a sense — we tend to simplify user interfaces. With many UI examples on popular portfolio-sharing websites stemming from mere graphic exploration, simplicity has become synonymous with good design. This false equivalence and a UI trend taken at face value leads to abstractions of UI design that challenge the clarity and usability of the product.
We can agree that quality user experiences use simplicity to decrease friction and obstruction along the user’s journey to achieving their goals. However, we must balance simplicity with the minimum interface complexity necessary to achieve said goal. Meaning, that the user requires a minimum level of cues and information to achieve their goal successfully.
This is most exemplified in the way we approach forms and similar interactive components. There is a minimum of information that needs to be present in order for the user to interact adequately with the form, such as input fields, input forms, input field boundary. Pushing to simplify the form further will decrease the clarity of the form.
10. 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.
Being the dominant mediator for more than 80% of all our sensory intake, our visual system and its innate processing abilities are largely responsible for how we perceive and process the world around us. This is the result of a long evolutionary journey where processing incredibly detailed objects and patterns in fractions of a second has been vital to our species’ survival. At the basis of our heightened visual capabilities, lies our sensitivity to contrast.
Von Restorff Effect expands on the sensitivity to contrast in saying that contrasting objects not only draw our attention first but that they are often the easiest to remember. The effect finds application in interface design when we want to emphasize important information or provide cues to more naturally guide the user’s attention and navigation of the interface.
There are many ways that we can make use of contrast in creating the Von Restorff Effect. By using color, shape, size, or by contrasting an established pattern of elements, we can guide the user to the most pertinent information within a specific component or at the page level. One frequent example of this effect in action is in the way we design pricing tables. By establishing color and size differences between similar card elements, we make one pricing option more memorable to prospective customers.
11. 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.
While the law might seem obvious, designers often engage in creative work where they try to reinvent the wheel for the sake of novelty. Of course, we as designers are tasked with providing clients and users with new and inventive solutions, but it is important to understand that there are inherent user expectations and mental models to which we should cater. Even if the solutions we propose are visually appealing and appropriate, a significant discord between them and the established mental models will negatively affect the user experience.
A safer way to make significant changes to the mental model is by introducing them gradually and across multiple updates. That way users are given the time to gradually update their mental models for a continued and smooth user experience.
In the example below we show a product page from an e-commerce website we’ve been working on. While there are certain stylistic choices that make the interface feel more branded, the underlying structure is essentially the same as on any other e-commerce website.
There is so much more to cover in both breadth and depth on the topic of UX laws. Behavioral and cognitive psychology have provided an expansive insight into user behavior, which is proving incredibly valuable in creating quality user experiences. Growing literature such as Laws of UX is making this knowledge available and more actionable for design practitioners. So it becomes our responsibility as designers to make use of the resources available in understanding how our users think and to provide design solutions that consider and cater to their behavior.
We, designers, are by no means expected to become behavioral scientists, but by using such resources we can develop an intimate knowledge of psychological principles and their applications. As a result we can make deeper user considerations an integral part of our design process, leading to sharper, more nuanced and justified design decisions.
