Not really sure of having the spinner inside the SAVE button when it is clicked or inside the panel itself. I dont want the user able to click it again (to know it is saved or not)
1
-
How long does the process take from clicking the button to the process completing?– JonW ♦Jan 28, 2016 at 10:37
Add a comment
|
3 Answers
General practice seems to be the following for "loaders" / "spinners" these days:
- Loader in the center of the screen with blurred / dark / whitened background
- Loader on button is great as well, if you don't need to reload the whole page. But instead of using only a "spinner" you should indicate the progress with words as well, like: "Saving", "Saved" / "Done" or "Sending", "Sent" - depending on the type of interaction happening in the background
I hope it helps!
answered Jan 28, 2016 at 11:57
-
I don't think the loader in the center of the screen with dark background would work in this scenario, it looks like the button is already in a lightbox modal, overlaying another lightbox loader wouldn't look very good and transitioning from modal lightbox to a loader lightbox to finished screen seems too busy. Agreed on second point though I think the in button loader is fine if it has a bit more indication about whats happening. Jan 28, 2016 at 14:12
-
1Yes, you're right. The Loader in the center with dark background wouldn't work in this case. Jan 29, 2016 at 14:30
I think your approach is really correct if you want to limit the user from clicking it again.
Having the process loading in the same area where he clicked last time is think is a good practice. This way you don't load another screen with a progress loading bard.
- Also maybe you musth think how will you display an error or a success message. Maybe with a simple checkmark or X in case of error.
For Most Use Cases - 2 Steps
The best way to communicate "we got your request, we're working on it right now, so please don't touch anything," is to:
1. Make the spinner the focal point
- Place in the center of page: draw their eye (sidenote: make sure it's as smooth as can be - nothing pisses people off like a janky spinner that keeps freezing)
- Darken or grey-out background: This helps communicate "do not take any action right now," because it comes off as "you can't take any action now."
2. Disable the action buttons
- Your UI should indicate buttons are disabled (gray-out), but… you know someone will still click again, so…
- Be sure to actually disable them
For Payments - 1 Vital Addition
Nothing ups uncertainty and impatience when a user’s money is at stake. This can easily lead to an angry click-click-click or a page refresh… landing your user in DUPLICATE ORDER HORROR (and screwing your customer service team).
3. EXPLICITLY: WARN (and SCARE the CRAP out of them).
"Once you've clicked "submit," please give give us just one moment to process your order.
IMPORTANT: Do not REFRESH the page, hit the BACK button, or click 'SUBMIT' more than once. Doing so can cause a DUPLICATE TRANSACTION.
As soon as your order has been processed, a new page with your receipt and confirmation page will open."
Impatience is human nature. Then a world of long lines and spinners on the internet left us with an inability to tolerate even a split second of having to wait.
But the reality is, many actions online or within software require a few extra seconds to process.
These steps have proven helpful for my team in making the spinner as efficient and clear for the user as possible. Hope they can work out for you too!
