6 Ways to Prevent Friction in Your Design

Default avatar.
August 09, 2017
6 Ways to Prevent Friction in Your Design.
In user experience, friction is anything that prevents users from accomplishing their goals. Friction is a major problem because it leads to bouncing, reduces conversions, and frustrates users to the point of abandoning their tasks. In this article, you’ll find how to improve the UX for your users by reducing friction.

The Concept of a Frictionless Experience

Frictionless user experience has now become the new standard. The goal of frictionless experiences is to simplify our lives. The most successful digital experiences have emerged out of focusing on reducing friction in the user journey. image3Uber knows that the fewer steps involved in a task, the less friction. Outside of GUIs, a good example is the Amazon dash button, that allows you to order a refill of a specific product with a single push. image1
Amazon dash button

Good and Bad Friction

It’s important to say that there are two types of friction — “good” and “bad” friction:

“Good” Friction

There are times when a little UI/UX friction is actually desirable. As Sangeet Choudary said: “Friction in design is helpful if it facilitates the interaction instead of [getting] in the way of it.” Sometimes you might want to slow the user down to ensure data captured is correct or to prevent users from taking an incorrect path. For example, for actions with severe consequences, some friction is not a bad idea. image7
Friction can prevent mistakes by asking for confirmation. A user must confirm a delete action by actually typing delete.

“Bad” Friction

This is an unwanted friction created by a visual clutter (a busy layout that confuses or distracts user), inconsistency (“Why does the ‘Submit’ button look different on this page?”), unfamiliar features or functions. Bad friction is the enemy of interaction design because it creates extra cognitive load in the user interface. Reducing bad friction is good for your UI.

How To Prevent Bad Friction

UX designers master the art of reducing bad friction through a combination of design techniques. Applying the following 6 key principles will help drive any product or service to a more frictionless experience for your users.

1. Consider a Complete User Journey

It’s important to design a product with a full user journey in mind in order to find where friction is helpful and where it is harmful to both user and business goals. Every step in the journey can either create or remove friction and impact the success of the overall product. When the designer understands the steps involved in a user journey they can remove (or at least adjust) any steps that negatively impact response rate. image4
Having a user journey map would make it easier to spot frictions in an experience. Image credit: Effective UI

2. Limit the Total Number of Steps Required to Complete the Task

The fewer steps involved in a task, the less friction. Here is a famous example of John Gruber’s comparing calendar entry overhead: “My typical usage [in iCal]:
  1. Double-click on the date of the event in month view.
  2. Type the event name.
  3. Tab past Location.
  4. Tab past ‘all-day’ checkbox.
  5. Tab past Month.
  6. Tab past Day.
  7. Tab past Year.
  8. Enter the hour.
  9. Enter the minutes.
  10. Swap the AM/PM.
Compare and contrast to the event entry UI for the calendar feature in Backpack:
  1. Double-click on the date of the event in month view.
  2. Type the time and name of the event.”
It’s clear what app has a less friction for this task. The trouble with interface friction is that in some cases it’s unavoidable. So if a high number of steps is absolutely necessary for your app, do your best to make sure each step feels as effortless as possible.

3. Design Clear Navigation

A lot can go wrong with navigation, making it a source of potential friction. While it’s definitely impossible to provide a one-size-fits-all solution, it’s still possible to improve navigation experiences by learning from users. The right user testing technique (such as card sorting) can help you understand how users categorize and access content in your app or in your website. This information will help you to design or adjust the navigation for the needs of your users.

4. Follow the “Less is More” approach

The ultimate purpose of an interface is to make things simpler. That’s why simplicity is an important part of what the adepts of frictionless design aim to achieve. Designers try to convey the essential by removing the unnecessary. As Antoine de Saint-Exupery once said: “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” This is absolutely true for user interfaces. As a designer, you should prioritize only the elements that match user expectations and trim anything that doesn’t help the user. A good example of a product that follows this principle is the Google home page: as simple as it can be; only one thing to do and a lot of white space around it. image6 Compare it to the Yahoo home page that looks like a swiss army knife. Too many features and options can be intimidating and occasionally harmful. image8

5. Use Recognisable UI Patterns

When we interact with familiar UI elements, we can use knowledge from our previous experience. However, every time we must learn how something new works, it creates friction (too little knowledge can deteriorate the ease of use). UI patterns help users understand very complex systems and successfully deal with difficult tasks. UX/UI designers should use as many appropriate UI patterns as possible. Recognizable conventions, such as a magnifying glass icon for search, require no extra thought for the users.

6. Use Chunking

The cognitive psychologist George A. Miller argued that the number of objects an average human can hold in working memory is 7 ± 2. In order to prevent overwhelming a user with too much information at once, designers often use the technique of chunking. Chunking works around the natural limitations of the human brain and memory retention. Dividing complex content into smaller sections improves the pace of the experience. It allows users to process the information by suggesting how each piece should be interpreted. As a result, users actually retain content better. Sometimes it’s best to break up a complex task into smaller sub-tasks. The same principles apply to input forms in breaking one long form into multiple smaller steps. image2
Chunking prevents overwhelming the brain with too much information at once. Facebook uses a process of chunking to display a progress through a sequence of logical and numbered steps.

Nick Babich

Fireart Studio is a design studio passionate about creating beautiful design for startups & leading brands. We pay special attention to nuances all the time to create professional while cool products that will not only meet all expectations, but exceed them.

Read Next

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…

Turning Rejection into Fuel: Your Guide to Creative Resilience

Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is…

20 Best New Websites, August 2024

The overarching theme in this selection is simplicity. Minimalism never really goes out of fashion and with good…

Free AI-Website Builder, Scene, Helps With the Worst Part of Site Design

AI website design platform, Scene As we’ve been hearing constantly for the last couple of years, AI will soon replace…