Partner-Gastbeitrag von André Vieira, Founder and Head of Optimization bei Looptimize
Wir freuen uns, André als Gastautor vorstellen zu dürfen. Als wahrer Experte im Bereich Customer Journey Optimization hat er schon über 100 Unternehmen dabei unterstützt, eine möglichst reibungslose CX zu gestalten. 2019 hat er die internationale Agentur Looptimize gegründet und ist Teil unseres Partnernetzwerkes. Heute teilt er exklusive Insights mit uns – enjoy reading!
Friction can be defined in many different ways. My take on it is simple: friction is anything that keeps your website visitors from accomplishing their goals when browsing. Blocking people from doing what they want or need to do is a quick shortcut to creating shopping experiences that feel bad and frustrating.
Your customers will certainly leave your platform if affected by friction in the wrong place or at the wrong time. With so many alternatives available in almost every segment you can think of, it’s easy for people to go around scavenging for a frictionless experience elsewhere.
Friction can derail the customer experience. Image: sparks being generated from friction. (Source)
In this article I’ll talk about three specific friction sources encountered in ecommerce, going through real examples and offering suggestions of what to do about each case. Of course, many more sources exist, but in my years of experience as an optimizer, I feel like these three often get overlooked by companies.
The three specific friction sources are:
Let’s get into it.
1. Latency in key website actions
Latency in websites is a classic example of friction. Your website must be snappy for the experience to remain smooth in customer journeys.
You are probably tired of reading about the importance of having fast page load speeds — many articles have been written about that and many tools exist to help you with this aspect of your website.
Your website can’t be slow like a turtle. Image: turtle walking in the sand. (Source)
But the speed at which the page loads is just one part of the equation. The time it takes for specific elements on your pages to react after visitors interact with them can matter a lot too.
Similar to page load times, the gap between an action being carried out and its effect happening on the screen can’t be too long. Whenever latency exceeds certain thresholds, the wait becomes noticeable to visitors, negatively affecting user performance and conversion rates.
How slow is too slow?
Research conducted in the University of Lübeck concluded that for people to have the perception that a system runs instantly, the latency between input and output can’t be longer than 100ms (0.1 second). Even delays as small as just 30ms can be noticed by humans and will sometimes harm the evaluation customers have of the experience provided by your website.
In similar studies, the NN/group detected that delays longer than 1 second can cause the human flow of thought to be interrupted.
Delays between 200ms (0.2 second) to around 900ms (0.9 second) make visitors feel like the effect is not being caused by them, but rather by an interface or mechanism that is processing their input in order to generate an effect. This, in turn, creates the perception of delay, which tends to harm conversion rates.
The sweet spot for reaction times in interfaces lies in the 0ms (instant) to 200ms (0.2 second) range. When visitors expect the output of their actions to be instantaneous, 200ms is the longest acceptable latency for them to have the feeling that they are the ones controlling the effects they’re observing on their screens.
Latency matters a lot in a CRO context. Image: stopwatch in a person’s hand.(Source)
These latency thresholds become especially important in PLPs (product listing pages) and CPs (category pages), which are the spots where you can find an element that usually takes longer to respond than our 0.2 second sweet spot: product filters.
Latency in product filters
Starting with product filters, the challenge here is that your website generally has to process the filter options selected by visitors and then fetch back-end data in order to display the selection of products that fulfills the chosen criteria.
It’s difficult to make this interaction fall within the 0ms to 200ms rule described above. Not every ecommerce feature can run as fast as a Formula 1 car.
On the bright side, it’s fair to say visitors generally don’t expect this much speed when interacting with filters. Very few online stores have filters capable of reacting that fast.
Checking data I’ve collected over a few years of optimizing dozens of ecommerce websites with my agency, it seems most product filters take between 1 to 4 seconds to process inputs and display results. Which, mind you, is just anecdotal evidence, but browse around a bit and you’ll see this reaction speed is fairly consistent in most of the world’s largest online retailers.
Try to make sure your filters respond at least that quickly as well. It’s not farfetched to assume that the learned behavior for customers at this point is that filters can take a few seconds to respond, and that’s okay.
In cases where filters (or any features for that matter) can’t react as fast as we’d ideally like them to, the best practice is to offer visitors visual feedback, enabling them to understand that the system is processing their input.
This is normally done with elements like animations of spinning shapes or progress bars. Both help mitigate the perception that the website is slow, giving people something to look at while they wait.
Quick case study: Coolblue
Coolblue does a great job here. Even though their filters usually take longer than 1 second to process, the spinning icon makes it clear that there is new stuff being loaded.
The fact that the page does that dynamically (eliminating the need to reload the entire content) is also positive. They get bonus points for reducing the opacity of the area of the page where the new content will appear too, which helps visitors understand there’s a process happening and they need to wait.
GIF of Coolblue’s filters in action. (Source)
How do I measure the latency in the interaction with page elements?
The easiest way I know of doing this is through Google Chrome’s DevTools, which can be accessed in your browser by pressing the F12 key.
In it, you want to go to the “Performance” tab. After going to that tab, use Chrome to navigate to the page where the interaction for which you want to measure the latency is located. Now, in the Performance tab, hit Record.
After hitting Record, carry out the action you want to measure on the page. Wait for the effect of your action to happen on screen. Then hit the Stop button.
This will generate a timeline with a bunch of information in Chrome’s DevTools.
At the bottom, you’ll see a sequence of thumbnails — screenshots of the action you recorded.
When you hover over these thumbnails, you’ll get a bigger screenshot to check. That’s what we’re interested in.
Notice that by that point you already have a “Summary” tab appearing at the bottom of your DevTools. The Summary statistics get filled up depending on the range of time you selected in your timeframe.
We want to select a range that starts right when we interacted with the element (e.g. when we clicked a filter option) and ends when the effect of the interaction became visible on screen (e.g. when the website shows the results of the filter on screen).
The range you select can be controlled by just clicking and dragging your mouse on the timeline. Tiny gray indicators appear at the top showing you what range is currently selected (the selected range appears over a white background, the rest of the timeline appears under a blue background).
You now have to use the screenshots to find the part of the timeline where your interaction started and ended.
It will be hard to be 100% precise here since every frame gets recorded — moving your mouse just a tiny bit while hovering can cause the timeline to jump multiple frames forward. Just try to get as close as possible to a perfect selection of the range you’re interested in, that should already be good enough even if you are off by a few frames.
After you are done selecting your range, check the Summary tab. The number you want is the one that appears under “Total”. That’s the latency of your element.
Here’s a GIF of myself doing this exact process to measure the latency that exists when selecting a filter option Cooblue’s website:
Of course, this method is not perfect. It only measures the latency in your computer, with your ISP and your network settings. The latency for other visitors might be drastically different. Nonetheless, this method is a good starting point and will enable you to check how long it takes for features on your website to react.
2. Misplaced interruptions
Pop-ups, lightboxes, modals, full-screen takeovers, you name it. There are tons of different interruption mechanisms currently being used by marketers and optimizers alike to catch the attention of their visitors and hopefully drive sales. However, when implemented without the necessary considerations, these elements can do more harm than good.
Interruptions are generally not perceived well by humans. We’re not exactly thrilled to be taken away from a task we are trying to carry out while it is still happening. Nevertheless, it is still okay to interrupt visitors here and there during their journeys as long as you keep two commonly ignored aspects in mind when doing so: targeting and timing.
The level of frustration an interruption will cause depends on:
a) How clear the goal is for the consumer who’s being affected by the interruption, and…
b) How the information offered by the interrupting element relates to that goal.
According to a study from Lan Xia and D. Sudharshan, if visitors have a concrete goal, they’re less likely to process the interrupting element you’re putting in front of them unless they identify that this element can help them accomplish their goal.
On the other hand, visitors with broader or more abstract goals tend to spend more time examining the messages contained in the interrupting element as long as it appears early in their journey on the website.
Late interruptions are less likely to have an effect for visitors with abstract goals because at later stages in the funnel, these visitors have already formed preliminary preferences based on what they have seen in the early stages of their journey.
Visitors just don’t like being interrupted. Image: laptop with an image saying no to popups and ads. (Source)
We can tie these findings back to search queries and campaign types. Consider placing fewer interrupting elements in journeys that come from long-tail search queries. These people already know what they’re looking for. No need for interruptions here. Just help them find the products they searched for and buy them ASAP.
The same recommendation goes for visitors who come from marketing campaigns directed at highly motivated audiences that tend to convert quickly.
In this scenario, you have actively paid money to get these people to see pages on your website under very specific contexts. The promises you’ve made in your ads will set the tone for the visit. Introducing one-size- fits-all interruptions with content that is not directly related to the ad this audience saw before will likely make for an annoying experience.
Considerations also need to be made about the when. Interruptions that happen early in the shopping experience tend to be perceived as more negative.
It’s fair to assume this happens because the visitor’s mind is elsewhere — they’re busy getting acquainted with the information that’s being presented, scanning the offers, figuring out where they want to go next and so on.
Anything that takes attention away from these early shopping stage tasks can be perceived as noise and that includes any interruptions.
That said, when interruptions happen at later stages in the purchase process, they’re perceived as being less disruptive, with visitors generally taking longer to read through the presented content and also taking longer to make a decision.
Try to only interrupt visitors when you’re fairly sure that what you’re offering with the interruption will be relevant for them. For example, if you can give visitors a discount on the specific category they’re browsing, that’s a relevant interruption. It’s okay to do it.
On the other side of the spectrum, blasting a newsletter signup pop-up on your visitors’ faces when they barely had time to read the content presented in the first fold of the page is probably just going to add friction to the experience. The same goes for pop-ups asking visitors to download your app or PWA when their visit duration hasn’t even crossed the 1-minute barrier yet.
Quick case study: Costco
Image: Costco’s homepage. (Source)
Costco’s website is an interesting example. It almost immediately interrupts new visitors coming from Google by showing them a banner requesting their ZIP Code in order to check if 2-day delivery is available. Combined with the newsletter slide-in banner on the bottom-right corner, this could stop visitors on their tracks, thus creating friction.
It’s hard to say for sure, but I would imagine the natural flow for customers in this context would be to first sweep the page, checking if they are interested in any products, to only then start thinking about shipping options. The timing of the interruption might feel off for some people.
It is also important to factor in customer satisfaction. Interruptions might affect your NPS scores and similar customer satisfaction metrics.
While the same study mentioned above indicates that interruptions do not affect the level of satisfaction customers have with their choices, the same could not be said for their perceived satisfaction about the shopping experience itself. Participants were not as satisfied with their shopping experience compared to situations where they weren’t interrupted.
3. Lack of guidance after the homepage or campaign landing page
Over time, marketers and optimizers got pretty good at solving the puzzle of selecting which guidance elements to show on the homepage (commonly found by those who search for the brand name on Google) and on top level campaign landing pages (the usual entry point for people being actively targeted by campaigns or people searching for the name of products or categories your online store sells).
Beyond these two page types however, friction can creep in as visitors are often left to their own devices when browsing the next pages in their journey across your store. These are often category pages (CPs), product listing pages (PLPs) and product detail pages (PDPs).
Most ecommerces end up offering just the basics (product grid, regular filters, old-fashioned product descriptions, etc.) without adding explicit directions about what visitors could do. It can be difficult to decide where to click or tap next. Similarly, figuring out what is the fastest way to find what you’re looking for can become a steep undertaking too.
Gotcha! But how to offer more guidance in those pages then?
Our goal is to break this choice paralysis by implementing stronger guiding mechanisms. I’ll leave some examples of solutions which can be done for CPs and PLPs — pages that work in relatively similar fashion — and then for PDPs next.
Adding guidance mechanisms on category pages and product listing pages
One easy way to guide visitors on CPs and PLPs is to show them some recommended filters or sorting options close to the product list. If you already know which filters or sorting criteria tend to lead customers to a purchase, promote those in a visually appealing way. Doing so removes friction from the experience by narrowing down the amount of choices to pick from.
The Beer Cartel has a “Show Only in Stock” filter highlighted at the top of their list of filters. One could think a smarter approach would be to just send the out-of-stock items to the bottom of their CPs and PLPs or hide them altogether, but taking this route could end up hiding viable options for beer enthusiasts who wouldn’t mind waiting for a new stock to arrive.
The Beer Cartel’s product listing page. (Source)
It is worth A/B testing what happens to customer behavior if you actively categorize and name some filters/sorting options as “recommended”. This approach gives visitors a strong starting point if they are feeling lost.
You should still keep other filters/sorting options available though. Just make sure the most commonly used and most relevant ones are easy to spot and receive special visual treatment.
Another powerful way to remove friction and anxiety is to make it easy for visitors to save products for later. Your wishlist feature can be used for that purpose. Just having the feature won’t suffice if people don’t notice or think about it — consider showing visitors a one-time reminder that they can save products to see later after they have browsed your page for a couple of minutes. Don’t pester visitors more than once, though.
Most stores ask visitors to create an account at this point since it is a prerequisite for the website to store their data and enable them to use the wishlist. However, asking for an account introduces friction. If you go this route, try not to ask for too much information during the signup process. Cover the basics and let people come back later to fill up the rest of the necessary data in case they decide to buy.
Even better: if possible, offer people ways to come back to their list of products later without creating an account (generate URLs to the lists of saved products, for example). This usually requires more development firepower to pull off, but can lead to great results provided you already have data showing that this is a feature that could help out your customers.
Next up, consider using the space you have in these pages to make recommendations and describe use cases for the products shown. This can be done either for the whole category or for individual products.
Di Bruno Bros. neatly blends recommendations and descriptions into their CPs and PDPs. The top area of their pages educates visitors about the category they’re navigating, listing facts and suggesting combinations that would go well together with their variety of cheeses and cured meats:
The header of Di Bruno Bros.’ brie & creamy category page. (Source)
They do the same for products, using one-liners to describe the most essential characteristics of their products, sometimes even mentioning which season or situation is a perfect match for the food you’re looking at.
These descriptive sentences aid visitors by adding context to the interaction. It can remove the need to open the PDP by already presenting some of the most commonly sought after information directly on the CP or PLP, effectively acting as a pre-filter of sorts.
Di Bruno Bros.’ product descriptions on category pages and product listing pages. (Source)
And what about product detail pages?
Visitors are in a more advanced stage of their journey at this point. The guidance mechanisms we can offer them have to reflect that.
If possible, display options that enable people to talk to your team in order to sort out questions and get advice related to the products you sell. A chat feature is enough in most cases. Make sure to reinforce it visually so that visitors notice it’s there. Consider going as far as having dismissable elements pointing to it if necessary.
Best Buy does this well by using “Help” in the badge copy, followed-up with an option to “Shop with an Expert”. In this case, the appointment has to be scheduled, which is not ideal, but still better than not having the option at all.
GIF of an interaction with Best Buy’s help badge. (Source)
Another common pain point on PDPs appears when visitors want to discover more products only to find themselves forced to return to the CP or PLP in order to do so. Adding cross-PDP navigation options helps people browse without leaving the page they’re already in.
Happysocks Brazil has an interesting take on this. Their website allows you to binge-consume the catalog of products by clicking on “next” and “previous” arrows at the top.
GIF of an interaction with the product arrows in Happy Socks Brazil’s product detail page. (Source)
You can try and create shortcuts for visitors by including elements describing how the product can be used and what is great about it as well. Enable people to evaluate at a glance if this is an offer for them or not. “Great for…” or “Ideal in situations where…” are common ways to phrase this type of content. If you can do so based on what other customers are saying about the product, that’s even better.
The example from Di Bruno Bros. presented earlier already shows one way this can be done on CPs and PLPs. But for PDPs specifically, we can look at Crocs.
One of the main concerns when purchasing shoes online is how well they will fit. Crocs’ PDPs have an element right next to the size selector named “Customer Fit Report” — a 5-point scale ranging from “Feels Small” to “Feels Large” based on input gathered from consumers.
Crocs’ customer fit report on product detail pages. (Source)
This makes it easier for customers to evaluate their purchase. But this is not the only interesting element in Crocs’ PDPs — they also display icons that quickly explain the key premises of the product, speeding up the evaluation process customers will conduct in their heads.
The icons Crocs shows on product detail pages. (Source)
Frank body does something similar. They write fun product descriptions explaining how the product should be applied and what the feeling on your skin will be like. These descriptions come together with sets of three icons that make it possible for anyone to understand the main features of the product without having to read through the entire copy.
Product description and icons on frank body’s product detail pages. (Source)
While these are not the most common types of friction visitors will come across when navigating, they might be responsible for nasty effects in your conversion rates. Stay alert to these sources and do your best to remove any momentum-killers from your website’s customer journeys.
It goes without saying at this point, but make sure to test everything. Details matter a lot in many of the examples provided above — think of different implementation possibilities for each mechanism.
Finally, don’t be afraid to ignore what the usual best practices say. Your customers are unique. Your solutions might have to be as well in order to cater to their needs. Finding ways to do that might require you to use measures you wouldn’t find while exploring the beaten path.