Showing the status of an action on a button

Question

I have an application that can synchronize content between a website and a social network. with a button you can turn on and off the synchronization.

the user needs to see the status (sync on or off) and the action (turn the sync on or off).

Between switching sync on and off there is a waiting time, which should see the user.

This is my solution? Is there a better way I can achieve this?

the labeltext shows the action and the bubbles show the status. while the waiting time the labeltext changes to "wait ..."

Answer 1

It can be confusing to put something that is (that is the status) in a button that represents something that could be, (that is the action).

Try to separate the Status and the Action (or button) into two clearly different elements, for example a text label and a button:

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

Then apply whatever layout suitable to communicate what is an action (button styles, with or without icon), what is going on (spinner, dot dot dot), so it conforms to the rest of the colors and symbolics of your webpage.

Answer 2

They say 90% of user actions are based on her current experience. Based on that, I believe current user experience is that controls should express current state of the system. In addition button is supposed to be clickable.

So, it looks like you should have button text related to current state and the button itself will suggest the state is changeable.

[ο Out of Sync]

[● Synchronized]

[@ Wait]

Answer 3

Keep in mind the function of user interface objects.

Displays and status icons are read-only objects to inform the operator.

Buttons enable the operator to take action of some kind.

Combining these two functions was popularized by the play/pause button on computer audio and video players. From one perspective it makes sense to have 2 mutually exclusive actions share a single control. But the reason these systems work so well is that the audio or video provide abundant feedback to the user of the current state. Displaying only action info on a button without user feedback leaves the operator with the puzzle of deducing the current state which introduces ambiguity. If a button is labeled "Lock Door" does that mean the door is currently open or currently unlocked? Nobody knows.

I would argue that the green light is too ambiguous to effectively inform the user of the status. Does the green light mean that it is syncing or that it is ready to sync? Remember your job is to eliminate ambiguity. You should add a label above the button to inform the operator of the state. After all, it's no more work to add a label above the button than it is to put a status light on the button. The label should display "syncing" or better yet "now syncing" along with "waiting" and another word (or just blank) for any other state needed.

Answer 4

I would keep the same button/icon in different variations to communicate:

• Synced
• Not Synced
• Starting Sync
• Stopping Sync

In this way you get a higher consistency and fewer user controls. No need to show the control to start synchronizing when the application already is synchronizing.

Answer 5

Back when this question was first asked (and answered), this doesn't seem to be a common practice for technical reasons or it just wasn't conventional to do so at the time (I believe that a modal or some way to stop other user actions was the standard practice.

But since then there has been both questions asked about showing the progress indicator inside a button: Is it a good idea to show progress indicator inside a button?

And also this UX Movement article on when to show a button's loading status: https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/

This suggests to me that there are accepted and common use cases that are supported by built-in features of button components (and with using animation on icons) that is simply an extension of a button with an icon as seen in the examples in the UX Movement article (see image below).