Placeholder while loading

I'll appreciate your opinion: Is a visual "placeholder" for an image or ad or text-box give users a better user experience? I've noticed, for example, that while Facebook feed is loaded, there is a placeholder for each post that looks like this: I think that this is the same motivation to declare and (show empty space) image size before we load it.

Thanks in advance!

Answer

If the user’s connection is slow, It can take a while for an app or website to populate content on the screen. However well-designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Making the user stare at a loading bar or spinning wheel can increase bounce rates.

Skeleton Screens

Apple have incorporated skeleton screens into their iOS Human Interface Guidelines under the name ‘launch images’. Apple’s guidelines recommend showing an outline of the initial application screen excluding text and any elements that may change.

How Facebook uses it? The Facebook mobile app shows users gray blocks and lines to represent images and text as the app loads. Once it finishes loading, the images and text appear in place of the dummy wireframe content. This is no faster than having a loading screen, but in the user’s mind, it feels like it is.

How fast your app loads is in the mind of the user. When connection speeds are slow, you can still give users a fast mobile app experience by using these tricks. Users don’t want to wait for content. But if you make it seem like they’re never waiting, they’ll always enjoy your app under any connection speed.

Making it Happen

Looking at the examples above, you may have noticed that the images used aren’t drastically different from wireframes. It’s in this observation that a lot of the work may already be done for you. The initial load is taking longer than we’d like so it’s time to add skeleton screens to improve the perceived load time.

Summary Skeleton screens can improve the feel of any action taking longer than a few hundred milliseconds. Applying them to your rendering bottlenecks will make your UI feel faster and make people happier.