Pushing the Edge

Maintain a 20-pixel space between the left and right edge of the window and any controls. Keep 20 pixels of space between the bottom edge and any controls

That was in the old Aqua Human Interface Guidelines. The current guidelines go into per-control detail, but they all add up to the same advice in the original.

I've struggled with this. Maybe it's my old-tymer status showing through (my all-time favorite window design was System 7's minimalistic design), but I've never been in love with these "margins". On normal Aqua windows, they don't do anything. On metal windows, they're part of the draggable region, but metal is evil so we needn't concern ourselves with that.

I understand the intent of these margins. Computer displays are small. Empty space is a luxury. Mac OS X is a luxurious operating system. And empty space is necessary to show off those subtle pinstripes. We'll ignore the sells-expensive-monitors conspiracy theory.

When drawing up an application window in Interface Builder, if it has a list of any sort, I usually put it up against the very edge of the window. Then I remember the HIG, back off and install the mandated slack.

That's why my mouth fell open when I fired up the latest NetNewsWire public beta. Brent has done it again. He's dropped the margins, and the results are fantastic.

Here's what NetNewsWire looked circa 1.0:

Here's what it looks like circa 2.0 beta 10:

The controls have been pushed to the absolute bottom. The lists abut the left and right sides of the window. Not a pixel of margin. The new UI looks simpler but actually does more.

Genius.

Brent may have just given me the gumption to revist my apps and kill those unnecessary margins.

Update: Gibbons Burke writes:

Regardless of what the UI guidelines may say, the margin-free look is fairly common in Apple's own applications - Mail, Safari, TextEdit, Terminal.

What makes the margin-less documents work so well is the shadows cast by the windows - they create a virtual margin with regard to other windows.

It's true that Safari, TextEdit and Terminal operate sans margins, but I suspect that's because their primary interface isn't a list of some sort. It seems that apps which show lists have margins, while "listless" apps don't.

Mail blows this theory away, of course. My excuse for not noticing: I don't use Mail. But that's another (long) posting.

That's why it's noteworthy when NetNewsWire -- a listly app if I've ever seen one -- drops margins.

Uli writes:

The way I read it, these margins were for the case where things don't go up to the edge. There's nothing wrong with having items flush against the edge (like in any text editor's window).

The margins are mainly there for buttons, simple text fields and other things like that to provide a common metric when a margin is needed. But if you look at IB, you'll actually notice that it will even let things snap to the edge. So it's definitely something that's anticipated, and IMHO also encouraged.

I think the only place where margins are compulsory are the 12 and 6 pixel-spaces between individual items, so stuff doesn't look too crammed.

Anyway, I usually go by the following guideline: If I have buttons in a window, they get a margin. If I only have one big scroller, list or text field, or a couple of them with splits between them, I let them go flush to the edge.

That heuristic sounds about right. Still Brent has buttons in his main window, and they still look great -- not at all crammed.

Friday, January 07, 2005
12:00 AM