Choosing between state and action on video chrome controls

Question

I realize that the question of deciding whether to make a button show its state versus show its action has already been asked. Some of the answers were to make the interface more verbose or add elements to show both state and action. These solutions cannot be applied to my particular dilemma at hand: designing video chrome controls. These controls should not be so verbose or elaborate, so as to appear tasteful and not distract the user from watching the video.

Here we see Youtube's player chrome. Arguably, since Youtube is industry leader in online videos, they've influenced many of the conventions.

• Play - action
• Mute - state
• Expand - action
• Fullscreen - action

Now here's my player chrome. My player streams live content, so I've replaced the play/pause button with an on/off button. This is a work in progress. I would like help choosing between action and state on my unique buttons.

• Power - It seems like power should show the state, unlike how play/pause shows the action. If you look at your computer monitor, the power button illuminates when it's on, meaning that it shows state. Should I borrow this metaphor onto my player power button?
• Lights - This is a button that dims the background. To me, lights appears analogous to mute. Mute turns off audio, while lights turns off vision. So should the lights button show state also?
• HD - This button lets you toggle between high definition and standard definition. I have no clue how to properly design this. Currently, I'm making it show state - when blue, HD is on. When white, HD is off. We did some user testing, and realized most users were confused whether this button showed state or action. This design was borrowed from Vimeo, which was equally confusing to me personally. I had no other video industry leaders to borrow the HD concept from. Vimeo tries to mitigate the problem by flashing onto the screen "HD is on/off" after you hit the button. This isn't ideal because it's not easily discoverable.

Answer 1

Action vs state

The problem with the power button's state is that it's not even clear what the on/off states are. The "off" icon associated with it is a "1" or pipe (|). But showing a simple line will probably be pretty meaningless. You could try using a lit up power button in red vs grey for an inactive icon, but then you face a problem with color blindness. Try having the icon glow when it's active to suggest an association with the glowing status lightson TVs.

As for displaying the action or the state, as soon as you design the button to match its real-world manifestation, it's probably best to implement the same functionality here. So when the video is playing, show the active state. When the user clciks it, pause the video and show the inactive state.

The power switch

I recommend still following the play/pause convention as that's the UI people expect when interacting with a video. Seeing a power button immediately causes seconds of confusion: "It's in the location of the play/pause button, but, wait, does it do the same thing or am I missing something?"

Youtube has live videos. I recommend you check out the UI there (it's barely any different than regular videos, except for "LIVE" in the upper left of the video display).

Feedback on the other buttons in your control area

Here are some things I noticed when looking at the overall design:

• The light button: I disagree with your assertion that light is equal to mute. Mute disables the audio feed. All "light" does is dim the background. To be the same, the light button would have to switch off the video feed. I like the idea of using a lightbulb but at the same time, your control bar is getting kind of busy, so it might be worth taking it out of the bar and putting it in a secondary control area, leaving this one for main controls seen elsewhere.

• Screen/orientation buttons: I'm confused by the three buttons on the right. Am I right to guess the first switches orientation (why?), the second makes the player wider, and the third switches to fullscreen? They all invoke the association of a screen or size somehow but it's not immediately clear in what way. Given Youtube's convention of showing a "make larger" button separately from a "show fullscreen" button, it might be wise to stick to that.

• Time display: the time display is very small and hard for me to read, and I have relatively good eyesight and am still young. Grey on dark grey at this size is going to be invisible for older viewers or those with poor eyesight, however.

As always, I recommend usability testing. You can bet your ass off that getting to this player has cost Youtube a lot of iterations (and consequently, money). Take advantage of their investment by not straying too far.