18

In cases where loading times are too long (more than a minute) does showing fake content or content placeholders while the application is loading data help reduce anxiety?

I've only seen this in Facebook's mobile App:

Facebook fake loading

1
  • Since I asked this question this has become a fairly common design pattern that is now used both in mobile and desktop. Luke Wroblewski calls them Skeleton Screen.
    – Ed Orozco
    Feb 18, 2017 at 17:14

2 Answers 2

14

This link/information should help you: Facebook content placeholder deconstruction - http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

To summarize the link information:

Why would I ever use this? We can’t always remove having to wait for information but we can make the wait feel shorter. By giving some indication of what is going on and giving visual stimulus the user feels immediately more comfortable and less likely to leave. This is exactly like putting a progress bar on a long action. Apart from the fact it’s some fancy polish, it’s great usability. I think this feature is better than your average loading symbol because it actually feels like the content is almost there.

Implementation aspect:

1) Its a set of div's.

2) There is a centered wrapper element/div - enter image description here

3) Then there is the Animated background element: It’s a box that is has a animated background and that background happens to be a CSS gradient. enter image description here

4) On top of this element are, Plenty of Tiny Masking Blocks - It’s just lots of little white divs that sit on top so you can’t see the animation. enter image description here

Source: http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

2
  • This is exactly what I meant. Thanks a lot, Amit!!
    – Ed Orozco
    Dec 22, 2015 at 17:39
  • Np, Glad to help!
    – Amit Jain
    Dec 22, 2015 at 18:06
3

We usually use a div. Make certain that the text is not confused with real text - but at the same time don't use lorem ipsum. (That will annoy or confuse your visitors.)

Try something along the line as:

This page is taking a longer time to load than expected. (Something interesting and relevant goes here.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.