Displaying the State or the Action
In the Facebook/Android style, a down-pointing chevron is a button you tap to expand more content, and an up-pointing chevron is a button you tap to collapse it. In the iOS/Mac style, a right-pointing chevron (or triangle, depending on the OS) indicates the collapsed state, and a down-pointing chevron indicates the expanded state. The Android way, a down-pointing chevron means “will open, if you tap”; the Mac/iOS way, a down-pointing chevron means “is open, tap to close”.
Other cross-platform apps like Amazon’s Alexa do it the Android way, too.
The other common place that Apple uses “show state and imply action”, and which lots of third-party apps get wrong: padlock icons.
1Password had that backwards for over 10 years.
Another example of a button that double as status indicator is the “1x” zoom indicator in the iOS Camera app.
I agree with your point overall but note there is one standard macOS control that behaves the way you don’t like…
It can get confusing. For example, Mac toolbar buttons typically show the action rather than the state, e.g. the Mute button in Mail.
4 Comments RSS · Twitter
Also play/pause buttons.
I appreciated Gruber bringing this UI detail to light, as I had noticed it but never clearly thought about it. Now that I realize different controls follow different models, I'm left wondering if there is a rule of thumb for when to show state vs when to show action.
I bumped on the same thing as Nicholas Riley.
https://twitter.com/benedictC/status/1323969032941391872 :
The HIG makes a distinction between a disclosure button and a disclosure triangle. You’ve described a triangle, FB is using a button. See https://developer.apple.com/design/human-interface-guidelines/macos/buttons/disclosure-controls/
@Benedict I was going to say the rule of thumb is that if it’s freestanding (no bezel) it shows state, but then toolbar buttons are also freestanding these days.
