Interface

A tweet from Andy Baio informs me that the visual interface style for Yosemite has taken a interesting turn.

In his tweet, Baio complains:

OS X got hit hard by the ugly stick.

The big problem is that Emphasis Blue. Too light and saturated.

I get where it came from. The post-Forrestal visual style introduced with iOS 7 has moved in a more pastel-ish direction, which is obviously carefully considered and likely directed toward the global market. I dislike it, but I recognize that I'm coming from a very particular place in my tastes, so de gustibus.

But aside from taste, as used here that Emphasis Blue is a couple of ticks too strong. This stylesheet makes it look even worse than it is, because there's a greater density of emphasized elements than one would ordinarily use.

More importantly, I badly dislike that the use of Emphasis Blue on selected checkboxes and radio buttons, and on the dropdown and spinner controls. It adds too much strong emphasis to the interface. The more things you emphasize, the less emphasis means and the more it contributes to a sense of interface noise.

But there is something good here, which I almost don't want to point out because when I designed it for a client it was meant to register subconsciously for the user.

I was doing a system that had endless tables and forms full of configurations for a complex technical internet thingy. I'm more an interaction architect / interaction designer than an interface visual designer; I tell potential clients and employers, “My visual design skills are very adequate. I can do icons that are not embarrassing and an interface that reads clearly enough, but there are specialists who can do it twice as well and twice as fast.” But I was the designer on deck for this system, so it was up to me.

So I tried an experiment in a very flat interface language which I'd been thinking about for years. It's obviously parallel to some of the defining patterns of this new OS X interface style:

• Non-clickable elements have a very light gray background
• Clickable elements all have a white background, edged in light gray
• Unavailble clickable buttons et cetera have the very light gray background, edged in gray
• Text fields have square corners
• Buttons have rounded corners
• Data content is in black text, data labels in dark gray text

Here's how my version of it looked:

Looking at it now, it bugs me how cramped that looks. In that system we were dealing with a lot of huge tables of data, so I was trying to make the density as high as possible, plus trying to ring a bit of a “crisp and technical” bell to go with the company's brand. I'm not sure I would do it that way again for that system, and I certainly would not recommend it for a consumer OS.

But I was happy with how it overcame the visual harshness of black text on a white background (which I've also countered in the style of this blog), very happy with how it made it possible to look at the interface and easily pick out what was active and clickable without it adding a lot of visual noise, and delighted with it making form content readable without the usual clutter of text entry box borders.

There was a lot more patterns in the interface system that aren't worth going into here, but I never quite came to a fully satisfactory solution for this principle:

• Emphasized interface elements all use a consistent emphasis color

Obviously Apple is wrestling with the same thing.