5

I'm creating a dashboard that retrieves a significant amount of data from an API before displaying some charts and metrics.

I have read that skeleton screens are perceived as being shorter in duration when compared to other options. Thus, I wanted to try it.

It seems that people replace use animated basic shapes to indicate what it will be replaced with. In the case of a large graph, I find myself bothered by a large rectangle covering the entire graph area:

  • it does not indicate anything about what's loading in that placeholder (and what's to expect once it's loaded)
  • it is arguably ugly

enter image description here

I could also use animated charts instead but that seems to break the idea of a skeleton screen.

Has anyone faced something similar and found something that works in that case?

  • 2
    Care to explain the downvote and how the question could be improved? – 7hibault May 21 at 7:44
6

Your placeholders need to be explicit enough to allow users understanding what they are waiting for during loading time.

Are we waiting for the chart lib to load ? data ? maybe the whole component ?

Axis only

This option is probably the best match with other components placeholder as it imply that only data is loading ans everything else is already setup on your page.

This is the option used by Google Analytics.

Google Analytics Chart Skeleton


"Fake" chart

Keep in mind to use lighter colors or grayscale and explicit text to avoid any other interpretation of the dummy data displayed.

enter image description here


Iconography

If you're not able to load the chart component with axis or dummy data at this point, why not use a simple but relevant icon ?

enter image description here

  • 1
    As we are waiting for the data to load, I could definitely display empty charts, fake charts or icon as suggested. Thank you for providing a real life example from Google – 7hibault May 21 at 8:32
1

These are called lazy load images. It is good practice to show relevant image in each component. If it is image/chart then show chart image (fig1) or if it is going to be a text/paragraph then, show paragraph image (fig2)

Fig1 Fig 1 - Image

Fig2 Fig 2 - paragraph

But remember it doesn't matter whether you use animated or non-animated placeholders to the user if the data doesn't load within the attention span of the user.

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.