Select Page

Lazy Loading

In this project, I was tasked with updating the loading for the CourseNetworking ePortfolio. This is a portfolio page similar to LinkedIn and other sites that allows users to display personal and professional information. Before, loading began with a spinner on the page, and then the user saw the content load in part by part, which does not look pleasant or clean. Becuase of this, I was tasked with designing a lazy loading page in which a skeleton of the page is loaded immediately, and the content is displayed all at once when it is done loading. 

With this project, I had 3 main goals:

 

  • Reduce perceived wait time: while a spinning loader is common, it makes the user sharply aware of how long they are waiting for the page to load. 
  • Eliminate feeling of watching a clock: a spinning loader can frequently make the user feel like they are watching the time pass visually, which is not ideal for a smooth user experience. 
  • Orient user to page while loading: while a spinning loader is almost an entirely seperate page, lazy loading allowes the user to become familiar with the content and interface before they begin to use it. It takes a human around 13 millisecond to register an image, but around 100-140 milliseconds to make decisions about that image. 

Process

Problem: Loading on the site takes too long and is stuttery. How can we make the loading design more user friendly while reducing perceived loading times?

 

Process: This process began by conducting research into lazy loading, skeleton loading, and other alternative methods of page loading. After deciding on the method of lazy loading, I began blocking out the sections that needed to be shown on the skeleton and simplifying as much as possible. 

 

Solution: By using this method of lazy loading, the user is introduced to the information on screen before it fully loads, allowing them to be oriented with the information so they can begin using the site faster. The skeleton also reduces percieved wait times by easing the using into the page, instead of having them watch a spinner. 

 

Design

After finishing research into lazy loading, I began initial sketches of what it could look like. The first is a gradual loading design, in which the content loads in part by part. The second is a complete load, where the user sees the lazy loading screen until all of the content is ready to be displayed. This one is far more common, and looked much better, so I chose to continue design work on that option. 

The next step was to determine what would be displayed on the skeleton page. I did not want to include too much detail, as that is overwhelming for the user and does not look good, but I also needed to retain enough detail that the user is oriented with the page. This was a multi-step process in which I blocked out sections, tested them, and iterated on the design. 

For example, my initial design had the large gray box at the bottom to represent a paragraph. I found this to be unclear as to what it represents and not visually pleasing, so it was removed from the next iteration. 

Final Design

This is the final design of the lazy loading page. The sections are clearly delineated, the text lines are intuitive, the image block at the top is clear, and the placeholder profile picture gives the user a good anchor to start with. I chose a blue-gray color for the text and image blocks because of the similarity of color motif with the rest of the site, and because it is quickly visible on screen contrasted with the white and darker grays. Below are the loading screens before and after the lazy loading process is implemented.