In this post, we’ll break down the 14 most important UX laws to master as a web designer.
When you sit down to design a website, who are you doing it for? While the company or person paying you ultimately sets the goals of the project, it’s the end users you’re most concerned with.
This is why user feedback and testing are a crucial part of designing the user experience (UX).
But you don’t necessarily need to host focus groups, run A/B tests, or send out surveys in order to design intuitive and enjoyable websites. There are certain facts we know about our users — and these facts are what have led to the laws of UX.
What Are the Laws of UX?
The laws of UX are more than a collection of best practices for web design. Each UX law is based on fundamental human nature.
If you understand people’s innate responses to certain visuals, you can create more visually pleasing and intuitive interfaces. And that’s what these UX laws and principles are all about.
Here’s a summary (with examples) of the laws you need to know:
- Fitt’s Law
- Hick’s Law
- Miller’s Law
- Jakob’s Law
- Aesthetic-Usability Effect
- Occam’s Razor
- Pareto Principle
- Postel’s Law
- Goal-Gradient Effect
- Doherty Threshold
- Serial Position Effect
- Peak-End Rule
- Von Restorff Effect
- Law of Prägnanz
Fitt’s Law
This law says that the time it takes to reach a touch target (like buttons, icons, cards, etc.) and complete an action depends on two variables.
- The first is distance. The greater the distance between the user and the target, the longer it takes to complete the action. So when designing touch targets, keep them within a reasonable distance from where your users’ focus (and cursor) is to speed up and increase interaction.
- The second variable is size. The greater the size of the target, the easier it is to complete the action without error. So use larger sized components to attract attention, improve accuracy, and reduce friction.
Example: The7’s Online Shop Main Demo demonstrates this law well.
The green “Shop new collection” button appears within the main eyeline of the user. Also because of its prominent green color and size, it’s easy to find and users can confidently click on it without error.
Hick’s Law
This law says that the time it takes users to make a decision increases alongside the quantity and complexity of options.
If you’ve ever heard of analysis paralysis — when users are so overwhelmed by their options that they struggle to make a choice — then you’ve seen Hick’s Law in action (or inaction).
Information overload doesn’t just impact the time it takes to reach a decision. It can also lead users to abandon all choices or deeply regret the choice they made. This is why the KISS (Keep It Simple, Silly) principle is crucial in web design.
Example: This principle is especially relevant in ecommerce. So when you choose an ecommerce theme, look for one like WoodMart.
In this Shop page demo, you can see how users have a wide variety of filtering and sorting tools available. While designers can try to limit the options presented to users, it’s equally as important to let them control how much input they’re receiving by limiting the results.
Miller’s Law
This law says that the average person can only keep about seven bits of information in their short-term memory.
This UX law goes hand-in-hand with Hick’s Law. So if you’re wondering what your users’ threshold is when it comes to decision-making, keep the number seven (plus or minus two) in mind.
Example: Websites that produce a lot of content have to be careful about how much information they share with users all at once. Adding boundaries to key sections as Newspaper’s town Talk demo does can help keep users focused on one area at a time.
Beyond that, including no more than seven items in each section will allow your users to remember most, if not all, of what they’ve seen.
Jakob’s Law
This law says that users spend a lot of time online and so they prefer familiarity over novelty. Specifically, they want your website to act the way they expect it to based on other websites.
While it’s important for branding to be unique from website to website, it’s a big risk to deviate when it comes to core features and functionality. Even switching to a non-conventional layout (like in the navigation) could create usability issues for your users.
This law isn’t meant to discourage creativity or originality. But it is meant to curb any design choices that could make your site too difficult to use.
Example: AI ANN’s demo styles, custom cursors, and animations might be boundary-pushing.
That said, the page layouts are predictable and feel comfortable to scroll through. And the key elements on the page — like the navigation and search bar — are designed similarly to other websites.
Aesthetic-Usability Effect
This law says that there is a correlation between how attractive an interface is and its perceived ease of use. In other words, the first impression matters a good deal to your users.
If you’re looking to encourage more users to give your website a chance, work on improving its visual appeal.
This doesn’t mean the content of your site can be of poor quality or the features difficult to use so long as it looks amazing. This principle just gives us a better idea of what draws someone into a website, so we can keep our bounce rates low.
Example: Bridge is one of those multipurpose WordPress themes with a multitude of demos built for business.
Like this Gym demo, each one has a uniquely attractive design made specifically for its target business. Visitors will find it hard not to scroll down and learn more.
Occam’s Razor
This law says that the simplest approach is usually the best.
Minimum viable product (MVP) design is a good example of this principle. Rather than start your design with the most complex and robust version of a website, you include only what’s essential.
Once you’ve validated the effectiveness of what you have, you can build on. But it should never be based on assumptions or unverified hypotheses. Real user feedback and data should inform everything you do.
Example: One of the reasons why I like working with themes like BeTheme is because they come with robust page builders. While you might have hundreds of demos to start from, you can always build an MVP using pre-built wireframes.
This way, your focus is on the basics instead of on all the extra features and special effects you could be messing around with.
Pareto Principle
This law says that most systems are inherently lopsided. Specifically, that 80% of the returns you get are from 20% of what you invested. When it comes to web design, there are different ways to interpret this.
For starters, you’ll likely get 80% of your engagement and conversions from a smaller portion of the site’s content and features. And if that’s the case, it makes more sense to spend time refining those aspects of the interface that will get you better engagement and conversions.
Another way to look at it is that 80% of your site’s profits come from 20% of its users. Rather than spend time building features that might appeal to a new segment of users, work on improving the experience for loyal users who already want to give you their money.
Example: The hero section is arguably the most important part of your home page, though there are likely other sections you want to ensure visitors see. For instance, this Residence Real Estate theme demo showcases logos from high-profile projects the company worked on.
The full-width image and gray logos might not be enough to get visitors to notice. The bright-orange icons in the graphic are though. And once visitors realize they’re interactive, they’ll definitely stop to check out the rest of this section.
Postel’s Law
This law says that we should limit how much we ask of our users, but be flexible about what we accept from them.
A checkout form is a good example. For starters, we should only ask for information that’s absolutely needed. When possible, we can create less work for our users, too. For instance, a checkbox can be added to automatically set the billing address as the mailing address.
In terms of flexibility, we can configure input fields to accept a range of responses. Or we can enable smart features like in a search bar that detects what the user might have been looking for even if they didn’t express it exactly.
Example: You can use Postel’s law to improve any website that asks for users to input information. eCommerce, in particular, would greatly benefit from this. Take XStore’s crypto marketplace demo, for example.
The search bar at the top helps users find related NFT products even if they don’t know the name of them. Typing in something like “art” yields relevant results.
This isn’t just as a result of a “smart” search bar plugin though. As a designer, you need to do a lot of work on the backend to ensure that your content’s metadata, categories, and tags are fully configured to make this process go smoothly for your users.
Goal-Gradient Effect
This law says that as a user gets closer to completing a goal, they’ll work faster to complete it.
This is an argument for using visual indicators to encourage users to finish what they started. For instance:
- A progress bar placed atop a checkout form
- A “You’re $12 away from free shipping!” notice above the shopping cart
- A progress indicator that shows how close a user is to getting their next reward
When people are able to see how little work remains and what sort of reward is on the horizon, they’ll push through to finish it.
Example: This UX law might not be relevant for every website. However, if you’re selling anything, offering a rewards program, or gamifying content, then this one will come in handy. You can see how the Blonwe grocery store demo example makes use of it.
Just above the cart is a red block that lets shoppers know how much more they need to spend in order to get free shipping. While the color is useful for users without visual impairments to notice, the general design — the shaded block and dark progress indicator — ensures that everyone will notice it.
Doherty Threshold
This law says that computers (i.e. websites) should respond to user interaction within 400 milliseconds.
The initial research on this from the ‘80s found that systems that respond this quickly become “addicting”. While a lot has changed since then, user expectations for fast-loading web pages has not.
Websites that load too slowly or processes that take too long to complete (like a form submission that doesn’t appear to be working) lose visitors after just a few seconds. So creating responsive interfaces and functionality is critical.
Example: There are various things you can do to make your web pages load faster. One option is to do as this Uncode demo does and create a typography hero section.
Without images to load first thing, there’s no need for spinning loaders to keep visitors occupied. The site loads almost instantly.
Serial Position Effect
This law says that the most memorable items are the very first and last ones that appear in a series or group.
In web design, we can use this principle to determine how we order components like:
- Navigation links
- Product recommendations
- Pricing plans
It also comes in handy when deciding how to structure and order content on a page, especially on the home page. If we know that users focus on and recall the first and last items the most, that’s where the most important information should go.
Example: Everyone knows that the most important information shows up in the hero section. But for people who spend enough time online, they also know that the bottom of the page contains good stuff too. Take this Nooni shop demo, for instance.
Just above the footer is a banner section announcing a flash sale for 80% off.
Peak-End Rule
This law says that the most memorable parts of an experience are the peak moments as well as the final moments.
You can apply this principle when designing the most important parts of a page. By making the design stand out, users will remember it more strongly.
It will also be useful when designing the final moments of a process. For instance, instead of a user hitting the “Submit” button at the end of a form and seeing a plain “Thank you for your submission” message, you could add a surprising animation or direct them to a fun Thank You page.
Example: You don’t want there to be too many surprises on your website because then they won’t have as much impact. A good example of how to use the peak-end rule is this Alukas collection demo.
The shop’s homepage is uniformly designed with parallax images seamlessly sliding into one another. But this pop-up presents a nice surprise along the way. For visitors who aren’t ready for it, that’s okay. Because if or when they get to the bottom of the page, they’ll find the same subscription form waiting for them.
Von Restorff Effect
Also known as the Isolation Effect, this law says that people remember an isolated or distinctive item better than other items in a group or list that appear otherwise similar.
We see this kind of thing with pricing tables. The best value or most popular plan is usually shaded in a different color, is bigger than the other columns, or has an eye-catching ribbon on it.
When designing your distinctive element, be careful about using color or motion as the sole element to make it stand out as it could cause accessibility issues for some users.
Example: Outgrid’s chatbot demo is a great example of how to do this with pricing tables.
Users’ eyes will be immediately drawn to the Pro plan which has a blue rounded boundary and a blue Recommended label/ribbon at the top.
Law of Prägnanz
This law says that the human eye and mind prefer simplicity. So even when confronted with complexity or chaos, the mind will find ways to simplify what it sees.
The Gestalt principles explain the various ways in which our brains do this. Each of which deals with the grouping of items and the mind’s ability to identify patterns from them.
These principles deal with concepts like:
- Common Fate: Elements moving in the same direction are more related to one another than elements moving in other directions.
- Common Region: Elements contained within a boundary (e.g. a box, a colored background, etc.) are related.
- Connectedness: Elements that touch or are connected in some way must be related in purpose.
- Continuity: Even if a line or arrow is not present, the eye will naturally follow objects that fall along the same pathway.
- Closure: Even if an image or a line is incomplete, the mind will make the connection and create an enclosure on its own.
- Proximity: Elements that are close together (even when they’re not enclosed together) are related.
- Similarity: Elements that are designed similarly in terms of color, shape, or size must serve the same purpose.
The better we understand how the human mind inherently makes sense of seeming chaos, the more effectively we can design interfaces for them.
Example: The Gestalt principles inform so much of what we do in design without thinking about it. For the purposes of this example, let’s focus on these testimonial blocks that appear on the EduBlink yoga instructor demo site.
The solid white background that contains each testimonial tells us as viewers that the content within all goes together and not to get distracted by content outside it which is unrelated. This is the principle of Common Region.
Conclusion
The laws of UX are design best practices based on human psychology.
They take long-established data about the way humans perceive and react to items, information, and interfaces. And they give us a structure to follow when designing interfaces and experiences for modern users.
The UX laws should be the foundation of every web designer’s practice. Once you master these laws and best practices, you’ll find it easier to create attractive interfaces and high-quality experiences for your users.
