UX Design: Modern Pre-loaders

You know it’s frustrating to see the pre-loaders. Everybody hates it because it’s a wall between you and your content of interest.

Pre-Loaders on the internet today: Credit http://www.web3mantra.com/2010/09/07/20-free-icons-pack/

Modern UX designers are avoiding the pre-loaders and making it seamless

This is Facebook’s pre-loader. I have noticed that they are avoiding it at many places on their website. Why? Because it leaves users with a negative feeling.

Sometimes it’s better to show a blank page with a header or half loaded content than to show the pre-loader.

Not only Facebook but many other modern UX designers are minimizing the use of old-school Pre-loaders. I say “minimizing”, because it is still being used as the last resort.

What to use instead of traditional pre-loaders?

Let me show you a few examples of how Facebook and other websites do it.

1. Image loading:
   Your Facebook news feed shows up images uploaded within your network. Once you click it, it doesn’t show a pre-loader and opens a popup where you see a blurred version of the image and then it gets sharper as it loads the bigger image. While the bigger image downloads in the background, it shows the scaled-up version of the thumbnail image grabbed from your news feed.
2. Loading more content in the news feed:
   On Facebook, when you scroll to the bottom of your news feed, it shows a dummy empty feed as the last feed. It’s actually a seamless pre-loader which makes you feel that more feeds are coming in.
3. Adding a comment:
   When you add a new comment on Facebook, it doesn’t show a pre-loader, rather it adds the comment as soon as you press enter and in the background it tries to add the comment to the actual database. On success, it adds options like “Like . Reply . Edit” which is an inkling that it’s now live.
4. Youtube page loading bar:
   When you switch pages on Youtube, the current page fades to some transparency and then you see the red colored loading bar at the top of the page which grows as the page loads.

Empty feed at the bottom of your Facebook news feed which is actually a pre-loader

Conclusion

Use the Pre-loaders on your websites or apps only as the last resort. There are always better ways to present loading than to show a rotating icon.

Please recommend this article if you find it useful! It helps me to write more and to reach more readers.