7

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?

enter image description here

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

8

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:

mockup

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.

|improve this answer|||||
1

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

  • Syched enter image description here
  • Not Synched enter image description here
  • Starting Synch enter image description here
  • Stopping Synch enter image description here

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.

|improve this answer|||||
1

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]

|improve this answer|||||
1

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.