19

Facebook Placeholders for Unloaded Content

almost 5 years ago from , Co-founder at Get20

I know there are probably more examples of this throughout the site but I have to admit, I love that they cover so many cases for states where content may have not loaded. I caught a new one today on profile pictures I hadn't seen previously. The second has been around for awhile while it processes the loading of news feed content.

How do you guys feel about things of this nature?

Image altImage alt

15 comments

  • Daniel GoldenDaniel Golden, almost 5 years ago

    I particularly love the second example. One of my favorites on the web anywhere.

    15 points
  • Daniel De LaneyDaniel De Laney, almost 5 years ago (edited almost 5 years ago )

    These are called skeleton screens.

    Edit: This comment previously indicated that they were also called empty states, which was of course wrong. I get an error when I try to delete the comment, though.

    0 points
    • Ciarán Hanrahan, almost 5 years ago (edited almost 5 years ago )

      They are called Skeleton states as you've correctly pointed out but empty states is a different thing. An empty state is when you have an area or page within your app that has no content. It can happen when a user first uses your app if they need to create something first or follow steps to get started or in some cases (like email) where they have completed everything and returned to an empty state (zero inbox). A nice empty state will give the user an idea of what he can do to populate this area of the app instead of seeing a permanent blank screen - not to do with a temporarily loading blank screen - which is what a skeleton looks to fill.

      2 points
    • Rick LanceeRick Lancee, almost 5 years ago

      It's not an empty state; an empty state is when you have no content –Like no files in dropbox. These are placeholders while the real content is being pulled in via javascript.

      2 points
  • Corin EdwardsCorin Edwards, almost 5 years ago

    I wouldn't have said anything unless you asked, because I can't really verbalise why... but that second thing really irritates me for some reason.

    0 points
    • Brian FryerBrian Fryer, almost 5 years ago

      I'm very curious to know what led you to this conclusion. Because I'm in agreement with Daniel (above comment) and feel that it's one of the best examples of loading animation on the web.

      The placeholder content provides visual affordance to where the content will be loaded so your eyes can adjust even prior to things be loaded.

      So, I'm curious—what images does it conjure up in your mind?

      1 point
  • Adham DannawayAdham Dannaway, almost 5 years ago

    I think the key here is to avoid loading spinners as they make the user feel like they're waiting. Instead the user is quickly shown a skeleton template of the page while the content loads in. Youtube does this nicely too. More here: http://www.lukew.com/ff/entry.asp?1797

    0 points
  • Theus FalcãoTheus Falcão, almost 5 years ago

    I like this trick too. And I love the way that the Medium presents.

    0 points