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.