Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 ..."

share|improve this question

3 Answers 3

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.

share|improve this answer

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]

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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