Skip to main content

Loading and saving

Communicating a system's status, like loading and saving, is essential to establishing a good user experience. It reassures users that the system is actively retrieving or saving data and reduces the users’ perceived waiting time.

Skeleton​

You can use skeletons to build a simplified version of your user interface while the content is still loading.

Skeleton

There are two types of skeletons:

You should only use skeletons when your app is loading for the first time or if most of it is in a loading state, where multiple progress indicators would distract users.

Progress indicators​

Progress indicators inform users about the state of an ongoing loading or saving process.

Progress indicator

There are two types of progress indicators:

Progress indicators can purposely steer the user's attention toward a specific part of your app. However, be aware that progress indicators draw a lot of attention and can be distracting if shown more than once on a page.

Behavior​

Wait to show progress indicators. Always use a delay (~500 ms - 1 s) unless you know loading will take a while. Once you show a progress indicator, don't clear it immediately but display it for at least some time to avoid flickering (a minimum of ~200 ms).

Progressive loading​

Use progressive loading to load data in batches. Start with the basic structure, then progressively provide more details. Doing this unblocks users and reduces the perceived waiting time.

Still have questions?
Find answers in the Dynatrace Community