Use Skeleton Screen to improve user perception

Author: Chen Weijie

In order to improve the user’s perceptual experience during the waiting period for an app to load, there have been a lot of different tricks for apps, whether on the Web or iOS or Android. Among them, chrysanthemums and the various loading animations derived from them are a very large genre, as shown below:

It spawned a variety of loading animations:

In many application interactions, this chrysanthemum load design has become dominant.

However, there is now a better way to load the design experience than chrysanthemum Loading, namely Skeleton Screen Loading, which is commonly called Skeleton Screen Loading in Chinese. Skeleton Screen Loading sounds strange, but this article is still called Skeleton Screen Loading in English.

The so-called Skeleton Screen Loading means that before the page is completely rendered, the user will see a simple frame depicting the current page and feel that the page is gradually Loading. After the Loading is completed, each placeholder part of the Skeleton Screen will be replaced by real data.

A picture is worth thousands of words. Let’s take a look at the wechat reading client. It uses Skeleton Screen Loading to improve its Loading experience.

Many web and client applications have abandoned the chrysanthemum Loading experience in favor of Skeleton Screen Loading, such as Facebook, Medium, and Slack. Ele. me and Nuggets in China also use Skeleton Screen Loading to improve their Loading experience.

Here’s an illustration of the iOS interaction design standards for loading experiences:

Don’t make people wait for content to load before seeing the screen they’re expecting. Show the screen immediately, and use placeholder text, graphics, Or animations to identify where content isn’t available yet. Replace these placeholder elements as the content Loads. — Apple iOS Human Interface Guidelines

Using Skeleton Screen Loading also fully follows the iOS HMI design guidelines. This article explains how to use vue to implement Skeleton Screen Loading.

VUE implementation ideas

In this article, we will use the Vue Component function to implement a Skeleton Screen Loading, as shown below:

Specific vUE Component (Component) functions are not described here, you can go to the official documentation to see the details.

Here recommend a simulation development data open source service Jsonplaceholder, similar to the picture placeholder service, it provides some common data types in Web development API services, such as articles, comments, user systems, etc., have provided the corresponding interface, in the development and debugging stage is very convenient.

For example, the example we did is to use the user system, directly using the user data interface.

First, the main work is to implement Skeleton Screen Loading, using normal HTML and CSS to implement the animation.

The animation looks like this:

Define the HTML structure first:

 <div class="timeline-item">
   <div class="animated-background">
     <div class="background-masker header-top"></div>
     <div class="background-masker header-left"></div>
     <div class="background-masker header-right"></div>
     <div class="background-masker header-bottom"></div>
     <div class="background-masker subheader-left"></div>
     <div class="background-masker subheader-right"></div>
     <div class="background-masker subheader-bottom"></div>
   </div>
</div>
Copy the code

Here are the main ideas for implementing animation:

To achieve this effect, a little bit of trickery is required. Define a large gradient background on the layer moving-background, then fill a few placeholders with white where the background image is not needed to create the UI display shown above. Finally, use background-position to move the position of the background picture to achieve the animation effect in the picture.

The detailed code can be viewed here, demo.

Now that the main effects are in place, we can begin to define our Skeleton Screen Loading component.

Vue.component('user-item', {
  props: ['email'.'name'],
  template: `<div>
      <h2 v-text="name"></h2>
      <p v-text="email"></p>
    </div>`
})

Vue.component('loading-item', {
  template: `<div class="animated-background">
     <div class="background-masker header-top"></div>
     <div class="background-masker header-left"></div>
     <div class="background-masker header-right"></div>
     <div class="background-masker header-bottom"></div>
     <div class="background-masker subheader-left"></div>
     <div class="background-masker subheader-right"></div>
     <div class="background-masker subheader-bottom"></div>
   </div>`
})
Copy the code

Two components are defined above. One is user-item, which is used to display user information data. A loading-item component that displays the Skeleton Screen Loading effect until it is loaded.

Once you have defined the component, then define the corresponding structure in the main file to register the use of the component:

<div id="app">
  <div v-for="user in users" class="items" v-if="loading">
    <user-item :name="user.name" :email="user.email"></user-item>
  </div>
  <div v-for="load in loades" v-if=! "" loading">
    <loading-item></loading-item>
  </div>
</div>
Copy the code

Based on the components defined above, the code above shows the user data when it is finished loading. If the user data has not been loaded, the loading-item component is displayed.

var app = new Vue({
  el: '#app',
  data: {
    users: [],
    loading: false,
    loades: 10
  },
  methods: {
    getUserDetails: function() {
      fetch(`https://jsonplaceholder.typicode.com/users`)
        .then(result => result.json())
        .then(result => {
          this.users = result
          this.loading = true
        });
    }
  },
  created: function() {
    setTimeout(() => { this.getUserDetails() }, 1000); }});Copy the code

A simple and elegant Skeleton Screen Loading is done.

Through the simple example above, it is obvious that the experience is better when Skeleton Screen Loading is used instead of the traditional chrysanthemum chart.

By using Skeleton Screen Loading, some visual elements can be used to display the outline of content on the Screen faster, so that users can have a clearer expectation of the content to be loaded when waiting for Loading, especially in the scenario of weak network. Skeleton Screen Loading is definitely better, use it.

What do you think about Skeleton Screen Loading? Feel free to share your thoughts in the comments section.

References:

www.phpgang.com/facebook-st…

Css-tricks.com/building-sk…

Facilitating Better Interactions using Skeleton Screens

Recommended reading

A way to avoid iOS memory fragmentation

Preliminary study on small program test scheme

Tencent cloud distributed database usability system practice

Has been authorized by the author tencent cloud community released, reproduced please indicate the article source The original link: https://cloud.tencent.com/community/article/332283