I have a progress bar that takes place after a user uploads a file while the backend is running some processes. It looks like a standard progress bar that fills as the processing completes, like so: 
When the upload/processing is complete the bar is replaced with a text that says "Upload Complete".
If the file is larger it takes upwards of a few seconds to complete and provides a nice visual progression to let the user know nothing is frozen. The problem is if the user inputs a small file the processing time is quite low, this results in the user clicking "Upload", a progress bar flashing up and shifting some elements down then disappearing to be replaced with the success text all in fractions of a second.
I see a couple ways to combat this but I do not know which would provide the best UX.
1. Do nothing
One course of action, and surely the simplest from the development side would be to do nothing. Let the bar flash up and disappear in the whatever time it takes. If this happens too quickly it may be confusing or even disorienting to the user but it follows the natural progression the user would expect.
2. Add a small delay
Intuitively one would think purposefully adding any extra time to an application is a UX sin. But this article on adding delays to increase perceived value shows how Blogger added a small loading .gif that increased user satisfaction and reduced fear that something went wrong, which would be a real concern with my flashing loading bar.
3. Hide loading bar for small files
One course of action would be to determine which files will cause too short of a loading time and simply not display the bar in the first place. Users that upload large files will receive the same loading progression then completion status as before but users that choose small files will hit upload and momentarily see "Upload Complete". The problem I see with this is users who are familiar with seeing the progress bar may be throw off, I've been trained consistency is key but this would involve different UX experiences for different users. Plus, if I were to take this route how would I choose this threshold to display or hide the bar. Some users may take 3 seconds to fully perceive the bar being shown while some may only need 1 second.
4. Leave the bar up after 100% completion
Inversely to option #3 I could just leave the bar up reading 100% with the completion status "Upload Complete" under or beside the bar. This would eliminate the progress bar flashing up and disappearing immediately. However, on an already cramped mobile display showing a finished progress bar takes up precious real estate and isn't exactly the most appealing visual element. I could make it disappear after a set interval but that removes some locus of control and could still cause user confusion. It also brings back the threshold issue of #3 where I am unsure of how long to let the bar remain there, too quickly and it defeats the purpose, too long and it may be expected to be persistent and cause confusion when it is removed. I could make the user dismiss it themselves but that adds extra clicks to the process.
So I ask? What provides the most friendly UX for handling loading times that vary?
Answer
Here's another alternative: You mentioned you don't find the progress bar the most appealing, and it's taking up precious real estate. Would you consider a more compact preloader and success message that do not impact layout? Just as an example:
I don't know if that particular example would fit your situation. But if you can achieve a more compact design, you could leave up the success message (the check) after it's done loading without taking up a lot of space.
If something like this were used, there should be no issue with adding a small delay and forcing the animation to run (as per your idea #2). If the preloader does not impact layout, and if the user can continue doing whatever he's doing while the animation runs, it's not really delaying the user and shouldn't hurt user experience.
No comments:
Post a Comment