11/11/04

Full Metal interface

Many users are divided over Apple’s use of brushed metal windows. My personal feeling is that I like it in certain apps, but not others. It’s overuse by Cupertino seems to have given many independent software developers the impetus to use brushed metal too, in an attempt to ‘keep up’. While the Human Interface Guidelines are full of good solid reasoning, it doesn’t help when Apple go against them, and then produce beautiful interfaces as a result. It feels as if the pressure is on – you must use metal for your app to look cool and sell.

I’ve been following what John Gruber has to say on the matter with interest, there are two excellent articles about this subject, and I’ll try not to go over old ground, but there is one argument I’ve not heard before, and it’s the reason I like Safari’s metal interface – differentiation. Take a look at this example of one of my favourite sites in Camino:

Airbag in as seen in Camino

and now in Safari:

Airbag in as seen in Safari...mmmm...

I don’t know about you, but I find the Safari one much more pleasant to look at, because there is a clear demarkation between what is the browser, and what is the web page. I haven’t done a survey, but I’d be willing to bet that a large majority of web sites have white, or at least pale backgrounds. In the standard aqua coloured window the distinction isn’t as immediately clear. I’m not sure why this thinking doesn’t extend to other areas such as text documents, but there it is. I like differentiation.

(Having said all that, one thing that does give me that differentiation in a non-metal app, is the grey tab background on my safari style tabs for Firefox…

Airbag in Firefox

I find that the darker grey is just enough to create a visual separation.)

Technorati TagsTags: , , , ,

Comments | RSS

#1

Andrew Challen said 1283 days ago:

I’m not a mac user (well rarely). I prefer the camino screen shot. I agree with your reasoning that interface and content should be split up I just can’t stand that brushed metal effect, I thought it came from enlightenment desktop on Linux…
#2

Christopher said 1283 days ago:

I agree about the differentiation. One of the reasons I think I don’t use Camino or Firefox is because of that whiteness. It becomes blinding at times.

Oh, and I actually prefer a text editor with a metal interface. In fact, if you follow the guidelines that metal interfaces should only be used for applications that simulate a real world tool ala the calculator and then extend that to include tet editors that represent typewriters then text editors should be metal.
#3

Chris Biagini said 1283 days ago:

I couldn’t agree more, Jon. I find that I also like it in iChat windows.

But then there are apps that go overboard, with wide expanses of the stuff. Missing Sync, for instance, looks awkward and cumbersome to me—which is ironic, considering its use of metal actually complies with the HIG.
#4

Kevin said 1283 days ago:

I don’t know .. I find myself able to unconsciously factor out non-metal interfaces more easily. If any type of application should have chrome that isn’t in your face, it’s a document viewer application like a web browser.
#5

patrick h. lauke said 1283 days ago:

funnily enough, i prefer the camino screenshot. the brushed metal look – to me anyway – looks like a throwback to the kind of stuff i used to do about 6 years ago (combined with drop shadows and bevels).
incidentally, is camino themeable like firefox?
#6

Joshua said 1283 days ago:

I loved the metal interface when it came out, but by now, I’m completely sick of it. I got shapeshifter 2.0 and haven’t looked back. One thing that I actually appreciate is that it doesn’t stick out so much. It doesn’t feel so clunky. This will probably wear off, and I see your point about it showing a definite split between content and UI, but it isn’t so much too me that I would choose it over the overall beauty of my OS.
#7

Jon Hicks said 1283 days ago:

Patrick – Camino is theme-able, but not to the extent that Firefox is. You can change the icons it uses, and with the new nightly builds, alter the look of the new tabs, but thats about it. To do any radical changes, you have to use a OS theme with something like Shapeshifter.
#8

Stuart Langridge said 1283 days ago:

I agree with your thoughts on differentiation, I’m just not clear that the way to solve this is to use brushed-metal, what with that having a specific purpose and all. On the other hand, I’m not a Mac guy; Gnome on Linux doesn’t have window widgets as similar a colour to the webpage backdrop as Aqua obviously does.
incidentally, if this were my post, I’d have written the whole thing just to use the title “Full Metal Interface”. Ha!
#9

mathew h. said 1283 days ago:

ohgawd, i love brushed metal. not 100% of the time, but for flagship apps for sure. the whole i-suite is killer. not sure why i like it tho. i like how the apps stand out from the menubar, etc.

ahh. nuts.
#10

Jon Hicks said 1283 days ago:

Stuart – why do you think I did it?!
#11

Mark Lenders said 1283 days ago:

... and I like not ;) I prefer Camino because the brushed metal effect IMHO looks too “heavy”. I really like light designs. So that’s only a matter of opinions.
#12

Mark said 1283 days ago:

I agree to an extent. I rather dislike the brushed metal look so I use Shapeshifter and Aqua Pro (OS X Theme) and such to enlighten my user experience. Most themes will effect Safari, iTunes etc and make them more pleasant to look at and use. So you get the separation and no metal. Win win imo.
#13

Dave Child said 1283 days ago:

I much prefer the light window, personally. I feel the darker one draws the eye away from the page.
#14

Ran Aroussi said 1283 days ago:

After reading two articles by the great Jon Hicks, I decided to take his ideas to the next level and create a theme for Firefox OSX to make it look like a native OSX application.

If you want to make firefox look like safari and have a brushed metal look, take a look at the Safarish on my site.

Cheers.
#15

Jeff Croft said 1283 days ago:

I’m a bit torn about this, myself. Like Jon, I find that I like the brushed metal in some cases, and not in others—and there doesn’t seem to be any rhyme or reason to it. It’s as simple as this: sometimes it works, sometimes it doesn’t. I like the brused interface for Safari, better than the Aqua of Camino or the Aqua-life of Firefox. II also followed Gruber’s articles, and I just don’t know what to think.
#16

Dave Woodward said 1283 days ago:

The difference to me is always more of a feeling. The metal interfaces feel heavier, like using a real live “tool”. But the aqua always feels ethereal, like I’m floating in the clouds, or a more antiseptic feeling of being in a sterile room. I work on my computer just about 18 hours a day, so in use the mere difference is soothing. After too long the white of Firefox’s default theme gets a little blinding, and then Safari feels comfortable to look at. After Safari, Firefox always feels fresh, light and clean to use.

I don’t like or hate either one, I just like the choice.
#17

Tim said 1283 days ago:

I agree with you. I’m getting a little bit tired of the brushed metal look, but I still like it because of the differentiation, not just for Safari, but every window. I’ve never heard anyone else complain, but when I have a bunch of windows open the light surfaces and long, heavy shadows get so confusing overlapping on each other that I can’t tell what’s going on and often grab for a scroll bar on the wrong window. I never used to do this, but it’s been driving me crazy. I look forward to the new look that’s coming.
#18

Olly said 1283 days ago:

Apple states that the brushed metal look should be used on applications that are to do with the digital lifestyle (browsing the web, chatting, music, photos, etc) and aqua should be used for everything else. At least thats what I read somewhere.

However having said that Mail isn’t in brushed metal.

P.S. It is also rumored that Tiger will have yet another style, a cross between aqua and brusher metal.
#19

Greg said 1283 days ago:

I’m looking forward to the Platinum interface Apple is building into Tiger, It appears cleaner than Brushed.
#20

Leland said 1283 days ago:

After hearing so many people rant about how they hate the brushed metal, I’m relieved to find someone that actually likes it.

I like it for another reason—there’s more “stuff” to grab onto when I want to move a window around the screen. In the metal window border, you either have controls (traffic lights, tabs, buttons, etc) or you have metal that you can click on and drag the window. Other styles have dead space that doesn’t do anything.

I will also continue to appreciate how the metal style gets out of the way of content while still being separate. There are other reasons why I still use Safari, but the metal is, to me, a functional addition.
#21

Denis Defreyne said 1282 days ago:

Jon, you read my mind. I prefer Safari; it is less cluttered, and that visual distinction is quite good.
#22

Jon Hicks said 1282 days ago:

Dave – thanks, what you said makes a lot of sense.

As for the new Apple theme – yes ‘platinum’ can be seen on the TIger previews, being used in system preferences and spotlight. Mail is going to adopt this look too.
#23

Joshua Heyer said 1282 days ago:

Jon, I like the idea of a “Full Metal Interface”. It would be nice if Apple setup 2 themes you could choose from in the System Preferences. One Metal. The other the Original Aqua.

If they did do something like that I think they could appease many people. The only thing would be they would need to create a larger seperation between active Metal apps and incactive Metal apps as John Gruber points out in one of those articles you referred to.

I agree with you. I really enjoy the sepearation between the document and the window itself. I’d like it if they would have these 2 themes so we could choose instead of having them choose for us.
#24

Todd said 1282 days ago:

From what I’ve seen coming out of Apple lately I’m left wondering if the current HIG actually have any clear direction planned for OSX. Between the horrid labels, a new Tiger theme?, Metal here and there and the ‘poofs’, the MacOS now is nothing more than one giant cartoon.

OS9s Platinum worked well system wide because it had a good balance of colour, tone and design. It didn’t get in your face and thus hasn’t created the controversy that OSX has. Its a pity the majority of OS9s HIG were deemed redundant when Steve Jobs returned. It shows.

Apple need to get back the basic nuts and bolts of good UI design, beta test it and get the MacOS back to what was the benchmark to strive for in UI design. Until then, thank goodness for Unsanity and other 3rd party developers.
#25

patrick h. lauke said 1282 days ago:

leland wrote: “I like it for another reason—there’s more “stuff” to grab onto when I want to move a window around the screen. In the metal window border, you either have controls (traffic lights, tabs, buttons, etc) or you have metal that you can click on and drag the window. Other styles have dead space that doesn’t do anything.”

yes, but…that has nothing to do with the look, but with the way functionality was coded into the GUI…so it’s really apples and oranges, in my not so humble opinion…a bit like saying “i prefer the power management of the apple laptops because they have the throbbing apple light on the outside” or something…
#26

Smokey Ardisson said 1282 days ago:

It’s funny; in your screenshot, Safari looks really good, but in real life I find Safari to be “too heavy” even for a passing glance, let alone for long periods of use. The brushed metal tends to overwhelm the contrast—and everything else!

I think the tabs in what will be Camino 0.9, much like your Firefox set, find a pretty decent middle ground, differentiation without the overwhelming weight of brushed metal.

P.S. Your screenshots are not a fair comparison since you show Safari and Firefox with other tabs open—and thus the darker background of the tab bar and inactive tabs—and Camino without any tabs :-)
#27

Samuel Sidler said 1282 days ago:

As a matter of fact, there isn’t a third theme in Tiger as you all have mentioned. I pointed out to John Gruber: XCode 2 reveals a “unified toolbar” option which merely removes the divider line.

Café Mac has it all

On that note, I agree with Dave Woodward but switch between Safari and Camino (instead of Firefox). After all, we all need a little relief at times.
#28

Jon Hicks said 1282 days ago:

Samuel – thats interesting, although some screenshots of the new Mail at AppleInsider (that were pulled after threats by Apple) showed that there was more to it than just a unified toolbar.
#29

Samuel Sidler said 1282 days ago:

Jon: From what I can gather, it’s just the natural progression of Aqua. All of the [non-brushed] windows will have that “platimum” look, however, only a few (from Apple) will have the unified toolbar. I’m sure you’ve noticed the change in Aqua from 10.0 through 10.3. I believe this is part of it’s refinement.
#30

Daniel Hiester said 1282 days ago:

I use a program in Linux called Rhythmbox whose layout was inspired by iTunes. With some of my Gnome themes, Rhythmbox isn’t very much to look at, but it’s no big loss because the program is in the systray most of the time anyway. However, the skins that make Rhythmbox look best either make the rest of the OS less accessable, or look like an blatant Mac ripoff.

There’s so much more to it than just metal vs. white. There’s the size and shape of the buttons, width and color of lines seperating different parts of the interface, and much more. The point is, iTunes could look good without the brushed metal look, but would the the entire OS X desktop look as varied without it?

Beats me. I like Jon’s point about it bringing variety to the desktop, but when the brushed metal is used on Finder, iChat, iTunes, and a doubtless host of other Apple apps that I never use when I’m in the cyber cafe, it does strike me as a bit overkill.
#31

Amar Sagoo said 1282 days ago:

I agree on the need for visual differentiation, and that standard Aqua doesn’t do very well here within windows (although it does for distinguishing windows from their surroundings, using drop shadows).

However, brushed metal is too heavy (and a bit too naff) to be a good solution.

Edward Tufte describes a concept called the minimum effective difference, which advocates using very subtle differences in shading to mark boundaries, so the colours don’t distract from the actual information. (The tabs in your Firefox screenshot are an example.)

I think the classic Platinum theme worked quite well for differentiation (although even that was a bit too dark).
#32

wookie said 1282 days ago:

I agree, metal works in some cases but not others; Safari is my default browser for exactly the reason you state, but I can’t stand the metal finder, it’s clunky and ugly as hell.

Slightly off topic this, but that icon to the left of your Google search field in the Safari screenshot doesn’t look like the ‘bug’ button that usually takes that spot… is it just my eyesight or are you running some little widget I’ve not come across before?
#33

wookie said 1282 days ago:

ahem, sorry, to the RIGHT of your Google search field…
#34

Jon Hicks said 1282 days ago:

Wookie – that widget comes from ‘Stand’ http://hetima.com/safari/stand-e.html and it adds the abilty to copy urls, view and delete cookies and ‘sub resources’ (CSS, Images etc) relevant to the current site. Its free too!
#35

Kris Khaira said 1281 days ago:

From what I understand, the Aqua look’s reserved for interfaces you can edit and write in and the brushed metal look for interfaces with windows you can modify and things you can move around and click on, like iTunes and iSync. Not sure if that makes sense. There’s also something on this in Daring Fireball.

I’m not this in the Apple HIG, but I just began using Mac OS X, and I already find it weird to see Camino using Aqua. The code editor I use is Smultron, and I have the option of disabling brushed metal for Aqua. Now that looks better in Aqua because it’s a text editor.
#36

Kris Khaira said 1281 days ago:

I meant to say
“I’m not sure if this is in the Apple HIG…”
#37

Ryan Mitchell said 1281 days ago:

what theme for firefox are you using? is it downloadable anywhere?
#38

ranvier said 1278 days ago:

In reply to #16 and #26:

Ah…I agree with both of you too. I have not use Mac OS X much to give a insider view. But as an outsider who uses OS X occasionally, i do feel that Safari does looks quite bulky in appearance too.

That might be a reason why i continue to use (Yikes~) IE, though i know the advantage of using Safari. :)

Commenting is closed for this article.

Elsewhere

The Rissington Podcast - weekly shenanigans with Jon Oxton

Hicksmade - unique handmade goods by Leigh Hicks width=

love

Brit Pack: A proud member I love Omniweb Coda Segment Publishing I buy my type from Veer The Forgiveness Project