22

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?

mockup

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?

banner

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.

modal

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.

snackbar

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?

toast

download bmml source

8
  • Can someone download more than one file format at the same time? Aug 9, 2017 at 16:59
  • @NickGroeneveld Yes, they can for example click XLSX, and then click PDF while the XLSX download is still processing. I don't know how likely it is that someone will want to download multiple formats of the same table at the same time, yet it is something that is possible.
    – Tot Zam
    Aug 9, 2017 at 17:05
  • 2
    @TotZam, I do it every time I create a presentation in Keynote for a conference: I download the Keynote, PDF and PPT versions just in case. Another user case is if I want to edit it in Excel but want a non-editable version just for reading in a mobile device or ebook, I may download both PDF and XLSX, so it's not that uncommon (of course, depends on your app and user cases)
    – Devin
    Aug 9, 2017 at 17:29
  • Hm. Am I missing something or doesn't the browser show this? What's the use of another indicator?
    – pipe
    Aug 10, 2017 at 14:27
  • 1
    @pipe I might not have been clear. I'm referring to the download preparation process, before the browser takes over. I've updated my question to clarify this point.
    – Tot Zam
    Aug 10, 2017 at 14:40

7 Answers 7

19

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:

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.
2
  • However, this answer is not impartial. For instance, a user may press the "X" button thinking it just closes the dialog, just wanting to make room on their window, unaware that it actually cancels all of your downloads as well. The icon should be more explicit to signify "stop all", such as by giving it a shaded tint to signify danger in the action. Second, the rounded progress bar and the action description itself don't specify a great deal about what is going on - what is it zipping? How big is the zip file going to be? How much longer is it going to take? Is the progress bar even moving?
    – oldmud0
    Aug 10, 2017 at 18:59
  • 2
    @oldmud0 I actually agree that the "x" button's meaning is ambiguous, especially since the action changes once all downloads complete. When the "x" is clicking in middle of a download, Google Drive prompts the user with a message similar to "Cancel all downloads?", so at least it doesn't just stop without a warning. As for more details, not all of that information is always available until the download file is finished being prepared.
    – Tot Zam
    Aug 10, 2017 at 19:23
8

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:

mockup

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.

enter image description here

Pro

  • Familiar control (button)
  • Saves space

Con

  • Hides format choices
2
  • Interesting point about segmented controls. I am using the DataTables.net Buttons plugin and that is what their default design uses.
    – Tot Zam
    Aug 9, 2017 at 17:26
  • The benefit to this that kind of offsets the con is if you need to add additional formats in the future, you don't have to reposition/resize elements on the page. Aug 10, 2017 at 19:15
4

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.

1
  • 1
    This is an interesting idea, yet I'm wondering if a whole side panel is overkill for the downloading message, since majority of the panel will always be empty.
    – Tot Zam
    Aug 10, 2017 at 1:08
3

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.

enter image description here

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:

enter image description here

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.

7
  • 1
    I feel like this suggestion makes the download process overly complicated. Why should the user need to click the download button and then click another button to really download the file? I also don't have a completion percentage to populate a progress bar with. Also, the download can take a couple of minutes, so are you suggesting that I should block the user from continuing to use the page for the duration of the entire download process?
    – Tot Zam
    Aug 9, 2017 at 20:39
  • Another thing, you mentioned that you generally favor snackbars, so is that basically your first suggestion with this modal idea being the second choice, or are you saying that in this case the modal would be most suitable? If you are suggesting using a snackbar, are you saying that it would be the best choice even though the message wouldn't display for the complete download duration?
    – Tot Zam
    Aug 9, 2017 at 20:47
  • The user should understand what's happening at all times. This flow makes sense if it takes the system a while to prepare the data for downloading. Normally I'd say "don't make the user click twice", however, if there's going to be a delay between the original click (download button above the table) and the download starting (i.e. to prepare the data), the user should be made aware of what is happening.
    – Jonathan
    Aug 9, 2017 at 21:56
  • I'm not suggesting blocking the user from using the site while the download is happening -- I assume that the download will occur in the background the same it would for most sizeable downloads on normal sites (it gets started and downloads in the background, and shows in the download bar in the browser). I just realized you may be talking about a non-web app. In that case, could you create something like a downloads bar the way Chrome does that appears at the bottom of the app when downloads are happening?
    – Jonathan
    Aug 9, 2017 at 21:58
  • I might not have been clear. I am referring to users continuing to use the site during the download preparation process. The "Preparing your download..." part is the part that can take a couple of minutes. This modal prevents users for doing anything while let's say the data is retrieved from the database and converted into downloadable bytes. I'm not talking about once the browser takes over to do the actual download.
    – Tot Zam
    Aug 9, 2017 at 23:30
1

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/

2
  • In the example you linked, the button text changes in addition to turning into a progress bar. If that is what you had in mind, how would you address the cons mentioned in my first idea with the text causing the button size to change? If you were thinking of leaving the text and just changing the background to a progress bar, will be a clear enough indication for users, or will they not realize that the change in the button color means it is processing?
    – Tot Zam
    Aug 10, 2017 at 23:14
  • I'd argue that the button changing to a progress bar (perhaps an animated one) is as good an indication as your spinner image in Idea 1. No need to change the text. As an additional touch, you could also disable the button while the download is in progress, preventing additional clicks due to impatience or confusion.
    – Scott Odle
    Aug 11, 2017 at 2:40
0

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.

dismissed toast

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

For example:

stacked snackbar

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

6
  • A download can take a couple of minutes. Toast usually display for only a few seconds, so would it make sense to keep a toast around for let's say 5 minutes? Also, if an element is dismissable, once a user clicks the "x", they have no way of knowing if the process is still running. Is that just their problem, and not something I should worry about since they chose to dismiss the message?
    – Tot Zam
    Aug 9, 2017 at 17:18
  • see edit about your comment, I don't have graphic software here, so hope you get it from the text only version (I feel so 80s!)
    – Devin
    Aug 9, 2017 at 17:33
  • One other point, like I mentioned in my question, I'm referring to a Toast like box on the side of the page, rather than like on mobile where it is across the entire bottom of the page. Does this make any difference? Will users miss message displayed on the side of the page?
    – Tot Zam
    Aug 9, 2017 at 17:35
  • no, that's why I mentioned top-right for desktop, and bottom for mobile, those are the default locations on most frameworks, as recommended by most guidelines (exception Material which is too "mobile first", so they only consider bottom, as in mobile)
    – Devin
    Aug 9, 2017 at 17:38
  • Thanks for adding screenshots. They do make your ideas clearer.
    – Tot Zam
    Aug 9, 2017 at 20:04
0

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.

1
  • I already am disabling the button, but I also think it is important to show a message in addition, so users realize that something is processing and the button is not broken, so that is what my question is about. As for generating all downloads on page load, that does not make sense for my use case. Majority of the time, users do not use the download feature, and they almost never will download all formats, so that idea just creates a ton of extra background and database work.
    – Tot Zam
    Aug 9, 2017 at 23:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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