Currently, we add skeleton screens with a progress bar while the page is loading with data (in a data-driven platform). I'm wondering what to do in the case where after loading for some time, no data is available, or i.e. just one card is available instead of a few cards - like the skeleton card as suggested. Do we still use skeleton cards in this case? What's the usual flow?
Here is a great study on skeleton screen patterns: https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a by Bill Chung (designer @ Shopify).
Skeleton screens create the illusion of an instant transition.
To mitigate focus on the loading process, versus the actual content that is loading, Wroblewski introduced a novel new design pattern — the skeleton screen. In his own words, they are “essentially a blank version of a page into which information is gradually loaded.”
An overview of the important points mentioned by the author (Bill Chung):
- "When designing loading experiences, strive to progressively load content, replacing skeleton placeholder objects with content like real text and images as soon as they are available."
- "Grey or neutral-toned filled shapes, commonly called placeholders, meet the user instantly upon user interaction with calls to action or links. The placeholders (the so-called “bones” of the skeleton) are then replaced with the actual site content, and the illusion is complete."
- 60% of test participants in the author's skeleton screen study perceived that the animated skeletons represented a shorter duration. "Skeleton screens that leverage motion that moves from left to right (e.g. a wave or shimmer like animation, much like Facebook or Google uses) are perceived as shorter in duration than skeletons that pulse (opacity fading in and out)"
Therefore, to answer your question: instead of just a blank card, showing the blank version of the page with a loading animation from left to right could be an approach.