Have you ever tried to pull open a door only to have it, well, NOT open? After a few tugs, you decide to try a push and it glides open easily. Felt pretty dumb, right? You've just encountered a Norman Door. This is a prime example of someone who designed without putting their user first.
Cognitive friction was coined by Alan Cooper (The Father of Visual Basic) as “the resistance encountered by human intellect when it engages with a complex system of rules that changes as the problem permutes.”
In real-people speak? Cognitive friction occurs when cues don’t match expectations. When expectations aren’t met, the brain jerks to a halt, attempting to make sense of what it has encountered.
In the case of the Norman door, the handle indicates pull, but the function is push. When you encounter one of these doors you'll usually see a sign posted above the handle. A door shouldn't need to come with instructions, and neither should your website.
In his book, Don’t Make Me Think, Steve Krug says that everyone has a “reservoir of goodwill” upon coming to a site. Every time a moment of cognitive friction is encountered, that reservoir begins to drain. This results in dissatisfaction and a high desertion rate.
Using your website should be a smooth, painless experience. Eradicating uncertainty is key to creating a product your users will delight in.
1. Eliminate the Chatter
As you scan this page, your brain is probably asking a lot of questions:
All this subconscious mental chatter adds to the cognitive load of the site - distracting the user’s attention from completing the task they came to accomplish. People enjoy puzzles for entertainment, but they don’t enjoy puzzling over what your store hours are, or what products you offer.
How can you be sure you’ve successfully removed mental chatter from your website? Test!
Usability testing allows people who have no “skin in the game” to tell you what they like and don’t like about your site. Testers are asked to complete a series of tasks, and to "think out loud". We observe these sessions using a screen and voice recorder to see where they encounter problems. Often, users will identify areas of friction you hadn’t even considered!
2. Use Affordances and Signifiers
Affordances are physical cues that tell us what you can do with an object.
As web designers, we're dealing with limited physical objects (screen, mouse, or keyboard). Users obviously have to know how to point, touch or click. Signifiers are indicators that tell you where to perform these interactions in the digital space.
We must be sure our users can easily perceive what the object is and what they can do with it. Here are a few easy places to start:
When it comes to button content, it’s important to avoid cute/clever phrases, marketing lingo, or unfamiliar technical terms.
Flat design is trendy right now, and while I love the look, there is a time when it is detrimental to usability. You don't have to go full skeuomorphic, but there should be some indication that your button is something to be clicked.
Text link styles are particularly important on mobile or touch screens where hover states don’t exist.
3. Meet Established Expectations
The web is nothing new, and people have established expectations about your product:
- Where things will be located
- How things work
- How things look
These are expectations for websites in general. After viewing one page of your website, users will have certain expectations about the rest of their experience on your site. To avoid cognitive friction, keep things consistent! For example:
- Navigation placement and style.
- Button and link styles
- Text fields, drop-downs and radio buttons on forms
As a designer it’s tempting to always try something new. After all, in this age of “dribbblisation”, designers don’t always get awards for meeting expectations. However, outside-of-the-box thinking doesn’t always make the best user experience.
4. Keep the noise down!
Avoid the temptation to make everything important. The most common violator on a website? The homepage. When you put a marketing specialist, executive, project manager, designer, and developer in a room together, everyone has a different idea of what should be most important. Occasionally, in an effort to compromise, everything is shoved on the homepage with equal weight.
The illustration below is an example of an eye scanning pattern. The eye jumps all over the page, trying to figure out what is most important. There is no sense of order or hierarchy.
Here is a webpage that has been properly organized. Notice the eye takes a fairly linear path down the page.
Noise happens when you fail to have the tough conversations about hierarchy and importance. In the end, it’s not the designer that suffers (although she may feel a bit ill about it), but the user.
Let’s have the tough conversations, ok?
Start with the assumption that everything is noise. Get rid of it. What is your site goal? Only things that support your goal should be added back to the page.
Keep your content short. “Get rid of half of the words on each page, then get rid of half of what’s left” - Krug’s Third Law of Usability.
Avoid “happy talk and instructions”. Happy talk is the friendly intro text that doesn’t serve a purpose. Biggest offenders: forms! You shouldn’t have to tell people to fill out your form, or how to fill it out. While reading, if the voice in your head sounds like a grown-up from a Peanuts cartoon (wah-wah-wah!) the content is unnecessary.
So don’t forget, design is about people, not making something pretty. Be mindful of usability and eliminate points of cognitive friction on your site, and I guarantee you’ll come away with a product that your users will enjoy using.