5

I'd like to use skeleton screens to indicate when a page is loading. Usually, this is great—it makes the experience seem faster while still functioning as a progress indicator.

The thing is, skeleton screens are at best indeterminate progress indicators: they tell the user that something is loading, but don't give any indication as to how long that might take.

I have a screen in mind that sometimes take a while to load. The system will attempt to load the screen for up to 30 seconds, at which point it will display an error. I feel like a determinate loading indicator would be better here—It lets the user know that they have a finite amount of time to wait before the screen finishes the process it is in.

Can you think of a way to combine the two? A skeleton screen for a few seconds with a determinate spinner that shows up after? Am I wrong to want to show a determinate progress indicator?

2
  • Is it a single element that causes the screen to load slowly, e.g. a chart, a table of data, etc.? Can you give more detail? Is this a web app?
    – Jonathan
    Aug 13, 2017 at 18:21
  • There is a chart. Historically, all of the page data comes back at once from the API. We may have the flexibility to change how the page calls data. In this case, it would be great to load most of the page and then indicate that the chart is loading. It is a web app—redesign will use React UI components. Aug 14, 2017 at 20:07

2 Answers 2

3

I've seen sites with a very thin horizontal loadbar at the top (or bottom) of the page. It scales to the right relative to the level of completed data transfer. Just like a download progress bar. When the download is complete it could scale down in half-a-second so the loaded page eases into place instead of jumping up 2-6 pixels.

Edit: Here's an example: http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/index.html

1
  • I hate when a screen "jumps" for this type of animation. Like the demo you linked, I think it's important not to shift the screen at all with the load-bar: make it intrude into what is otherwise blank-ish space. This can be at the very top as in the demo, or on/at a header/body divider.
    – TripeHound
    Aug 15, 2017 at 8:30
1

Use skeleton screens while you progressively render your content, and a progress indicator over the chart while it loads.

Doing these things ensures that users have visibility of system status. Skeleton screens are excellent for conveying momentum, and letting your user know that something is happening. Progress bars should be used to indicate momentum for any action that takes 10 seconds or longer to complete. Provide additional text feedback that updates with the percent completed when possible (for example, "Loading ").

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Another thing to consider is progressively loading your chart. Are you able to load any parts of the chart before receiving the entire dataset? The title and legend? Parts of the data? If so, perhaps you can find a way to progressively render the chart also, though this might be more complicated than using a progress bar.

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.