How to best represent a ToggleButton (representing on/off) with the ability to be locked
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.
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.
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.
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: