File Browser Download

Question

We provide a service to synchronize devices with our server.

Every device has a file browser which is accessible through HTTP.

Possible actions are: Download, Delete and Rename.

Delete and Rename should not be possible for an folder / file that is being downloaded.

Now I'm a little stuck with the download feature:

Folders and Files can be relatively large (>100MB) and it takes some time to zip them in the backend. The zipping process should not be cancelled when the user leaves the page.

Earlier I simply blocked the whole file browser when a download was initiated.

But I think this solution is suboptimal. The user should still be able to browse other files (and optimally download other files/directories).

Goals I want to achieve (ordered of importance):

1. The user should be able to browser through other folders while a download is in progress. (most important)

2. The user should be able to easily cancel started downloads.

3. The user should be able to browse through folders which currently are being downloaded.

4. The user should be able to download other folders / files while another download is in progress. (least important)

Here some mockups of the solution I have thought of:

Normal view:

Selection view:

View after user initiated download of selection:

Questions I need help answering:

• Should the user be able to open a folder which is currently being downloaded?

  • If so:
  • How can I differentiate a normal opened folder and a folder that is being downloaded? (I thought of changing the icons)
  • Should other downloads in this folder be allowed?
  • If so:
    • How can I display the download progress in a clear manner.

• Are there better ways to display the information? (I also thought of a download-queue, on top of the file browser).

EDIT: An issue with my current solution is that the user would never have a clear overview of all downloads.

Answer 1

It sounds like you're going to need to place the downloaded files into a different window/page (something similar to the way Netflix or BBC iPlayer work).

Keep the controls you have in the current file window but also mark which files are downloading or available locally.

That way, users can still browse through remote files while they are compiling and downloading but you can lock local copies until downloading is complete. The new page will make it easier for users to return to files that have chosen to download and you can also add further information to the new page such as estimated download times and file management controls (for deleting, copying, etc).

Answer 2

You can use status icons with each file or folder representing its current status. I think dropbox does it like that by showing blue and green tick to files that are syncing and completed syncing respectively.

Also a "X" icon that appears on hover could do for canceling the download.

Showing the files being downloaded separately than where they interact with folders and files will help user understand that they can browse the folder when the download is still going. (Check Google drive, Dropbox upload/download)

(Download shown in right bottom while folder are on left top)

(Dropbox shows ongoing uploads on bottom of the page)

Also this pattern solves the issue of downloading files, folders while another download is still in progress, as new download just gets added to the list.