4 ms·

This is how I've been doing it as of late: http://dribbble.s3.amazonaws.com/users/14012/screenshots/867046/attachments/92623/toggles.mov http://dribbble.s3.amaz

by rglover 14y ago

This is how I've been doing it as of late: http://dribbble.s3.amazonaws.com/users/14012/screenshots/867046/attachments/92623/toggles.mov http://dribbble.s3.amazonaws.com/users/14012/screenshots/867...

dylanrw 14y ago
Very nice take on the toggle.
steveax 14y ago
Nice! Incredibly clear what the choice is.
rizwan 14y ago
Shouldn't the positive choice (Yes) be on the right? Otherwise, great visuals!
ryanpetrich 14y ago
How exactly does that work for people that are red/green colour-blind? Perhaps gray for off might work better?
guptaneil 14y ago
How is that any different, or any more clear than existing toggles? At the end of the video, are they all off, or will clicking them turn them off? I can never tell with these toggle buttons if the text is describing a state or an action. The worst offender was the HDR button in the iOS 5 Camera app. It just had an "HDR On" label at the top, which left me absolutely no way of knowing if that meant HDR was on right now or if touching that would turn HDR on.
- Timothee 14y ago
  A few years ago, I worked on a video player and looked around a lot to figure out if designers tended to go for "show action that will happen when clicked" (e.g. video is playing, so display the "pause" icon) or "current state" (e.g. video is playing, so display the "play" icon). For a video player, you'll have things like the play/pause button, the video quality, etc. I think the conclusion is that in a lot of cases there are no conclusion. There are no definite best practice, both can be justified and both are used pretty widely. (PS: I just checked Vimeo, Youtube and Hulu. It seems that they tend to agree on showing pause when it's playing. However Hulu and Youtube both show the mute icon when it's muted, so they're not consistent regarding action vs. state. My point is that for video players, there seems to be a potential best practice here, but in general "action vs. state" is not clear-cut)
  - guptaneil 14y ago
    I feel like it should be clear-cut. A button should always describe an action. If I can click on it, I want to know what action will happen when I do. Labels are for states. We need to stop combining the two. The easiest way to do so is to make sure your button always has a verb in it.
  - Gormo 14y ago
    This is pretty common, even in desktop media players. VLC, for example, has a play/pause button that's labelled according to action, and a mute/unmute 'button' that's labelled according to state. I put 'button' in quotes, though, to reflect a key difference: the mute/unmute control in VLC isn't actually a button; it's an icon without button styling sitting next to the volume slider, and this appears to be the case for other desktop media players as well. Since the presentation of the control is distinct, this might be less of an inconsistency with desktop players than with these web video players. Still, there seems to be an increasing muddle between action and state in labeling UI controls, and that's not even considering functional controls that display arbitrary information unrelated to any current state, like icons for applications that display arbitrary content from a file created or accessed by that application (I'm looking at you, Windows Phone Photo app). I really don't understand why there's so much wild experimentation with UIs in production software these days, but I do find my count of UI-related "WTF moments" going up every month.
    - Timothee 14y ago
      Yeah, the video player ended up being a so-so example. :) The point is that it's common to have UI elements that can go one way or the other and it's often possible to justify either way. As far as why there's a lot of experimentation, I think it's just because designers are trying to find the pattern that will make people go "wow, look at this, this is so cool/smart". Look for example at the praise Loren Brichter got for pull-to-refresh. (it was indeed cool and smart) I think a lot of people are experimenting to see if they can find the same kind of pattern that end up sprouting all over the place. I don't know if this is really something new though.
      - 14y ago
- rglover 14y ago
  I think it's pretty clear toward that the "off" text paired with the red signifies the current state. Likewise hen turned on. The reason I've chosen this is that the actual button is changing its state (e.g. other toggles merely slide a box left or right with no color or label updates). This ultimately reflects the design principle of giving the user feedback. Clicking the toggle noticeably shows a change in state. There's also some affordance in the design because of the coloring. This isn't perfect (as acknowledged in the comment about color blindness below), but it solves enough of the problem to be obvious. No interface is 100% perfect for every user, every test case, or extreme.
Timothee 14y ago
I don't think this is what he's talking about. Well, kind of, but from how I understand, he's talking more about the buttons used like they are in iOS's calendar: http://patrickmd.net/blog/wp-content/uploads/2008/10/iphone_calendar_sshot.png http://patrickmd.net/blog/wp-content/uploads/2008/10/iphone_... (the 3 buttons at the bottom center) Here you have 3 buttons, so it's easy to know which one is selected, but he's talking about when this is used for two different views ("often the choice is not between turning a specific feature on or off, but between two different view, modes or whatever"), and when the styling makes it hard to know which one is "pressed". Actually, the styling in the linked screenshot is not fantastic in that regard. If it had only two buttons, you would have to assume that the one that doesn't match the surrounding bar is the one that is not selected, but if you remove the bar, or change its color, you're out of luck.

by rglover 14y ago

dylanrw 14y ago

Very nice take on the toggle.

steveax 14y ago

Nice! Incredibly clear what the choice is.

rizwan 14y ago

Shouldn't the positive choice (Yes) be on the right? Otherwise, great visuals!

ryanpetrich 14y ago

How exactly does that work for people that are red/green colour-blind? Perhaps gray for off might work better?

guptaneil 14y ago

How is that any different, or any more clear than existing toggles? At the end of the video, are they all off, or will clicking them turn them off? I can never tell with these toggle buttons if the text is describing a state or an action. The worst offender was the HDR button in the iOS 5 Camera app. It just had an "HDR On" label at the top, which left me absolutely no way of knowing if that meant HDR was on right now or if touching that would turn HDR on.

Timothee 14y ago
A few years ago, I worked on a video player and looked around a lot to figure out if designers tended to go for "show action that will happen when clicked" (e.g. video is playing, so display the "pause" icon) or "current state" (e.g. video is playing, so display the "play" icon). For a video player, you'll have things like the play/pause button, the video quality, etc. I think the conclusion is that in a lot of cases there are no conclusion. There are no definite best practice, both can be justified and both are used pretty widely. (PS: I just checked Vimeo, Youtube and Hulu. It seems that they tend to agree on showing pause when it's playing. However Hulu and Youtube both show the mute icon when it's muted, so they're not consistent regarding action vs. state. My point is that for video players, there seems to be a potential best practice here, but in general "action vs. state" is not clear-cut)
- guptaneil 14y ago
  I feel like it should be clear-cut. A button should always describe an action. If I can click on it, I want to know what action will happen when I do. Labels are for states. We need to stop combining the two. The easiest way to do so is to make sure your button always has a verb in it.
- Gormo 14y ago
  This is pretty common, even in desktop media players. VLC, for example, has a play/pause button that's labelled according to action, and a mute/unmute 'button' that's labelled according to state. I put 'button' in quotes, though, to reflect a key difference: the mute/unmute control in VLC isn't actually a button; it's an icon without button styling sitting next to the volume slider, and this appears to be the case for other desktop media players as well. Since the presentation of the control is distinct, this might be less of an inconsistency with desktop players than with these web video players. Still, there seems to be an increasing muddle between action and state in labeling UI controls, and that's not even considering functional controls that display arbitrary information unrelated to any current state, like icons for applications that display arbitrary content from a file created or accessed by that application (I'm looking at you, Windows Phone Photo app). I really don't understand why there's so much wild experimentation with UIs in production software these days, but I do find my count of UI-related "WTF moments" going up every month.
  - Timothee 14y ago
    Yeah, the video player ended up being a so-so example. :) The point is that it's common to have UI elements that can go one way or the other and it's often possible to justify either way. As far as why there's a lot of experimentation, I think it's just because designers are trying to find the pattern that will make people go "wow, look at this, this is so cool/smart". Look for example at the praise Loren Brichter got for pull-to-refresh. (it was indeed cool and smart) I think a lot of people are experimenting to see if they can find the same kind of pattern that end up sprouting all over the place. I don't know if this is really something new though.
    - 14y ago
rglover 14y ago
I think it's pretty clear toward that the "off" text paired with the red signifies the current state. Likewise hen turned on. The reason I've chosen this is that the actual button is changing its state (e.g. other toggles merely slide a box left or right with no color or label updates). This ultimately reflects the design principle of giving the user feedback. Clicking the toggle noticeably shows a change in state. There's also some affordance in the design because of the coloring. This isn't perfect (as acknowledged in the comment about color blindness below), but it solves enough of the problem to be obvious. No interface is 100% perfect for every user, every test case, or extreme.

Timothee 14y ago

I don't think this is what he's talking about. Well, kind of, but from how I understand, he's talking more about the buttons used like they are in iOS's calendar: http://patrickmd.net/blog/wp-content/uploads/2008/10/iphone_calendar_sshot.png http://patrickmd.net/blog/wp-content/uploads/2008/10/iphone_... (the 3 buttons at the bottom center) Here you have 3 buttons, so it's easy to know which one is selected, but he's talking about when this is used for two different views ("often the choice is not between turning a specific feature on or off, but between two different view, modes or whatever"), and when the styling makes it hard to know which one is "pressed". Actually, the styling in the linked screenshot is not fantastic in that regard. If it had only two buttons, you would have to assume that the one that doesn't match the surrounding bar is the one that is not selected, but if you remove the bar, or change its color, you're out of luck.