12

I'm designing a ToggleButton control that has the ability to be in a locked state in which user interaction will not be able to further toggle the control. In general I would like the button to appear somewhat natural in the natural scheme of rules laid out in Microsoft's UXGuide but I don't mind the idea of using some sort of custom graphic or unique concept to signify fact that the control is locked.

As far as button appearance I could use:

  • An iPhone style ON/OFF toggle button.
  • A toggle button featuring a custom graphic icon such as a power button that lights up when activated.
  • A plain old Check Box.

If I'm to go with a check box I could use the disabled state to represent that the control is locked however this may look to the user as if the control's setting isn't in effect since it normally appears muted via a grayed out style. For the other two options, the only reasonable thing I can think of is to overly some type of padlock style icon on or near the toggle button when it is locked.

If somebody can lead me in the right direction it would be greatly appreciated.

Proposal#1: Below is a concept that I came up with that I think looks somewhat similar to the iPhone toggle but which was inspired by the power button my Wii console. Also I incorporated the suggestion by Hisham to only show the padlock icon when in a locked state. This concept is more specific to toggle button that represnts on/off states but for that purpose I think it appears quite adequate.

mockup of Wii inspired toggle button

Proposal#2: This is another take on the example above but uses the ubiquitous power icon instead of the on/off text. Additionally I used a grayed out text instead of the padlock to signify that the control is on but cannot be toggled any further. Note, I have seen some cases where the line that intersects the circle in the power symbol changes it's position depending on whether power is on or off however I cannot dig up any examples of this right now.

power button representation

UPDATE: Since sometimes context is everything, I created a rough but more specific mockup to show how the toggle control I'm developing will be used. In general I would like be able to apply some of the concepts we develop here to other more common user interfaces but I figured I should at least elaborate further on what is leading more twords hardware style buttons. In the long run, whether I'm going to emulate a hardware look or not the important point is that this toggle control will be repeated in many places and will serve an identical purpose thus perhaps in some cases a specialized toggle control like the one I've proposed would be a good solution otherwise in some cases perhaps a more traditional UI one could use two radio buttons for the ON and OFF states and then use a label to explain or just disable these controls when they are to be in a locked state.

hardware controls mockup

From this example one can see why I'm also moving away from the padlock metaphor as well since placing a padlock icon on the on/off toggle button may mislead the user into thinking the whole control is locked which would not be the case. The locked/disabled state is only supposed to affect the ability to switch the effect control on/off.

Some related links:

Improve this question
4
  • 6
    Toggle buttons, even those that move position, always confuse the heck out of me, especially when the caption is on the button itself: does the "on" caption mean that the toggle is on (state), or that you can turn it "on" (action)...
    – Marjan Venema
    Commented Feb 3, 2011 at 7:17
  • @Marjan - I think this is where the Windows UXGuide is a bit weak but my opinion is that toggle buttons should always describe the current state and they should only describe states where the inverse state is obvious to the user without experimenting. I saw somebody else suggest that using a tooltip that asks the question about toggling to the inverse state may sense (ex. Turn off? or Turn on?). I think the best example of an unintuitive toggle button is the heart icon used by LastFM (at least on my old iPhone) because it is so hard to tell which is the positive or negative state.
    – jpierson
    Commented Feb 4, 2011 at 4:25
  • @Marjan Indeed. ui.stackexchange.com/questions/1318/…
    – Patrick McElhaney
    Commented Feb 6, 2011 at 20:22
  • @Patrick: Knew I had seen something about it before, just couldn't remember where. Thanks for pointing me to it again (turns out I actually upvoted the question and jensgram's answer... :-))
    – Marjan Venema
    Commented Feb 7, 2011 at 8:15

6 Answers 6

Reset to default
6

Admittedly late to the party, but here's my 2c worth ...

You appear to have four available states:

  1. On; user may turn it off.
  2. Off; user may turn it on.
  3. Locked On
  4. Locked Off.

If you show a button on the control (even if disabled), you're implying to the user that they might be able to change the value - in many applications, disabled buttons can be enabled by some other action, for example a "Save" button that is only enabled once a field has been modified.

So, I suggest only showing the button if the state is under the users control.

When state is locked, don't show any button at all - just show the current state.

Here's a mockup:

Mockup of States

I've shown padlocks here, in line with your original thinking, but I think they may be redundant as the lack of a button makes it pretty clear the state can't be changed.

Improve this answer
4
  • Excellent, this is basically what I've been leading towards based on my discussions with Rob Allen. Thanks also for providing the mockup, it does help to visualize the use of the option without the actual button.
    – jpierson
    Commented Feb 11, 2011 at 15:55
  • I really don't like this approach, it violates the design principle of visual inertia. And in the locked state, it seems it is not a button; it even seems that the lock is not part of the button.
    – sergiol
    Commented Jul 18, 2014 at 11:05
  • When the state is locked, the value can't be changed; having it look like a button would be misleading, encouraging the user to click something that won't change.
    – Bevan
    Commented Jul 18, 2014 at 21:59
  • When it is on and unlocked, and is rendered as a button, it looks like clicking the button would turn it on rather than toggling it off.
    – David Callanan
    Commented Aug 15, 2021 at 14:43
3

I would recommend the approach of showing a padlock icon, but not as an overlay. Instead, I'd put it next to the control. For the iPhone-style ON/OFF toggle button and checkboxes, it can go on either right or left.

If the padlock icon needs to appear only to indicate lock status, i.e. the user cannot click on it to unlock, then I recommend that it not be shown at all when the control is not locked.

Improve this answer
2
  • I agree with the idea of not showing the padlock icon when the control is not in a locked state. Another possible implementation I've been considering is something similar to the Wii power button, see my example in the update I'll make to my question.
    – jpierson
    Commented Feb 4, 2011 at 3:39
  • In my example I replaced the "On" text with the paddlock icon mainly because the word On is already redundant because of the existance of the hot LED icon. In this example I think it would be reasonable to place the paddlock inline with the "On" text but maybe just to the right of it but then again that might just make it look more crowded. In terms of showing the padlock outside of the button, I think that may just introduce more noise and complexity into the general layout where the button will appear. What are your thoughts?
    – jpierson
    Commented Feb 4, 2011 at 4:29
3

I agree with Rob Allen's point. Your challenge is to recreate a four state choice field with a metaphor typically associated with two choices. A radio button type metaphor (where mutual exclusiveness is reinforced) may be more comfortable for users since this metaphor type supports an nth state choice field.

However if the button is something you want to stick with maybe a slightly more radical visual representation of the locked state is necessary? Perhaps pairing the padlock icon with a red button border? This way the states ON (w/ LED) and ON LOCKED (w/ LED and red border + padlock) are different enough to strongly suggest two states. Ditto with the OFF states.

Of course the only potential issue with using color as a state representation is that color blind users could miss the visual clue, which amplifies the value of the padlock icon...

Improve this answer
2
  • I should make clear that the button only toggles to two different states which are ON or OFF. If the button is locked (always by the system NOT the user) it shows it's current state just as a disabled checkbox does but also indicates to the user that the state cannot be changed interactively.
    – jpierson
    Commented Feb 9, 2011 at 20:39
  • If I were to use a different border for the locked state I would probably opt to make it gray if anything so that it follows more of the common conventions for disabled controls. This way it would appear slightly different than when in the non-locked state but it would also not cause issues for color blind users.
    – jpierson
    Commented Feb 9, 2011 at 20:41
2

You currently have 3 4 states for your button which are logically paired, on, off in one group and locked(on) and locked(off) in the other. With your push button metaphor and labeling, you are hinting at only 2 of those states, off and on. That means that I have no idea that a locked state could be waiting for me in my future. Once a user stumbles on that, they may remember that but a new user will not expect a locked state. Also, if a user first encounters this control in its locked state (before seeing the power icon or an on/off label) they may not get the purpose of the control.

Instead of trying to map a push-button style control (2 natural states), you can use a different metaphor which is more conducive to multiple states, like a sliding switch, knob, or dial with labels over the meaningful positions.

Edit

In response to your comments, I disagree that you have a checkbox as your underlying metaphor because your 2 sets of states are mutually exclusive; i.e. you cannot be off AND on or OFF(Locked) and On(Locked) at the same time. I believe your underlying metaphor is instead a pair of radio button lists or, a radio button and checkbox for the locked state.

To try and represent all of that in a single button and still be usable and discoverable sounds like too tall an order.

Edit 2

From the "Putting my money where my mouth is" file:

Quick and dirty mockup control...

enter image description here

Improve this answer
11
  • I understand your point that a user may not be able to understand the locked state when first encountered. When I mocked up those examples however, I realized that the locked state was basically nothing more than just a disabled state and thus colored the text gray to follow standard conventions. After doing this I realized the push button control only differs form a checkbox in it's visual style and the fact that the label is stating "current state" instead of a single affirmative statement. In my example the lit up led would be the check and a disabled/locked button could be ON or OFF.
    – jpierson
    Commented Feb 9, 2011 at 4:43
  • Perhaps instead of showing the toggle button at all for the locked state I could simply show the lit up LED icon to show something is permanently in the ON state and cannot be toggled. Maybe in absence of a button the concept even more obviously represents "locked" from the users perspective than if I were to show the toggle button disabled as in my example.
    – jpierson
    Commented Feb 9, 2011 at 4:46
  • 2
    The absence of a button would hint that the state cannot be changed much more than a color change IMO.
    – Rob Allen
    Commented Feb 9, 2011 at 14:03
  • Normally I wouldn't try to condense so much into a single control so it may help to know that I'm aiming for this button to be used for on controls that represents filters and can be configured in quantities ranging from about 5 to 20 at a given time. To visualize it you could image something that looks like rack server interfaces or other types of auto production equipment. soundonsound.com/sos/feb06/images/cubase01.l.jpg
    – jpierson
    Commented Feb 9, 2011 at 20:48
  • Understood - I think a 3 position switch with its labels could fit in the same space as your mockups above and get you what you are looking for. It could also look more industrial which may be fitting with the overall style.
    – Rob Allen
    Commented Feb 9, 2011 at 21:15
2

I know this question is old, but I saw it hasn't an answer. I think for on/off it should be used a simple switch button and for the locked state, the button should be disabled.

enter image description here

More examples: Material design - Selection controls.

Improve this answer
0

I would use a toggle switch, and graying it on the locked state.

Why?

  • It doesn't suffer the problem of the command vs state problem. Imagine you have a media player with a Play/Pause button. When you display the Play icon on it, is it the command or the state? This is a common issue on two-state toggle buttons.

  • It clearly displays the State. The command and the state are on overlapping positions, so you don't suffer the previous problem.

  • It works well with mobile. Android and iOS have plenty of them. Even Windows 8 for desktop has its own version of them.

  • Being gray is almost a convention of a disabled thing. And you will respect the design principle of visual inertia. You can argue that I should not rely on color, and that's right, so put a key/padlock/slashed keyhole icon on its slider.

Improve this answer
0

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.