UX Basics: 7 Laws to UX Design

When you’re first learning how to improve your website’s user experience, commonly referred to as UX, there’s a massive amount of information to digest. This is only amplified when you scour the internet for help. 

By far the biggest problem for someone just starting out is that a large portion of this information is too complicated to easily digest, especially when you’re looking for simple, actionable steps to improve your website’s UX. 

To streamline this learning process, this post will translate the often complicated and jargony language of UX into simple, actionable ideas to follow — so anyone can understand its basic tenants and ultimately create a better experience for their site’s visitors. 

This blog post was inspired by the webinar Simple Fixes to Huge UX Problems, and the list below contains the Seven Laws to UX design, as presented by Trevor Calabro, Senior UX Strategist at Aten Design Group. 

What Is User Experience And Why Does It Matter?

Before we dive into the Seven Laws to UX Design, we should first define what UX is. In its most basic terms, the user experience or UX is defined as how a person interacts with all touchpoints of a company, including its website. When speaking about a company's website specifically, things like how easy it is to use and how efficiently a user can navigate it to find what they're looking for would be within the realm of UX. 

From a navigation perspective, helping the user easily find what they’re looking for is a vital component of creating great UX — whether that’s allowing them to quickly locate a checkout button while shopping online or easily locate vital information about a product or service. 

To help break this all down in layperson’s speak, we’ll start at the very basics of UX design. Dive into the list below for a rundown of the Seven Laws to UX Design, optimized for those just starting out in the area of UX. 

Law No.1 – Fitts' Law

The principle of Fitts' Law is to put stuff as close to the user’s cursor as possible and make the most important things bigger. Essentially, Paul Fitts wrote a paper in 1954 stating that people find things more easily when they are A.) closer to them and B.) larger. 

Common sense, right? Yet, you have no doubt experienced websites where the information you want is hard to find, located far down the page, and the call to action (CTA) is tiny, at best. 

Make it easy for the user to find important things by making them bigger and not making them move around too much, to get to what they’re looking for. When you get a little too invested in your site’s content, you may believe that visitors will naturally want to read a wall of text or hear your background story, especially before getting to the site’s vital information. 

As a website consumer, you know this is demonstrably false. When you first arrive at a website, you want to do as little work as possible, and you will go find another site if the first one is far too time consuming and littered with too much miscellaneous information and fluff, or you’re burdened with endlessly scrolling to find vital information.

Law No.2 – Law of Magic Pixels

This law has a few different names, meaning if you Google Search the basic laws of UX, be aware it could very well be referred to as something else. 

Essentially, this law states that users tend to look at stuff in the corners and have an easier time reaching for them. Based on this, you might be thinking that Fitts' Law and the Law of Magic Pixels are completely contradictory to one another. However, these laws can be used with one another very effectively and often in a complementary way. 

An example is if you’re visiting a non-profit website. You might see a big button that says Donate in the top right corner, which is the Law of Magic Pixels. Another example can be seen on retail sites like Amazon, which place the shopping cart in the top right corner, and a home button in the top left. 

On these same websites in the primary navigation bar, you’ll notice the order of things goes from left to right in a hierarchy of importance, which hearkens back to Fitts' Law and the left-to-right reading in the English language. 

Law No.3 – Hick’s Law

Hick’s Law states that it’s best to break down things into categories and sequential steps when it gets complicated. This is very much common sense. When you go to a new grocery store, you can usually find an orange by first locating the produce department. This common store layout means users can find what they are looking for, rather than asking at the front door where the navel oranges are located. 

Think about this in the context of your primary navigation located at the top of your website. If the information seems to be complicated, then break it down into categories or steps to make it easier to digest. Keep your primary navigation to a few selections, and make it easy for the subcategories to be found beneath them. 

For instance, if you think about shopping at a home improvement store’s website, you will see this in action. Home Decor/Furniture,  Kitchen/Bathroom, DIY Projects,  and Installation Services could be the larger categories, and the more complicated subcategories (like Loveseats, Pantries, Gardening, Fence Installation, etc.) are hidden in their respective drop-down menus, under the larger category. No user wants to see the full list of products or services right on the front page, as this would make it significantly harder for customers to find what they are looking for.

Law No.4 – Law of Progressive Disclosure

Hick’s Law and the Law of Progressive Disclosure work very well together. The Law of Progressive Disclosure tells UX designers to show users what they want when they want it. Think of it as a funnel. If you can give the user what they want with a single click, then that’s perfect. However, if they need more specific information, the Law of Progressive Disclosure kicks in to be more specific and narrows down the information to give them exactly what they are looking for. 

The About page is a good example, when trying to think about this law. If someone wants to learn more about your company, they can simply click the About tab, often located in the navigation. When they do, a drop-down menu will appear to give them options for all the different aspects they want to learn about your company. This is vastly preferred to one long page that has this information scattered throughout. 

Law No.5 – Miller’s Law (7 +/- 2)

Miller's Law essentially states that the maximum number of items a person can hold in their working memory is between five and nine (seven plus/minus two). 

While the "magical number seven," as famously attributed to Miller, is useful to keep in mind, it doesn't necessarily mean that lists should always be seven items or less. It means you shouldn’t make users remember too much stuff and force them to think too hard as they interact with your website. Sometimes, you need to have long lists, like selecting what state you’re from. When this occurs, it makes most sense to list them all but put them in a logical manner that makes it easy for a user to find, often based on alphabetical or numerical order. 

Another way to look at Miller’s Law is the formatting you use in certain situations. For example, if you require a customer to enter a social security number, you want to give them a clear indication of the format needed by putting blanks and dashes in grayed-out boxes, so users aren't bewildered trying to guess the exact format you're asking for. 

Law No.6 – Law of Affordances & Signifiers

The Law of Affordances and Signifiers talks about making stuff look like what it does. Clickable buttons should be obvious and there are various ways to do it. One of them is to round the corners of a button with a drop shadow and make it a different color than the rest of your text, so it especially stands out. 

The signifiers of this law deal with the icon itself, like using the word up with an arrow pointing upwards — so the user knows exactly what is going to happen when they click the button. Explicit and relevant labeling is absolutely crucial here, and you should use labels on buttons, rather than solely relying on icons to depict what will happen once the user clicks. 

Law No.7 – Jakob’s Law

Jakob’s Law states you should never reinvent the wheel. Generally, users are collectively browsing other websites more than yours. Take examples from other sites and mimic what works by including those details on your website. 

Don’t pick just one site to draw from but several. As you consume websites in your personal life, think about what is working well and what is not. You will probably notice what frustrates you first and foremost! Take note of the best sites you encounter from a UX standpoint, especially as they relate to these seven UX laws. 

Bonus Concept to Improve Your User Experience

One more idea you can think about when learning the UX basics is the concept of an F-shaped reading pattern. Users will often read a website in an F-shaped pattern with two horizontal stripes followed by a vertical stripe. 

The truth is most users won’t read the content on your website from top to bottom. They are going to scan the website in the most efficient way possible to find the information they are looking for. When you have the information displayed where their eyes are looking, you’ll have a better chance of grabbing their attention.

There are lots of options for measuring (or heat-mapping) your sites, to find out what is drawing visitor attention and why, so it is worth exploring some of those tools as well.

Websites have obviously been designed before, so you have plenty of examples to gain inspiration for how to make yours successful, from a UX standpoint. The good news is you don’t have to have a degree in UX design to have an idea of when a website isn’t user-friendly.

These UX basics can help you understand exactly what customers are looking for when they visit your website, so you can ultimately improve the user experience and drive the results you’re seeking with your website. By keeping these seven laws in mind, the UX basics can be simple to understand, and you can make your website significantly more effective and user-friendly at the same time.

For more detailed information, check out Trevor Calabro's presentation on these laws in the webinar Simple Fixes to Huge UX Problems.