Kill Friction Before It Kills Your UX

It’s been about 15 years since Steve Krug first advised us to not make users think.

Friction is anything that prevents users from accomplishing their goals — confusion, distraction, hesitation, or anything else that forces them to think.

Let’s take a refresher course on how to smooth over friction points in your design.

Know Your Enemy: Identifying Friction

What Krug was describing is academically called “cognitive load,” and in UX design refers to taxing the user’s attention and brain. Of course some cognitive load is necessary (we’ll explain later in the post), but you generally want to minimize thinking as much as possible.

The Nielson Norman Group explains cognitive load by dividing it into two types, intrinsic and extraneous.

Intrinsic refers to the thought involved in accomplishing a goal, i.e. “If I click on the ‘Categories’ tab will I find the content I want?” Extraneous is, essentially, everything else, the friction, i.e., “Where is the categories tab? I can’t find it.”

Typically, unwanted friction manifests itself as:

• Busy visuals that confuse or distract
• Inconsistency (“Why doesn’t the button look like it did on the last page?”)
• Unnecessary decisions and actions
• Unfamiliar features or functions

Friction slips in accidentally, which is why your designs need to always be externally consistent (in line with user expectations and previous knowledge) and internally consistent (good visual hygiene across pages).

How to Smooth Out Friction

We explain more how to target more specific forms of friction in Interaction Design Best Practices: Volume 2, but here are some general tips that can help any UX project.

1. Reveal redundancies by listing out user flow steps.

List out each individual action needed to accomplish a task.

For example, logging in sometimes requires:

1. Click to open login window
2. Click to enter username input field
3. Enter username
4. Click or tab to enter password input field
5. … etc.

In those first five steps, you’ll notice some redundancies.

What if the cursor started in the username input field when the login window opened? What if the login window opened up automatically?

Photo credit: Reddit

Reddit tackles friction in exactly this way: whenever a user tries to complete an action like commenting that requires logging in, the login window opens automatically. Frequent users can even save their information, reducing the login process to only two clicks.

Notice however, that we haven’t just shortened the number of steps. Each step is also effortless, which is just as important.

When it came time for us to design the signup page for UXPin, we applied the same type of thinking. You’ll notice that the form only asks for an email, since you can set your password once you’ve redirected inside the app.

Photo credit: UXPin

2. Use recognizable UI patterns

Every time the user must learn how something new works, it creates friction. For the sake of external consistency, use as many appropriate UI patterns as possible.

Photo credit: Patterns

Recognizable conventions, such as an envelope icon representing email, require no extra thought for the users. For example, the default settings, guided actions, and stepped forms described in Web UI Design Best Practices are especially useful for reducing friction.

Recognition also applies to microcopy, where clear text like “Submit” work better than something clever like “go ahead,” which may cause momentary confusion.

Clarity before cleverness. Always.