Does a loading animation on a websites initial load improve usability?

Question

I'm working on a site where I am being asked to implement a loading animation on page loads. Essentially, the site will display a loading animation as soon as possible, which will go away once all of the assets (images, essentially) have been loaded.

I'm worried that this will actually reduce usability, but am very interested in any data on this. I want to know the "right" answer.

Essentially I have two feelings:

1. If images further down the page are still loading, I as a user, don't care. I want to start consuming any content as soon as it's available. From this perspective, hiding the site until everything is loaded would actually reduce perceived performance.

2. The browser already gives a good indication that the site is still loading. Users are at least subconsciously aware of this and are used to some things appearing after the initial render.

I've seen this sort of thing often on single page javascript applications where I think it makes a lot more sense. The user has an initial loading page, and afterwards the application is ready to go with all assets loaded. But, seeing a loading image every time you click a link feels a bit off to me.

I am very interested in opinions or data from people more knowledgeable and experienced in UX than myself.

Answer 1

-Perceived- speed is more important than -Actual- speed.

Your assumptions are correct and there is some pretty clear data in the article " The Truth About Download Time " showing how much more important perceived speed is than actual speed...

When we looked at the actual download speeds of the sites we tested, we found that there was no correlation between these and the perceived speeds reported by our users. About.com, rated slowest by our users, was actually the fastest site (average: 8 seconds). Amazon.com, rated as one of the fastest sites by users, was really the slowest (average: 36 seconds).

On the other hand, you're not allowed to do nothing so make sure the user sees something in 1 second or less so they don't leave before even the framework finishes loading.

Here are the guidelines for loading response times...

• 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
• 1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
• 10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

Fade in the loading spinner for highly variable wait times

Showing a spinner immediately after a user interaction can add friction so by fading in the spinner over the span of 1 second will satisfy the need to show something without making the user wonder if they missed something.

Click the green button at the following demo a few times to see a fade in spinner for highly variable wait times...

https://codepen.io/run-time/full/KppazK/

Answer 2

First of all, the 'right' answer is the one that reflects the actual user behaviour, so I think you will need to test both options to know for sure. In terms of usability, both approaches can be designed to be usable, so again it is not a matter of one strategy being right or wrong but how well you design and implement it.

Therefore, I don't think it improves the usability at all, but in fact improves the user experience as not using a loading animation gives users the impression of a faster speed/performance of your website.