https://www.pexels.com/photo/photo-of-man-touching-his-head-3752834/

One huge, glaring thing to avoid if you want to maintain quality UI/UX.

Overview

This one got brought to my attention recently, and I never thought that I would legitimately see this done in professional design software.

Today we’ll be going over one huge, glaring thing to avoid if you want to maintain quality UI/UX.

WARNING: what I am about to show you is a usability anti-pattern that you’ll want to avoid at all costs. DO NOT REPLICATE THIS UI PATTERN!

The offense

Most of the time infractions of usability heuristics are reasonably tame. They’re a simple mistake, no one meant to do it, and can be fixed in a reasonably simple way.

https://www.pexels.com/photo/man-sitting-in-front-of-three-computers-4974915/

That said, every once in a while I run into one that needs to be called out and talked about openly, because it’s not gonna get better if we don’t.

Take a look at this export panel and tell me what’s wrong with it:

Right off the bat you should see the problem, but I realize that it’s small, so just in case you can’t quite make it out:

This is a Class A Party Foul, and needs to be called out as such, ESPECIALLY because it is occurring on a design platform that so many companies rely on: Figma.

This is Figma. THE UI/UX design software of choice for hundreds, maybe even thousands of companies worldwide, which is why I was so shocked to see it sitting right there in their main UI.

→ This is a pretty flagrant violation of the third NN usability heuristic, which posits that users should always have control of the system to the highest possible degree as they work both with and through it.

The reason this is such a problem is because it creates confusion for users who are either trying to export items or get help, but especially if you’re trying to export items which is a core feature of Figma.

In essence, the problem is this: overlapping interactive elements wreak havoc on a users ability to perform tasks effectively.

Trying to export something? You have to work AROUND the floating help button. This creates unnecessary friction and BAD USABILITY, especially when this item could have been placed elsewhere in the UI such as:

• In the top bar,
• In the main menu

You know, where you’d expect to find help and documentation?

Huge amount of real-estate, just put the help prompt up here, and out of the designer’s way.

Why am I ripping on this so hard?

Now I understand why some people may be confused as to why I am ripping on this particular violation so hard. Kinda seems like I’m making a mountain out of a molehill?

https://www.pexels.com/photo/gray-and-brown-mountain-417173/

It’s probably a mistake; it could easily be fixed with some CSS (literally one line with display: none; if you didn’t want to remove it from the codebase) and put it somewhere that users would expect to find it.

→ Here’s the rub: Figma is an entire UI/UX design platform and ecosystem that thousands of designers and companies use on a daily basis to create their products.They should absolutely know better.

• I could write it off if it were a new comer,
• I could make a case for it if it was an experimental work in progress,
• but this is a real product by a real, professional team, used by other real professionals everywhere.

I’m calling this out, because it’s not just a nitpick, it’s a violation of usability heuristics that is seen by thousands of designers every day, and it sets a terrible example for the next generation of designers.

The bottom line

So what does all this mean for you?

Simply put:

Don’t overlap interactive elements that control core features in a way that can’t be dismissed by a user, just don’t do it.

No only will it make your product stronger, but it will make your users happier; ultimately leading to greater engagement, and higher satisfaction.