{"id":46419,"date":"2025-01-13T15:12:55","date_gmt":"2025-01-13T20:12:55","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=46419"},"modified":"2025-01-24T09:33:01","modified_gmt":"2025-01-24T14:33:01","slug":"mac-toolbar-guidelines","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2025\/01\/13\/mac-toolbar-guidelines\/","title":{"rendered":"Mac Toolbar Guidelines"},"content":{"rendered":"

Mario Guzmán<\/a> (Mastodon<\/a>, Bluesky<\/a>):<\/p>\n

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.<\/p>

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<\/a> and NSTitlebarAccessoryViewController<\/a>.<\/p><\/blockquote>\n\n

Mario Guzmán<\/a>:<\/p>\n

Have you noticed how some Apple apps just highlight w\/ a darker translucency rather than a solid color?<\/p>

You can see this darker translucency row highlight in apps like Finder & Apple Music sidebars.<\/p>

Well, if you want to achieve this look for YOUR app, this is how you’d do it:<\/p>

Subclass NSTableRowView<\/code> and override isEmphasized<\/code> so that the getter returns false<\/code>.<\/p><\/blockquote>\n\n

Mario Guzmán<\/a>:<\/p>\n

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.<\/p>

See the video of Disk Utility vs Passwords apps from macOS. Passwords app is how you want to do it.<\/p><\/blockquote>\n\n

Safari and Calendar also work like Passwords, though Calendar doesn’t use a standard toolbar. And why doesn’t Contacts have such a button?<\/p>\n\n

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.<\/p>\n\n

Previously:<\/p>\n