6 ms·

When a button displays the text "mute" ... does it mean that the status is CURRENTLY muted, or that pressing that button will make it MUTE?

Y-bar 3y ago
Yep! When the _state_ and _action_ are intermixed it becomes ambiguous. This is one of may things we lost in the war on skeumorphism. The skeumorphic interfaces could mix both more clearly, using shading and texture and "lights" to indicate that a play button was pressed down and active. Look at this UI, it's mix of state and action: https://discussions.apple.com/content/attachment/861693040 https://discussions.apple.com/content/attachment/861693040 fast backward rewinds: Probably showing action Play: 100% ambiguous if action or state fast forward: Probably showing action Volume slider: showing state Back-forward buttons: showing action Select drop-down: Showing state
- iamtedd 3y ago
  As someone who has no experience with this version of iTunes: - The lower row is definitely a row of buttons. Back, forward, categories in the library (?), I don't know what the last one is supposed to do. - Are the things above that row buttons? Why don't they look like them then? - If they are, what does fast forward and rewind do? Skip to the next track and to the beginning of the same track? Actually move quickly through the track (like fast forward and rewind used to do)? Does pressing rewind go to the beginning of the track or to the previous track? If it's to the same track, how quickly do I have to click again to go to the previous track? - Is that slider a progress bar or volume slider? - Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? - I assume the coloured things are the window management controls. Does clicking the red one close the window and keep the music going, or does it stop?
  - Y-bar 3y ago
    > what the last one is supposed to do. It's indicating an iOS device being locally, e.g. for administration, backup, file transfer and the like. > Are the things above that row buttons? Why don't they look like them then? Haha yeah. That's modern Apple for you! > what does fast forward and rewind do? They sort of behave the way ff and fr does on a remote. Click/press fast and you skip to the next/previous song/chapter or equivalent. Hold down and you scrub at something like 4x speed. > Is that slider a progress bar or volume slider? A volume slider. > Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? I ask myself the same thing every day and have the same problem with many many apps, also in Windows. For example Firefox has the same design problem where its buttons have nor border and therefore have no clear place where draggable top space is and button is. > I assume the coloured things are the window management controls. Yes, these have remained mostly unchanged for over 20 years, they have gotten a bit flatter and lost some subtle small iconography. > Does clicking the red one close the window and keep the music going At least this part works well and in a predictable fashion. It consistently follows Apple's Human Interface Guidelines since well over 30 years: Closing a window or document of a Mac OS application should not quit the application. (there are some exceptions, but that is the default behaviour).
    - Muehe 3y ago
      > For example Firefox has the same design problem where its buttons have nor border and therefore have no clear place where draggable top space is and button is. This can be changed by going to "about:settings" page and setting the option "browser.tabs.inTitlebar" to 0.
      - Y-bar 3y ago
        That about:config setting is a halfway okay solution for a single app, it loses vertical space however, which is my premium. Optimally I would like a way to (in all applications which has this problem) to _simply show me_ what is a UI widget/button and what part is "inert" draggable window chrome, like this older screen shot where the distinction is unambiguous and clear: https://i.stack.imgur.com/Se6i0.png https://i.stack.imgur.com/Se6i0.png
  - dylan604 3y ago
    > what does fast forward and rewind do? symbols in "traditional" media playback, the icon shown would traditionally be for fast reverse/forward. skip back/forward to the previous/next would had a vertical bar to the point of the triangle. some also go so far to differentiate skip/scanning where scanning uses two triangles while skip uses one triangle with the bar. not really sure what Apple has done to them though. i would almost expect them to be skip instead of the scan with Apple expecting you to use the playhead (in whatever format it is made available) for scanning. the play button in Apple's use is typically action instead of state. so in this state, clicking it would start play, and then the button changes to the "pause" symbol (an = rotated 90°). so this is a really good example of mixing usage.
- phkahler 3y ago
  >> This is one of may things we lost in the war on skeumorphism. The skeumorphic interfaces could mix both more clearly, using shading and texture and "lights" to indicate that a play button was pressed down and active. I suspect a lot of the choices also have to do with saving screen space, but in the end a checkbox is one of the best ways to indicate "enabled" on a settings screen.
joenot443 3y ago
I'm designing an app right now with this pattern and I'd love to get it "right". We've got a video playing and an icon button which controls whether the video is muted. We've got a "playing speaker" and a "muted speaker" icon. What's the correct pattern? Should the icon reflect the current state, or the expected state after pressing the button?
- snet0 3y ago
  I think, bizarrely, the control pattern for mute "flows" the opposite way to the control for pause/play. If there's a play icon, and you click it, you expect it to play the video. If there's a pause button, you expect it to pause the video. Going against this pattern, if I see a speaker icon, and I click it, I expect it to transition to a crossed-speaker, and mute the video, and vise versa. That is: the current button state in play/pause reflects the action of the button, while the current button state in volume reflects the state of the button. I think these conventions are easily solved for video, anyway, because it's obvious when the video is muted or not (hopefully).
  - onionisafruit 3y ago
    > it's obvious when the video is muted or not (hopefully). It isn’t always obvious to me. Sometimes I can’t tell if a video player is muted vs the system volume being low. There’s also the situation where a video is silent and I don’t know if I’m supposed to be hearing anything.
    - skydhash 3y ago
      I think these conventions come from actual players like VHS and walkmans. The play, pause, stop,… where actual buttons and mute was an icon on the status display. Buttons are actions while icons are state. The rare case where there was a mute button, it was toggleable (or have a led on it) and these always reflect the state.
      - dylan604 3y ago
Zanfa 3y ago
Canon does this everywhere in their camera UIs, e.g a button with "(eye-tracking icon) ENABLE". Gotta open up the full settings UI to remember which way it works. IIRC, they actually show the current state (ENABLE = ENABLED), not the action that will be taken when you tap the button, but I might be misremembering... again.
- LeonidasXIV 3y ago
  I think this is because the English concept doesn't map into Japanese. I've seen plenty of times where shops would have signs/labels saying OPEN and… CLOSE.

Y-bar 3y ago

Yep! When the _state_ and _action_ are intermixed it becomes ambiguous. This is one of may things we lost in the war on skeumorphism. The skeumorphic interfaces could mix both more clearly, using shading and texture and "lights" to indicate that a play button was pressed down and active. Look at this UI, it's mix of state and action: https://discussions.apple.com/content/attachment/861693040 https://discussions.apple.com/content/attachment/861693040 fast backward rewinds: Probably showing action Play: 100% ambiguous if action or state fast forward: Probably showing action Volume slider: showing state Back-forward buttons: showing action Select drop-down: Showing state

iamtedd 3y ago
As someone who has no experience with this version of iTunes: - The lower row is definitely a row of buttons. Back, forward, categories in the library (?), I don't know what the last one is supposed to do. - Are the things above that row buttons? Why don't they look like them then? - If they are, what does fast forward and rewind do? Skip to the next track and to the beginning of the same track? Actually move quickly through the track (like fast forward and rewind used to do)? Does pressing rewind go to the beginning of the track or to the previous track? If it's to the same track, how quickly do I have to click again to go to the previous track? - Is that slider a progress bar or volume slider? - Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? - I assume the coloured things are the window management controls. Does clicking the red one close the window and keep the music going, or does it stop?
- Y-bar 3y ago
  > what the last one is supposed to do. It's indicating an iOS device being locally, e.g. for administration, backup, file transfer and the like. > Are the things above that row buttons? Why don't they look like them then? Haha yeah. That's modern Apple for you! > what does fast forward and rewind do? They sort of behave the way ff and fr does on a remote. Click/press fast and you skip to the next/previous song/chapter or equivalent. Hold down and you scrub at something like 4x speed. > Is that slider a progress bar or volume slider? A volume slider. > Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? I ask myself the same thing every day and have the same problem with many many apps, also in Windows. For example Firefox has the same design problem where its buttons have nor border and therefore have no clear place where draggable top space is and button is. > I assume the coloured things are the window management controls. Yes, these have remained mostly unchanged for over 20 years, they have gotten a bit flatter and lost some subtle small iconography. > Does clicking the red one close the window and keep the music going At least this part works well and in a predictable fashion. It consistently follows Apple's Human Interface Guidelines since well over 30 years: Closing a window or document of a Mac OS application should not quit the application. (there are some exceptions, but that is the default behaviour).
  - Muehe 3y ago
    > For example Firefox has the same design problem where its buttons have nor border and therefore have no clear place where draggable top space is and button is. This can be changed by going to "about:settings" page and setting the option "browser.tabs.inTitlebar" to 0.
    - Y-bar 3y ago
      That about:config setting is a halfway okay solution for a single app, it loses vertical space however, which is my premium. Optimally I would like a way to (in all applications which has this problem) to _simply show me_ what is a UI widget/button and what part is "inert" draggable window chrome, like this older screen shot where the distinction is unambiguous and clear: https://i.stack.imgur.com/Se6i0.png https://i.stack.imgur.com/Se6i0.png
- dylan604 3y ago
  > what does fast forward and rewind do? symbols in "traditional" media playback, the icon shown would traditionally be for fast reverse/forward. skip back/forward to the previous/next would had a vertical bar to the point of the triangle. some also go so far to differentiate skip/scanning where scanning uses two triangles while skip uses one triangle with the bar. not really sure what Apple has done to them though. i would almost expect them to be skip instead of the scan with Apple expecting you to use the playhead (in whatever format it is made available) for scanning. the play button in Apple's use is typically action instead of state. so in this state, clicking it would start play, and then the button changes to the "pause" symbol (an = rotated 90°). so this is a really good example of mixing usage.
phkahler 3y ago
>> This is one of may things we lost in the war on skeumorphism. The skeumorphic interfaces could mix both more clearly, using shading and texture and "lights" to indicate that a play button was pressed down and active. I suspect a lot of the choices also have to do with saving screen space, but in the end a checkbox is one of the best ways to indicate "enabled" on a settings screen.

joenot443 3y ago

I'm designing an app right now with this pattern and I'd love to get it "right". We've got a video playing and an icon button which controls whether the video is muted. We've got a "playing speaker" and a "muted speaker" icon. What's the correct pattern? Should the icon reflect the current state, or the expected state after pressing the button?

snet0 3y ago
I think, bizarrely, the control pattern for mute "flows" the opposite way to the control for pause/play. If there's a play icon, and you click it, you expect it to play the video. If there's a pause button, you expect it to pause the video. Going against this pattern, if I see a speaker icon, and I click it, I expect it to transition to a crossed-speaker, and mute the video, and vise versa. That is: the current button state in play/pause reflects the action of the button, while the current button state in volume reflects the state of the button. I think these conventions are easily solved for video, anyway, because it's obvious when the video is muted or not (hopefully).
- onionisafruit 3y ago
  > it's obvious when the video is muted or not (hopefully). It isn’t always obvious to me. Sometimes I can’t tell if a video player is muted vs the system volume being low. There’s also the situation where a video is silent and I don’t know if I’m supposed to be hearing anything.
  - skydhash 3y ago
    I think these conventions come from actual players like VHS and walkmans. The play, pause, stop,… where actual buttons and mute was an icon on the status display. Buttons are actions while icons are state. The rare case where there was a mute button, it was toggleable (or have a led on it) and these always reflect the state.
    - dylan604 3y ago

Zanfa 3y ago

Canon does this everywhere in their camera UIs, e.g a button with "(eye-tracking icon) ENABLE". Gotta open up the full settings UI to remember which way it works. IIRC, they actually show the current state (ENABLE = ENABLED), not the action that will be taken when you tap the button, but I might be misremembering... again.

LeonidasXIV 3y ago
I think this is because the English concept doesn't map into Japanese. I've seen plenty of times where shops would have signs/labels saying OPEN and… CLOSE.