5 Signs Your Product Has Outgrown Its UX: The Little Black Dress

I don’t wear a dress, but I’ve watched enough Project Runway to know why a little black dress is a staple to most wardrobes. Firstly, it’s versatile. It’s a quick solution to any kind of fashion ensemble, elegant or casual. And second? Who doesn’t like how they look in black? I lose five pounds every time I put on this Van Halen t-shirt.

This post is a continuation of our “5 Signs Your Product Has Outgrown Its UX” series. If you haven’t already, you might want to start at the beginning with “Does This Make My App Look Fat?”

There’s a little black dress in web app design. Designers absolutely love it. They use it to solve all kinds of navigation problems when things start to scale, and holy moly does your app look great in it. But that’s where things start to be problematic. A solution shouldn’t just be convenient, it should be right. And while a little black dress is usually a good thing, this little black dress is a big no no for your application.

Hidden Navigation

What am I talking about? Hidden navigation. This UX anti-pattern has quickly crept into designs everywhere. It is the practice of hiding links, actions, and other options behind a single piece of UI.

The story usually goes something like this… your application launches as an MVP with a limited feature set. Everything goes great. Time for phase two. Then on to phase 3. Pretty soon, that feature set isn’t so limited.

All of this new functionality needs to go somewhere. But you’re dealing with limited screen real estate, and some of these features weren’t even anticipated in your initial scope. As a quick solution, you start turning to hidden navigation to solve the problem. Hidden navigation can be many different things, but usually it manifests in three ways.

Hamburger Menus

Enterprise applications usually carry an enormous amount of functionality. As such, their primary navigation can suffer the most. Rather than dealing with a large list of links to clutter up the design, many people incorporate a hamburger menu to sweep it all under the rug.

No big deal, right? I used to agree with you–until I saw the data. It turns out, applications that use a hamburger menu for their primary navigation see a huge decrease in engagement with their end user. If people can’t see the options, they don’t go looking for them. And no matter how ubiquitous this pattern may seem, this problem isn’t really improving. That’s why companies like Spotify, Facebook, and even Google have been shying away from this practice.

If you’d like to read more about the hamburger menu problem, James Archer did a great write up called “The Hamburger Doesn’t Work.” Put simply, it’s bad for discoverability and bad for engagement. It’s not the answer you’re looking for.

“More” Buttons

Ok, so you’re smart enough to avoid the hamburger menu. But what if you just take some of these new features and put them in a menu labeled “More?” Or maybe we call it “Extras,” or “Other.”

You might as well call it “Stuff we didn’t know where to put and people will never actually use.” As was already mentioned with the hamburger menu, discoverability and engagement takes a huge hit when users can’t see their options. And this button might start out innocent enough, but it can quickly become a huge catchall of unrelated features. And while some users might initially find what they are looking for, eventually they’ll just stop looking.

Secondary Interaction Options

When things start to get really desperate, that’s when people start trying to take insane shortcuts by inventing unorthodox interactivity. Maybe users can right-click on this menu button to get more options. Maybe the user does a two-finger swipe to change accounts. Gestures! Tripple clicks! Alt+Hover!

Welcome to crazy town…

Stop. Please, just stop.

This is never a good idea for core functionality. If you want to build shortcuts into your app for power users, that’s fine. But when it comes to primary features, don’t ever depend on a solution like this. “We’ll just train the user,” is a slippery slope to not having any users.

The Solution

While this can be a problem that impacts a large portion of your application, the solution is usually pretty straightforward. Simply put: accept this as a constraint and find other ways to utilize screen real estate. There are always options if you chose to see them.

Explore alternate screen layouts. Maybe it’s time to consider a sidebar menu rather than top navigation. Stop clinging to a sticky navbar that eats up screen space (It’s 2018, scrolling is ok!). Maybe it’s time to cut down the padding and label sizes. Maybe you can even stop using labels altogether; well conceptualized icons can be just as user friendly and take up a much smaller footprint on the screen.

Whatever you do, get creative. Push your design team to find a solution.

Sure, that little black dress looks appealing. And it sure makes you look thin. But it’s all wrong for your users. Give them what they really want: visible, easy to use navigation.

Need a Tim Gunn Moment?

Need some help tackling a complex navigation problem? That design isn’t going to fix itself. Our designers love solving hard problems and making beautiful, easy-to-use interfaces. Make it work!

5 Signs Your Product Has Outgrown Its UX: The Little Black Dress