Placeholder Loading UI

Poyi Chen
Poyi Chen
Mar 21, 2015 · 2 min read
Image for post
Image for post
Facebook’s default loading cards

I had the chance to think about this pattern recently and see how it can be integrated into the projects I’m working on. After exploring the use cases and trying a few iterations with my co-workers, there are a few takeaways.

Main usage & benefits

This placeholder loading pattern is suitable for interfaces that display a stream of similar content types, especially when loading state is desired. Some examples include , , and .

It seems like a good since it , hence it of where things are right away (given that it mimics the actual content layout).

This should only be used as the initial loading state when no actual content is available for display yet.

Notable attributes

Image for post
Image for post

Subtlety

Placeholder loading state shouldn’t draw too much attention. Therefore the.

Image for post
Image for post

Loading Animation

Placeholder UI is another form of loading state, therefore it’s important to .

Transition to the actual content

One opportunity to maintain a good user experience is to between the placeholder loading state and the actual site content. One way to accomplish a smooth transition is to fade the content on top of the placeholder interface.

This post documents my findings on a particular design pattern. I love to hear your thoughts or experience working with this pattern. Feel free to comment on this post or tweet at me.

Anatomy of Web Interface

Collection of articles on web interface elements

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store