Affordances, constraints, Hick’s Law—oh my! These 10 UX principles will change how you see the world.
Getting started in UX can be overwhelming at times. So many concepts, laws, and principles to learn and put into practice. While you bring a lot of transferable skills to your work as a UXer, you’re also learning the language of an entirely new-to-you field. After a while, it can all start to melt together into a confusing mix of words and ideas.
So let’s break it down. Here are 10 important principles in UX design, defined simply—with examples. Understand these and you’ll be well on your way to having a clear idea of the science behind the art of UX design. Understand these and you’ll start to see them at work everywhere you look!
Here’s what we’ll cover:
- Mental models
- Affordances
- Signifiers
- Constraints
- Feedback
- Hick’s Law
- Aesthetic Usability Effect
- Jakob’s Law
- Pareto Principle
- Paradox of Specificity
- Notice and share!
1. Mental models
A mental model is, essentially, how a user’s brain has been trained to expect a product to work.
Imagine that you need to buy a new mobile phone. You go the store (for our purposes, let’s say you go in person and not online) to browse the options. You pick up one model, try it out, and and move on to the next. As you browse, you undoubtedly notice how each model would be different (for better or worse) from your current mobile experience.
As you pick up different phones created by different designers for different brands, you find that you’re able to unlock some of them more intuitively than others. Why is that? It’s a mismatch between your mental model (the way you expect the product to work) and the way the product is designed (the way it actually works).
You’ve got a particular concept in mind when you think of unlocking a mobile phone—your brain has filed away how a mobile phone “should” unlock. This is your mental model. It’s something you likely don’t give conscious thought to until, lo and behold, the product in your hand doesn’t match up with what you had in mind.
This is an important concept to understand early on as most UX-related work revolves around ensuring that an experience plays out as (or better than) a user expects it to. This requires working with users’ mental models, not against them—even when you might be trying to revise those mental models to some extent.
A related concept in UX design that’s worth exploring: Skeuomorphism.
2. Affordances
Affordances are relationships between objects and people—they live where the physical properties of an object meet our own physical capabilities. As Don Norman writes in The Design of Everyday Things, “An affordance is a relationship” and “affordances exist even if they are not visible.” Affordances are easiest to define with practical examples because we usually perceive them so instinctively.
I sit in a chair because my body is capable of sitting and the chair itself lends itself to sitting. Are chairs the only place I sit? No. I also sit in my kitchen windowsill—not because it was made for sitting, but because it is wide enough and sturdy enough (and because it’s right by a radiator and it’s a warm spot in winter). This is an affordance.
People with the ability to see look out windows because their eyes can see, they have a need to see something beyond the bounds of the room they’re in, and because the properties of glass allow us to look through windows. This is an affordance.
A smartphone screen affords touch and tapping, a keyboard affords typing, a teapot affords heating and pouring, and an umbrella affords shelter.
Even though affordances can be a difficult concept to grasp, it’s important to understand the affordances of the products and experiences you design so that you can create the right combination of signifiers and constraints (keep reading!).
3. Signifiers
It’s easy to confuse affordances and signifiers. Remember: affordances are the relationships between people and things; signifiers are the visible indicators you give a user to guide their experience and help them understand how to make the product work for them.
Let’s talk about doors. Imagine you’re approaching a closed doorway. What do you do? You reach out to push or pull. If there’s a handle, you’re more likely to pull; if there’s no handle, or just a flat panel, you’re more likely to push. The handles themselves (or lack thereof) become signifiers—signals to clue you in on how to get through the doors.
That said, how often have you pushed or pulled at a door to no effect? It happens to the best of us. The problem occurs when there are poor (or no) signifiers.
Signifiers are critical in digital products. Think about it. One app looks and operates differently than another (though, if app designers are doing their jobs well, they aren’t straying too far from your mental models). Every screen is flat and full of information. It’s important to create clear signifiers to show users where to click or tap, or where to look or go next.
4. Constraints
Constraints are, in a sense, the opposite of signifiers. Signifiers draw attention to the kinds of actions your users can take; constraints limit the number of options.
Many college campuses are smart about constraints (or mean, depending on who you are and how you feel about skateboarding). Walls and steps are surfaces that naturally afford some skateboarding action, unless they’re embedded with skatestoppers (“skater-haters”)—metal rods or knobs that protrude enough to remove that particular affordance. These are constraints.
The reason I use my windowsill for sitting is because the affordance is there, and there are no constraints. A lack of constraints is a great thing if you’re looking for a cozy spot to sit and read, or fun ways to skateboard, but less so if you’re tapping wildly all over your phone screen trying to get it to do what you want it to do.
Have you ever filled out a long form and become frustrated at clicking “submit” only to be told you need to go back and fill out required fields? Some apps and websites include a visual constraint: they deactivate the the button. The button itself won’t work and appears “grayed out” until all the required fields are completed. Maybe they even include some microcopy near the button to indicate this. The visually deactivated button clues users in to what can or cannot be done before they even try. This is a constraint.
5. Feedback
In UX, feedback is the information you give your users about the effect of the action they’ve taken or the state of any request they’ve submitted.
Feedback is inherent in many physical objects. If you sit in a chair, you know pretty quickly if your sitting and the chair’s supporting you have been successful. When you push through a door or push a door when you were supposed to pull, you know immediately whether the action has been successful or not—the door will open or it will not. Feedback becomes more important in designing digital products.
Let’s say you’re working in Google Drive and you want to move a document into a folder. You know you need to click, drag, and drop the document into the folder, so you do that. Now, let’s say you’re distracted or dealign with a slow internet connection and you’re not sure if it’s in the folder or somewhere else. Google gives a notification at the bottom of the screen (called “toast” or “toast notifications”) to verify that that specific document was moved into a specific folder. It even gives you an option to undo the action—a real lifesaver if, instead of moving the file, you’d accidentally deleted it. This is feedback.
Rather than just prohibiting users to submit a form without all required fields, some apps and websites direct you to the fields that need to be filled in. This is feedback.
If you’ve ever booked a ticket or downloaded a file or completed an online purchase of any kind, you’ve experienced either good feedback (you’re clear on the progress of the download, purchase, etc.) or bad/no feedback. The quality and accuracy of the feedback you include can make or break the quality of the overall experience.
6. Hick’s Law
Hick’s Law (or the Hick-Hyman law, namesake of psychologists William Edmund Hick and Ray Hyman) is simple: the more choices you give a person, the longer it will take them to make a decision.
By way of example, let’s go back to our first example of shopping for a mobile phone. In the earlier days (when the family cell phone rested in a tote bag that filled the entire car console), there were fewer options for which phone to buy and users who could afford the device only needed to decide whether to purchase one in the first place. The options after that were relatively few. My parents walked into the local CellularOne store, found the one option that fit the budget and the decision was made.
But now, whether you purchase yours in person or online, there’s an endless array of options and decisions regarding brand, size, memory, build, color, camera, sound, graphic display, waterproofing, cases, screen covers, and more. Some brands develop a strong enough loyalty among their users that the decision is made simpler. Apple, for example, makes the purchase of a new iPhone relatively straightforward (this is, perhaps, part of the brand appeal)—pick the model you want, then make a few more selections regarding features and accessories, and you’re done.
Now let’s apply this law to digital products—whether we’re working on the home screen, a form, purchase selections, or anything else in the customer journey. When possible, we need to limit options or present options categorically to help organize the information and enable users to make clear, rapid decisions about what they should do next.
There are of course exceptions to this—long menu lists, for example, can sometimes be more effective under very specific circumstances.
Hick’s Law is important to keep in mind throughout the design process. Too many options can be visually overwhelming to your users; it can be confusing in terms of where they need to go next; and ultimately it slows them down—which increases the chances that people will become frustrated with the product or experience. And that is something UXers and users alike want to avoid!
7. Aesthetic Usability Effect
The Aesthetic Usability Effect is a paradox that comes in to play when the user interface (UI) is designed so well that users perceive the product to be more usable than it actually is. Done well, good UI design can, at least for a time, keep users from seeing flaws in the usability of the product.
Going back to our mobile phone examples, it may be this effect that keeps some users devoted to Apple products. There are problems and limitations that users overlook because the products are aesthetically pleasing—until a friend who’s an Android user points out those problems.
As you design apps and websites, this effect can help make up for design flaws—but don’t fall into the trap of making poor design decisions with the hope that you make up for it with really mind-blowing UI! Ultimately, your users will be frustrated on some level, even unconsciously, and that can have a significant impact on which products earn loyalty over time.
This effect is important to pay attention to in testing phases of the design process. When users seem frustrated with the product during testing tasks, yet in posttask questionnaires, they report the product being highly usable. This is the Aesthetic Usability Effect at play.
8. Jakob’s Law
Jakob’s Law takes us back to the concept of mental models. This law says that your users spend most of their time with other websites and apps, and this shapes how they expect your product(s) to work.
When you look at a website, you likely expect to see navigation at the top of the page, along the left side of the page, or some combination of these two. And there are layers of expectations that develop as you narrow down on the type of website you’re looking at. Many airline websites, for example, include navigation along the top of the page with some iteration of these options:
- Book a flight
- Check in for a flight
- Trips I’ve already taken or booked
- Information for upcoming travel
- Login or join the loyalty program
If you were to design an airline app or website, you’d want to keep these navigation options in mind and consider not departing too far from what users will expect. You’d also want to consider industry norms for how users:
- Select travel dates, origin, and destination
- View flight search results
- Book luggage, meal, and other options
- Complete purchases
This is one way that in-depth competitive benchmarking is useful. Look at what others in your industry are doing. You might have a wildly amazing idea for how to make your product better and “cooler” than others on the market, but it’s important to carefully evaluate just how much you’re departing from your users’ mental models. Innovation is good—but if you depart too far from what users are accustomed to, you risk losing them entirely.
9. Pareto Principle
You’re probably familiar with this one, so we’ll be brief. The Pareto Principle is the frequently quoted 80/20 rule: 80% of the effects are a result of 20% of the causes
This principle is applied in countless ways across industries and disciplines. My undergraduate public speaking professor told the entire class that, “80% of the people listening to your speech care to varying degrees about what you’re saying; 20% just don’t like you.” Get past the terror of speaking publicly, knowing that one-fifth of the room dislikes you and it’s kind of encouraging: you’ve only got to win over 20% of the room!
In the context of UX design, you can apply this principle many ways, but here’s the most common application: 80% of your users are impacted by 20% of your features. Similarly, you could say that 20% of your features cause 80% of the problems.
What does this mean for the UX design process? It helps you to focus your efforts on the features and design decisions that will have the greatest impact on your users. Rather than looking at all of the problems for all of your users and assigning solutions in a scattered manner, hoping to make a difference, find the 20% of the product or experience that needs improvement.
10. Paradox of Specificity
The Paradox of Specificity is an interesting one. This paradox is at play when you design for a very narrow set of user needs and the result is a product that is even more widely useful than you intended.
One example of the Paradox of Specificity is the OXO vegetable peeler. It was invented to meet the needs of a very specific user: the inventor’s wife, who had arthritis. Now, this little kitchen utensil is widely used in kitchens all over the world—because the result was simply a better product. If you’d like to learn and see more examples of the Paradox of Specificity, our post on UX Planet is a great place to start!
While this little paradox doesn’t exactly overturn the Pareto Principle, it certainly does challenge it when it comes to accessibility and inclusive design.
Many designers focus on the needs of 80% of their users and figure that the other 20% will either come along for the ride or that they simply don’t hold as much weight in design decisions. While this can at times be true, this thinking is problematic when a large portion of that 20% is made up of users who experience exclusion simply because of their abilities, gender identity, background, etc.
To apply to Pareto Principle in yet another, more inclusive way: Simple changes in 20% of the design process (enhancing our user personas by adopting persona spectrums, normalizing gender neutral language or avoiding gendered language altogether, etc.) could solve real problems for 80% of those marginalized users.
11. Notice and share!
There you have it: 10 fundamental principles and laws in UX. Now that you understand them, you’ll start noticing them at work in the world around you. They’ll change the way you see and understand so many products and experiences—and even better, they’ll add depth and quality to the work you do as a UX designer!
If you see an interesting example of one of these principles at work in the world, pass it along to us on Twitter, LinkedIn, or Instagram!
If you’d like to learn more about UX design principles, check out these other articles: