Dropbox banner UX

While I don’t use Dropbox, some of my clients use it send me files. Today I noticed this UX anti-pattern on their site with the banner at the top of the page:

My browser window was wider than this screenshot. I immediately moved to dismiss the banner, and instinctively clicked the X icon on the left. The correct button to close the banner is on the right.

This banner seems to be originally designed to be an error message, but here it’s being used promotionally. My guess: Someone pushed for a site-wide promotional banner for the discount, and maybe they didn’t have a banner design for promotional use yet, so they just used the error banner.

Why is this bad? #

• The banner uses two icons that aren’t distinctively different from one another, and both could be confused for an action
• The banner is red, and combined with the left X icon, communicates an error or problem, which doesn’t fit with the promotion they’re trying to communicate

How can we improve the banner? #

There’s two ways I’d improve this: Use a banner better styled for promotions, and change the icons on the error banner to be more distinct.

Here’s a quick mockup I came up with, based on the colors present on the page:

The first banner is the current banner, the second is my idea for an improved error banner, and the third is my idea for an improved promotional banner.

Alternatives to banners #

I’m not convinced banners are the correct pattern to use for advertising promotions, though marketers may disagree. The goal of running promotional discounts is to attract new users, and ideally, you would want as many users to notice the promotion as possible.

The top of the page is the most prominent place and would get the most eyeballs. However, when I see banners or modals, I don’t read what’s on them most of the time – my first instinct is to get rid of the annoyance, and try to close or dismiss them. I don’t think I’m alone in this, and for me, it’s almost like a reflex.

The top of the page is also a tired area for UI elements. That’s usually where the navigation lives, and unless I’m trying to navigate to another page, I’m not looking up there, I’m mentally blocking it out as I look at the content below it. If you’re trying to advertise something, placing a message in an area that users habitually ignore may not be the best place, even if it’s the first thing on the page.

This image illustrates what I’m talking about:

Some alternative patterns I’ve seen include notification-style toasts in a corner, snackbars that float on the bottom-center of the page, or a small card tucked away at the top of the sidebar. The sidebar card is a pattern WordPress.com uses, and I like this pattern because it’s out of the way, yet still stands out. Dropbox has a sidebar and I think this would fit in well.

Summary #

• Use icons that are distinct from icons used for actions
• Don’t use an error message banner for promotions
• Ask if you need to use a banner, consider exploring less annoying and potentially more impactful alternatives