5 psychology principles for designers
As a designer, I’ve thought a lot about what makes a product “user friendly.” I know that certain combinations of color, typography, layout, and interaction feel more relevant and intuitive than others — but why? What are the underlying factors that make one interface meaningful and easy to navigate, while another is opaque and confusing?
In this post, I’ll discuss a few psychological principles that have helped me answer those questions — and I’ll offer some tips for using psychology to improve your own design choices.
#1. Hick’s law
Hick’s law captures the “paradox of choice” — the fact that decisions become harder as we add options, because deciding between a larger number of options is more difficult and time-consuming than choosing from a smaller set. In 1952, psychologist William Edmund Hick proposed a mathematical relationship between the number of options (or “stimuli”) and the decision (or “reaction”) time:
In one famous demonstration of Hick’s law, shoppers browsing a market were presented with a booth that displayed different varieties of jam. When the booth displayed 6 varieties, 40% of shoppers stopped to look, and of those, 30% made a purchase. With 24 varieties, however, things changed significantly — 60% stopped to look, but of those, only 3% made a purchase. In other words, with one-fourth as many options to choose from, people were 6 times more likely to buy jam.
What does Hick’s law mean for designers? In short — keep it simple. Limit the number of links, buttons, forms, etc. on a page, and make sure the most important call to action stands out. Assume that users are naturally indecisive; don’t hesitate to provide strong direction, or even to make some choices for them.
#2. Selective attention
You may already have seen this short video making the rounds on the internet. If not, take a minute to watch it now:
This is a perfect illustration of selective attention. When you’re asked to focus on a specific element or task, you screen out everything else, including things that would be immediately noticeable to a passive observer.
If you’re among the 40% of viewers who didn’t notice the gorilla on the first watch, you might feel a little silly, like the video “tricked” you. But selective attention is actually a very positive thing. Without the ability to direct our focus, we’d be constantly distracted and scattered; we’d never get anything done.
Good design acknowledges the power of selective attention by helping users focus on one task at a time. Consider, for example, the difference between these two screens:
The first screen does a poor job of directing the user’s focus. The two options (log in and sign up) are presented as equally likely and important; as a result, each distracts from the other, increasing the cognitive effort for the user. The second screen, on the other hand, allows the user to focus on just one option at a time. If the first option meets their needs, they’ll probably never notice the second option at all.
Selective attention, like Hick’s law, helps explain why the best design is often the simplest. It provides a compelling argument for keeping your designs clean and easy to scan, and for using Gestalt principles (e.g., proximity and similarity) to help users mentally group, sort, and prioritize content.
#3. Affordances and signifiers
An affordance is a perceived or actual property that determines what a thing can do, and how it is used. For example, a spoon has affordances for eating soup or cereal, stirring coffee, scooping sugar, etc. Some objects and elements have only one real affordance, in that they are designed to do just one thing, while others (e.g., a Swiss Army knife) have affordances for many different actions and/or uses.
A signifier provides a clue to an object’s or element’s affordances. For example, consider the three doors in this image:
The first door is equipped with a knob (a signifier), which tells us that it can be opened through a turning action (an affordance). The second has a different signifier, a handle, which tells us it can be pulled. And the third has yet another signifier, a flat panel, which tells us we can push it open.
In a user interface, a signifier might be a caret (which tells us that we can select from a dropdown menu) or a box shadow (which tells us that a button can be clicked):
If you’ve ever tried to pull open a door with a handle, only to discover that it actually needed a push, you’ll understand why affordances and signifiers are important in UX design. If your signifiers don’t match your elements’ actual affordances, users will be confused and frustrated. And if you leave out a key signifier — as in the case of a “flat” button or unformatted hyperlink — they might not realize that an element is meant to be used at all.
#4. The “F” scanning pattern
The “F” pattern refers to a technique that we use to scan pages. We see the pattern emerge in eye tracking maps for both web and mobile screens:
As these images show, the vast majority of viewers scan the top of a page first, glance down the left-hand side (or right-hand side, in right-to-left languages), scan across again, and repeat. The “scan across” becomes more and more cursory as the eye moves down the page, such that many people never actually process the last few lines of text.
For designers, the F pattern suggests two straightforward best practices:
- Put the most important information at the top of the page
- Within each horizontal section, put the most important information as far to the left as possible
Interestingly, the F pattern becomes more pronounced when a page is poorly formatted; i.e., if the page presents a “wall of text” with no other elements to draw the viewer’s eye. This means that designers can also break users out of the pattern by using images, bullet points, headings, etc. to direct their attention.
#5. System 1 & System 2 thinking
System 1 thinking is the way we think about 95% of the time. It’s fast, intuitive, emotional, and reactive; for example, a food server says “enjoy your meal!” and you respond instinctively (and incorrectly) with “thanks, you too!” This kind of thinking is error-prone, but it’s also easy and efficient.
System 2 thinking, on the other hand, is the way we think when we need to take our mind off of auto-pilot and engage in a complex problem or topic. For example, try multiplying 17 by 24 in your head — that’s System 2 thinking. It’s slower than System 1 thinking, but it allows us to process evidence and draw non-obvious conclusions.
Most web and mobile interfaces promote System 1 thinking. Facebook is a great example — in the screenshot below, the bold images, short snippets of text, and emotional “reaction” options appeal to a quick, intuitive mindset:
Designing for System 1 thinking is by no means bad, since most of the time we do want users to navigate quickly and intuitively. Sometimes, however, you’ll want a design to promote System 2 thinking, instead. For example, the website Hacker News is intentionally structured to require more focus and processing effort:
In conclusion…
If there’s one thing psychology teaches us about design, it’s the value of simplicity. Limiting the number of options and elements in an interface is almost never a bad idea, as doing so will only make it easier for users to focus on the most important content.
The principles above also emphasize the importance of considering the user’s expectations, and consciously directing their attention and perspective. For example — what affordances are they expecting, and how can we use signifiers to reinforce or re-align those expectations? Where on the page are they most likely to look for information? Do we want them to navigate quickly and intuitively, using primarily System 1 thinking, or should we nudge them toward the more complex, focused problem-solving modes of System 2? Questions like these can help us create designs that are consistently meaningful, relevant, and user-friendly.
