How to implement busy spinner with button

Question

What should happen when a user clicks on a button that triggers an action that takes a short amount of time to complete, showing a busy spinner to indicate processing?

• [click]↖ ⇒ [click] ↖⚙ - Mouse cursor changes to system busy spinner cursor
• [click] ⇒ ⚙ - Busy spinner replaces button entirely
• [click] ⇒ [ ⚙ ] - Busy spinner replaces button text
• [click] ⇒ [click ⚙] - Busy spinner appears inside button
• [click] ⇒ [click] ⚙ - Busy spinner appears outside button
• [click] ⇒ [⚙ please wait...] - Busy spinner replaces button text, accompanied by text
• [click] ⇒ ⚙ please wait... - Busy spinner replaces button entirely, accompanied by text

Which one of the above solutions is the most user-friendly?

Answer 1

The answer what is the most user-friendly is always it depends. Depends on a lot of factors the main one is who is your target audience? What is their knowledge and mental models.

For this example, as I have no idea about the context of the action, I would recommend thinking about few things:

1. What action that user took? (action)
2. What did they expect to happen? (knowledge)
3. Is their expectation different from the system behaviour (gap)
4. Close the gap by providing feedback to the user (understanding)

For your example

[click]↖ => [click] ↖⚙ - Mouse cursor changes to system busy spinner cursor

• Which system is busy?

[click] => ⚙ - Busy spinner replaces button entirely

• Why did the button disappear?

[click] => [ ⚙ ] - Busy spinner replaces button text

• This to me seems like an ok solution, though this is only my opinion. Also this approach assumes that the user will know what this spinning thing means.

[click] => [click ⚙] - Busy spinner appears inside button

• Can the user click the button again? What will happen if they will?

[click] => [click] ⚙ - Busy spinner appears outside button

• Can the user click the button again? What will happen if they will?

[click] => [⚙ please wait...] - Busy spinner replaces button text, accompanied by text

• Good solution as the user has feedback that something is happening and they need to wait. Can they click the button at this point? What will happen if they will?

[click] => ⚙ please wait... - Busy spinner replaces button entirely, accompanied by text

• Where did the button go? Did I break it? Oh yeah I need to wait...

In my opinion the 3rd and 6th options are the best, but I would suggest either finding some studies about this or performing a usability testing and seeing how your users react to these different approaches.

Answer 2

[click]↖ => [click] ↖⚙

• This can be very confusing for the user, as they don't specifically know if a process is being run on the website or on their pc

[click] => ⚙

• This would have been great only that, it doesn't pass enough information to the user

[click] => [ ⚙ ]

• This is similar to the above option still not much information passed, the extreme user won't know what that means for sure.

[click] => [click ⚙]

• This is still directing the user to click and its busy with work at the same time, it's confusing to most users

[click] => [click] ⚙

• This is similar to the previous, just above. Be sure to have most users clicking that button even when a spinner is displayed.

[click] => [⚙ please wait...]

• This is way better, for the most part only that, its still a button, which implies "it is to be clicked" to some set of users. Except if disabled then it becomes perfect.

[click] => ⚙ please wait...

• This is another great option, yanking of the button completely and avoiding the users of any possible consequent clicks, and letting them know that a process is been carried out.

SUMMARY

Last and penultimate options(Disabling the Button) are the best picks.

Answer 3

I believe none of the examples.

I would prefer to start loading the HTML and CSS skeleton of whatever that button must fill. Let's suppose that when the users clicking on the button it makes a REST request to fill a table, as soon as the user clicks on the button, it starts loading HTML and CSS skeleton, that time in animation is used as a waiting time for the user.

This is a well-explained example of what I mean: BLOG - stop-using-loading-spinner-theres-something-better

Answer 4

Changing the mouse cursor is not a good idea and is likely to confuse the user. The busy spinner is a consequence of an action taken by the user, so it must be shown in relationship with this action.

The spinner must be visible enough not to be missed by the user. If you only replace the text inside the button, or make the spinner appears within the button, such a small change can easily be overlooked by the user.

I would change the button status to give an immediate visual feedback to the user that their click has been registered, and add the spinner next to it with the "Please wait" message. The wording of the message could be improved if you have a micro-copy writer. Giving a time estimate would be a good thing too, if it's realistic.

Answer 5

I would never change the mouse cursor. IMHO, best UX is to disable the button as soon as it is clicked and change the button text to 'Please wait...'/ 'Loading...' . Call it old fashioned, it works best for web as well as mobile layouts.