Shimmer UI Loading

Shimmer UI Loading

Skeleton screens (placeholder preview of your content)

A shimmer screen is a version of the UI that doesn’t contain actual content. Instead, it mimics the page’s layout by showing its elements in a shape similar to the actual content as it is loading and becomes available.

A shimmer screen is essentially a wireframe of the page, with placeholder boxes for text and images.

Shimmer loader

Use of Shimmer

A shimmer UI resembles the page’s actual UI, so users will understand how quickly the web or mobile app will load even before the content has shown up. It gives people an idea of what’s about to come and what’s happening (it's currently loading) when a page full of content/data takes more than 3 - 5 seconds to load.

When to use Shimmer

  • Use a loading shimmer when a loading spinner is not prominent enough.

  • Use when there’s more than 1 element loading at the same time that requires an indicator.

  • Use on high-traffic pages, such as our account dashboard.

  • Use when data takes more than 300ms to load on an average connection for our user base.

  • Use actual content when content doesn’t change (static content).

When not to use Shimmer

  • For a long-running process or background process, e.g. importing data or exporting reports, use a progress bar (link to come) instead.

  • For fast processes that take less than 300ms, consider a spinner or no loading state at all.

  • For a tiny, inline action or feedback, e.g. clicking a button and the action will take time, use a loading spinner (link to come) instead.

  • For low-traffic pages, such as super-user-only admin pages, use a loading spinner instead.

  • If a page refresh is required, use an empty state with a Call To Action to refresh.

  • For introducing content with flair, use a choreographed or stylized entrance. In contrast to a placeholder loading shimmer, choreographed or stylized entrances don’t care how long content takes to load. For example, the whole page might be loaded already, but we only reveal each section with a fade as the person scrolls down the page. A single stylized entrance may mask and replace a loading spinner.

  • Never use shimmers if the system is unable to determine with certainty what layout and components are used once the screen loads.

Shimmer Screen when used as a feature in the product makes people perceive that the app/website is loading fast. Improved perceived performance not only provides good UX but also helps in increasing the conversion ratio.

Designing the Shimmer screen that leverages motion(L to R to follow the natural eye movement) helps in decreasing the perceived duration time.

Further using a Shimmer screen with progressive loading is a thought benefit for the user. In progressive loading individual element becomes visible as soon as it is loaded, it helps in displaying the content that is exactly loaded and what is yet to be loaded. Using these features all together acts as a clear indication of progress.