How to quantify and reduce friction in user experiences
Friction analysis is a process I learned at Lucid Software to identify and remove bad friction in user experiences. In this blog post, I’ll teach you how to conduct one by looking at an example from my work as a UX designer.
Friction analysis has many benefits. It forces you to think deeply about interactions. It helps people using your product get things done faster. It convinces stakeholders working alongside you of the severity of a problem. It can move business metrics. It can quantify your impact as a designer.
A little while ago, I set out with my product manager, Lars Bucio, to conduct a friction analysis on our upgrade flows in Lucidchart. The results of that analysis not only led to more delightful user experiences but also a +2.4% increase in signups, a +4.2% increase in trials, a +3.3% increase in bill through, and a +524% increase in credit card field interaction.
So, what is friction analysis?
Friction analysis is a process originally created by our VP of UX, John Dilworth, and based off an old HCI technique called Keystroke Level Modeling. He taught our team how to run this type of analysis a few years ago and it’s quickly become one of my favorite tools. Conducting friction analyses helps us at Lucid ‘build to delight’ and generally includes 5 steps:
- Analyzing every step in a user experience
- Generating a baseline friction score
- Improving the design
- Generating a new friction score
- Implementing and learning
Helpful tools to use for friction analyses
- Lucidchart allows you to easily create flow diagrams and sum the number of steps within them. Here is the link to a template I made in Lucidchart for friction analysis.
- We used a tool created by John Dilworth to help with friction analysis and documenting journey maps (comment if you’re interested in trying this out).
Step one: Analyze every step in a user experience
Choose the experience you want to analyze and make a detailed list of every step within that experience. This involves noticing and writing down everything a person has to do: tap, click, press, swipe, hover, type, read, scroll, decide, move mouse, etc. It also involves noticing and writing down everything the system takes time doing: page loads, modal opens, modal closes, menu opens, menu closes, popup opens, popup closes, etc.
Each step or action in an experience will have a “friction point” or score assigned to it. One friction point is similar to one second and for most steps, you can simply assign one friction point.
How step one looked for us
We started by analyzing every step in our Lucidchart upgrade experience. As you’ll see below, we included a screenshot of each step in the flow and wrote out every detailed step within the experience. On the fourth screen, you’ll see that we added a couple of additional friction points to the “page loads” step because it was a lot longer than one second.
Step two: Generate a baseline friction score
Look through your list from step one and assign a friction score to each item. Most items will just have a friction score of 1 (about 1 second). Then, sum up all of the friction points to create your baseline friction score. Or, let Lucidchart do the calculation automatically for you.
How step two looked for us
We ultimately decided to focus in on our payment page to start. There were 26 steps on that page, estimated at 1 friction point each, making our baseline friction score on the payment page 26 friction points.
Step three: Improve the design
Brainstorm and come up with new designs with less friction. This step involves thinking critically about how you can reduce the number of clicks, scrolls, page loads, or whatever type of friction you found.
Broadly applicable ways to reduce friction
- Pull things out of drop-downs If there are only a few options within a dropdown, pull them out into radio buttons to save people from moving their mouse over to the dropdown and clicking it to learn what’s inside.
- Remove extra questions or inputs Challenge any existing steps within an experience to make sure they are truly necessary.
- Auto-select key inputs For instance, when you click a ‘login’ button, you should be directed to a login page with the username field auto-selected. You shouldn’t have to move your mouse over to the input and click it to start typing.
- Improve performance While this doesn’t involve changes to the UI, improvements to the time it takes for a page to load or a transaction to go through can significantly decrease friction within an experience.
How step three looked for us
We made several changes to the design but the biggest change was in the usability of our credit card field. Before, when people finished typing in their credit card number, they had to move their mouse and click the expiration date field to start typing. With the new design, the credit card fields are smart and auto-progress you to the next step when you finish typing. View the full list of the changes in the image below.
Step four: Generate a new friction score
Do the first two steps again but with your new design. List out every action a person has to take in the new experience, assign friction points to each step, and then sum them up. Make sure that you stay consistent in the number of friction points you assign to similar steps in the new design vs. the old design.
How step four looked for us
We wrote down all the steps in the new experience and it came to a total of 19 friction points. If you do the percent change math, (26–19) / 26, we were able to reduce friction in the experience by 26.92%.
Step five: Implement and learn
Hopefully your team is bought into the work you are doing and has room for ‘reducing bad friction’ on its roadmap. If not, it may take some convincing, but I have seem teams get excited over a new project when I show them a friction analysis that quantifies the excess pain and clearly proposes changes to reduce it.
How step five looked for us
Our new payment page was implemented but it took breaking it down into two separate chunks and some time. We were slightly worried that by pulling our billing cycle out of the dropdown, we may get less signing up annually. However, it ended up being the opposite and we saw a 3.5% increase in people signing up for annual plans.
This is where my journey with friction analysis began, but certainly not where it ended. The analysis and positive results of the A/B test paved the way for future ‘reduce friction’ focused tests on the Growth team at Lucid.
If you don’t have time to run a full friction analysis today, I hope you at least try to adopt a ‘reduce friction mentality’ when it comes to your work. What design are you working on right now? I challenge you to take a look at it again with fresh eyes and just see if you can make it even more simple. You might be surprised!
Acknowledgements
- Lars Bucio Thank you for your buy-in, support, and ideas from the product side. I couldn’t have done this project without you.
- Growth team engineers Thank you for your genuine excitement over this work and implementation.
