Last summer, I attended a training session by Jon Dixon at Bunnyfoot in London. Attendees learned about applying key principles to design for people’s natural thinking processes. These principles work across personas and demographics.
A lot was covered in Jon’s day-long session, so I’ve rounded up 10 of my favorite points.
1. Faces attract and guide attention
In the pair of examples below, the only difference is the direction the woman’s eyes are looking, but it makes all the difference when we consider the eye movement of a user. The user follows the path of where the woman in the picture is looking. Correct placement of copy next to an image of a person looking at it can help nudge someone to read what you want them to.
Image: 1stwebdesigner.
2. People decide quickly and then validate that decision
Look at the image below and find the odd one out.
The brain is very good at deciding which things it needs to pay attention to. The usual process of the above is to scan and quickly find the odd leaf. You may be looking for a slight color change, or for a shape change or a size difference. Once you spot it, you validate this hypothesis by going over the options to check that your quick decision is correct. The things that stand out are called salient cues, and they guide you through decision making. Working with salient cues creates a better user experience.
Take a simple form with some required fields. Usability testing has shown that adding an asterisk to indicate a required field is the best solution. People understand this at first glance. If all fields but one are compulsory, adding (optional) next to the odd one out won’t get read because people are trained to pick out the asterisk.
3. You only consciously process a fraction of the information that enters through your senses
A lot enters your brain through your senses. The processing power of the brain is incredible, filtering out anything that isn’t needed in the conscious part.
The table below shows the bits per second for the 5 senses. In computing terms, a bit is the smallest piece of information—it’s a 1 or a 0, a binary value. It’s the same here—the smallest possible piece of information. The most interesting part is the relationship between the amount of data that comes in and the amount that’s consciously processed.
4. Design calls to action relative to importance
When designing buttons and interactions, understand the potential actions and the consequences.
Take this example:
There’s a light in front of you. When it illuminates, you have to press a button. There are 4 potential outcomes:
The light turns on
1. You press the button — correct identification and execution — success
2. You don’t press the button — you miss
The light doesn’t turn on
3. You press the button and it’s a false alarm
4. You don’t press the button — correct — rejection
Now you have to weigh the risks.
Let’s say the light is replaced with a fire. If you see a fire, you want an easy-to-operate fire extinguisher. If you detect the fire but can’t press the button, then the fire could kill you. If you have a false alarm and release the extinguisher accidentally, you’ll have to clean the floor. The risk of missing is much higher than operating on a false alarm. Make it easy to act at the expense of the potential of a false alarm.
The other side is something like a banking app where you want to transfer money. The risk of transferring money when you don’t want to is greater than not transferring the money. Make it harder to transfer, while also making it harder to make a mistake and send the money when you don’t intend to.
Design around this.
5. You only see what you want to see
Watch the video below. Can you figure out how they’ve done that color-changing card trick?
Selective attention is when your mind focuses on one thing and everything around becomes invisible. Keep selective attention in mind when designing. If something distracts your users on the page, they may not focus on the very thing you want them to.
6. 2 thumbs make up your focused vision
Looking at a person’s field of view, peripheral vision makes up a lot of it. When we focus, the clear, non-peripheral vision makes up 3 degree. That’s equivalent to 2 thumb widths at an arm’s length. Remember this when designing for a screen.
7. Tell a story with your placement
Not all people read everything. People respond to stories that have a beginning, a middle, and an end. Design webpages to follow a story pattern in the flow of the page. A clear opening line opens a story, and a clear call to action at the bottom of the page closes it. If the eye follows an easy path from the top of the page to the bottom rather than jumping all over, you’re designing for a better experience.
“People respond to stories that have a beginning, a middle, and an end.”
In script writing, a key point gets repeated 3 times so that the viewer remembers it. This can be done in web design to help people take away what you want them to remember.
8. Some activities require more brain power than others
The 3 different types of mental resources (below) require different mental load. Visual requires more than motor, and cognitive requires the most mental load of all.
- Motor (least effort): pressing buttons, moving the mouse, etc.
- Visual: see things and take them in
- Cognitive (most effort): thinking, remembering, making decisions
“One of the best ways to create a good user experience: reduce cognitive load.”
A good experience is the result of reducing mental resources—especially cognitive load.
The question often arises about whether to have a long page or a series of smaller pages you have to click to navigate through. Scrolling is a motor skill—it takes less brain power and is less tiring than clicking through smaller screens where each click requires a cognitive process to think about what to do.
“Scrolling takes less brain power than clicking.”
9. 6 ways to persuade
Robert Cialdini writes about 6 main principles in Yes!: 50 Secrets From the Science of Persuasion. We can learn from these as designers:
- Reciprocity: if you give something to someone, they’re more likely to give you something back
- Scarcity: the more exclusive something is, the more desirable it is. The more specific, the better. “This price until September 30th at 10pm” is more effective than “This price until October” or simply just showing the price.
- Authority: ratings by trusted sources help. A few bad reviews add credibility and build trust.
- Commitment: a small commitment such as signing someone up just using their email address is less of a step for the user but shows commitment, meaning that they’re more likely to add other data in the future
- Social proof: if a user thinks that others are doing the same thing, that increases their confidence and entices them to transact
- Likeability: if you can relate to something, you’re more likely to want to interact
10. The eyes can trick the brain
Placement of objects can trick the brain into thinking something exists when it really doesn’t. Shapes on a page can distract from the overall flow or enhance the flow. User testing and eye tracking can help to assess this.
You often hear that it’s absolutely essential for designers to get into the heads of their users, and I couldn’t agree more. Knowing how the human brain works is one of the best ways to do that.
So much more was covered in Jon’s course, which is why I can’t recommend the Bunnyfoot training courses enough.
This post was originally published on JosephShaffery.com. Header photo by Dierk Schaefer. Creative Commons Attribution 2.0 Generic.
Design, UX, and team leader in London, UK. Love of all design. Outside of work... photography, wildlife, psychology, running, and seeing the world! Check out my blog. Note that opinions expressed in this post are my own, and do not necessarily represent those of Capita Employee Benefits.
