How to Reduce Friction in Web Design


By

In terms of user experience, friction is anything that prevents your users from accomplishing their goals. Friction presents a major problem to users and designers alike because it reduces conversions, increases bounce rate, and causes users to abandon their tasks. In other words, it does the exact opposite of any good website.

Friction in your user experience will take a toll on every user interaction, so that even the most well-designed interfaces are difficult to use. On the other hand, a frictionless website experience creates user interactions that are seamless and unravel naturally.

Reducing your website’s friction can lead to more quality interactions without complications. Cleaning up your website will boost your conversions and encourage your users to stay on your site for longer, increasing the likelihood that they’ll take action. Here’s how to do it.


Identifying Friction on Your Website

Friction can come in many forms. Some people define friction as anything a user must overcome to use your site (examples include slow loading times or poor navigation). Others use the term friction to describe anything unneeded or excessive about an interface. Still others equate friction to “cognitive load,” or anything that requires a user to think but shouldn’t.

While these are all essentially versions of the same thing, we can generally identify symptoms of friction as:

  • Distracting visuals
  • An interface that’s visually cluttered
  • Inconsistencies
  • Unnecessary actions and decisions
  • Functions that are confusing or less than intuitive

It’s also important to understand that in some cases, friction can actually be a good thing. This applies when friction design components slow a user down for some purpose. For example, you might incorporate complicated elements to capture data or keep a user from making a mistake with severe consequences (such as a user deleting their inbox or account permanently).

In other instances, friction may serve an educational purpose. Games are a good example. In games, we use friction to instill learning. With friction, we go from beginner to expert while still enjoying ourselves. It’s the virtual version of riding a bike – through trial and error, we learn something new. No one would like a game without friction, because it wouldn’t be fun.

For most websites, however, you’ll want to make your experience as frictionless as possible. Use these tried-and-true strategies to create weightless user experiences:

1. Start with a Macro Approach

In order to create a frictionless user experience, start with a full user journey in mind. This will help you determine where friction can be helpful to your development process, and when it will be cumbersome to your users.

Each step in a user’s journey presents an opportunity to impact the success of your overall product. Decide when friction is necessary to collect data or prevent mistakes, and remove all other obstacles that might negatively affect your response rate.

2. Minimize the Steps Needed to Take an Action

There’s a good chance you can reduce your friction by cutting out some steps in a user’s process. A famous example is the complex process of using an iCal function:

  • Double click the date in the month view.
  • Type the name of your event.
  • Skip past Location.
  • Skip past “all day” checkbox.
  • Skip past month.
  • Skip past day.
  • Skip past year.
  • Enter the hour of the event.
  • Enter the minute of the event’s beginning.
  • Enter AM or PM.

If you think that’s stressful to look at, you’re not alone. Now, contrast that to the user journey in the calendar feature of Backpack:

  1. Double click the date of the event in your month view.
  2. Type the name of the event and start time.

Compare these two apps together, and it’s easy to see which has less friction. In some cases, you may have a process that requires many steps. If this is the case, ensure each step is as effortless as possible. You may accomplish this by using checkboxes instead of requiring typing, or by consolidating steps whenever possible.

3. Know that “Less is More”

The ultimate goal of an interface is to make things as simple as possible. This forms the foundation of the best practices of web design. By removing the unnecessary, we can convey the essential.

Take care to prioritize the elements that meet user expectations, and get rid of anything that isn’t strictly necessary. A prime example of this in action is Google’s home page. There’s only one thing you can do, and there’s a lot of white space around it.

Don’t get too overloaded with features – you run the risk of making things complicated and harmful to the user (which is ultimately bad for your product).

4. Use Good Navigation Practices

One of the enemies of weightless experiences is poor navigation.

Unfortunately, a lot can go wrong when designing navigation, so it’s also a common cause of friction. There’s no “one-size fits all” approach to clear navigation, but there’s a source where you can learn what works for your site: your users.

User testing will help you understand how people access content in your site or app and categorize it. Use this information to guide and adjust your navigation practices so they meet the needs of your users.

5. Chunking is Your Friend

Any student of psychology will recall that George A. Miller posited that the average human mind could hold 7 objects in working memory, plus or minus 2.

This is where the practice of chunking stems from – it prevents cognitive overload. Organizing information into chunks works around the limitations of the human brain and increases memory retention.

We can apply this concept to web design by breaking up complex tasks into a serious of smaller, simpler ones. Apply this technique to input forms and other cumbersome tasks to reduce your bounce rate and improve user attention.

6. Don’t Reinvent the Wheel

It can be tempting to do something new or innovative to your website. As creative people, it’s natural for web designers to create something unique. However, users prefer to interact with familiar UI elements because they can use their knowledge from previous experiences.

Every time we force users to learn how something new works, we create more friction for them. Predictable UI patterns help users understand systems and complete tasks. Use pre-established UI and UX standards as much as possible. For example, a magnifying glass icon for search is readily recognizable for users and requires no extra thought.

7. Stay True to Your Brand

Lastly, put yourself in your user’s shoes for a minute. Would a visitor know what you’re about within 4-6 seconds of visiting your site? If not, you’re creating friction from the get go.

Your landing page or app homepage should readily address a solution, solve a problem for users, or help users achieve their goals. This concept applies to layout, typography, graphics, and more.

Conclusion

Your website or application should be as frictionless as possible. By removing unnecessary steps and cluttered design elements, you can help your users achieve their goals faster and reduce your website bounce rate.

Friction in a website ranges from the practical to the aesthetic. For example, slow load times or sub-par navigation can cause users to abandon your site, while a lack of white space or even the wrong font can create an increased cognitive load. This is why it’s important to consider the entire user journey when designing a product.

By following the steps outlined above, you can identify friction in your website and take steps to reduce it. By doing so, you’ll increase your conversions and become more successful at solving user problems.


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.