After some experiments, I settled for using the lower-left corner. The images below show the three states a dialog can have. Whenever a potentially long operation starts, a spinner is shown. If everything goes well, the spinner simply disappears and the window returns to normal. Otherwise, a stock error icon is shown.
The icon tooltip contains the error message, as seen below. For accessibility, the icon is also keyboard-focusable so the mouse is not needed to pop the tooltip.
The only thing I didn't like about my original implementation of this approach was that, for error -> throbber -> error transitions, sometimes the operation was so fast that the throbber wasn't shown at all, leaving the impression that nothing happened. See the video below.
So I added a small delay of 100ms before making the error icon appear. This delay is not large enough to annoy the user into thinking the operation is taking longer than necessary, but it's large enough to keep the visual changes below the flicker fusion threshold in practice.
What do you think? Suggestions?
Good choices with the icon, position, and delay.
ReplyDeleteHowever, I don’t think someone should have to hover over, or tab to, an error icon to see what the error is. You could avoid this by showing the error icon and message together above the commit buttons. One option would be for that area to be blank except when there’s an error. Another would be to expand the dialog, to make room for the error message, when an error occurs.
Hi mpt, thanks for the feedback.
ReplyDeleteGood points, I might try to put in the dialog windows something more similar to the main window status bar, except it will not have a timeout;
Will blog when I have something solid, be it either a mockup or an actual implementation. :)