Changing text on a button twice after action

Question

Is it acceptable to change the text in a button straight after an action has been performed to show the action was successful and then change the text again after a short delay (as the button will still work).

Example
In the case where an organisation's admin can see a list of their staff who have access to the app and need the ability to send resend the welcome email for a password reset. Below is the flow of the process.

Is it ok to provide feedback in the button and then change the button back as it still can be used? Is there a better way of providing this feedback?

Initial state of button

Button clicked - waiting for success call from server (animated spinner)

Button text after success of submission

Button reverts to orginal text after 2s

Answer 1

As with the response by Shano, I think this would work better by moving the feedback outside the button. I would also disable the button. This would avoid people double clicking and accidentally sending multiple emails unintentionally.

I would also want to confirm what the goal is with the delay, Is it to prevent accidental multiple emails, or to prevent a second email being sent until the first has been sent.

In the first case - Prevent accidental multiple emails:

You only need a set time (say 3 seconds) So when the button is clicked the button is disabled and a message saying "You can send another message in X seconds." where X counts down and then the button becomes active again.

In case two - Wait for email sent confirmation:

The button would be disabled and the message could say "Waiting for confirmation that the email has been sent". Then enabling the button after confirmation.

In both of these cases it would not be necessary to change the text on the button as all you are doing is sending the email. I would however recommend that you have some other feed back showing "X emails sent." as the current user or even possibly a different user has sent an email in a different session.

Apologies if I have misunderstood the context of the usage of the system.

Edit: As a side note if you are changing the content of the button I would also set the button width to greater than the widest possible content so the shape stays consistent (It can be annoying for a user hovering over a button to have it move suddenly).

Answer 2

Why not move the animated spinner outside the button? You could place it immediately to the right of the button when clicked. When it's sent, replace it with a green tick and text 'sent'.

If button is clicked again, the 'sent' text is replaced with spinner and it goes again.

Just an alternative idea that might look less confusing.

Answer 3

Personally, I've always been a fan of reusing the buttons to give users feedback on their actions, and this I think is a good idea.

I think what you're aiming for is the right approach, but I don't think the button should revert to the original text right away. Instead, consider changing the text to something like "Resend Email Again" (though it's too iterative) to differentiate it from the rest of the buttons, and therefore avoid multiple deliveries of emails in the case of a distracted admin.

You can have this method work this way, and upon page reload have all the buttons reset to their original state, as if it was "session related" (but not really).