Web Design Trends: Ghost Buttons

Web design trends also affect the appearance of CTA (call to action) buttons: different colors and outlines, text fonts, sizes and location on the page. The ghost buttons stand out. They are not yet so popular in Russia, but they are often found on foreign sites.

Whether it is a user experience disaster or effective web design, you will learn in this article.

Ghost buttons: pros and cons

How are they different from regular CTA buttons?

• Thin outline
• Transparent background
• Larger than normal buttons
• Thin font
• As a rule, the outline and font colors are the same – white or black.

Such buttons look organic in a minimalistic or flat design of the site, emphasize its elegance and restraint:

Text: “We believe digital platforms should inspire and improve the world.”

A call to action: “View our work.”

Thanks to their simple design, they do not overload the page and make it easier to read.

And here is a domestic example – the project SingingForYou:

The function of the ghost buttons is to subtly draw attention. This is useful when there are multiple calls to action on the page: keep the secondary buttons discreet so they don’t distract from the main CTA.

For some sites, there is no need to highlight conversion calls to action. They focus on product information, USP, social proof, etc. Then transparent CTA buttons help:

Text: “Good morning! Personalizing digital experiences for your customers. “

Call to action: “Learn more”, “Try for free.”

The main drawback is poor contrast with the background image. Users may not notice where to click and leave the site without taking the targeted action.

Ghost buttons do not look like clickable elements and can therefore degrade user experience and reduce conversions. Whether this is really so – testing will show.

A / B test

The subject of testing is the call to action button on the main page of the Fresh Egg digital marketing agency website.

Here is the original pink button design:

Text: “We work with amazing brands.”

A call to action: “View our work.”

Option with a transparent button:

Testing tool – Optimize 360. Sample – 10 thousand visits.

The result is minus 20% for the number of CTA clicks in the second option. The test confirmed expectations: bright buttons attract more attention.

Click test

The click test will show whether users will notice the button and how quickly. Task – for example using AskUsers tool test the work of regular buttons and ghost buttons.

The screenshot shows a click map, the areas on the page where users often clicked in search of the CTA button are marked with colors:

Text: John Stewart Rose Water.

Call to action: “Buy tickets.”

On 3 sites with minimalistic design, the number of “errors” (when users clicked past) and the average click time of the button were measured.

Click test # 1 (Rosewater)

Click test # 2 (Gorilla)

Text: “Great experience”.

Call to Action: Next.

Click test # 3 (Integra)

Text: “3D visualization”.

Call to Action: Get Demos.

The first table contains the “error” rates:

In the second, the average time per click (in seconds):

The transparent button is more difficult for the user to notice and interact with. Click-Test # 1 performed worse: buttons in the corner of the page are easier to ignore than in the middle.

For ghost buttons, the error rate is higher and the time per click is longer.

Attention test

This test using artificial intelligence tool EyeQuant will not show how users click buttons, but will reveal which ones are getting more attention.

The tool estimates how much each pixel catches the eye. As a result, you get the average attention per pixel within the element (in our case, the buttons) and within the entire screen.

The rate of the regular button was 60%, while the ghost button was 38%.

The table contains attention indicators for all variations, as well as averages for ghost and regular buttons:

Ghost buttons lost on all indicators in all variations.

Conclusion

If users can easily find a call to action, it is not necessary to distinguish it from other elements. Not the fact that this will lead to an increase in conversion.

Testing has shown that regular buttons perform better than ghost buttons. When choosing a button, consider what effect you expect from the CTA. And don’t jump to conclusions – check with real users.

This article was prepared based on materials from conversionxl.com.