Article
Design process

updated on:

27 Aug

,

2024

The Good, the Bad and the Ugly: A Story About Design and Friction

8

min to read

Table of contents

If you have been reading some materials on UX design, like this blog, you might have read that friction is something that needs to be eliminated, as they slow the usage and annoy users and so on. So, less friction equals better design?

It may be contradictory but, when there are issues in UX, some of them can be solved by removing friction and others… by adding some friction.

As with most things in this world, UX design isn't black and white. Sometimes friction just slows down users, but in some cases, it plays an important function, for example, preventing errors. How? By making the process of committing errors longer and harder.

As a UI/UX design agency we consider it our mission to explain the difference between the good, the bad, and the ugly types of frictions. Let’s start from the beginning.

The story of UX friction

“UX friction” sounds like an advanced UX concept, but “good” friction has been around for a long time. The legendary "Are you sure you want to delete this file" is an example. Or the "agreement and conditions" message that doesn't let you click Agree without even taking a look (which is what we all do).

The friction effect is present in many situations outside of user interfaces. For example, the indie rock band, The Haven, which was popular in the 90s, wrote in  their rider that they needed a bag of M&M's before the show, but all the brown candies had to be taken out. If the condition wasn’t met, they could cancel the concert.

Why would they do it? Because they can, you would think. Rock stars can afford to be demanding and nasty, so why not? But there is a very practical reason to do such a pointless (at first glance) thing.

The objective of this weird demand on the rider was to detect event organizers who are not attentive and professional enough. The logic was as follows: if the organizers didn’t take care of M&Ms, chances are they also didn’t properly read the serious parts of the rider regarding the technical requirements. Such negligence could result in technical problems and even unsafe situations.

This is especially important for the design of dangerous objects, such as weapons or nuclear plants. Here, friction saves people from fatal errors.

For babies even kitchens are a dangerous space, that’s why these highly uncomfortable devices became very popular

This and other awesome stories are from the talk of marketing pro Mehmet Dogan, if you need more insights into the topic of friction in UX design

But let’s get back to the history of the term design friction, or UX friction. So, we can’t find who was the first one to use it, but we know who found a good name for it.

Joel Marsh is a UX designer, Founder at Peekerton and author of “UX for Beginners”. He was writing about Anti-UX in his book, and nobody bothered until he posted it on Twitter. People started commenting that anti-UX was not the best name and suggested calling it appropriate friction instead. He decided this name was less controversial, and we can agree with that.

According to Joel

UX friction is something that helps beginner UX designer to expand their minds when they start thinking of design as a way to lead people, or change behavior or create behavior rather than showing just visual stuff.

So let’s uncover how friction works in design and serves your needs.

Creating value by waiting

When you feel like spending thousands of dollars on a bag or a dinner, you have to… wait. For example, a dinner at a fancy restaurant in your area would cost you a hundred dollars and you can book a table instantly. However, to get a table at a top-starred Michelin restaurant in Modena, Italy, you can’t just come and book the place. You leave a request, then wait patiently until the restaurant decides whether they accept you or not, and then wait a few months more until there is a table available. 

Why do people who spend a thousand dollars have to wait for more than those who spend one hundred or ten dollars? Because they feel more special knowing that this experience was so exclusive and anticipated it. 

Although the results are very different, both luxury restaurants and not-so-luxurious digital products use the same effect: sometimes waiting time increases value.

In UX design, an artificial “waiting time” is added to create a labor illusion. This psychological effect is used to gain more trust from users. One of the first to use this trick was Kayak, a flight booking service. After entering all the data and clicking the “search” button, Kayak doesn’t show the results immediately. Instead, it shows a message that the website is in the process of checking many sources to find the best connection for you. Even though it didn’t need that much time, the message made users feel like there was a lot of “work done”. So, they valued the service more.

Many other booking services copied the idea, and now we are used to it.

design friction example: Loading circle on Skyscanner
Loading circle on Skyscanner

How to detect where design friction is needed?

For that, you need thorough UX research, of course. First of all, detect most common errors. UX research methods that will be helpful:

Next, think of the ways of complicating the user flow that leads to the error.

This might be:

  • Classical “Are you sure?” pop-up
  • Making the button of neutral grey color, not accent
  • Hiding the button
  • Hiding the button even further…

But of course, this list is not exhaustive. Who knows, maybe you will invent something new?

An alternative to UX friction can be the "cancel" option. This includes the "unsend" button and a good old trash bin that deletes files after 30 days (it’s such a basic thing in the OS, but not the default option in web apps, somehow).

cancel option as an example of a UX friction

Ok, error prevention is clear, but what about other types of design friction? Often, they are not "essential", and even if the problem is serious, it's not that easy to detect. 

Do users really need that "loading" sign on your website? I'm not sure. Even A/B testing won't always help. In most cases, it's about the UX designer's experience and knowledge of common patterns.

Appropriate friction vs inappropriate friction

Let’s define the main types of appropriate UX friction by objective:

  • Preventing errors 
  • Increasing perceived value

These two types of friction are more complex, as described above, but there are two other types we’d like to discuss more in detail.

  • Entertaining users while they have to wait

Entertaining users is a different kind of objective. It appears in the spots where the friction (waiting) is already present. It makes users learn something new or smile. At the same time, it may prolong the waiting time and distract them, but the overall user experience is improved due to positive emotions and the feeling of personal touch.

For example, Duolingo offers small witty quotes or interesting facts while loading the next lesson, so users feel they are entertained and do not notice the friction. 

Duolingo uses design friction
Image source: Duolingo 
  • Getting users familiar with the product

It includes all those pop-up tips and contextual onboarding that are very common nowadays. These tips draw attention, create friction, and experienced users might be annoyed by them. On the other side, people who open the app for the first time will benefit from such friction as it familiarises them with the product.

For example, for a data-science product MVP we designed a small onboarding in a form of a walkthrough that would get users started. We used pop-up messages that engage users. When you ask users to make an action instead of just showing how the app works, they learn faster.

design friction during SaaS user onboarding
Onboarding we designed for Great Power Influence

It is important to make the walkthrough as short as possible. Users often get frustrated by long onboarding sequences that can’t be skipped. That’s why we added numbers for each pop-up so that users know how far they are until the finish.

Each of these cases needs a certain amount of friction. Too much would ruin the user experience. So, when is friction bad?

  1. When friction appears at the main user goals, like registering, completing the purchase, and so on.
  2. The navigation/search/filtering is not designed properly so it takes forever to find some essential info, such as customer service or email.
  3. User flow is overcomplicated and causes too many errors.
  4. People spend more time than expected and get annoyed (e.g. loading bars and waiting circles that take way too much time and annoy users).
  5. When a product becomes too obnoxious trying to get user’s attention (pop-ups show up every time you open the page and the “unsubscribe” takes longer than blacklisting an email address).

And, to make things even more interesting, there are “ugly friction” cases when friction is “bad” from user’s view but helps to reach some business goals. For example, the websites that make it extremely hard to reach customer support officers. Users might hate it, but from the business point of view, it helps them minimize the number of support tickets (and the number of customers, in some cases…).

Our experience working with UX friction

At Eleken, we mostly deal with B2B SaaS products, where there is little space for sophisticated friction, as the products are typically complex. Still, appropriate friction is important in our work as it prevents users from making big errors.

Let’s take our client Ricochet360 as an example. We were hired to make a redesign for this marketing platform. The lead management screen had a flaw: after selecting items on the list, the accented red button was “Delete all”. It means that users were quite likely to press it accidentally. However, “Delete all” is not the most common command.

UX friction in user interface

To prevent them from making that error and stressing out later on, we hid the “delete” function behind the three dots menu. It would make the process a bit longer, as the user has to find it and then click twice instead of just once. This is appropriate friction.

What does design friction teach us?

Friction is not always good or bad. It can be appropriate, it can be annoying, it can be unnecessary, and can be essential. The situation is what makes friction good, bad, or ugly.

The main lesson is: users are not perfect, and when we design we have to keep that in mind. We can’t work with success only, we have to think of errors and imperfections. Because our design shouldn’t be “perfect” for designers, it has to be comfortable for users in the first place.

If you feel that your product doesn’t fit into common design patterns and could some expert help, contact us – we’ll be glad to help you.

Share
written by:
image
Mariia Kasym

Content writer with a diverse background, Mariia has excelled in industries from publishing to IT. With experience at Eleken UI/UX design agency and IT startups, Mariia knows the business value of good design – and is keen to share.

imageimage
reviewed by:
image

imageimage