How should I indicate that a download is in progress?
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?
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.
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.
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?
