5 ms·

I've run into this before too. Sometimes I've actually added a delay timer to buttons that show loading spinners so that the spinner appears long enough for the

I've run into this before too. Sometimes I've actually added a delay timer to buttons that show loading spinners so that the spinner appears long enough for the user to see more than a flash. Is there a better option?

jdnenej 7y ago
Dont use a spinner if it loads fast. One thing I have done is adding a little white box with the word "loading..." In it. Users don't have to wait for any animation to see what it means and it still looks fine for longer loading times.
- ricardobeat 7y ago
  Showing a static message is not recommended since you can't tell if the application has frozen/crashed. Source: https://www.nngroup.com/articles/progress-indicators/ https://www.nngroup.com/articles/progress-indicators/
  - qw 7y ago
    You could have a combination of static text and animation. For example "Loading..." where the dots are animated
  - TeMPOraL 7y ago
    Spinners are no better than static messages. They're animated GIFs completely detached from the state of the underlying application, so they'll happily keep spinning forever, even though the application itself has locked up or crashed. It's particularly painful on websites, since unlike desktop apps, a bug or failure in one AJAX handler tends to not break everything else - so the site may sort of work, except some actions never finish.
    - thasaleni 7y ago
      that is the wrong implementation of a spinner
      - bhaak 7y ago
        Maybe but it's the common implementation of a spinner. I can't remember the last time I saw a spinner that actually showed some kind of variable behavior. If you have that, it's more likely you are being shown a progress bar.
      - jdnenej 7y ago
        Basically all spinners on the web work by sending a request which causes the spinner to show up, waiting for a response which causes the spinner to be removed. Many of them don't handle errors which causes them to keep spinning. A static loading message is exactly the same, while the message is on the screen the request is still pending and while it is gone it is not. The only case you are not catching is where the browser locks up and becomes unable to render the spinning which is not that common or useful.
jraph 7y ago
Make them solve a reCAPTCHA when clicking on the button. Make sure that the captcha takes at least one second to appear. This will make them feel that something is sent and validated.
rane 7y ago
You don't need a spinner if feedback from clicking the button is sufficiently quick. According to Google that would be around 100ms. > Guidelines: > Process user input events within 50ms to ensure a visible response within 100ms, otherwise the connection between action and reaction is broken. This applies to most inputs, such as clicking buttons, toggling form controls, or starting animations. This does not apply to touch drags or scrolls. https://developers.google.com/web/fundamentals/performance/rail https://developers.google.com/web/fundamentals/performance/r...
- ricardobeat 7y ago
  That only applies to actions which have an immediate, perceivable effect, which might not be the case for submitting a form, as described in the OP. For example, opening a dropdown, selecting a checkbox or radio button, etc.
  - toastal 7y ago
    In the case of network it's also presupposing that the user's has a low-latency, fast connection--which should basically never be assumed.
hayksaakian 7y ago
Another common option is a "toast notification" (see android) or other separate confirmation message to acknowledge your action. "Sent X" or "Finished Y!" is sufficient to distinguish a failed ajax call from a successful button press
- raverbashing 7y ago
  Yes but be very careful with those. You don't want to spam the user. I remember some years ago when Ubuntu file sync would pop a notification every time a file was synced. That's a good example of what not to do.
TeMPOraL 7y ago
'hayksaakian mentioned toasts, which are global, but I think another option would be "toasts" local to the button. E.g. flash a checkmark next to the button user clicked for a second, indicating the action was registered and completed. Key here is: next to, and asynchronous. The checkmark can stay alive for a second, but the button shouldn't be blocked for that time. If the user clicks it again immediately, it should "refresh" the success indicator, or add another one. UIs in games have this solved in countless of ways.
roselan 7y ago
I use jquery ui "highlight" effect as visual confirmation for action completion. It's a background easing animation, basically it "flashes" before fading out. It might not be fancy but it's simple and helps.

jdnenej 7y ago

Dont use a spinner if it loads fast. One thing I have done is adding a little white box with the word "loading..." In it. Users don't have to wait for any animation to see what it means and it still looks fine for longer loading times.

ricardobeat 7y ago
Showing a static message is not recommended since you can't tell if the application has frozen/crashed. Source: https://www.nngroup.com/articles/progress-indicators/ https://www.nngroup.com/articles/progress-indicators/
- qw 7y ago
  You could have a combination of static text and animation. For example "Loading..." where the dots are animated
- TeMPOraL 7y ago
  Spinners are no better than static messages. They're animated GIFs completely detached from the state of the underlying application, so they'll happily keep spinning forever, even though the application itself has locked up or crashed. It's particularly painful on websites, since unlike desktop apps, a bug or failure in one AJAX handler tends to not break everything else - so the site may sort of work, except some actions never finish.
  - thasaleni 7y ago
    that is the wrong implementation of a spinner
    - bhaak 7y ago
      Maybe but it's the common implementation of a spinner. I can't remember the last time I saw a spinner that actually showed some kind of variable behavior. If you have that, it's more likely you are being shown a progress bar.
    - jdnenej 7y ago
      Basically all spinners on the web work by sending a request which causes the spinner to show up, waiting for a response which causes the spinner to be removed. Many of them don't handle errors which causes them to keep spinning. A static loading message is exactly the same, while the message is on the screen the request is still pending and while it is gone it is not. The only case you are not catching is where the browser locks up and becomes unable to render the spinning which is not that common or useful.

jraph 7y ago

Make them solve a reCAPTCHA when clicking on the button. Make sure that the captcha takes at least one second to appear. This will make them feel that something is sent and validated.

rane 7y ago

You don't need a spinner if feedback from clicking the button is sufficiently quick. According to Google that would be around 100ms. > Guidelines: > Process user input events within 50ms to ensure a visible response within 100ms, otherwise the connection between action and reaction is broken. This applies to most inputs, such as clicking buttons, toggling form controls, or starting animations. This does not apply to touch drags or scrolls. https://developers.google.com/web/fundamentals/performance/rail https://developers.google.com/web/fundamentals/performance/r...

ricardobeat 7y ago
That only applies to actions which have an immediate, perceivable effect, which might not be the case for submitting a form, as described in the OP. For example, opening a dropdown, selecting a checkbox or radio button, etc.
- toastal 7y ago
  In the case of network it's also presupposing that the user's has a low-latency, fast connection--which should basically never be assumed.

hayksaakian 7y ago

Another common option is a "toast notification" (see android) or other separate confirmation message to acknowledge your action. "Sent X" or "Finished Y!" is sufficient to distinguish a failed ajax call from a successful button press

raverbashing 7y ago
Yes but be very careful with those. You don't want to spam the user. I remember some years ago when Ubuntu file sync would pop a notification every time a file was synced. That's a good example of what not to do.

TeMPOraL 7y ago

'hayksaakian mentioned toasts, which are global, but I think another option would be "toasts" local to the button. E.g. flash a checkmark next to the button user clicked for a second, indicating the action was registered and completed. Key here is: next to, and asynchronous. The checkmark can stay alive for a second, but the button shouldn't be blocked for that time. If the user clicks it again immediately, it should "refresh" the success indicator, or add another one. UIs in games have this solved in countless of ways.

roselan 7y ago

I use jquery ui "highlight" effect as visual confirmation for action completion. It's a background easing animation, basically it "flashes" before fading out. It might not be fancy but it's simple and helps.