I am currently working on a way for users to generate a file that can vary in size, and this requires a lot of back-end processing before the user can download the file. I currently have a loading icon that appears to signify that the processing is occur. However, I'm finding that many users think the page "freezes" up and they then refresh the page and try again. While I understand the optimal idea would be to reduce load times. This is not always possible.

The Question

What would be the best way to communicate with users that loading times can take some time and they should not refresh the page, causing more processing?

up vote 4 down vote accepted

Summarizing your question

  1. Your website generates a file (size varies) for the users
  2. The backend takes time to generate that file
  3. Once the file is generated, the user downloads it

I have a few questions:

  1. Is it mandatory for the user to check/view the generated file before downloading it?
  2. Is there a reason why the user has to wait on the same site?
  3. Is it a file the user has to look at, as it gets generated?

Probable soultions

Scenario 1: The user has to wait on the same site and check the file as it gets generated. Example: Online 3D renders where the user has to cancel the generation if he/she finds something going wrong

In this case,

  1. Status should be provided like mentioned by Devin.
  2. Other action elements on the website should be inactive
  3. A witty engaging message requesting the user not to refresh, and the reason why they should not refresh, should be displayed
  4. Mention estimated time to complete if possible. This will set the expectation for the user.

Example:

Loading page user engagement

Other elements that can be added, if they don't further slow down the process:

  1. An auto scrolling gallery of relevant pics or user testimonials to keep the user engaged

  2. Another trend these days are to provide 8bit or 16bit games for the users to play. This is followed in a few websites and games. A small game keeps the users engaged when something big loads in the background. Namco, the video game developer, even has a patent on this.

http://venturebeat.com/2014/10/05/interactive-loading-screens/

enter image description here

Scenario 2: The user does not have to wait on the site and he can check the file after it is done. Example: Converting pdf to doc online

In this case,

  1. Get the mail id of the user
  2. Let them know the file is getting generated in the backend
  3. Let them know a link to the completed file will be mailed to them within a specific time

This is a WIN-WIN situation. You don't have to worry about the process overload if users refresh the page. The users don't have to worry about the time they have to spend on the site.

There are a lot of sites that do this. Here is an example https://www.pdftoword.com/

enter image description here


The solution depends on the questions I had asked at first. Please let me know if I have assumed something wrong. Thanks

  • Scenario #2 is the best. Don't call it downloading the file. Instead, it's "Get a Report" or something similar. That way, the user can move on to other tasks without waiting for this one to finish up. – Ken Mohnkern Jul 2 '15 at 13:10

I think the best strategy is to be clear and upfront: just tell your user not to close or refresh the page, give them a visual indication that some process is running and you should be good. On top of that, you can add a dialog if user tries to leave the page, like "process is running, your file hasn't been generated, are you sure?" or something like that.

I did a quick mockup to illustrate what I mean, hope it helps

enter image description here

  • I think the key part here is the 75%, if possible have a part of the page such as percentage complete actively updating, this will convince your user that the application has not frozen. – DasBeasto Jul 1 '15 at 20:55

If you are able to provide real-time progress as an incrementing % value as in Devin's answer, that is the absolute best solution.

If you are not able to, I think this is a reasonable compromise:

Loading avg time vs elapsed time

So users know that:

  • A dynamic value shows the app has not frozen

  • They get an idea that longer load times are expected.

And on your own end, the avg. load time could either be a true average taken from a new database table that tracks upload times, or you can simply observe a statistically-satisfying # of uploads and average those time and use a pre-defined value for the avg.

You just need to give the user a clear sign of what's happening. If the process takes more than what the average user could expect you should inform them about it and tell them why.

Always be clear and explicit about the fact that you are working to complete the task the user ask for, that you're working to help them, thus avoiding their thoughts about the page being freezed/ slower than what they expect/ some other negative thought.

If it's technically possible, it would be great to show the % of the task that has been done and/or the approximate time that the whole process could take.

Here an example:

enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.