10 laws of UX every designer should know
Follow these rules or the UX police will come for you.
Introduction
Let’s get this out of the way: Jon Yablonsky’s Laws of UX aren’t laws in any legal sense. No-one’s actually going to arrest you if you don’t follow them — the UX police don’t exist (although I’ve used some websites that make me feel like they should).
The Laws of UX aren’t even all called laws by Yablonsky. Some are ‘laws’, while others are ‘effects’, and there’s even a ‘razor’.
So if they’re not laws, what are they then?
In a nutshell:
The Laws of UX are hand-picked psychological insights based on behavioural science that can help us design better digital products.
The big idea is that by designing based on how people actually think and behave (as opposed to how we might want them to) we can improve the user experience of things like websites and mobile apps.
The Laws of UX are a goldmine for designers: they’re an attractively packaged resource you can dip into and start using straightaway. Here’s my pick of the most relevant UX laws, including explanations of why they’re helpful and suggestions of how to use them…
1. Jakob’s Law
What it means
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.
Why it’s helpful
It’s tempting to think ‘we’re going to be innovative’ with every new design for a digital product. But unless there’s a strong reason to go against the grain, the best approach is to design based on established conventions. By presenting a user interface (UI) people are familiar with, the usability will feel natural, intuitive and users can do what they need to quickly and easily.
How can you use it?
- Use well established design patterns — put logos, menus and buttons where people would expect to find them.
- Make use of universally recognised icons, like a magnifying glass for ‘search’. Don’t make people think about what your visual cues mean — use things they already understand.
- Don’t break with conventions unless it’s justified, e.g. Oatly’s website scrolls horizontally rather than vertically, but that’s because their whole brand is about being quirky, surprising and being a company that thinks differently.
2. Hick’s Law
What it means
The time it takes to make a decision increases with the number and complexity of choices.
Why it’s helpful
When it comes to UX, more is not always better. Throwing more features and functionality at the solution doesn’t always make a website or app easier or more enjoyable to use. More choice means more to process, and more decisions to make. In fact, research shows that people tend to feel better about their decisions when presented with fewer options (a phenomenon known as the Choice Paradox).
How can you use it?
- First off, keep it simple: aim for a clean, minimalist aesthetic. Avoid clutter, and make use of negative space. Basically, ensure the stuff around the core content doesn’t distract or place a heavy cognitive load on users.
- Next, only present choices that add value to the user experience, e.g. if someone wants to buy a t-shirt online, three filters for size, colour and style might be helpful, but 30 filters is likely to be overwhelming.
- Reduce choices by auto-completing any information the user needs to provide if your system already ‘knows’ this about them. It’s not creepy, it’s actually incredibly helpful!
- Break longer, complex tasks into shorter, digestible chunks, e.g. turn a form with 20 fields into multiple steps with a few (or one) question in each.
3. Goal-Gradient Effect
What it means
The tendency to approach a goal increases with proximity to the goal.
Why it’s helpful
People are lazy. Starting things is hard. Making progress when you’re not invested and don’t know how far you’ve got left to go is tough. By giving people a head start and showing them how much progress they’re making, you can keep people engaged, avoid them abandoning their task and help more people complete what they’re doing.
How can you use it?
- Make use of progress visualisations — either as traditional bars, circular rings or static metrics showing percentage complete. Alternatively, you can structure progress into steps towards a goal, e.g. stages of an online checkout process.
- To further tap into user psychology, you could display the progress bar so the first steps take up disproportionately more of the overall bar — making the user feel closer to their goal.
- If your system already ‘knows’ some about users, auto-fill information fields to help people feel they’re making quicker progress towards the end of the process.
4. Serial-Position Effect
What it means
Users have a propensity to best remember the first and last items in a series.
Why it’s helpful
Humans don’t have perfect memories. On a sub-conscious level, our mind decides that the first and last things we see or hear in a list are most important. If that’s the way our brains work, designers should design to account for that cognitive behaviour!
How can you use it?
- In a bullet point list, put the most important details at the top and bottom.
- In a list of features and benefits, place the most impactful and persuasive items first and last.
- Logically, this means putting the least important details in the middle of the list. Users may skip over these initially and come back to them later.
5. Law of Uniform Correctness
What it means
Elements that are visually connected are perceived as more related than elements with no connection.
Why it’s helpful
We can learn a lot from what good UI design looks like by learning from Gestalt psychology. This is all about how our brains make sense of information by looking for recognisable patterns and grouping things together into something that’s meaningful. With the Law of Uniform Correctness, it’s all about grouping things together because we see them as connected.
How can you use it?
- You can literally connect UI elements in your design to signify that they are related, e.g. for a checkout process, visually link together the tabs or labels for each step of the process (e.g from creating an account to making a payment).
- You can also show UI elements are related using colour, e.g. if every ‘Continue’ or ‘Submit’ button is green and every ‘Cancel’ or ‘Go back’ button is red, users quickly see those colours are connected and relating to certain actions (green = go forward, red = back out).
- Finally, you can use shapes and other styling to suggest that objects are connected, e.g. tabs and accordions that are blue by default, but turn white when selected. Users can then make the connection that blue means closed and white means open.
6. Law of Common Region
What it means
Elements tend to be perceived in groups if they’re sharing an area with a clearly defined boundary.
Why it’s helpful
It’s another nugget from the Gestalt school of thought. The Law of Common Region is a daunting name for quite a simple idea: if things are grouped within a border, we see them as related in a meaningful way.
How can you use it?
- Use borders on a web page or app screen to group related information, e.g. on a form all the questions about contact details (phone, email, address) might be grouped together within one boundary, whereas questions about protected characteristics (age, gender, disabilities, etc) might be grouped together within another.
- Common regions aren’t just about putting content in simple borders — you can design components with different background colours that can be stacked like blocks on a web page to create a layout of common regions, e.g. one for a video, one for features and benefits, one for a newsletter signup, etc.
- This law is very similar to the Law of Proximity, which states even without a boundary, objects will be perceived as being grouped together if they’re simply near each other. So sometimes space is your friend, not borders.
7. Von Restorff Effect
What it means
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Why it’s helpful
People are busy. We don’t read everything on every screen, we skim it. Humans are scanners, looking for the most important details and the cues for what to do next. We should design for how people actually interact with digital products — rather than how we want them to behave — by making sure the next step is always visually obvious.
How can you use it?
- Make your most important link on a webpage or app screen a button — users will remember that as the call-to-action as they scan the content.
- If you’re presenting a comparison of products/services by features and benefits, highlight the one that’s highest rated, most popular or best value. Use UI design techniques to highlight this option, helping people remember it and nudging them to select it.
- Don’t rely on colour alone to make something stand out — ensure your design is accessible by having multiple ways to tell that something is distinct from surrounding content.
8. Postel’s Law
What it means
Be liberal in what you accept, and conservative in what you send.
Why it’s helpful
When we’re designing how systems will integrate with other systems, we need to be specific, precise and cautious, i.e. keep it concise and conservative when sending data. But users shouldn’t have to think like that, as they’re not a system interfacing with another system — they’re a user! So be generous — accept any plausibly valid form of input they could give you.
How can you use it?
- Design form fields to accept the way people write things like dates, times and phone numbers, e.g. allow people to use dots, spaces or slashes to format the day, month and year in their date of birth.
- Don’t force users to use your rigid formatting and hit them with alarming validation errors. This can be visually overwhelming, frustrating and stressful.
- Anticipate in advance what users might want to send, and test as you design. Make use of the feedback loop to improve as you go. Don’t wait for complaints to figure out your form or transaction is hard to use.
9. Occam’s Razor
What it means
Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
Why it’s helpful
Occam’s Razor is a philosophical concept adopted in the Laws of UX for designers. In philosophy, razors are arguments that ‘shave’ off unnecessary debates. In the UX context, Occam’s Razor means the simplest design is likely to be the best approach; by contrast, coming up with a complex initial solution based on assumptions about users and technology is likely to be a much worse idea.
How can you use it?
- When coming up with design ideas to solve problems, focus on the simplest and quickest way you could solve the problem.
- Start prototyping and testing your ideas. If you need to add complexity, that will become apparent through the feedback loop.
- Challenge product solutions that feel over-engineered. Smart people sometimes come up with complicated ways of doing things when a simpler approach would be better.
10. Tesler’s Law
What it means
For any system there’s a certain amount of complexity which cannot be reduced.
Why it’s helpful
There’s a common misconception that the more features you add to a product, the better you make it. Perhaps from a marketing perspective more features = more money. But from a usability perspective, perfection lies not when there’s nothing left to add, but when there’s nothing left to take away. However, there’s always a basic level of complexity you can’t escape from, and we need to know how to design around that.
How can you use it?
- Hide as much complexity from users as you can — they don’t need to know the functionality behind the process, just how to use it to achieve their goal.
- Simplify, but not to the point of abstraction, e.g. removing most of the text from a menu page about government services and just presenting abstract icons to represent the options does not make that page more usable — quite the opposite.
- Always question whether complexity could be removed, but recognise when you’ve reached the point when there’s nothing left to cut.
Sources
Yablonski, J. (2020) Laws of ux: using psychology to design better products and services. Reilly Media, Inc.
About the author
Andrew Tipp is a lead content designer and digital UX professional. He works in local government for Suffolk County Council, where he manages a content design team. You can follow him on Medium and connect on LinkedIn.
