Placeholder Loading UI
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 timeline feed, search result list, and article list.
It seems like a good alternative to the loading state since it re-enforces the content layout, hence it sets the user’s expectation 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
Subtlety
Placeholder loading state shouldn’t draw too much attention. Therefore the color scheme should be subtle.
Loading Animation
Placeholder UI is another form of loading state, therefore it’s important to maintain an indication that things are going.
Transition to the actual content
One opportunity to maintain a good user experience is to prevent any jumpy transitions 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.
