3

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?

2
  • Is this a common case, where your content may just be a small amount? Nov 24 '20 at 15:21
  • I would say it varies from the company and how much data they have within the platform - how long they use the platform. The most what concerns me what in the case of 0 data... Nov 24 '20 at 15:27
0

I would still use them as if they are just containers, empty albeit, but still the layout that you would expect. If there is no content, then the container will be empty with a message inside informing the user that there is no data available.

3
  • like a zero-state info? Nov 24 '20 at 15:53
  • By zero-state you mean an empty state? We might be referring at the same thing but different terms, then yes. Empty states seem to be the most overlooked UI elements. Nov 24 '20 at 15:57
  • yes indeed :) thanks Nov 24 '20 at 16:03
0

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.
(Bill Chung)

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.
(-Luke Wroblewski)

An overview of the important points mentioned by the author (Bill Chung):

  1. "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."
  2. "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."
  3. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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