Show loading animation while pre-loading page or load page and show animation while loading data?

Question

There is a simple button. When it is clicked some data is loaded and displayed to the user. It may be some images or data that requires some processing time before it can be displayed and can't be fetched as fast as few lines of text in this example.

Question is : What is the best way to show user that the request is processing?

I can think of two options:

Firstly, user clicks a button and new page is loaded, the data is not displayed (as there is none). While the data is still loading, an animation is shown. (The purple dots that appear for a micro-second)

Secondly, user clicks a button but new page is not loaded. Instead data will be pre-loaded and meanwhile an animation is displayed. While this is loading user can still do other things, or choose to navigate to somewhere else. (For example, something like this plays while the data is being loaded)

Which is better for user? Are there other options?

Answer 1

I would think that the answer to that question depends on what happens after the data is finished loading and what the task is. Is there a next step that a user would need to do after their data is finished loading? What if the process is unsuccessful? If the user were to navigate away, would it impact the speed at which the load completes?

Without knowing what the task is or how long the user would wait for the data to load makes this a rather difficult question to answer. If the task is something like making a payment and the purpose of the data-loading animation is to allow the backend to process the payment and provide a success/failure status message, then I'd say it's better to use a linear approach and keep the user in the flow until it's complete.

If the task is of lesser importance, like a file upload, then I could see allowing the user to continue to navigate and do other tasks on the site, but then, you'll need to consider including some sort of real-time indication that their file upload is complete in an elegant and passive fashion. You'd also need rules that save the display of the status until after a more important task is completed like, making a payment, so that the user doesn't abandon it in or to react to a less-important message.

Answer 2

Do you want users to do other things or choose to navigate to somewhere else? Your typical load times might also affect your answer.

Answer 3

Unless the load times are extreme, use the first method because it gives the user feedback on the operation when it's complete. Besides, the second method raises some usability questions such as reconciling the output with the fact that the user could be moving all around the page and opening up different output windows/widgets. Also, by going asynch, the user might disregard the operation as unimportant.

Asynchronous interaction is great if the user can see the results of the different interactions independently, otherwise one interaction can mask another. For instance, in a dashboard situation where each request goes to a different widget and is processed in parallel, asynchronous interactions are fine. Some interactions can take longer than others, but the ones that are ready are displayed and the widgets that are loading will show a progress animation.

Here's an example:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you want to adopt a similar UI for your situation, then the 2nd technique can work for you.

Answer 4

You can hint on the content shape that is about to load.