Mike Abdullah

1. The first rule of Inspector Club is you do not talk about Inspector Club
2. Oh, alright then, you can talk about it if you like
3. To show or hide the Inspector, provide an item in the View menu

   Matching toolbar item and keyboard shortcut are a given. Command-I, Command-Option-I, or Command-Shift-I all seem reasonable choices, although Apple favour Command-Option-I.

   Some favour placing the controls in the Window menu rather than View. I can see the sense in either, but on the whole Apple seem to feel that the Window menu is only for generic window commands (and use the View menu in their own apps).

4. The Inspector is an NSPanel

   You can easily set all properties up in Interface Builder (-isFloatingPanel etc.), except oddly [panel setBecomesKeyOnlyIfNeeded:YES], which must be done programmatically.

5. Use small-size controls and text

   There may be occasions where you need to stray to mini-size controls, but it is very much the exception.

6. Use a margin of 10 pixels

   Mac OS X generally uses a margin of 20 pixels in windows, so halving it for such a compact design makes sense I guess.

7. For all but the very simplest Inspector, split into tabs across the top

   

   Frustratingly, there's no built-in control for this. NSMatrix offers the right behaviour (at least for iWork/iWeb – Interface Builder does its own thing), but you'll need some custom drawing code. Hopefully I'll be able to open source some eventually.

8. If you need to cram in more than would fit within a comfortable panel height, further split the segement with an NSTabView

   

   Place 10 pixels below the tabs (see, rule 6 coming into play already). Note how all but the top edge of the Tab View is placed offscreen so as to preserve space/cleanliness.

9. Divide into sections
   

   

   Use NSBox set to be a horizontal line. Start by spacing a line with 10 pixels above and below it (yep, rule 6 again), but quite often you'll want to bump one or both of those up a bit to stop the design feeling too cluttered.

   Be careful how many sections you use. Too many and you just increase clutter; too few and a section can become overwhelming. Your own judgement becomes paramount! (Don't worry, you should have plenty of time to tweak the design as it sinks in). Of course it's often quite acceptable to have only a single section, and if so you don't need to layout any dividing lines – very clean.

10. Give each section a title

    Each section gets its own title (and hey, even Apple can make mistakes – in the screenshot above, that title's baseline is 1 pixel above the popup button's!). Use the small, bold system font.

    The title always goes at the top left of the section. Don't be tempted to nudge it right so that it aligns with another control; you'll spoil the readability.

    Working the title into the design is a rather creative exercise. Often it's best to simply have it stand alone with all other section content underneath:

    Start with a spacing of 8 pixels between title and content, but experiment to find what works best in the particular case.

    But at other times, you bring the content up to the same level, and can even make something like a checkbox the title:

    As with all good rules, this one's made to be bent. Some sections are so simple they need no title, or another element fills the role already:

    And on other occasions you may go even further (consult your designer first):

11. Consider supporting multiple Inspectors open at once

    If you're up to the challenge, also provide a "New Inspector" command (in the View menu, just below Show/Hide Inspector is a good spot for this). All open Inspectors still follow the selection, but can be displaying different tabs, sometimes making the life of your app's power users a little better.

    For example, I used to do this with Pages so that I could see the document's word count while still using another Inspector on different tabs.

    This does mean that your menu item potentially has four states:

    • Show Inspector
    • Hide Inspector
    • Show Inspectors
    • Hide Inspectors

    -validateMenuItem: is a great place for handling this.

That's a solid set of rules for now. I'll be adding more later, which any blog subscribers should see appear in the feed. For anyone else (*cough* MDN), feel free to post a link to this now, or wait until I've got further.