Should a flash message be used for toggle buttons that perform actions immediately?

Question

I have a simple interface for managing a user's account in a web app. Clicking each button in the interface performs the action immediately:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This is what it looks like when an account is disabled:

^{download bmml source}

Note:

• The Sign out button is only displayed when the account is online.

• I know the icons are a bit odd, but I couldn't find any suitable ones in the Balsamiq editor. I am using suitable ones in the actual application though.

• Disabling an account immediately signs it out as well.

Current behaviour:

• If the account is logged on:

  • Clicking Disable Account triggers a modal to confirm that we will disable and log off the account. If the user proceeds, Sign out and Disable Account fades out and a button called Enable Account fades in.

  • Clicking the Sign out button display a modal to confirm that the account will be logged off and he will lose any unsaved changes. If the user proceeds, the Sign out button fades out.

• If the account is not logged on (Sign out button is not displayed):

  • Clicking Disable Account fades out the Disable Account button and the Enable account button fades in, in its place.

• Clicking the Delete account button pops up a modal to confirm as this is impossible to reverse. We then redirect the user back to the list of accounts.

---

I am considering displaying a flash message when Sign out is clicked:

^{download bmml source}

However there are some problems:

• Is it necessary to display the flash message when Disable account or Enable account are clicked? These 2 behaves like a toggle button and perhaps the buttons fading into one another can provide adequate feedback.

• The flash message fades in and pushes down the buttons (which are also fading in). There seems to be too much going on. Is there a better way to do this? Studies/testing reports that talks about when too much feedback is too much would be helpful with this situation.

Answer 1

If it aids in clarity and reduces confusion, then do it - whatever it is.

If someone performs and action, and there is a chance that they will not be sure that the action completed, then you should try to provide some visual key to make it clear that it happened. In this case, I think it is a much improved UX if you include the message.

TL;DR: Yes, use the flash message.

Answer 2

Only warn the the user if what he/she is doing is something that they can't undo.

With that in mind I would suggest:

For the "Disable account" button: Only warn them on disable if they have unsaved changes; otherwise just disable the account. It is easy enough for the user to undo by just clicking "Enable Account" again.

For the "Delete account" button: This is pretty serious and can't be undone, so keep the popup confirmation.

Also I suggest removing all fade in/out animations. This alone will improve the perceived responsiveness of the application. Animations in business application should really only be used to assist the user in understanding the app or for some visual cue. In this case they seem superfluous.