Ghost Buttons — Not as bad as we thought?

If you want to derail a UX team’s productivity for 20 minutes, mention ghost buttons and back away slowly. Opinions will be shared, like...

Ghost buttons don’t follow traditional usability conventions as they have limited affordance that they are ‘clickable’ — users won’t click them and conversion will drop!

and…

No, users don’t need affordances anymore, they know how to use the internet old man!

Links to articles will be provided as ‘evidence’ of where it does / doesn’t work. We’ll debate aesthetics vs usability.

Ghost buttons are often touted as low-affordance, and it’s true of many of the examples that we share — buttons with poor contrast placed over images making them difficult to use (such as here). This confounds the tests (beautifully explained here) — we say we are comparing ghost buttons and ‘normal’ buttons but we are really testing accessible vs inaccessible buttons, high vs low contrast designs, high affordance vs low affordance designs (and it’s not a surprise that ghost buttons lose).

How would a ghost button compare against a solid button when both are accessible?

Before this experiment, I’d taken all the research at face value and thought ghost buttons wouldn’t work. If I was going to try them they were going to at least be accessible to give them the greatest chance of performing. We used a thicker border than our solid-colour buttons to differentiate the figure and the ground to focus attention and minimize perceptual confusion and cognitive load in locating the button (as per Gestalt Theory).

We tested 4 buttons on a call to action (CTA) to write a review about your company — the primary SEEK pink button, our secondary blue button, our secondary grey button and we snuck in the ghost button experiment to put the debate to rest (or so we thought).

Our first test was a 4-way split between all the colours. Our concern that grey would underperform, as it looks ‘disabled’, was proven correct as it saw a drop in conversion of 8.6% from the control. Surprisingly the ghost button performed better than grey and pink, and similar to the blue button. After 10 days we had not reached statistical significance as blue and ghost kept flipping between first and second place, but they were clearly ahead of the other variants.

Test 1–4 way split of Pink, Grey, Blue & Ghost buttons

Test 2 only compared blue and ghost and ran for 10 days. At the end of the 10 days the buttons were performing identically. When looking at end to end conversion (actually completing a review) blue was slightly ahead of ghost, but not in a statistically significant way. The ghost buttons performed as well as our secondary blue button, but no better. Therefore, there was no case for the challenger (ghost) to replace the control (blue).

Test 2 — Blue & Ghost battle it out

What does this mean for ghost buttons?

While the ghost button performed well, we’re not making a site wide change based on this one test. This test was on secondary actions that a user can take on these pages, and there is still a concern that ghost buttons will not give enough visual weight to the primary action on a page (the one thing we really want them to do). Typically, we reserve SEEK pink for the primary CTA on a page as multiple strong pink buttons compete with each other and dilute the CTAs. Multiple strong calls to actions is lazy design, it splits attention and puts the cognitive load on the user to figure out what to do next, when we as designers should be guiding them.

These results don’t mean that ghost buttons will work everywhere, or that we should be replacing our strong pink primary actions with ghost buttons. It would be interesting to see whether the buttons would perform as a primary CTA within our apps… watch this space for more tests.

Overall, I have to admit, I was surprised. I was sure the ghost button would perform worst, or perhaps only better than grey. It just goes to show the answer to any UX question, no matter how much we think we know, is it depends and to test it with real users. That UX is like quantum physics — your interface is both excellent and horrible, usable and unusable, at the same time. It is not known which until it has been tested with real users and observed.


This post originally appeared on my website http://www.kaylaheffernan.com/blog/2017/10/15/ghost-buttonsnot-as-bad-as-wethought

A huge thanks to cameron rogers for ‘letting’ me put a ghost button on SEEK. Even though we both thought it wasn’t going to work (informed by 25 years of UX experience between us) we wanted to get the data to put the debate to rest. Turns out the numbers went against what we expeceted ¯\_(ツ)_/¯