Wednesday, December 30, 2015

usability - Indeterminate Progress Indicator Styles


When you have an operation that has too many factors to reliably give an estimate of actual progress towards task completion, you'll often find an indeterminate busy/progress indicator.


Through the course of the years I've seen approximately two groups of styles of progress bars that are indeterminate (please let me know if I'm missing a big one):





  • Actual Bars


    Windows Update Indeterminate Progress Bar




  • "Spinning" Circles


    Sample Spinning Indeterminate Progress Bar




The Question: Is there any great benefit to one over the other from a usability perspective (studies, articles, references would be great)?



I feel that the actual bar is nice as most bar controls in general allow you to later switch more seamlessly to an actual representation of overall progress, but in theory you could do the same with a spinner a well.



Answer



Rotation Better for Indeterminate Progress?


More speculation than anything else, but I suspect that some sort of rotary animation makes sense for indeterminate progress since circles have no beginning or end. Some users might be confused by an indeterminate linear progress bar like Windows uses:




  • At a first glance users cannot easily tell the difference between a determinate and indeterminate progress bar, so users have to look longer to determine what to expect.




  • Inexperienced users may fail to distinguish the determinate from the indeterminate and expect the process to complete when the bar reaches the right side; seeing it “start over from scratch” could be disappointing.





Bars Better for Determinate Progress?


There’s some evidence in the human factors literature that humans can perceive differences in length more precisely than differences in angle (e.g., see “Spatial Displays” in Wickens and Hollands’ Engineering Psychology and Human Performance). This suggests that bars are best for determinate progress. However, given progress indications generally provide relatively crude approximations of time remaining, I doubt it makes any real difference.


Rotary motion and a bar shape are not mutually exclusive, so you can have the potential benefits of both. Apple uses a linear progress bar for determinate progress, but a “barber pole” for indeterminate progress. The bar-shape is maintained for visual consistency but the rotary motion immediately indicates the indeterminate property.


Tradition


As for circles versus bars as practiced, I think it’s mostly a matter of tradition. Bars could be easily rendered in early character-cell PCs using IBM extended ASCII characters. Decent circles were almost impossible. The best you had was to cycle through the characters – \ | /, but that was only good for small subtle indeterminate progress displays.


Graphic capabilities improved greatly by the time the web was widely available to the public. As Andre notes, the first popular web browser was Mosaic which featured a globe in its logo on the tool bar (because it's the "World Wide Web"!). To show indeterminate progress when loading a page, the globe spun. Cute, and it set the precedent that's probably the origin of the circular progress indication in web-related things, including smart phones.


Future Work


Wouldn’t mind a study comparing circles with bars, but personally, I think time is better spent on research in metaphorically encoding more useful information into indeterminate progress bars. For example, for download progress, it would be helpful to distinguish between a poorly responding server (e.g., use jerkier abstract animation) and a large download moving bytes speedily along (e.g., faster cycling animation).



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...