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.

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

SPECIFICATION:

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?

share|improve this question
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 –  rps Jan 6 at 11:25

3 Answers 3

up vote 3 down vote accepted

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

enter image description here

share|improve this answer
    
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 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).

share|improve this answer
    
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 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:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465475.aspx

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.