Have you ever visited a website and the following happened:
-An image was too large to load, so you experienced a slow loading time.
-You couldn’t find the products for sale because the menu wasn’t readily available.
-The color scheme was too distracting so you couldn’t navigate the website.
In user experience, all of the scenarios mentioned above would be classified as friction. Friction is anything that prevents users from accomplishing their goals.
There are two types of friction—good friction and bad friction. The examples shown above are considered bad friction because they deter a user from staying on a webpage.
Friction is a major problem in web design because it leads to bouncing, reduces conversions, and frustrates users to the point of abandoning their tasks. When someone visits your website and is met with bad friction, the likelihood of her returning to your homepage is slim to none.
In web design, the standard is a frictionless user experience. The goal of frictionless experiences is to simplify our lives. When you visit a website, it should be a simple, fast and easily digestible experience. It should not be met with barriers or friction.
As a web designer, you must anticipate all forms of bad friction and learn when to utilize or optimize good friction. This is why its important to follow the best practices of web design as they reduce your chances of someone experiencing friction while navigating your site.
How Can Bad Friction Ruin Your User Experience?
Unlike good friction, bad friction creates an unwanted scenario. Bad friction creates visual clutter for your eyes.
For example, a busy layout confuses you while inconsistency distracts you. Other examples of bad friction include a foreign feature or function; inconsistency in color, imagery, or font; and content that doesn’t relate to your brand.
Bad friction is the enemy of web design because it creates a cognitive load in the user interface. When you’re faced with barriers while navigating a webpage, your initial emotional response is frustration, anger or confusion. When you associate these emotions with a brand through their website, it doesn’t translate into good business.
Hence, reducing bad friction is good for your user experience.
How Can Good Friction Benefit Your Website?
Good friction causes a visitor to slow down and focus on a specific action. It doesn’t deter a user from staying on a webpage and actually incites a specific reaction.
“Friction in design is helpful if it facilitates the interaction instead of [getting] in the way of it,” says Sangeet Choudary,
Good friction slows down a visitor’s reading behavior on your website in order to ensure that a specific piece of information is captured and processed.
The average person takes 2.6 seconds to decide whether or not he will stay on your webpage. This means people are essentially skimming the content that is presented on a webpage as opposed to reading it.
You want users to read the content on your website.
Good friction makes a visitor slow down in order to read your content and follow your cues (which is to buy a service or behavior). Good friction deters users from taking an incorrect path on your website.
For example, lets say you accidentally click on the “Buy Now” tab that’s located on an e-commerce website. You’re not ready to place your order because you have more shopping to do. As a result, a confirmation message appears asking you whether or not you are ready to make the purchase. The confirmation message is a form of friction. It is slowing you down from making your purchase when you’re not ready to do so. It is also preventing a mistake from occurring by asking you to confirm if you are ready to place your order.
Web designers use good friction to combat severe consequences in web design.
The best method you can utilize to minimize bad friction is to anticipate it.
Below are a list of guidelines you can use to prevent bad friction in your web design.
1. Consider A Complete User Journey
Again, bad friction is harmful to both user and business goals. It’s important to design a product with a full user journey. Every step in a user’s journey can either create or remove friction.
When the designer understands the steps involved in a user journey they can remove or adjust any steps that negatively impact response rate. This is why many experts recommend creating a user journey map that makes it easier to spot bad friction during user experience.
2. Limit The Total Number Of Steps Required To Complete A Task
The fewer steps involved in a task, the less friction your visitor will experience. 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
Navigation is the biggest source of potential bad friction. You can improve your user’s experience by learning from users. The right user testing technique like card sorting can help you understand how users categorize and access content on your website.
4. Follow The Less Is More Approach
The ultimate purpose of an interface is to make things simpler. They key to simplicity is minimizing as much steps as possible to get to your website’s ultimate goal. For example, if your website specializes in e-commerce, its end goal is to buy a product. Therefore, it shouldn’t require many steps to make a purchase order. The more steps it takes to buy a product, the more you’re deterring the potential customer from buying anything.
That’s why simplicity is an important part of what the adepts of frictionless design aim to achieve. Web designers convey the essential by removing the unnecessary. “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away,” says Antoine de Saint-Exupery.
As a web designer, you should prioritize only the elements that match a user’s expectations and remove anything that doesn’t help. A good example of a product that follows this principle is Google’s homepage. It embodies the very definition of simplicity by featuring its most important tool, the search bar, in the center set against a clean white page.
When you visit Google’s homepage, there is no confusion as to what action you should take. Google’s homepage is designed so you can enter a question into the search field.
5. Use Recognizable UI Patterns
When we interact with familiar UI elements, we can use knowledge from our previous experience. Using recognizable conventions, such as a magnifying glass icon for search, are tools that you should utilize. They contribute to a seamless user experience.
However, every time we must learn how something new works, it creates friction.
Be mindful about creating a new environment that is so foreign and unique to a visitor that he cannot effectively navigate your website.
6. Use Chunking
Navigating a website is a cognitive experience. It can trigger a cognitive reaction from you. While the experience is actually happening in reality, there are many components of the experience that require mental action. Using a website is a process of acquiring knowledge and understanding through though, experience and the senses.
Many of your mental processes are being triggered when navigating a website such as perception, memory, judgment and reasoning.
Hence, through your navigation experience, you have expectations that needs to be met for you to continue.
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 your user experience. Thus, if you’re presented with a lot of content and imagery all at once, you will not want to read it. Your brain will interpret it as presenting too much information all at once.
A rule of thumb when creating a large amount of content based on a content strategy is to break it up into smaller sub-topics so you won’t overwhelm your reader.
Now, if that same amount of content was presented in the form of two landing pages that included markers to help you process the information such as a title, subtitle, bullet points and different font sizes, you’d be more likely to read it.
Chunking helps you retain information, process it and relate it back to your needs or wants. It allows users to process the information by suggesting how each piece should be interpreted. As a result, users actually retain content better when its presented in chunking.
NEED HELP WITH WEB DESIGN? WE CAN HELP!
LIKE THIS ARTICLE? READ MORE OF OUR INSIGHTS BELOW.
We have more helpful articles on web design, SEO, social media marketing, content strategy and video marketing. Follow Carla St. Louis, our in-house Content Strategist. Follow Be The Square on LinkedIn, Facebook and Twitter for more information on useful internet marketing strategies.