How to efficiently show file elaboration

In a project I recently worked in we have the problem to provide users of a web application a nice graphical interface that showed the upload of some files from the user’s PC to the application server. The interface had also the task to give a visual feedback about the elaboration occurring in the application server.

A first implementation

After some experiments with ugly progress bars I came out with the following interface, loosely inspired Google Chrome download bar.

Here you can see the main idea behind the file uploader interface implemented.
The progress bar around the file icon:

  • is turned off when the file is ready to be uploaded;
  • is blue while uploading;
  • turns fully green if the upload succeeds;
  • turns fully red in case the upload fails.

More over while the upload is progressing the length of the blue bar represents the amount of data already upload. There is also a spinner effect to make the user aware of the fact the system does not hang up.

A better implementation

What was missing here was in first hand the clear distinction between the upload phase, which can be perfectly shown, measuring the amount of data uploaded, and the elaboration phase on the application server. In the second hand there was not any feedback about the upload speed.

So I updated the first prototype in the following way.

Here the spinner rotates anticlockwise while uploading and clockwise while waiting for the application server to complete the elaboration of the just uploaded file. This gives quite clearly the user the idea that there is a first uploading phase for which the application can show the progress, and another phase which lasts for a undefined amount of time.

More over, during the upload phase, the spinner velocity is someway proportional to the upload speed, giving another visual feedback.

Drop me a comment if you need some feedback about this solution.