A while back it became fashionable to have animations appear in or layered on top of web pages during page transitions to indicate that the user's request was being processed and that the page was not just sitting there waiting for input or locked up. That's all well and good, except for one thing: it doesn't mean anything like "your request is being processed." The indicator is just an animation that is preprogrammed to cycle through the same set of images until the next page loads, giving the appearance that something is happening, but all it really means is that the animation loaded. It's the web version of "this page intentionally left blank," but worse, because it is misleading rather than just paradoxical.
There is no question that feedback improves usability, so it is the right thing to do to visually advise the user that the application knows a button has been clicked, etc. But, there is one type of status indicator that has no place on a web page: the segmented progress bar. These are a carryover from desktop apps where the bar really does indicate the relative completeness of a process, but they don't work in a web page (they work fine for browser status, but that's different). Unlike desktop apps, web apps are not wired into the events as they are taking place and so they are meaningless.
The problem developers and designers are faced with is that the bar can't just move from left to right once and then stop because the process may take more or less time than that to complete. Clever folks (not good clever) have taken to making the bar cycle repeatedly from left to right, as if that makes any more sense, unless you are a fan of Battlestar Galactica or Knight Rider.
Some alternatives I have seen include a message in the status bar of the browser itself, which is hard to see and easy to ignore; the blinking dot, which is old school in a command-line sort of way (or in the way of the highway information sign when it contains no accident information or fictitious travel times).
The best I have seen are animated icons that are circles or spheres of some kind that have a piece of their image that moves around it, such as the belly-button ring on the Nintendo Wii (take a look, you'll see what I mean), or even the beachball in Windows Mobile apps. In the case of the Wii, the indicator is a simple circle that has a dot moving around it, so there is no question that something is happening. Likewise with the beachball, it is simple but effective, because a circle has no starting point and no ending point and so there is no problem of trying to decide what to do after it cycles the first time.
I probably won't be able to pry the nearly useless status indicators out of web developers' hands, but please, please, please get rid of the Cylon eyes!
2 comments:
Ours is a regular, not web, app but I made the (luckily acceptable) choice of going with a circling arrow. Basically, it's a broken circle with an arrow on one side of the break that rotates about itself. My reasoning was that we wanted the user to know that the app was working on the command but we couldn't instrument the millions of lines of code to get the kind of detail that a percentage-complete indicator would require. To accommodate large blocks of functionality (e.g., loading, parsing, compiling, etc.) I went with a horizontal row of circles. If the step is complete, it is a solid blue circle. If the step hasn't begun yet, it is an empty blue circle. If the step is under way, it is the circling arrow animation. I think it works pretty well, at least for our app.
That sounds cool. It actually updates the meter based on real events, and it doesn't get more granular than you really need. I like the idea of combining a meter of circles with a circling arrow to indicate the step is in progress; very creative.
Post a Comment