Ghost Buttons in UX Design
by Nick Babich
In 2014, one of the dominant design trends to pass through the UI design world has been the ghost buttons. Ghost buttons are those transparent and empty buttons that have a basic shape form, such as a rectangular or perhaps squared. They are also have titles like “empty”, “naked” or “hollow” buttons.
Ghost buttons are generally bordered by a very thin line, while the internal section consists of plain text. They most often appear as Call to Action (CTA) buttons and offer a clean look.
These buttons are often somewhat larger than traditional clickable buttons on pages and are placed in prominent locations, such as the center of the screen. Trendy and effective, when done well, they attract attention with high contrast while putting a new spin on the “flat” look.
Ghost Button’s Origins
The first website that mentioned the term “Ghost Buttons” came from the Tumblr blog websites with ghost buttons. The origin of the Ghost Button came from the flat design revolution and ghost buttons become trendy when Apple released iOS 7. Many of the buttons on iOS’s UI are what we would call a ghost button.
Simple and plain rectangular shape in combination with neat font inside the frame look perfectly within flat UI.
I Ain’t Afraid Of No Ghost!
Let’s now have a look at some of the positive aspects that the ghost buttons can bring to your design and user experience:
- Easy to design. Simplicity is a key reason that makes ghost-style buttons so popular. They are easy to create even for a novice designer. The most popular shape for the ghost button is a classic geometric shape (flat rectangular or oval box) with no visual decorations or animated elements.
- Help to create focal points. With properly chosen background and well-outlined contrasting border ghost button attracts attention without giving a user overwhelming impression.
- Improve aesthetics. Ghost buttons help designers keep UI clean. They’re excellent space savers and aren’t distracting since a background image is completely viewable. The simple nature of the button allows the primary design of the page to really stand out more.
- Easy to integrate. Ghost buttons work with almost any design because they easily blend into the environment of a design.
Ghost buttons may appear alone on a page or be combined in groups. The main idea is to use a ghost button in prominent places of the page to make it noticeable for users.
Things to Consider When Designing Ghost Buttons
While ghost buttons come with a lot of design pros, there are some moments to consider as well. Before designing your app or site, make sure to weight both pros and cons to determine if this concept will work in your project.
Ghost button as a call-to-action button
In most cases, using ghost button as a primary CTA isn’t a good idea. You can see the problem in Bootstrap example below where the ghost button Download Bootstrap looks almost the same way as their main logo.
Often it’s better to use ghost button for secondary or tertiary content, since it will not (or shouldn’t) compete with your primary CTA. You ideally want the user to see your main CTA and then if it’s not relevant skip over it to the secondary button.
Specular site is a good example — it has a flat button as a primary ‘Purchase Now’ action and a ghost button ‘Take Tour’ as a secondary button.
Takeaway: Using a ghost button as a primary CTA goes against conventional wisdom, and it’s best used for secondary or tertiary actions.
Design predictable interactions
Ghost buttons, when they aren’t placed wisely, can look like input fields . For example, can you spot a button ‘Get Access’ on the page below? It not a simple task even for savvy users.
Takeaway: Ghost button can sometimes become a real ghost and blend with the overall layout.
Provide a Focused State
Offering a good visual feedback to users that they’re hovering over a button is good practice. But this moment is especially important for the ghost button, since users might be in doubt if this is a button or not.
Be Careful With a Background Image
Ghost buttons can fall too far into the background and frustrate users. The transparency of ghost buttons can lead to problems of text legibility. Many times there isn’t enough visual contrast when you place text in a ghost fashion over an image. In the example below, the site uses a full screen photo as background. The button is CTA which invites users to click in order to discover more information about the company.
Takeaway: As far as ghost buttons are usually used on photo backgrounds, it’s essential to use contrasting colors for borders and inner text to make them more prominent.
Conclusion
Every button (classic or modern one like ghost button) is meant to direct users into taking the action you want them to take. Button UX design is always about recognition and clarity. A smooth handover keeps the conversation flowing along; glitches such as an unable to find a right button, at best, as interruptions and, at worst, as breakdowns.
For more information about button design you can read following article: Button UX Design: Best Practices, Types and States
Thank you!
Originally published at babich.biz
