Content placeholder : The new design trend for audience involvement!

YouTube’s latest Content Placeholder on thier website. A perfectly crafted and neat CP.

Year-by-year technologies change and cast trend with their new technology. UI/UX is one such dynamic field. One has to be in the competition for the very existence. The new trending edition to the UI/UX field is the Content Placeholder(CP)!

The giants of internet keep themselves updated and push new features on their products to create a sense of excitement in the user that keeps user aggressively involved in the product or to expand their market to keep the competition alive. But what has Content Placeholder to do with? Sounds funny! However, the truth is that the tech giants want the audience involved enough so that they bundle their benefits high. Content Placeholder is one such trending design element.

What is Content Placeholder?

Loaders were developed to distract users a few moments and facilitate the heavy backend work happening by adding design overlays. Content placeholders(else called skeletons) are the new loaders. Speaking design, these are elements that provide a rough skeleton of what content is going turn up on the screen.

Card as an example of CP

These are generally basic shapes that take-up the place of actual presentable content. Upgraded versions include a looped diagonal flash light that glares on the shape or a blur out effect. In most recent implementations, profile pictures and images posts appear to be circles or rectangles respectively but the interesting one is text. Text is masked by rectangular stripes of text size which nicely fades out into actual text when loaded. These mostly appear on the top of the stack of content or the homepage of app/websites. In general, CPs are like rough sketch that a designer thinks even before implementing the UI elements. Advantage of having CPs in the app/website is that they not only tell what quality of content might appear but also in what quantity of it would appears. Over decades loaders have failed to do such a thing and this might just takeover it in short-time.

The Strategy

Content placeholder are already being adapted by many companies to replace the old pre-loaders. This technique is proved to have the attention of the audience in a very unique way.

Loaders generally depict that “there is content ahead” but what Content Placeholder do is “there is so much of content available, just give it some time, it will appear”. This motive develops curiosity in the content viewers and psychologically is made to wait for the feed/content, rather than coming back after a while. More or less like “something is better than nothing”! This happens mostly in low speed internet, however, still very effective even in average and above speeds. As our expectations for mobile experiences change, so does our understanding of performance. People expect web apps to feel just as snappy and responsive as native apps, regardless of their current network coverage.
Illusion of speed : Perceived performance is a measure of how fast something feels to the user. The idea is that users are more patient and will think of a system as faster if they know what’s going on and can anticipate content before it’s actually there. It’s a lot about managing expectations and keeping the user informed.

Facebook’s early implementation of CP

The Pioneers

Facebook is first to implement one of it’s kind. In early 2017, CP element rolled out and competitors seek it’s boon in their product. Facebook has adapted it for their new feed/posts/cards with the moving diagonal flash light.

Google Drive’s Quick Access feature with Content Placeholder

Google drive has done it on their new Quick Access feature. Instagram for their stories. And most recently YouTube(picture in the beginning of the article) did it on their website too(which was the main reason for me to write this article). YouTube took it to a whole new level. The entire site before loading looks pretty much like a plane of neatly organized sets of shapes. Circles for navbar list, Rectangles for the videos, stripes for Text. The entire video list is masked by CP’s.

Ripple effect

Eventually major tech companies involved in social media, blogging, content exhibitors, VLogs, etc., will start applying this feature. Facebook started the ripple and now has reached Google's major websites. So this will be adapted by most companies like Vimeo, Snapchat, Pinterest, LinkedIn, dribble, dating sites and might even be in Google’s Material Design 2.0. Basically whichever product has a list/grid view of content will be adapting this or its extended versions to stay in the trend. This feature will ripple until it becomes old enough and eventually die out. Kudos to Facebook for creating the ripples!