Mac Toolbar Guidelines
Mario Guzmán (Mastodon, Bluesky):
The following sections are general guidelines that describe fundamental Toolbar layout and design principles for Mac applications. Following these guidelines will help you create functional and aesthetically pleasing toolbars that are easy for Mac users to understand and use.
This document will reference a hypothetical Email application to illustrate key points in designing a Toolbar. It will heavily reference classes, structs, and properties in NSToolbar and NSTitlebarAccessoryViewController.
Have you noticed how some Apple apps just highlight w/ a darker translucency rather than a solid color?
You can see this darker translucency row highlight in apps like Finder & Apple Music sidebars.
Well, if you want to achieve this look for YOUR app, this is how you’d do it:
Subclass
NSTableRowViewand overrideisEmphasizedso that the getter returnsfalse.
When designing your sidebars and toolbars, don’t make the Sidebar toggle button a moving target. Don’t make your users chase it back and forth to toggle it. Keep it left-aligned, “pinned” to the window control buttons.
See the video of Disk Utility vs Passwords apps from macOS. Passwords app is how you want to do it.
Safari and Calendar also work like Passwords, though Calendar doesn’t use a standard toolbar. And why doesn’t Contacts have such a button?
It’s definitely bad to make the user chase the button back and forth. On the other hand, for most apps, putting it to the left might give it undue prominence. I thought the convention used to be to pin it to the right. That kind of solved both problems but had the disadvantage of making the button maximally far away from the area that it applied to. And in a Big Sur world of toolbar items that don’t fit, the implicit lowest priority from being the rightmost item would need to be boosted in order to avoid the instability of having it appear and disappear as the window resizes.
Previously:
- 25 Years of the Dock and Aqua
- John Geleynse Retires From Apple
- Origins of the Apple Human Interface
- Old Apple Human Interface Guidelines
5 Comments RSS · Twitter · Mastodon
Your last paragraph illustrates many of the problems with the current toolbar/sidebar design. It just doesn't work, for multiple reasons. It's a bad design that wastes space and reduces usability in so many ways
It doesn't seem like Apple's UI team puts much effort into testing how things *work* for users. Like they only care about how it looks without doing further exploration
"I thought the convention used to be to pin it to the right"
This seems like the worst option. I'd never think to look on the right.
I'm not sure if I understand why moving the button is an issue in the first place. You're unlikely to toggle between the two states repeatedly, are you?
I'm still mad they took away title bars. Just yesterday I was stuck with a window that was really difficult to move anywhere, thanks to there being hardly any place on it that I could use to move it with a click and drag.
Not to worry, you can always click on any one of the seven pixels between the individual window control traffic light buttons and move the window that way.
