User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
On slow connections (or if the server is randomly slow for some reason) it makes sense to have loading indicators. But when the connection is good, the req is too fast and the loading looks horrible. What is the usual way of handling this? Here are my 2 cases:
Loading on slow/md netowrk: https://puu.sh/uaObO/00f6b05c82.gif
Loading on fast network: https://puu.sh/uaOdH/956cd0a9e2.gif
But when the connection is good, the req is too fast and the loading looks horrible.
Granted it looks bad, but it isn't horrible.
You are thinking about the problem in the wrong way. Instead of trying to remove the loading animation, you may benefit from adding a feedback.
Some of the feedback indicators I would consider would be,
Change the color of the button to green, and change the text to "Published Successfully." You might also want to disable the button. However this approach would require you to re-enable button (and change the text and color back to original) when the user starts filling in the form again.
Every time the publish operation succeeds, display a notification card - either at one of the corners of the window or at the top centre.
Such feedback would clearly indicate that the operation is complete, and the user may proceed to fill another form if required.
Be a happy camper?
Now, seriously, this is a case where the answer is: do nothing. Providing a visual cue to your users that your server is blazing fast is nothing to be ashamed of. Quite the contrary, it's a great indication for your users.
Besides, if you load the animation on a slow connection, let's say you have incredibly different time ranges going from 0.1ms to 1 second: why should the behavior be different? It's not different from 59 seconds 900 milliseconds compared to 1 minute, so the same should happen if the load takes 100 ms, 200ms, 500ms, 1 second, .... (N)
If you really think it's an issue, I'd recommend testing with real users and see what's their opinion. Assuming it's a real issue (or it just annoys you) you can simply show the animation after some threshold time, which may be defined by you arbitrarily, or might be taken from testing results. Thus:
if {$annoyanceThreshold => true} : $noAnimation
else : $showAnimation;
