Where did the ghost button come from?
The ghost button gained popularity mainly in 2014; in fact, it was one of the biggest graphic design trends. We’re not surprised. It’s elegant and doesn’t spoil the aesthetics of the design – which is probably why designers love it so much. But it does have its limitations. Many users simply overlook it.
There is no Czech equivalent for the ‘ghost button’; the English term has become established. It is a button that is graphically simple, transparent, and usually uses just one colour – often white or black.
Examples include the ‘Free Delivery’, ‘Magazine’ buttons, or the button on the banner at zoot.cz
Why do users ignore these buttons?
Do you know who really loved using ghost buttons? Tony Stark as Iron Man. He had ghost buttons inside his helmet and in his office. In fact, he didn’t have a monitor; his computer projected everything directly into the space in 3D, so all he had to do was wave his finger. But not every user is Tony Stark – a genius with an astronomical IQ (after all, the technology used in the film doesn’t even exist in reality yet). Most computers aren’t Jarvis with artificial intelligence either. An ordinary user will therefore easily overlook the button and be left wondering where on earth they’re supposed to click.
The Canadian agency Unbounced put this to the test. They created two versions of a homepage and tested them – one with a prominent button and the other with a ghost button. Apart from that, the pages were completely identical.
Where would you click? On the page with the ghost button, users clicked most frequently on the round images, which are not buttons. Users then left disappointed, and there were no conversions. You can clearly see the results on the heat map.
The entire study was presented by Oli Gardner at the Marketing Festival.
Advantages of ghost buttons
- They are very easy to create in Illustrator or Photoshop.
- Although they are trivial to produce, they give the page a polished look that looks good.
- Subtle, linear buttons look modern and lend a sense of order to the graphic design.
- Thanks to their simplicity, they can be easily combined with other elements on the page.
Disadvantages of ghost buttons
- A less prominent button can blend into the background completely in the graphic design.
- They can lead to a reduction in page conversion rates.
- They can cause readability issues. Generally speaking, black text on a white background is easiest to read. If the background does not provide sufficient contrast to the text, the user may fail to read what is written on the button.
It cannot be said that a ghost button is an entirely bad solution. It can be a perfect fit for certain designs, for example for architects designing modern buildings. A web designer should therefore carefully consider how and where to use it. Not sure whether such a button is suitable for your website? Test it using user or A/B testing.