8 Bad UX Examples That You Can Learn From

Here at Userpilot, we talk a lot about how to design your UI effectively, but sometimes I think that bad UX examples are even more instructive.

To take your understanding to the next level, you can study the UX mistakes made by other SaaS companies, not just your own.

So, here’s a collection of bad UX examples from SaaS tools.

TL;DR

• GetANewsletter’s product tour is so linear that they ask you to do one step before you’ve finished the previous step. An interactive walkthrough that pays attention to users’ in-app behavior would be smarter.
• IPVanish sent a marketing email appealing to the lowest common cultural denominator. It would have been better to do more user research and speak to the needs of each segment individually.
• Buzzstream tried to fill their product with every link-building feature on the planet but would have done better to focus on fewer features and ensure those are discoverable.
• Amplitude wanted to serve customers with a modal but didn’t let users exit it without clicking the CTA. Long-term, it’s more beneficial to respect users’ autonomy.
• Pendo’s product tours are too focused on unengaging purple tooltips. More variety and more interactivity would make for a more interesting user experience.
• ClickDimensions’ captchas require you to find so many images that it borders on the neurotic. They should consider balancing users’ security against usability.
• Citibank created a search bar filled with text on what a search bar is. They would have done better to cut out the text entirely, and be more concise.
• Whatapp’s messages leave an awkward residue behind when deleted. It would have been better to fully deliver on their promise to delete the messages for all users.
• LinkedIn’s Discover feature greets users with a blank slate. It would be less overwhelming if they were to replace that with demo content.
• Apple interrupts you with an annoying modal if you run out of space while taking a picture, and it’s not clear to users how to deal with it. It would be smarter to make the next steps clearer to the user.
• Many of the above issues can be mitigated by using designated onboarding software such as Userpilot, as opposed to trying to reinvent the wheel.

Bad UX example #1: GetANewsletter’s linear product tour

GetANewsletter is a tool that allows you to send email newsletters to your subscribers.

Like many SaaS companies, its onboarding flow begins with a product tour. The intention is to show off the core features of the product so that customers know what to do and can get stuck in.

Unfortunately, GetANewsletter’s product tour is a linear one, and this is where the problems start.

As this gif shows, GetANewsletter is in such a hurry to show off all their features at once that they prompt the user to send a newsletter before they’ve successfully added their email list.

Consequently, their user flow is confusing.

Lesson: the value of interactivity

The UX design lesson here is that product tours need to be interactive in order to make sense to users, like Kommunicate’s tour here:

What GetANewsletter should have done is to set “Uploaded Email List” as a custom event, and then only show the subsequent parts of the tour to those users who have completed that custom event.

By failing to see their product tour as an interactive conversation with the customer, they will end up turning off more users than they activate.

Bad UX example #2: IPVanish confuses trendy with timely

IPVanish provides VPN services to consumers and businesses.

When all the corona madness began a couple of years ago, I received this email from them:

Not to be too harsh to IPVanish, this was actually one of several emails I received from SaaS companies around the same period.

They all sought to outdo each other in how concerned they were for my well-being in this stressful time.

Here are some more nauseating copywriting examples from my inbox:

• “We all need to pull together to get through this crisis”
• “Use our product to ensure your business still has customers in these challenging times”
• “We’re giving away 5% of our profits to local hospitals”

Perhaps these emails won the occasional sympathy vote, but this is really just empty virtue signaling, disguised as an attempt to be trendy.

Lesson: be timely, not trendy

A better way for IPVanish to get my attention would have been to ignore the popular narrative, segment their customer base, and conduct rigorous user research to discover what my particular segment cares about.

Speaking to a user’s individual needs is always going to be more appealing (not to mention more sustainable long-term!) than empty rhetoric.

Bad UX example #3: Buzzstream’s low feature discoverability

Buzzstream is a database for managing the building of links for SEO purposes.

Linkbuilding is an extremely complicated process, and Buzzstream set out to give their customers every single feature they could possibly need: from Domain Authority and link status updates to email templates and performance analytics.

This was no doubt well-intentioned, but unfortunately, Buzzstream is just painful to use, and this screenshot shows why:

Can you imagine looking for a specific feature, such as link-building analytics? It’s like looking for a needle in a haystack.

Even the search bar isn’t immediately obvious. You’d expect it somewhere to the top left or top right, on the main navigation.

From a product management point of view, this looks like a UX that hasn’t undergone enough user testing.

Lesson: less, but better

Buzzstream’s UX designer needs to read about Essentialism. Author Greg McKeown has termed this philosophy: “the art of doing less, but better.”

Buzzstream’s conscientiousness in trying to offer their users so many features at once is admirable. But, in practice, their customers would get more value out of a platform with fewer features that were laid out more clearly.

My favorite example of a minimalist UX comes from Airtable. Their signup page has the absolute minimum of features needed to be effective:

Bad UX example #4: Amplitude forgetting to add an X to a modal

Amplitude is a sophisticated product analytics suite. They’re used by companies as large as Ford and Walmart, so they must be doing something right.

With this modal, however, they definitely miss the mark:

Imagine you were doing something really important before this modal popped up, such as looking at analytics for your power users.

Perhaps you really don’t want to be disturbed in the moment, so you look for a way to exit the modal.

But there is no X button on this modal.

Your only choice in the moment is to click “Accept,” or flip through the settings in the hope that you find a way to opt out.

This is manipulatively leading users towards clicking “Accept” even if they don’t want to, and the subtle guilt-trip in the header makes this even more egregious.

Lesson: respect your users’ autonomy

Amplitude’s desire to get their customers to accept their cookie requirements is a reasonable one, but that doesn’t mean that the customer shouldn’t be able to say no if they choose.

Consent is an important value.

This is doubly true for something as disruptive as a modal. Modals are literally designed to get the user’s attention by taking up most of the screen. That’s all well and good, but the user needs a way out as well, like there is in this modal from Dropbox.

You might lose out on having customers click your CTA in the short-term, but in the long-term, you’ll garner their trust.

Bad UX example #5: Pendo’s excessive use of tooltips

Pendo provides software to help SaaS companies onboard their new users.

We’ve previously written about their product tours here, and one example from that research bears repeating in this article.

Pendo’s product tours consist largely of purple tooltips such as this one:

They do have other UI patterns as well, but the initial product tour that you see when you first sign up to Pendo consists almost exclusively of tooltips.

Now, there’s nothing wrong per se with the tooltip as a UX design feature. Userpilot has them as well, and we’ve written about their versatility here.

But if a user is going from tooltip to tooltip and just reading the dialogs, without any interactivity, that’s not really going to inspire much engagement.

I’d be prepared to bet that someone who learned a product through action (or, better yet, play) will retain more information than someone who only reads about it.

Lesson: mix up your UI patterns and keep things interactive

A better approach would be to vary the UI patterns you use, and include more hotspots, modals and driven actions. Good onboarding software will keep the options for creating all these features together to underline this point, like Userpilot does here:

Wherever possible, it’s also advisable to wait for your user to take an action before giving them the next UI pattern. By “action,” I don’t mean read the previous pattern. I mean actually do something real with your product.

Bad UX example #6: ClickDimensions’ neurotic use of captchas

ClickDimensions is a leading marketing automation platform built for use with Microsoft Dynamics.

One feature that they offer is the ability to add multiple image captchas to a form. The thinking is that adding captchas will help keep the form more secure.

While this feature is almost certainly well-intentioned, it’s frustrating from a user’s perspective.

Whenever I see something like this, I sometimes ask myself: just how many pictures do I need to click on in order to move this process forward? This amount of friction is bad UX, period, especially if it’s popping up in the middle of something important.

Image captchas like these are often part of unnecessarily complicated password requirements as well. I have rage-quit new platforms in the past because they wanted me to go through round after round of image captchas during registration, with no apparent end in sight.

Lesson: balance security with usability

It’s fine to want to keep your platform safe, but consider that a moderately safe platform with thousands of users is better than a perfectly secure fortress of a platform with zero users.

Here’s a signup flow with just the right amount of friction:

The more excess friction you add, the more your users will churn. You have been warned!

Bad UX example #7: Citibank’s excessive verbosity

Citibank is one of the world’s largest banks.

There are numerous times in user onboarding that call for brevity. Consider:

• A tooltip that is so long that it blocks the UI.
• A modal that is so detailed that it disrupts the user to the point of anger and churn.
• A product tour that wants to take you through every single individual feature on the platform, not just the 3 that you actually care about.

None of these are very pleasant user experiences.

I came across another example of this from Citibank yesterday:

Most of Citibank’s users will understand the concept of a search bar, so this copy is wholly unnecessary, and even patronizing.

Lesson: make every word count

When you’re evaluating your UX before you release it to the public, have a good hard look at your writing. Ask yourself:

• Is there a section that is just fluff?
• Is there any corporate jargon?
• Are you stating the obvious, like Citibank in this bad UX example?

Cut all of it out and say the bare minimum that you need to get your point across.

Look how concise Facebook is in their copy here, by comparison:

Bad UX example #8: Whatsapp’s delete message feature

Even massive messaging platforms like Whatsapp aren’t immune to poor UX choices.

There are times in life when you want to delete a message without your decision to do so being seen by the person you sent it to.

Unfortunately, when you try to do this on Whatsapp, this is what happens:

Lesson: honor the promises you make to your customers

From a UX design perspective, this is a horribly confusing result for Whatsapp users.

If you see “delete message for everyone,” it’s natural to expect that your message will vanish entirely for all parties.

What you don’t expect is that a residual part of your message will remain, showing the other person that you wrote to them but want to hide your original message.

If your company says that your product will do something, then it’s up to you to deliver on what you say.

So when Slack says they’ll give you the opportunity to provide feedback, they follow through on that promise.

Be like Slack, not like Whatsapp. Your customers will judge you otherwise.

Bad UX example #9: LinkedIn’s empty states

One of the many features that LinkedIn offers is the ability to join groups of likeminded professionals.

If you’re already in groups that are benefitting your career, you’ll probably be interested in joining more of them. So LinkedIn released the Discover feature, which allows you to do just that.

In practice, this is what the Discover feature looks like:

It’s rather daunting for a customer to be confronted with so much empty space, waiting to be filled.

Unless they have an incredibly compelling reason to persevere with the Discover feature, a user might be more tempted to play games on their phone, check Facebook, and generally procrastinate on getting started with using Discover.

A professional UX designer would call this example of bad UX an “empty state.”

Lesson: fill empty states with demo content

Fortunately, there’s an easy solution to this one.

In cases where a new user hasn’t created content yet, it’s customary to give the user demo content like Mixpanel does below, so they can see what your product might look like once they’ve started inputting their data.

From the user’s perspective, this means that your platform feels less lifeless than it would have done with an empty state.

The fact that it now requires less activation energy for them to get started with using your product is also a nice bonus!

Bad UX example #10: Apple’s storage management system

Yes, even the brainchild of design icon Steve Jobs has been known to create bad user experiences.

Imagine that you’ve just got engaged to your partner. You’re elated, and want to share your special moment with the world, so you grab your iPhone to take a picture. And here’s what you see:

It’s a bit of a mood-killer, to put it mildly. You’ll have to spend the next few minutes working out what other photos to delete before you can get back to enjoying one of the most meaningful moments of your life.

Lesson: give the user a clear next step

What’s especially annoying about this particular example is how there’s no obvious way out of this modal.

There’s no X to tap on, if you were thinking of deferring this problem until another time.

If you tap Done, the notification will continue to stick around in the background, pestering you until you free up space.

And if you do what I think Apple wants you to do and hit Settings to free up some space, there’s no clear way of seeing what to delete and what not to.

All in all, a very frustrating user experience.

Very different to this cancellation survey, with its two crystal-clear options.

Conclusion

We hope that you’ve learned something from these bad UX design examples.

There’s no shame in making mistakes: everyone does it. The question is: can you learn from your mistakes and from those of others?

If you’re looking for software that will cut your learning time in the field of onboarding down to a minimum, you should give Userpilot a try.

Userpilot will let you build UI patterns using pre-made templates, without having to mess around with code, saving you time and money. Get a demo today!