Ghost Buttons- tasteful design or usability error

Ghost buttons continue to be a popular design trend. But do they work?

You’ve probably seen them around: stylish, ethereal buttons with a solid outline and text but a transparent fill. They look elegant and classy, a subtler alternative to their louder counterparts. And it’s that very subtlety that has led to their popularity—and caused the biggest problems for users.

Ghost buttons have been a trend for a while, and they don’t seem to be going anywhere. But, while they’re popular with designers for obvious reasons (they just look so nice!), they do have their down sides.

Ghost buttons are problematic.

We talk a lot on this site about how websites must serve function over form. It doesn’t matter how nice your website looks if it’s unusable. And this is exactly the problem most of us have with ghost buttons: they look nice, but they don’t necessarily work. In general, criticisms about ghost buttons boil down to three main objections.

1. They can be hard to read.

If you have a busy splash image, or if you’ve adopted one of those trending video backgrounds, then all the visual confusion can make your ghost button… well, invisible.

Of course, many designers choose ghost buttons specifically for their transparency. With only the fine line weight to contend with, designers don’t have to worry about a button blocking out part of their image. But with such a featherweight presence on the page, it’s all too easy to ignore them entirely.

Hidden Crisis landing page: example of a ghost button that's hard to read.

Can you spot the ghost button? This example from Hidden Crisis is even worse in person: the video background ads confusion.

2. They don’t look clickable.

Here’s you word for the day: affordance. Affordance is a design principle that says objects should look the way they’re supposed to be used. E.g., You look at a coffee mug, and you instantly know to pick it up by its handle.

In the digital world, affordance is especially critical for guiding users toward the right action. And clicking is one of the most important actions users take online. Unfortunately, while many buttons can create a “clickable” look through a subtle gradient or use of a drop shadow, ghost buttons have neither. They’re just text in a square.

While many digital users are becoming more and more accustomed to the actions they’re supposed to take online, ghost buttons are sometimes a casualty. Most users will figure it out, but a fair few will take a few clicks to do so, and some won’t know what to do at all.

Example of an ultra-fine ghost button on the website parallax: is it even clickable?

Can you see the ghost button now? It’s so fine that it’s easy to miss, and it certainly doesn’t look like something you’d click. Definitely an affordance fail.

3. They don’t convert very well.

Possibly for the above reasons, ghost buttons often don’t convert as well as their solid counterparts. This isn’t true in all cases, of course. When legibility is high (ghost button on a white background, for instance) and the action is particularly obvious, ghost buttons can perform just as well as solid ones. But in the most important areas of your site (your home page or your landing page), this conversion lost can be a real nightmare for your sales team.

And, of course, conversion loss is often a sign that the users aren’t getting what they came for. After all, conversion optimization isn’t about tricking users into going places they don’t want to go. It’s about making it as easy and frictionless as possible for users to get where they want to go. If a page isn’t converting, that often means users aren’t getting to where they want to be.

Ghost buttons aren’t inherently bad, they’re just misused.

None of this means ghost buttons are terrible by default. It just means they shouldn’t be employed without care and consideration. For instance, ghost buttons can help establish hierarchy on the page. If you want a certain action de-emphasized, a ghost button is the perfect way to do it.

This is especially key for areas where you have a secondary and primary CTA, or when you have a bunch of similar CTAs all in one place and don’t want to confront users with a barrage of buttons (think about a review site).

From Adobe: Ghost buttons all of the same type.

These ghost buttons on Adobe’s site look fine: easy to read against a solid background, and the repetition makes it easier for visitors to understand what to do.

Solid buttons attract (and divide) attention.

Before all of this has you thinking that you should ditch the ghost button for good, it’s worth comparing their use to their solid counterparts. Part of the reason designers often avoid solid, colorful buttons is that they’re loud. They attract attention. They stand out like a sore thumb.

Which is, of course, their job. Solid buttons are there to be helpful. They should make it fast and easy for users to spot where they want to go. And if they have to be big and red to do so, that’s fine. (Just, for the love of god, don’t make them shiny and animated.)

But if you have too many bold, attention-grabbing buttons in one space, what do you think will happen? Your user will be torn between all the different demands on their attention, and the result will be a visitor fatigue. Too many CTAs in one place, and the visual cacophony will leave your visitor feeling undecided. And that’s also a usability error.

Solid buttons to help guide users to the right part of the site.

Two solid buttons used as CTAs to direct visitors to the appropriate part of the site. We assume Adobe weights these buttons equally because both personas are equally important.

Used in tandem, ghost buttons and solid buttons can be a usability win.

The solution, of course, is to thoughtfully use ghost and solid buttons together in such a way that visitors can get the direction they need without losing their options. There’s no reason to limit yourself to just one option. A variety of button styles will help you guide user behavior in a way that creates a more pleasing user experience.

An example from Evernote: Solid CTA to encourage visitors to sign up, secondary ghost CTA in the corner for businesses.

An example from Evernote of a solid primary CTA encouraging visitors to sign up and a secondary ghost button for businesses.

So, as a rule of thumb, use a solid button for the most important CTAs, and save the ghost buttons for either secondary CTAs, or for more functional buttons.

Maybe a better way to put this is that ghost buttons should primarily be just that: buttons—not calls-to-action. Because where’s the sense in creating a ghost CTA?

Published 05/03/18 by Laura Lynch