3

What is a good way to handle component that change states who may or may not be delayed?

For instance if I have a checkbox and when pressed, I need to do a potentially slow action (like a web request), before approving the change.

In this case, what is the best practice while waiting for a response? Turning the component disabled/greyed out and showing a loading indicator (spinner), until I have received the response?

1

Animated loading indicators go a long way, but there are a few things to consider.

Expected wait time: Even a small delay needs to be dealt with or the user will be confused, frustrated, or try something else, but how to best deal with a one second delay is obviously very different from a process that's taking 5 seconds, 10 seconds, a minute, or hours. For a very brief delay of one or two seconds you want something subtle that doesn't take much processing on the user's part. A little animation on the control itself, and to indicate that nothing else should be done in the meantime you can change the cursor. For something that can take more than a couple of seconds you should provide more feedback: ideally already set the right expectations before the user even clicks, and tell the user what is happening and approximately how long it will take. Longer processes need different kinds of patterns to prevent the user from sitting and waiting in the first place, but I assume those are not what you are asking about.

Type of control: for some UI controls, users expect instant results, and disabling the control prevents the user from trying the same thing again, but it breaks common expectations. This includes checkboxes and any other controls that provide immediate visual feedback, such as radio buttons or dropdown lists. The user expects the state of these controls to change immediately, which is of course problematic if the value isn't known right away. That's simpler for a checkbox than a list because the next value can be anticipated, so what I like to do is change the control to the expected value (check the checkbox or radio button) and revert that change if the server comes back with something unexpected. Either way this adds to confusion, so it's best to stick to controls that don't need to visually change state, such as a button. Buttons are also good because they provide the label right on the control so you can give useful feedback there, such as a change of label and an animation right on the button.

1

For my point of view is always good to inform your user why he should wait- maybe just show an little box with information, that "Your request has been pulled, you have to wait a little ....for some reason", If this situation is quick, and the waiting time is short, You can switch checkbox to waiting little circle - just showing Your user he is waiting only for request for this element: not whole page.

I hope that helps a little, Kind regards!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.