How should I indicate that a download is in progress?

Question

I have a data table that has a row of buttons with download format options. When one of the buttons is clicked, I want to display some sort of message to indicate that the download preparation process has started and is in progress. This message is to display while the program retrieves the data and prepares it for the browser to download.

After the user clicks a button, they can technically continue working on the page, so I'm looking for something that will indicate to the user that the clicking of the download button was successful, yet at the same time, won't be too disruptive.

What is the best way to indicate that a download is in progress?

I've come up with five possible ideas, but I'm open to other suggestions as well:

Idea 1: Change button text

My first idea was to change the text in the button that was clicked, and add something like a loading icon to indicate that something is in progress.

Pros: The reason I like this idea is because it is the least disruptive. It is also clear which format was selected. Users can technically select a second format to download while the first download is still in progress, so this solution will allow me to display multiple in progress messages at the same time. Also, when actions take time to finish, users often try clicking the button a second time. By displaying the progress symbol directly on the button, I think it will be clear that something related to the button action is still processing and there is no need to press the button again.
Cons: What I'm not sure about is if this change is too subtle. I also don't know if users will find it disconcerting when the button text suddenly changes. Also, when the text becomes longer, the button size will expand, and the other buttons, like the XLXS will shift. Is this bad UX?

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

Idea 2: Small message banner next to button row

My next idea was to show a small message banner next to the button row.

Pros: What's nice about this idea is that I can leave the message displaying during the duration of the entire download since it is not blocking any other elements.
Cons: My concern with this solution is that the message banner is sort of floating on the page and blends in with the other UI elements like the button row. Will this message box look like a random item that doesn't belong on the page? Is this message box easy to overlook and miss, especially if it is further away from the actual button that was clicked, like PDF?

^{download bmml source}

Idea 3: Small modal popup

Another idea was to show the message in a small modal.

Pros: Users will definitely notice this message, and not worry if their download started yet.
Cons: This message blocks the entire page, so the user is either stuck on the modal for the entire download duration, or I need to change the message to something that just indicates that the download started, and hide the modal after a few seconds. I can also make the modal dismissable, yet I think it is sort of overkill to require users to dismiss an entire modal as a result of clicking a download button. I'm also wondering if it is too "in your face" for a simple info message.

^{download bmml source}

Idea 4: Snackbar on the top of the page

I also though of using an element similar to the Android Snackbar, and slide the message in from the top of the page.

Pros: This message box will display in the center of the page, and so it will not get lost among the other UI elements like a message banner on the side of the buttons would. It is also displayed on top of all other elements on the page, so the rest of the page layout will not matter.
Cons: This message blocks part of the page, so I would not be able to keep it for the entire duration of the download. Technically I can make the box dismissable, yet I don't think I should ever have a message displaying front and center of the page if the user continues with other actions on the page.

^{download bmml source}

Idea 5: Toast on the side of the page

My last ideas were to display the downloading message as a kind of Toast message box on the side of the page.

Pros: This idea is similar to the Snackbar, in that the layout of the page will be irrelevant. In a way, I like this better than the Snackbar idea, since it is on the side of the page and won't be as distracting. Also, since this is on the side of the page, I technically can display a stacked list of messages if the user selects a second download before the first one finishes.
Cons: The element is on top of other elements, so I would either only be able to show the message for a few seconds, or I would need to add a button to make the box dismissable. I also don't know if it is a good idea to ever cover other UI elements. Also, will users not notice items displayed all the way on the side of the page?

^{download bmml source}

Answer 1

I spent some time exploring how other sites deal with downloads, and liked how Google Drive handles them.

Here is a screen shot of two downloads simultaneously happening on Google Drive:

What I like about this method:

• While this message box is similar to the Toast idea mentioned in Idea 5, the box is positioned on the bottom of the page, rather than the top. What's nice about this is that a box positioned on the bottom of the page is less likely to block important information, than a box positioned on the top of the page. It also is noticeable, yet at the same time not as distracting as a message on the top of the page would be.
• This design supports a clean way to simultaneously display parallel downloads.
• While you can't close the box completely during a download, there is a minimize button on the top that allows you to hide most of the detail.
• There is a x button on top that can be used to cancel all downloads at any time during the process.
• There is room to display a progress bar. Google Drive uses a round progress bar, yet there is also room for the standard bar progress bar design, if so desired. (In my case, I don't have completion percentage data available to populate a progress bar with, so I plan on replacing the progress bar with a loading icon.)
• After a download is complete, the "processing" text changes to a "complete" message, instead of the entire processing message box just disappearing. The advantage of this is that this method gives the user a clear message that process is done.
• After the last download is complete, the box with the "complete" messages displays for a few more seconds, and the automatically hides. During this time, the user can also use the x button on the top of the box to immediately close the box.

Answer 2

Idea 2: Small message banner next to button row is good for users not being interrupted with continuing their work if the download will take some time.

If the download does take time (I've worked on apps with this same issue), having the message in close proximity to the action they just initiated allows them to see the system status w/o focusing elsewhere.

You could also pair that with the message being specific about which format is being downloaded:

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

Segmented controls and user expectations

In your mockup, you seem to be using a Segmented control to choose from the download formats. Those are normally reserved for viewing different content (or filtering). Here's the iOS guidelines as an example:

Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views.

I suggested swapping that out for an dropdown button, a familiar control in the bootstrap library.

Pro

• Familiar control (button)
• Saves space

Con

• Hides format choices

Answer 3

My solution would be to have the user interface slide a quarter screen to the left (or to the right depending on your preference) revealing a download panel that shows the current state of the various downloads the user may have going at any one moment.

This panel would be automatically revealed on the initial download so that the user notices what is going on and how to control the visibility of this panel (either a using a button or a left/right swiping motion). This way the user is in control and determines whether they want to see the download panel or not. Some menuing systems use this type of display as well.

Answer 4

I am generally in favour of snackbars, however, there is the chance that the message is missed. Depending on how often users have to download the data, how long it takes to prepare the download, etc., here is another option worth considering.

Notice the separate buttons (rather than the segmented control for reasons discussed in Mike M's answer) and common download icon that indicate what will happen when a button is pressed. When a button is pressed, the following modals appear:

This is very transparent: the user can see that their download is prepared and has to click to actually download the file again (re-confirming that they are now downloading the file). At this point, the file would show up as a normal download in the browser (for example, in the downloads bar in Chrome).

Depending on the length of the preparation of the various downloads, I don't think this will be very disruptive. It does add an extra click and will disrupt more than a snackbar, but it will (hopefully) make clear to the user that their data is being downloaded. Optimal Workshop uses a flow like this -- sorry, I don't have enough rep yet to include the link.

Answer 5

As a modification to your first idea, you could have the buttons themselves turn into progress bars.

Example with link to tutorial: https://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/

Answer 6

Even before reading your whole question, I was going to answer "Use a Toast (or snackbar)". This type of cases is exactly the reason why toasts and snackbars exists: to provide short messages and feedback on operations happening in your site. (the difference is toasts are usually related to system messages, while snackbars are app related)

About the cons you mention, remember that Toasts are transient (hence they disappear after some time) and both may have an additional control for closing. Thus, this is the default behavior. About covering some parts or controls, you are correct, you always need to leave controls reachable. However, you could just leave some free space where the toasts will load, for example top-right area of the page (and bottom in mobile, same for snackbars)

Please note that Microsoft conception of toasts is a bit overkill, with images, titles and what not. I'd recommend just go simple, kind of what Material Design's recommends.

Conclusion

Either snackbars or toasts will be perfect solutions for your problem

Edit

About your comment: when you have concurrent downloads or messages, you could use stacked toasts or snackbars , just like Material recommends. So, you can make the toast disappear after download has finished + 5 to 8 seconds. Additionally, you can do something like this: If the download is still on, a dismiss action would make it smaller (for example, a small circle with a loader), but not make it disappear completely until download is finished.

As for stacked snackbars, I'd avoid them and simply change information on what's going on.

For example:

This way you can provide the required information without having to take more space from your canvas.

Answer 7

Once the button has been pressed, disable the button until its download is complete.

...

Or... Generate files for all formats immediately when the page loads, like how Mediafire does it, where on page load, the download button says "preparing download", and when it's done preparing, it lets you download whatever you wanted to download.