Many sites lose conversions due to unnecessary friction on their website.
Friction is defined by Marketing Experiments as “a psychological resistance to a given element in the sales or sign-up process.”
That’s a somewhat abstract definition. Put more concretely, friction frustrates potential customers and causes a decrease in revenues and conversions.
It’s important to note that the definition is widely contested. Optimizers aren’t uniform in their definition. Chris Goward puts it succinctly when he says,
‘…the word ‘friction’ for conversion optimization is unclear and confusing. It’s hard to tell what it really means. I think the underlying problems some refer to as friction are more related to Anxiety-causing elements, or perhaps lack of Clarity, or Distraction-producers…Maximizing the Clarity of your communication, reducing Distraction from peripheral messages and design, and eliminating Anxiety-causing elements can produce massive business improvements in your marketing.’
Oli Garnder of Unbounce says,
“the psychological resistance that your visitors experience when trying to complete an action. Friction is a conversion killer usually caused by unclear messaging, lack of information, or poor layout.”
In other words, if your landing page is—or is simply seen or perceived to be—too overwhelming to complete, you can be sure there’s too much friction on your page. Your landing page’s sole objective is to get someone to make a purchase, offer their information, or optin—then get out of the way.
Reducing friction means making it easy for visitors to take action.
4 Types of Friction
Visitors will experience friction in one of 4 ways:
Information Friction: Information that you omit or commit can bring about friction.
Complexity Friction: This type of friction is making things more complicated than they need to be. The more complexity, the higher your risk of friction.
Time Friction: Time is crucial when considering your conversion optimization. This deals with things such as speed or load time.
Visual Friction: There are many varieties of visual elements that can either bring about or reduce friction: font kerning, video placement, background patterns, button color.
In your efforts to reduce friction, you must be able to identify elements on your website that create friction in any of these 4 areas. Then come up with a plan for reducing that friction.
Of course, your solutions are merely hypotheses at this stage.
You must test to know whether your assumptions were correct. And don’t forget your Crazy Egg heatmaps. They can help you figure out whether the elements on your web pages generate the behavior you expect (e.g., Are people clicking on the button or on something else?).
Start with the 5-Second Test
When analyzing sites for unnecessary friction from a qualitative point of view for, I typically employ the 5-second test.
If your site doesn’t pass the “5-second test,” your site is likely to have friction and thus a high bounce rate.
So what’s the five-second test?
The “5-second test” involves showing your website to someone for 5 seconds. Once the 5 seconds are over, if they’re able tell you what the site’s about, then you’ve passed the test.
Alternatively, if they can’t clearly articulate what it is you do, your website fails the test. A typical problem, amongst others, with sites that fail the 5-second test is that there’s unnecessary friction on the site.
Hence, it’s clear that a site that passes this “5-second test” is more likely to generate higher conversions.
This article is all about making your site as friction-free as possible so it passes this test, and making it pleasant experience, so users come back again and again.
We’ve identified 39 common points of friction, giving you a great place to start your optimization efforts. Ready? Let’s dig in.
[Tweet “39 Tips to Kill Conversion-Blockers and Boost Sales”]
1. Remove navigation and extra elements
Type of Friction: Complexity
Unnecessary navigation or any redundant elements on your site can cause friction for users, and thus distract them from the primary goal you have for them: making a purchase, opting in or subscribing.
Ideally, on every landing page you want to force the decision between 3 options:
- Becoming a conversion
- Looking for further information (but still remaining interested)
- Providing their email, so you can contact them in the future
Removing the navigation bar clarifies the purpose of that webpage better, and makes it easier for visitors to focus on the task at hand.
Example: MECLAB’s Experiment for Online Retailer.
Removing the top navigation and side navigation allowed this retailer to see a 10% increase in checkout competitions.
You might do better to put non-necessary elements (say, a privacy policy or a cookies policy) in the footer or even in another page.
2. One CTA per page
Type of Friction: Visual
A general principle in conversion rate optimization is only having one call to action per page.
Ideally, you don’t want to want to give the visitor too many options creates overwhelm and often causes them to bounce.
Example: Netflix
3. Improve your pricing page (for multiple packages)
Type of Friction: Information
A poorly set-out pricing page can cause a serious decrease in sales. Here are several ways to improve the layout of various price points and features in order to reduce friction.
Make a comparison table for various features available across packages
Example 1: socialgo.com
Example 2: groupspaces
Show features that are available to all users
Example: groupspaces
Accent aspect of your product or service that matter most:
Users are usually interested in several things: what package is right for me? how much does it cost? can I cancel if I am not happy? and can I try it for free?
Example: See how basecamp.com approaches this:
4. Remove “wish list,” particularly if it’s a feature customers don’t need
Type of Friction: Information
When an online store does not sell commodity products (e.g., books or consumer electronics), it’s unlikely that offering a wish list will increase sales. It’s more likely that it will create a sense of “I can just come back later,” which usually doesn’t happen.
By removing the “wish list” function, the store can be more focused on sales, and there is no super-simple way for customers to postpone the purchase decision.
[Tweet “Reduce Friction: Don’t make it easy for customers to postpone purchase. “]
5. Disable copy/paste or remove the “Retype e-mail address” field in signup forms
Type of Friction: Complexity
Some signup form contains a “Retype e-mail address” field. According to Smashing Magazine, “this allows for greater error, because it forces users to type more. They can’t see the characters they’re inputting, making it difficult to know whether they’re typing the right password each time.”
They recommend, instead, asking users to type their password in once, then allowing them to unmask the password to verify they typed it correctly.
6. Make “add to cart” button bigger
Type of Friction: Visual
The “add to cart” button should be the dominant button on the product page; your button should fluidly guide the user toward to the next step — clicking the ‘add to cart’ button.
Example: Betabrand (image courtesy of Lemonstand.com)
Example 2: Kogan.com
7. Make the “view cart” link more prominent
Type of Friction: Visual
People are used to finding the shopping cart link at the top-right corner of the web page. So that’s where yours needs to be. Don’t try to be creative. This link reminds users that they’ve added a product to their basket.
Example 1: Amazon. Here’s the link they use in the top-right corner of their design.
Example 2: Flipkart
8. Add a prominent “checkout” link to all shop pages
Type of Friction: Visual
Visitors should have no trouble completing a purchase once they’re ready to check out.
As with the shopping cart, people are used to finding the link to the checkout process in the top-right corner. The link should be right next to the “shopping cart” link and should be perpetual in its visibility.
Example: Here’s how Kogan displays the checkout button. My only recommendation would be to test a brighter color.
9. Website Loading Speed & Conversions
Type of Friction: Time
Page Load Speed is an important part of conversion rate optimization. There are several formal studies that recognize this connection.
- A study at Amazon showed a 1% decrease in sales for every 0.1 second decrease in response times. (Kohavi and Longbotham 2007)
- According to studies by the Aberdeen Research Group, the average impact of a 1-second delay meant a 7% reduction in conversions.
Slow web pages are perceived as less credible (BJ Fogg) and quality. To reduce friction, your page load times should be below tolerable attention thresholds—ideally less than 3 seconds. Friction will be reduced, and you should enjoy higher conversion rates.
10. Break your paragraphs up into chunks containing no more than 3 lines per paragraph
Type of Friction: Visual
Readability studies show that on the internet, to ensure maximum comprehension and the appearance of simplicity, line lengths of 50-60 characters per line, or 500-600 pixels wide, are read faster & more consistently by visitors.
Also, people have a tendency to read through to completion when chunks of copy are broken up into segments of three lines.
RECOMMENDATIONS:
- Break the current paragraphs up into chunks containing no more than 3 lines per paragraph.
- Implement copy that does not exceed 50-60 characters per line, or 500-600 pixels per line.
11. Put the relevant content on the left
Type of Friction: Visual
Since we read left to right, it makes sense to put relevant content on the left and less relevant content on the right or below the fold.
As you can see in this heatmap, most visitors attend to the upper left of the page. That’s where your most important messaging should go.
Google Golden Triangle by Amit Agarwal, on Flickr
12. Make your competitive advantage clearer
Type of Friction: Information
Returning visitors are likely to be familiar with your brand. But what about new users? To get them engaged quickly, you need to help them understand what your website is about.
Your tagline takes care of this. Making the tagline (or the whole logo) bigger makes it easier for visitors to orient themselves.
Example: Carelogger increased their conversions 55% after changing their tagline from “affordable, easy-to-use web-based contact manager” to “the quickest & easiest way to organize your contacts.”
13. Make your logo clickable back to the home page
Type of Friction: Visual
It is usability standard that the logo in the upper left-hand corner of your website links to the home page. If visitors can’t navigate, they usually bounce.
Don’t make your users think. Make it easy for them to navigate your site.
14. Improve product customization process
Type of Friction: Information
The biggest challenge in selling online is that visitors can’t touch or try on the merchandise. Users are essentially ”in the dark.” Do everything you can to showcase the product visually.
Rather than just putting color boxes, include images of the product in all colors.
Example:
15. Offer instant gratification
Type of Friction: Information
Your customers are busy, so you can often reduce friction by offering instant gratification.
If you’re a retailer with more of a bricks-and-mortar presence, you can offer the convenience of ordering online with in-store pickup. Talk about the best of both worlds! Customers can eliminate the shipping period but avoid long lines at checkout.
Example: Walmart.com (courtesy Punchbowl.com)
16. Show products in use
Type of Friction: Visual
By showing the products in use, it becomes easier for visitors to imagine using the products. Emphasize your product’s ease of use, beauty or the end result people will get, and place your image next to the call to action.
Example: Amazon
17. Make order history available for signed-in users only
Type of Friction: Information
Too much information is often distracting, which creates friction.
One way to avoid this is to require users to sign in before being able to see customer-only information such as the customer’s order history. It can be a part your customer drop-down menu when they sign in.
On a side note, this also encourages new customers to register with your site.
Example: see drop-down menu for signed in users on Amazon.
18. Provide the experience your customers want
Type of Friction: Information
Be “human,” not “corporate” when dealing with customers.
Create a “brand promise” that is completely customer-centric. Then publish it where customers can see it.
Examples:
19. Add links to detailed product pages
Type of Friction: Visual
Sometimes people don’t buy because they need more information. If you rely on short product descriptions to do the selling, you may need to test dedicated product pages with longer descriptions, more images, and even testimonials.
Example: Morgan
20. Make reviews a clickable link
Type of Friction: Visual
You may or may not show reviews on the product page. If you choose not to show them, make sure you make it easy to find them.
Example:
21. Make navigation menu simpler
Type of Friction: Complexity
Some navigation menus show so many options that the visitor is easily overwhelmed.
Example: Unidentified (courtesy Kissmetrics)
Rather than showing dozens of options, only show the top-level options to make the selection easier for the user.
Put your most important parent pages in your primary navigation bar. Other pages may be shown as child pages or linked to from other pages.
Example 1: Smith Brothers
Example 2: Sweat Vac
22. Increase font size to make the site more user-friendly
Type of Friction: Visual
The smallest font size you should ever use for text 12px. 14 pixels is often better. Anything smaller than that will make many visitors struggle to see the text.
Even the visitors who can read the current text without struggling will appreciate a larger font (without consciously noticing it).
Example: ClickLaboratory.com ran a CRO test for Numara Software testing font.
The test font (the variation) was larger and had increased line spacing. This simple font change reduced their bounce rate by 10%, dropped the exit rate by 19, and boosted the form conversion rate by 133%. No bad, don’t you think?!
Example 2: whoacceptsamex (image courtesy vwo).
Control
Variation: with a 18 px font size, as opposed to 12 px.
This variation resulted in 32.68% more clicks. See the case study here.
23. Check the speed of the home page slider
Type of Friction: Visual
If you use a slider on your home page, you may be frustrating visitors. Don’t allow the slider to transition so quickly that it’s difficult to read. Allow enough time for visitors to read and click if interested.
But remember, using a slider at all is questionable. People get impatient waiting on sliders and are likely to skip over them. The slider also makes the page unfocused since there is no longer one clear primary message.
If you use a slider, test carefully to be sure they’re optimized for your users’ preferences.
24. Don’t use the same image for multiple products
Type of Friction: Visual
Using same pictures for different products can create a lot of confusion. Visitors typically “read” images before text. Seeing the same image will likely indicate that the message is being repeated as well.
Use different pictures to indicate different ideas and messages.
25. Remove vertical navigation
Type of Friction: Information
For some users, scrolling may cause friction. They want to be able to see immediately what the page is about. Removing vertical navigation allows more above-the-fold space to present your core message. It also makes the page look cleaner and more intuitive.
26. Avoid inconsistencies in your site’s design
Type of Friction: Visual
Inconsistencies make the site feel poorly maintained, which can cause questions about the overall believability of the information.
When the site’s design changes, it creates friction in the customer’s mind. It may be subtle, but any amount of friction can make people leave your site.
Use same overall design on your site’s design to provide a consistent experience across the website. Also ensure those your design is consistent across web, email, mobile devices, online chat.
Example: Jetblue’s Homepage (courtesy NNGroup)
Jetblue email:
Jetblue mobile site:
27. Make your checkout pages’ design similar to main site and don’t redirect checkout
Type of Friction: Visual
About 67% of the people who put a product in your shopping cart will change their mind during the checkout process.
One way to get more people to complete their purchase is to make the design of your checkout page similar to the main site. (Remember the previous point, that design changes create friction?)
Copy the design from the main site to the checkout pages with no sidebar and the navigation bar from the design.
In addition, don’t redirect the checkout page to a new URL. A URL like
https://checkout.onlinestore.com/carts/3459089/b84ef00837934d73216f54db638e0502 creates doubts about where you are taking them.
28. Remove optional, irrelevant or multiple calls to action
Type of Friction: Visual
A guiding principle in conversion rate optimization is to have only one call to action per page.
Make the primary button the only logical next step to take.
[Tweet “Website Conversion Tip: Make the primary button the only logical next step to take.”]
29. Make your search bar larger
Type of Friction: Visual
One obvious source of friction is visitors’ inability to easily find what they’re looking for.
To help your visitors find the information or product they want, make your search bar more noticeable. You should offset your search bar with a different color from your site’s color scheme. It should also be more prominent.
Example: This is neatly accomplished in the search bar at theiconic, where the search bar is in the center of the navigation bar.
30. Use intuitive names for navigation tabs
Type of Friction: Information
If people can’t figure out your site, they leave. Period. So don’t be cute with your nav-bar tabs.
Can you figure out what this site is about?
Think about what visitors are used to seeing on websites—both in your industry and around the web in general.
If they’re used to seeing a particular word or phrase, it’s a good idea to use it on your site as well.
For example, many visitors are accustomed to seeing language relating to “Tour” or “How It Works,” when looking to explore more details about a site/product. That being the case, don’t call it “Wrks.”
31. Avoid too much white space in the page
Type of Friction: Visual
White space is good. But too much white space may be confusing.
Too much whitespace between the supporting content and your actionable area can bring about a sense of friction and cause users to see the call-to-action as a distinct and separate element, rather than a continuation for the text. Check this article out for more information.
32. Don’t ask people to see prices before they’ve seen the products
Type of Friction: Time
It is too early to start talking about prices on the home page. You should first let visitors explore the site, review their options and understand the benefits of your products. Only after the visitor wants the product should you start talking about buying (and prices).
33. But DO show your prices
Type of Friction: Information
To avoid people being scared off by your pricing, you may be tempted to hide it altogether. But when visitors don’t see your pricing schedule, they may lose trust.
If you don’t want to link to your prices from the navigation bar, at least put a link in the footer.
34. Allow forward and backward movement in checkout
Type of Friction: Complexity
In your shopping cart, the process steps at the top of the page should also function as navigational links for the checkout process. Customers often naturally expect to be taken back to the respective step when clicking it, in order to go back and edit previously entered data. (visual)
35. Make it easy to complete checkout
Type of Friction: Complexity
To avoid cart abandonment, make checkout as fast and easy as possible.
On your Cart Review page, put a “Proceed to Checkout” button above the product table as well as below. This will ensure that users will understand what to do next without having to scroll.
Example: Original
Variation: After (“Update” and “Checkout” buttons added)
36. Don’t be too aggressive in cross-selling
Type of Friction: Information
If you cross-sell in the cart, then at least place the extra products below the cart and primary button, and make the products as relevant to the cart’s content as possible
37. Simplify your contact form
Type of Friction: Complexity
Inputting information creates friction. So the longer your optin forms, the more friction you create. What is the least amount of information that still allows you to market effectively? Remove unnecessary fields to make the contact easier and more likely.
Current form:
Suggested form:
Example 2: Obama’s Online Campaign. Shortening the form led to an increase in donations of 5%.
38. Make trust seals prominent during checkout
Type of Friction: Information
Generally you want to place trust seals prominently on your purchase page.
39. Integrate email capture on your homepage as well
Type of Friction: Information
Visitors should not have to click to another page to be able to join your email list. Every additional page-load tends to create friction.
A two-step optin box (a lightbox that appear when a visitor clicks) or embedding the email opt-in form on the homepage itself eliminates extra steps.
Make your site as friction-free as possible
Our list, while relatively comprehensive, it’s by no means complete. The thing to remember is that any element on your website can create friction—and if they do, they likely reduce conversions.
If you want to improve your conversion rate (and who doesn’t?), you should constantly be evaluating your website for those elements.
Begin with the 5-second test. Then start hacking away at the points of friction we’ve listed here. It’s a sure bet that your conversion rate will improve as you do so.
What creates the most friction for you? Would you add anything to the list?
Read other Crazy Egg articles by David Rosenfeld.
