Welcome to the UX Rundown. In this series, we share quick, actionable UX breakdowns of real apps and websites – spot what works, what doesn’t, and learn how to apply it to your own designs.
Great UX isn't just about creating seamless experiences – it's about helping users avoid costly mistakes that could undo all your hard work.
In this UX Rundown, we dive into the JBL app's "Find My Buds" feature to explore how thoughtful design can prevent user errors before they happen. We'll explore Nielsen Norman's error prevention principle and show you how the JBL app uses smart design techniques to protect users from a potentially painful mistake.
Plus, we'll test a redesigned interface using Lyssna's five second testing to see how effective error prevention messaging can be. Whether you're designing apps, websites, or any digital experience, this video will give you practical techniques to build better safeguards into your products and help your users make confident decisions.
Chapters: 0:00 - Introduction to error prevention in UX
0:42 - JBL's Find My Buds feature breakdown
1:42 - Nielsen Norman's error prevention principle
2:30 - Common examples of error prevention (Gmail, Webflow, Venmo)
3:21 - Invoice Hub case study: when error prevention fails
4:13 - Testing the original design with five second testing
5:18 - Redesigning for better error prevention
6:05 - Testing results and key takeaways
Transcript
When you think of great UX, what comes to mind? Seamless, intuitive, easy, delightful. We usually think of great design as creating a positive, effortless experience for our users, but here's another way to think of it. How can we help them avoid the worst case scenario? You can spend days, weeks, months, tweaking and obsessing over every detail to improve the experience.
You might be overlooking the one negative experience that could undo all of that for your user. I'm Joe Formica, and this is the UX Rundown. In each episode, we take a look at real world apps, websites, and features to see what's working, what's not, and how you can apply some of those lessons to your day-to-day work.
Today we're looking at the JBL app, which is basically the companion app to JBL headphones and earbuds. It lets you tweak your sound settings, set up your controls, and pretty much personalize anything about your listening experience. Today we're taking a look at one feature that does a really great job of steering users clear of a mistake, and that feature is called Find My Buds.
Find My Buds is a simple, useful feature that allows you to trigger loud, high pitched sound to help you find one or both of your missing earbuds. I actually first saw this feature while I was playing around with the settings, and I almost triggered the high pitch noise while the earbuds were still in my ear.
Instead, I got this full screen safety check before anything bad happened. Clear headline, take off your earbuds. Big, bold visual, and a countdown timer that kind of acts as a speed bump to make sure that you read everything before moving forward. This is a textbook great example of one of Nielsen Norman's usability heuristics called error prevention.
Here's how they put it. Even better than good error messages is a careful design that prevents problems from occurring in the first place. JBL didn't just warn me about this, they made the risk unmissable. They anticipated the mistake and designed some safeguards and just the right amount of friction to stop me and make me think twice before moving forward.
This principle isn't just for earbuds. As a product designer, you're gonna run into this scenario all the time where a user could potentially make a mistake that they would regret. Our job is to give them a way to correct it, but even better than that, to design something that prevents it from happening in the first place.
You see this principle everywhere. Gmail gives you an undo send button a couple seconds after firing off an email. Webflow makes you type in the full project name to really make sure that you wanna delete it. And if you're sending money to someone new on Venmo, they make you confirm their phone number to make sure that that money's actually going to the right person.
All of these examples use a few key techniques. They clearly communicate the risk and the consequences, and they give users enough information to make a choice. They add friction when necessary to get users to stop and think for a second before just mindlessly clicking through. They offer clear next steps.
So you can either continue confidently or back out with an alternative option. JBL and these examples that I just showed got it right. But not every product does. Let's look at an example of a product that makes it way too easy for users to make a costly mistake. Imagine that you're using Invoice Hub to manage your client projects.
You just finished a big web design project for Sweet Treats Bakery, and you wanna clean up your dashboard a little bit, so you go down to the menu and click Archive. Looks harmless, right? But in reality it's probably gonna lead to some headaches because archiving a project does these three things. It disables your payment link.
So if you have outstanding invoices. Your clients are gonna get a broken link when they try to pay you. It hides shared documents and it disables comments and messages, so if your client tries to contact you there, they won't be able to, even if you're done with the project itself. Archiving this project could lead to a major headache and a lot of wasted time.
I thought that this mistake was a little too easy to make, but I wanted to test it out to see what others thought. There are lots of different ways that I can test this, but I decided to run a five second test in Lyssna. Here's how it works. Participants will see a screen for five seconds. In this study, I did it for seven seconds. And then answer some questions about it. Five second tests are great for a lot of things, but they work especially well for testing how clear and memorable your message is. Whether that's a value prop, a headline, benefits, or in this case, an error message that's meant to steer you away from a possible mistake.
Here's what I learned from running the first study. Most users didn't really understand what archive meant. A few caught the part about potentially losing access to files, but it was clear that this message wasn't particularly clear or memorable. 73% of participants said that yes, they would archive the project, which we know would probably be a mistake.
Clearly, this design and this warning was not doing enough to prevent that error. So here's how I tried to fix it. Taking some pointers and inspiration from JBL and some of the other apps we looked at, I added a large, bold visual warning at the top of the modal, and I added a little friction, some check boxes that users needed to go through and check off before they could even archive the project.
I also added some context to make the risk and the consequences of their actions crystal clear. Same thing goes for files and messages instead of just a generic warning. It's giving you a little bit more insight into the activities and the possible fallout of archiving this project. The goal was really simple in this redesign, which was to give people the information they need to confidently decide whether or not they should archive this project.
We tested it again using the exact same study in Lyssna, now with the new design, and the results flipped. Not only did people have a better idea of what archiving a project meant, but the vast majority of them said that no, they would not archive it, which in this case we know is the right choice. The big takeaway here is match the level of safeguards that you're providing to the level of risk and test it out to make sure that it's clear, whether it's protecting someone's ears or making sure a freelancer doesn't delete valuable files and links.
The principle is the same. Identify those potentially damaging mistakes and prevent them before it's too late. Is there another app feature or website that you would like to see me break down? If so, let me know in the comments, and if you liked this video and wanna see more real world rundowns like this one, throw this video a like and subscribe to our channel.
Finally, if you're ready to start doing some fast, efficient, effective testing to improve the stuff that you're working on, head over to Lyssna.com and get started for free. Thanks. See you next time.
