An Article

Friction in Interface Design: The Good, The Bad, and The Unnecessary

Ayana Campbell Smith By Ayana Campbell Smith // 8.19.2020

There’s a good reason why you have to break the glass before the fire alarm can be pulled.

Actions with irreversible outcomes should be deliberate and adding a barrier often yields a better user experience.

The same is true of interfaces. When a simple click, tap, or swipe has the power to seal your fate (for better or worse), the quickest way to improve a flow involves slowing it down first.

Interface, meet friction.

What is Interface Design Friction?

Friction, as it relates to interface design, is any interaction that disrupts users from accomplishing desired tasks. Impeding progress may seem counterintuitive, but friction has its place in every user experience. There is an important distinction between good friction and bad friction. The former improves user experience by reducing errors, promoting security, and improving the overall perceived quality of the interface (more on this in a bit). The latter only serves to frustrate users. Common examples of bad friction include:

  • Too many steps in a process
  • Design choices that unnecessarily sidestep established patterns
  • Late feature changes or additions that interact poorly with the established experience

On the flip side, let’s illustrate the merits of good friction by taking a look at a plane’s cockpit. These are complicated interfaces with plenty of buttons, knobs, and levers to be pressed, turned, and pulled. Make no mistake – this complexity is completely by design.

That’s because, although aesthetically desirable, oversimplified interfaces often increase the potential for user error and frustration by unnecessarily obscuring functionality or drawing out flows in the name of simplicity. But remember that even with purest of intentions, less isn’t always more.

Introducing complexity builds in a safeguard against unintended actions. In our example, it’s the difference between a careful, slow descent and plummeting 30,000 feet because you pressed the wrong button. 

The Benefits of Good Friction

Friction can actually improve interfaces and user experiences if used correctly. The following are examples of ways good friction enhances interfaces.

Avoid Situations That Can’t Be Recovered

Friction can be used to slow user action before making irreversible errors. This affords users the opportunity to fully grasp the extent of their actions and choose a different path if necessary.

Mailchimp Send Confirmation

Mailchimp implements friction by requiring user confirmation before sending an email campaign. Although the send process is temporarily halted, users are entertained by a fun animation further articulating the permanence of the action they’re about to take. It’s abundantly clear that once completed, this action can’t be undone.

Google Hangouts Two-Step Join

Nothing is more embarrassing than getting caught with your pants down. Just ask this guy. Google Hangouts makes use of good friction by implementing a 2-step join process. Before users join a call, they are shown a preview of their video, with controls to manage what others can see and hear. This simple addition reduces the potential for unnecessary disruptions and embarrassment on the user’s behalf.

Promote Security While Building User Trust

3 billion accounts. That’s the record-setting number Yahoo holds for compromised accounts during a 2013 cyber attack.

From online banking to password management apps to email clients, we put great trust in apps and interfaces because they make our lives easier. As we continue to rely on these technologies more, cybersecurity issues remain a top concern for companies and consumers alike.

2-Step Verification and CAPTCHAs

Given the abundance of potential security threats, 2-step verification and CAPTCHAs have become welcomed examples of good interface friction. Introducing these additional steps to login flows and other areas where sensitive user information is exposed ensures the person logging in is not only human, but the right human.

Securing Checkout Processes

The popularity of one-click (or completely click-free) shopping is evidence of just how much we value convenience. But with this new horizon comes the increased need for fraud prevention measures. This is yet another place where good friction shines.

For example, even when you save credit card information for future purchases, most online retailers require users to re-enter their CVC number before a purchase can be confirmed. And Apple Pay utilizes friction by requiring users to confirm purchases with Touch ID or Face ID. These measures go a long way in both protecting valuable information and bolstering user trust in the interface.

Answering Questions Before Joining Facebook Groups

Internet security extends beyond the need to keep sensitive information safe. It also encompasses measures taken to secure the spaces we occupy online.

Facebook implements good friction by requiring users to answer a series of questions before joining a group. This is a great way of weeding out trolls, spammers, bots, and anyone else who doesn’t belong.

Encourage Desired Actions

Whether for the users’ benefit or for the creators of the interface itself, friction can also be used to steer users toward a desired action. 

Zoom’s Open Desktop App Prompt

Zoom users will be familiar with the prompt to launch their app any time they attempt to join a meeting. Whether it’s for the user’s own benefit or a dark pattern is uncertain. What is clear, however, is that Zoom wants you to use their app and they aren’t afraid to introduce friction to make sure you do.

Hulu Subscription Cancellation

Hulu users who attempt to cancel their subscription are presented with the option to pause it instead. In the end, it’s a win-win on both sides of the transaction. The user will no longer be charged for the service (albeit temporarily) and Hulu still retains their information should they decide to resume the service.

Tips, Considerations, and Best Practices

Finding the Right Balance

Despite friction’s previously mentioned merits, there is still such a thing as bad friction. Without thoughtful consideration, even the most well-intentioned friction can quickly take a turn for the worst.

For example, having to confirm the deletion of a spreadsheet is useful (and highly recommended) as this is an action with lasting consequences. But requiring confirmation for every change to spreadsheet cells would be a ridiculously cumbersome task.

To strike an appropriate balance, focus first on identifying the areas where friction would be most useful. This includes any dangerous, irreversible, or important flows that require extra consideration. Once identified and properly documented, you’re better able to prioritize resources and efforts.

Give Users Autonomy

Giving users some control over the level of friction they encounter increases overall satisfaction with an interface. This is because friction still carries the potential to frustrate.

As a general rule of thumb, unless absolutely necessary, consider implementing mechanisms for making it optional, skippable, or snooze-able. Whether it’s a skippable onboarding tutorial, a “Don’t show me this message again” option in a dialog box, or the ability to snooze a reminder, users will appreciate the freedom of choice.

Iterate on Common Stumbling Blocks

Remember that adding friction is not always a perfect solution. For example, if people are still consistently deleting things they shouldn’t, other avenues, such as restoration or version control, might be more viable options.

Paying attention to areas where users blame themselves for errors during testing offers valuable insight. These are telltale signs of tripping points in an interface where iteration would be beneficial.

When used properly, friction has the power to improve interface experiences. By implementing it, you’re better able to reduce errors, maintain user security, and encourage desired actions.


Next Up

Everything Is Fine Until It Isn’t: A Primer on Software Licensing

Nick Walsh By Nick Walsh // 8.10.2020

Dependencies build up fast when pairing outside and proprietary code. Learn about the different software license categories and use them to your advantage.