You have a button. User clicks on button, some async operation is awaited, rotating spinner icon added to the button, button disabled while form is submitting or AJAX processing. What is your preferred way to display a spinner icon?
My vision is:
- When button is clicked, it should be disabled to prevent clicking again;
- Spinner added before text because text still should be displayed, so from accessibility point of view user could see what action he "clicked".
- Spinner displayed before and not after because I am RTL and seeing icon first helps me to understand that some action is loading/performing some ms faster. Probably for LTR icon should be displayed after a text?
- If something went wrong, button is enabled again and spinner removed;
Without a spinner
replace text with Spinner
Write your answer…
i like those ideas http://tympanus.net/Development/CreativeLoadingEffects/ at least 4-5 of them :) maybe as an alternative to the spinner.
Hashnode is building a friendly and inclusive dev community. Come jump on the bandwagon!
💬 A beginner friendly place
🧠 Stay in the loop and grow your knowledge
🍕 >500K developers share programming wisdom here
❤️ Support the growing dev community!
Register ( 500k+ developers strong 👊)
I highly discourage replacing text with a spinner, because that would mean you remove the call-to-action description. Don't ever remove important information from the eyes of the user just because you are working on something! That's bad UX.
Also do not freeze the whole screen if not necessary. Keep the UI usable at all times. Maybe the user doesn't even care about your async operations and just want to carry on... Forcing them to wait would be a bad decision, if it is not needed for the process they are currently working on.
Important: Put a spinner someplace, so the user can see that the application is working. If it is before the text or after doesn't really matter, you should decide based on your design.
An extremely interesting question.
I don't think I know enough about the different methods to say which one is best but I know google design have some great guidelines on design and animations etc. I had a look for a submit/spinner section but couldn't find one - maybe you can.
Might I suggest an alternative though - replace the text with other text. E.g. Replace
Submitting...and then the dots on
Submitting... are animated, similar use of wording for processing etc.
@Gatesunder brings up an interesting point which I've seen on a number of websites. The idea of making the whole page more opaque with a single spinner in the centre. This would be the most explicit method, which also means that the user can't try to interact with the page elsewhere.
As a side note, regardless which kind of method you choose, specifying a minimum time that the spinner is on the page is a good idea - otherwise the spinner might only appear for a split second which doesn't look great because users don't have time to understand what it was that flashed up in the time it takes to blink.
Hope it helped.
From a users perspective, when I visit sites that enable a overlay spinner, it feels like the site is frozen and I'm blocked from doing anything else. From a coders perspective, I see it's purpose in a 'pay now' or 'checkout' button situation. Then the page is completely disabled to prevent multiple clicks resulting in multiple orders, right? It's also letting the user know 'wait a minute, we're processing your order'. In other situations, I feel a small spinner before the button text is appropriate. It would be less invasive on your UI and make your page feel more accessible to the user.
Don't miss out!
Join the growing dev community
Get started (no password needed)
Or Sign in with: