Ghost buttons & skeleton screens

Kristijan K.  October 29, 2018

Ghost buttons 👻

What are they?

One of the most dominant design trends from 2014, and is still being used today, are the so-called ghost buttons. They consist of a very thin bordered line and a plain text.

1_ghost button.png

Apple is the first to use them in their flat design movement starting with iOS 7. Many of the iOS native user interfaces use buttons that we would call a ghost button.

How are they used?

They should always be used as a secondary call-to-action button, never as the main CTA. There are some examples of websites using them as a primary CTA, but in our experience, this is not a good practice. You should be careful when using them because many users that are not used to these modern elements would often consider ghost button as a not clickable element. If you want the user to click on that button, use the primary button option instead.

2_example.png

Not all buttons should be the most important ones, we know that from the user’s UX standpoint. Less visual information = more happy users. If the user has to think which of these two buttons should he click then more often than not, they would get frustrated and that is not a good thing. This is why we would consider using a ghost button for the second option, rather than two primary ones.

3_yes_no.png

Skeleton screens 💀

What are they?

Everyone hates waiting, but even with the fastest internet speeds and the best technology you can’t avoid loading or buffering. That is why you should design your apps with every situation in mind, even the bad ones. And that is where the skeleton screens come in handy - they are type of another loading screens, but with distinctive UX advantage when compared to a standard spinner loading screens.

5_skeleton_screens.png

To make it really simple - Skeleton screens are placeholders for the real content. The real advantage here is that the user would look at the skeleton screen and he would immediately understand what could be the image, text, button or any other element. When the app loads, a user only has to read the text or look at images because he is already familiar with the structure.

To the user, this looks like the screen he is looking at is loading faster. This is a much smoother experience than looking at the loading spinner, which doesn’t give any information to the user, only that they are waiting for something.

What are they?

The thing to consider when using the skeleton screens is that they really are placeholders, meaning the user should have the option to interact with the screen. This most often means that the user can scroll through the screen while waiting for the content to load.

Do not refresh the page when the content is loaded. The user should be the one in command with its scrolling.

Do you like scary stories? No? Good, here is one for you:

App: LOADING, SHOWING THE SKELETON SCREEN
User: Oh, thanks app, I am just gonna scroll to see how much content there is…
App: CONTENT LOADED, REFRESHING
User: Hey, who moved my screen? Was it a ghost?
User: *closes the app and screams in terror*

4_skeletons_dancing.gif

Conclusion

You are wondering, what do the ghost buttons and skeleton screens have in common? Nothing, in particular, they just sounded scary and we needed that for the title. All jokes aside, they both are something that can improve UX and UI but should be carefully evaluated before used in your next project.

Need help with some scary design choices? Who you gonna call? Ghostbu… No, sorry, I got carried away. Cinnamon Agency, you should call Cinnamon Agency :)

arrow white

Previous article

Watch your language with UX writing

Get in touch

Tell us about your project, ask us any question or simply say hello.

SEND A MESSAGE