What is Friction in UX, and How to Create Smooth User Flows
Sector: Digital Commerce, UI/UX
Author: Nisarg Mehta
Date Published: 03/30/2023
- Introducing Friction in Experience Design
- How to Avoid Bad Friction in Your Experience Design
- Reduce No. of Steps in the User Journey
- Reduce Content and Features
- Guide Users Through the Journey
- Improve Accessibility
- Be Ready to Handle Errors
- Prioritize Clarity Over Creativity
- Use Recognizable UI UX Patterns
- Strategically Using Friction to Improve UX
Frictionless digital experiences are what we mean when we say a website or mobile app is well-designed and effective.
You’ve probably had an experience like this at some point: You went to a website, found the product you wanted right away, added it to your cart, breezed through checkout, and landed on an order confirmation page with a sense of accomplishment. All of which felt like a matter of seconds. That’s what we denote as a frictionless user experience.
You’ve most likely experienced high-friction situations, too:
- Navigation that is not user-friendly.
- Searches that are difficult to locate a product.
- Unclear pricing and inventory communication.
- A burdensome checkout procedure that does not handle errors smoothly.
- Feelings of frustration or annoyance when you finally reach the finish line.
Friction can be introduced or reduced in digital experiences in dozens of ways. While it sounds like a negative thing and often has a negative impact on conversion and user satisfaction, there are also cases where it can be used strategically to reduce user error. More on this later.
This article will majorly focus on creating a smooth and frictionless design. So, stay tuned.
But first, let’s talk a little about friction in experience design.
Introducing Friction in Experience Design
Friction is any element that makes users stop and consider their options in experience design. It is anything that impedes users’ progress toward their objectives—the barriers that slow them down.
Friction comes in several forms, such as:
- Interaction Friction: Designers strive to build intuitive and consistent interfaces in order to prevent interaction friction. All aspects of the user interface that hinder users from achieving their goals are considered interaction friction. For example, some mobile apps use icons that the users can’t relate to.
- Cognitive Friction: A product’s cognitive load determines the amount of mental effort required to use it. When users have to use a product in a situation that requires a lot of mental effort, they experience cognitive friction. Suppose you visited a website and saw a button that said “Sign Up,” but when you pressed the button, it redirected you to another website. That’s cognitive friction.
- Good Friction: Friction in design can be beneficial if it helps the user interact rather than hinders it. Sometimes, you may want to slow the user down to ensure that the data capturing is accurate or to prevent users from making the wrong choices. For example, Gmail asks you to attach a file when you’ve used the word “attached” in your email body.
- Bad Friction: A cluttered visual design that confuses or distracts users or an inconsistent layout that prompts users to ask, “Why does the ‘Submit’ button look different on this page?” creates unusable friction. Another example of this is websites using pop-ups as soon as the visitor land on their page. Bad friction is terrible for user interfaces because it creates an extra cognitive load. Therefore, reducing bad friction is good for your UI.
How to Avoid Bad Friction in Your Experience Design
The reduction of bad friction is one of the things that UX designers master. The following principles will help drive your product or service to a more frictionless experience for your users.
1. Reduce No. of Steps in the User Journey
Every phase of the user journey, from sign-up to individual actions, requires a certain amount of effort from the user. Friction can exist if there are too many phases in the user flow, so it’s critical to eliminate them all. Remember the conventions of the “Keep it simple, stupid!” aka KISS design philosophy when creating user flows, and remove or optimize steps that might cause friction.
So how do you do it?
Only Ask for Information That's Necessary
It’s best to avoid asking users for the information you don’t require right now (or ever). During sign-up, for example, it might be tempting to request as much information as possible. Here, avoiding that tendency reduces the risk of users abandoning the process.
The more actions it takes for a user to complete a job, the more likely they are to give up. Hence, request only the information you really need, and you can acquire more details later if you need them.
Leverage Default Settings
The default values or settings that come out of the box have a tremendous influence on users’ decisions; they make decisions for users. If you believe that 95% of your users will prefer a particular option, you can spare them the trouble of having to do it themselves.
See? It’s simple.
Your app can fill data in its user interfaces automatically without additional user effort, especially if the app or website knows the user’s location.
2. Reduce Content and Features
The purpose of an interface is to make things simpler. Frictionless design advocates strive to achieve this goal by emphasizing simplicity. By removing the superfluous, designers attempt to convey the core message.
When designing a product, only include elements that match user expectations and eliminate anything that does not serve the user. The Google home page is a good example of this principle: it is as simple as it can be, with only one thing to do and lots of empty space.
3. Guide Users Through the Journey
A good UI should help users take the right actions or make smart choices when using an application or website.
Here is how you can do it:
Highlight Primary Functions, Buttons, and Actions
Designing each page to make it simple to digest is how to make the job easier for a user. The human brain is wired to notice differences, and designers can use this quality to draw users’ attention to particular UI elements. You can prioritize and emphasize important elements through color, size, and shape.
Provide Contextual Instructions
Contextual instructions are crucial in a site or app where users must input data. Users benefit from such instructions, especially in form fields. Give your users directions on how to complete a particular job to really help them.
4. Improve Accessibility
An accessible product is well-designed and handy to users of all abilities, including those with impaired vision, motor disabilities, or hearing difficulties.
You can eliminate readability issues and dubiousness because poor legibility occurs when text is placed on a busy background or when it is not sufficiently differentiated from its background (i.e., dark text on a dark background). So avoid that.
5. Be Ready to Handle Errors
Of course, error prevention is one of the key factors for app success. However, even when errors happen, a good UI should provide a clear path to resolution.
Predict Possible Errors
It’s better to prevent than to cure. By thinking of possible problems, your designers can create better experiences.
Use Inline Validation
Users experience difficulties when filling out forms, and it’s prevalent with everyone. Inline validation can help reduce the difficulty of this process. When a problem arises while users fill out a form, inline validation notifies them of the problem instead of after they submit the form.
Users can solve common issues without contacting customer support if Frequently Asked Questions (FAQs) are included on the app or website. By giving users the ability to tackle their own issues, you can minimize friction in both your business and theirs.
6. Prioritize Clarity Over Creativity
The level of clarity directly impacts user experience. By making things simple, designers allow users to interact with a product more easily.
Here is how you can ensure clarity:
Don't Use Jargon
The use of jargon makes messages more difficult to understand. While some designers intentionally include jargon (i.e., to appear intelligent), the majority tend to include it unintentionally. Designers believe that their users are just like them and will, therefore, not have any trouble understanding their message.
Even if your users are tech savvy, don’t overestimate their technical competency (or mental load). Remember that the copy must be as light as possible. To help your users interact without any issues, consider using terms a layman would understand.
Users can grasp a new technology quickly when they can transfer their prior knowledge and abilities to it. By adhering to conventional patterns and implementing your own distinct solution, you make it easy for users to interact with your product.
Conversely, if you diverge from commonly-accepted patterns, you force users to relearn how to interact with your product. You can lower this learning curve by sticking to recognizable conventions.
For example, if you’re designing an eCommerce app, try to mimic Amazon or any other popular app in your niche.
The next tip is quite similar to this one.
7. Use Recognizable UI UX Patterns
Every time we need to learn how a new UI element works, we experience friction (too little knowledge can make the system difficult to use). We can utilize our previous experience when interacting with familiar UI elements.
UI patterns help users grasp very complex systems and accomplish difficult objectives. UX/UI designers should employ as many popular UI patterns as possible. Conventions such as a magnifying glass icon for search, which are instantly recognizable, eliminate additional mental processing.
Strategically Using Friction to Improve UX
As stated earlier, friction isn’t necessarily bad. In some cases, like terms and conditions and confirming user inputs, you need to put friction in.
The key to eliminating experience friction is to design and execute it properly.
While form error states are necessary to ensure that users provide accurate and complete information, it is essential to ensure that the error messages are visible, descriptive, and displayed in real-time and in the context of where an error has occurred.