The user needs to be able to activate/deactivate an item in the ui.


Display the current state of the item (activated or not) and offer the ability to activate/deactivate it depending on what state it is currently in.

See mockup for an example of both methods.

enter image description here

Is there a better way?

Would either of these require any supporting ui elements to more clearly show the state or can they work as standalone elements to meet the needs of the spec above?

  • 1
    Just few thoughts, a) It will be better if the status message and the action button are positioned far from each other, else it can be confusing. b) If you use an image or colored boxes for the status message or action button make sure there is a text element in it that is well readable so that visually handicapped people find it easier to read what action/status it is. You blue button mockup is preferable
    – user36789
    Jan 6, 2014 at 11:25

3 Answers 3


Maybe something like that? It's quite clear what is chosen and what should you do to reverse the action...

enter image description here

  • I quite like this approach. I think you understand the specific need. It shows the status clearly, and also there is an action clearly stating what will happen when clicked
    – Dave Haigh
    Jan 6, 2014 at 10:32

The button label can either tell you the current state, or the action that button will do when pressed. Therefore, the spec is not fulfilled since it requires both state AND action.

A better looking and more intuitive UI is a toggle switch (courtesy of http://ui-cloud.com/toggle-switches-ui-elements/):

On/off latch or switch

This part of the answer is rendered obsolete by the updated mockups in the question:

The checkboxes give the wrong idea that both can be selected at the same time (Mutually exclusive options are represented through radio buttons, not checkboxes).

  • both buttons and both checkboxes wouldn't be visible at once. its an example of the two states that could exist. I think my mockup is a bit crap - i'll update the image
    – Dave Haigh
    Jan 6, 2014 at 10:33

Not really sure about your question. Do you want to know if there is a better way, or if there is another way?

Both examples are pretty common. Checkboxes more than buttons. The Windows 8 UX even suggest toggle switches above checkboxes:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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