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.

Any ideas for how to design a multi-state UI "button"? The the states are:

  • Off
  • On, Selected
  • On, Unselected

There needs to be a clear interaction difference between a user "Selecting" it and turning it "on" or "off".

Some clarifications from the comments:

On, Unselected means that the component driven by the button is 'On' or 'Enabled' but the controls/variables/view for that button is not in view (because it's not selected).

Off+Selected may be allowed, but for simplicity and to try out a design first I would rather keep it to just 3 states: Off, On+Selected, On+Unselected

Turning the component 'on' or 'off' is separate from the action of showing and hiding the variables associated with that component. Which is why the on/off interaction does not have to necessarily be part of the same button. However, there will be a handful of these buttons on the screen at any given moment, so it needs to be clear which button the user is actually turning on or off.

Any design patterns or inspirations you can think of?

For some more clarity, here is a wireframe example. The buttons in question are labeled A,B,C,D. There may be multiple "Controllers" on the page at any given time. The question is, what is a good way to allow the user to Turn On/Off one of the components (ABCD) and also to Select/Deselect...

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
1  
What does it mean to be 'on' and 'unselected'? –  Jimmy Breck-McKye Oct 23 '12 at 16:07
    
Is Off+Selected disallowed? –  obelia Oct 23 '12 at 16:31
    
On, Unselected means that the component driven by the button is 'On' or 'Enabled' but the controls/variables/view for that button is not in view (because it's not selected). ---- Off+Selected may be allowed, but for simplicity and to try out a design first I would rather keep it to just 3 states: Off, On+Selected, On+Unselected –  Muers Oct 23 '12 at 16:40
    
It sounds like the action of turning the component 'on' or 'off' is separate from the action of showing and hiding the variables associated with that component. Is that right? –  Matt Obee Oct 23 '12 at 16:50
    
Yes, Matt, I think you're correct. Which is why the on/off interaction does not have to necessarily be part of the same button. However, there will be a handful of these buttons on the screen at any given moment, so it needs to be clear which button the user is actually turning on or off. –  Muers Oct 23 '12 at 17:19
show 4 more comments

4 Answers

There are a ton of ways to show two states at once. Just choose any two visual properties, and map them to your variables.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In the mockup, I stuck to properties specific to the button, but you could go beyond that:

mockup

download bmml source

But I have to say that this question is pretty general. A more specific description of your problem would help us in identifying a combination that works best for your situation.

share|improve this answer
add comment

If I'm right in my understanding that 'selected' isn't really a state (it's not a setting that is stored but rather something that happens within the UI to reduce the amount of information displayed) I'd consider something like the below. If a component is 'on', a control to expand the additional settings for that component is displayed.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Ah, very interesting. You are right that 'selected' is not a stored state (only on/off is stored).The only reason why this does not work for my specific application is that a user can select more than one Component at a time (in order to edit multiple options at once for all the selected Components). –  Muers Oct 23 '12 at 21:18
    
@Muers I see, that does certainly introduce another challenge... –  Matt Obee Oct 23 '12 at 21:21
add comment

On / Off is associated to the checkbox kind of button.
Unselected is associated to grayed appearance of a disabled control.

One way to do what you want would be to set big checkbox-like controls to signal On / Off states, and to enable /disable them to signal selected / not-selected states.

Not the natural checkbox found in the wild, awful and intractable.
To be able to tweak the appearance of checkboxes you need a wrapper, like jQueryUI button or something similar, allowing you to style them at will.

share|improve this answer
add comment

We are having a similar issue on one of our projects...we have recommended using a checkbox, but they are wanting something "sexier"...I'm sure you have all heard that before. I have a solution below, but I don't really care for it.

So we are thinking of something like this:
Multi-state select

share|improve this answer
    
That is an interesting approach. What do the different states/colors mean? It's not immediately obvious... –  Muers Jan 17 at 21:27
    
Red would mean "off," Blue-"on" and Grey="Neither on or off"...I would probably use different colors, but just wanted to get something out quick :). –  SheenaBove Jan 21 at 17:17
add comment

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.