You might wonder why I’ve been writing all this about watching trends in OS X user interface design.

The main point is not to ding Apple for UI inconsistencies. The point is that it’s absurd for developers to have to spend so much time watching trends in OS X user interface design.

I want Apple to innovate, to try things, to make things cool—and I want them to continue as the leaders in usability, which I still think is the big draw of Macs. It may be a tight-rope act, but Apple has been doing this particular high-wire dance for decades now.

At the same time—at the same time, please sing some arias—I know I’m asking alot—I’d like to see some leadership beyond just sometimes-contradictory examples.
07:23 pm #

More on trends in OS X user interface design...

I don’t understand what’s happening to splitter bars. (The part where you grab and drag to resize a split view.)

What the HIG says

Here’s what the Human Interface Guidelines has to say on split views.

The splitter bar displays a circular dimple at its midpoint that indicates to the user that it is draggable...

In a metal window, the width of a splitter bar is 7 pixels...

In a standard Aqua window, the width of the splitter bar is 9 pixels...

No surprise

You’ve probably already noticed that splitter bars come in different sizes. (Compare the iTunes splitter bar to the Finder’s, for instance.)

You may not have noticed a couple other details that I just can’t explain:

1. The dimple in the Finder looks different from the dimple used in iTunes. Here they are, magnified:

Subtle, but, you know, it’s light-source stuff, which Apple has historically mastered.

2. In iTunes there is a light-colored border on either side of the splitter bar—but that’s not true in the Finder. (See second graphic above.)

But those differences aren’t that big, really. At least the splitter is still recognizably a splitter.

Where it gets crazy

This goes back to the goodbye-stripes thing...

You will not find in any of Apple’s apps outside of utilities (or Sherlock) a splitter bar that looks like a standard non-metal splitter bar. You won’t see this:

You would expect to see the above in Mail, because Mail is not metal.

Mail’s horizontal splitter bar looks like this:

The drawing is custom, for Mail only as far as I can tell. (No stripes! Gradient! Cool custom dimple! I like it! No kidding—I really do like it.)

But what is really odd to me is the vertical splitter bar, which looks like this:

It’s a one-pixel-wide line separating an area of blue from an area of white.

I can easily explain this from a coolness factor—but I can’t explain it from a usability standpoint, because it’s very difficult to grab such a narrow target. (And it doesn’t resemble a splitter bar at all, so you don’t necessarily realize that you can grab it.) To make up for it, they’ve added a little grab thing at the bottom of the window which is easy to grab. (Which I also, no kidding, really like.)

Here’s the thing—this isn’t the only non-metal app to completely avoid standard splitter bars.

Look at Keynote, for instance. No splitter bar at all, just a grabber at the bottom. But, though similar, it’s different from Mail—in Keynote you can’t grab the splitter bar at all, you have to use the grabber at the bottom.

And then there’s Xcode—also non-metal, and with yet another custom splitter bar.

The trend

The trend is clearly to avoid standard splitters in non-metal windows.

I have no theory to explain it other than as a coolness thing—stripes are not cool, we must not have stripes.

But even still I have trouble explaining Mail’s vertical splitter, which appears to me to be too much of a triumph of coolness over usability. You might like it—heck, I like it too, it’s cool—but is it too much of a usability hit? When is a cool idea not worth it?

Here’s the thing to remember: developers look to Apple for guidance. If Apple’s UI decisions say that it’s okay to sacrifice usability for a distinctive look, then many developers will do that. It’s a long, long way away—but at the end of that particular road is Windows.
06:40 pm #

More about trends in OS X user interface design...

I have a theory about what happened to Mail’s toolbar.

Human Interface Guidelines on Toolbars

Apple’s Human Interface Guidelines page about toolbar icons shows examples from the pre-metal Finder and the pre-Tiger Mail.

Each toolbar icon should be easily and quickly distinguishable from the other items in the toolbar. Toolbar icons emphasize their outline form, rather than subtler visual details.

All the icons in the new Mail are clearly designed to de-emphasize unique shapes.

Regular shapes is the trend

Of Apple’s apps that come with Tiger or with a new computer, I can’t think of any whose toolbars emphasize unique shapes. (And then there are apps that don’t have a standard customizable toolbar, such as iTunes and iCal, that I’m not counting.)

My guess is that, simply, Apple changed its mind about the unique shapes.

This isn’t necessarily bad—and there are new consistencies and usability gains being made. Note, for example, how the back/forward button set is the same in Safari, Help, System Preferences, Dictionary, and probably other places. This is a good thing.

So the trend is toward regular shapes—and also 1) away from color, and 2) toward a more button-like experience, and 3) toward more stylization, less representation.

The Mail toolbar designers got the memo, it appears.

What went wrong—or right

John Siracusa famously said that it appeared as if Mail had got “beaten with the ugly stick.” Not everybody agrees—it’s a matter of taste. (And I bet some people are starting to change their minds.)

The problem, though, is that Mail is a very different program from Safari, Help, System Preferences, and so on. The Safari-type buttons you see all over—back/forward and home, especially—are not appropriate for Mail. Mail needs things like Flag, Show Headers, Junk, and many more which don’t exist in any other Apple app.

But that leads to a quandary: you want to use the same regular button shape lots of other apps are using, but that button works best with grayscale icons, not with Mail’s more colorful icons. At the same time you want to keep some of the colorful icons because people have already learned what those icons mean. (And some—Junk, for example—are used in other parts of the interface, and you want color to draw the connection.)

So my guess is that somebody made the following decision: let’s invent a new regular shape, and stick modified versions of the old icons inside this new shape, so it’s like a button. (And let’s have it highlight on mouse-over, because people like it when buttons do that.)

Best of both worlds: regular, more button-like shapes and the already-learned icons.

Depending on your taste, it didn’t work out at all, or it worked out splendidly and is another master stroke of Apple design.

Anyway...

You’ve probably worked all this out for yourself well before reading this. It’s just that I enjoy forensic UI design, looking at apps and trying to figure out why things happened the way they did.

My point mainly is to point out the trends in OS X toolbar icon design: regular outlines; icons inside the outlines (button-like); grayscale instead of color; and bolder, more stylized figures.

I have some theories on why these are the trends:

1. People understand buttons! So making toolbar icons more button-like is a usability gain. My suspicion is that Apple found that some users didn’t realize they could click on the toolbar icons in the older version of Mail, since they don’t look like buttons.

2. Regular outlines feel simpler, and therefore better, than different outlines. (But this may be a usability loss, because different outlines are easier to pick out. Possibly outweighed by #1 above.)

3. To many people, grayscale signifies elegance. And everybody wants their stuff to be called elegant.

11:45 am #