The Ribbon & Metro - fundamentaly incompatible design concepts?

This is a while back, apologies if this was already discussed. Months ago an artists threw together some mock-ups of what he hoped the next Live Essentials suite would look like if it was inspired by Metro: Here's a few examples:

Live Mail:

Live Photo Gallery

The artist's deviant art page showing more examples (recommended as Channel9's boards screwed up the aspect ratio):

http://clindhartsen.deviantart.com/gallery/?26049243#Metro-Across-Windows

To me, those look fantastic.  He's adhered to the Zune example extremely closely, and the results are very nice.  Clean lines, emphasis on text, no distracting elements from the content.  That was the design philosophy of Metro.  This is what I was hoping for the Win8 desktop - while not operating exactly the same as the Metro tablet interface, the design style would at least carry over.

Instead...we got the obvious, the Ribbon, and Win7's interface with transparency toned down and all rounded corners gone.  Now I like the Ribbon, I defend it often against those who scream at Office because they can't find their command in the exact same place.  I'm also an advocate for interface consistency, so it would be only natural to have the same interface style across all MS products.

Now after seeing it in action though...I'm not sure the Ribbon really fits with every app.  With Office it makes perfect sense - it's a very complex suite of apps who's capabilities are rarely full used, probably because people just don't what they can fully do with it.  The Ribbon exposes the functionality of the suite far better than endless tiny icons and menus IMO.

The problem is that these are two fundamentally different design approaches.  The Ribbon is graphics/icon heavy, Metro is the complete opposite.  And when you try to combine the two, you get this...

Ugh.

There trying to mash the two approaches together and well...they both get mashed alright.

You've got the icon (and space heavy) ribbon, and for the Metro influence you have a near-opaque window, all corners now perfectly square, and a 'metro-lite' text in the titlebar.  The two styles are clashing very, very badly, and the result it at first glance, a very "busy" image with many conflicting elements - exactly the opposite of Metro's intention.

This actually exposes another problem  - scaling. DPI scaling is never perfect, but it works very well for the most part in Win7, and one of the reasons is that IE/Explorer and Win7's overall interface isn't actually that icon-heavy.  With low-res, 256 colour icons, when you up the DPI they're the first aspects which are noticeably not native res - with a truly Metro-inspired design, you avoid that problem of blurry interpolated icons (or you go Apple's way and make gorgeous 1k icons).

Heck, in my view they've actually brought the worst of Metro, in that one fault I have with it is that it can seem too flat and boxy at times, especially on WP7.  You'll notice in the artists renderings and the Zune software however, that wasn't the case - buttons with very subtle grey gradients and rounded corners.  Explorer as it stands now in Win8 is basically taking the worst of both worlds.

Now of course, this is the preview as everyone will say, and they can clean this up.  Past experience (outside of Win7) doesn't give me much hope for that, but most importantly the reason I remain cynical that the current form of desktop will not change significantly in the way I want it to is because they're obviously hell-bent on shoving the Ribbon into every facet of Windows that they can, even if doesn't make much sense.  It doesn't for Explorer IMO, but its inclusion pretty much guarantees we will have no design symmetry between Metro-design apps and the desktop - which is a big shame IMO.

Opaque window chrome and sharp corners existed before Metro or even Aero, so I don't see how it's "a mashing of two approaches". The flat look works well with the ribbon because none of the ribbon buttons have the fake shading or gloss. They're flat too. What doesn't work are the minimize, maximize, and close buttons. They still look raised and out of place. Plus, the blue border on the right sight of the close button looks hideous. Those buttons should be either pushed all the way to the right or nudged down a little so that there's a border above the buttons too.

Edit: The help, back, and forward buttons need to lose the gloss and raised look too. Maybe they'll eventually change the arrows to look like the Zune HD arrow buttons. 

Edit again: In the Windows Basic theme, the 3D effects on the minimize, maximize, and close buttons are gone. They look MUCH better this way. They still need to be repositioned though.  

1 minute ago,cbae wrote

Opaque window chrome and sharp corners existed before Metro or even Aero, so I don't see how it's "a mashing of two approaches".

Oh I know they've existed before - the "Designed by T-Square" signature look of Windows is well known, which they finally started to deviate from slightly in Vista and Win7, which is their most polished GUI IMO.  Going back to a very angular-approach to design to me signals that they're heading in the direction of Metro, but you're right in that it's largely speculation on my part.  That screenshot of Explorer just looks very..."retro" though, and not in a good way.

The flat look works well with the ribbon because none of the ribbon buttons have the fake shading or gloss. They're flat too. What doesn't work are the minimize, maximize, and close buttons. They still look raised and out of place.

Plus they're huge - they look like they're been taken from a higher DPI setting.

Plus, the blue border on the right sight of the close button looks hideous. Those buttons should be either pushed all the way to the right or nudged down a little so that there's a border above the buttons too.

That would help to clean things up somewhat, but my hope was that we would see far more Metro-inspired Aero than this - I'd rather they just leave Aero alone if they're going to take this approach.

What did you think about the concept screenshots however?

@NitzWalsh:

What did you think of the leaked Office 15 screenshot:

a moment ago,NitzWalsh wrote

*snip*

What did you think about the concept screenshots however?

I like them. Of course, it's probably because I'm used to Zune. For somebody that lives inside Office all day, losing the icons in the ribbon might freak some people out though. Some functionality *might* benefit from having an icon next to the button in the ribbon, so losing them entirely might not be such a good thing. Simpler looking buttons like on IE9/10 might be the happy medium, but the function in question might not be expressible with such a simple "road sign"-style graphic that is common in the Metro design language.

36 minutes ago,brian.​shapiro wrote

@NitzWalsh:

What did you think of the leaked Office 15 screenshot:

 

Awful from a usability standpoint: because simple shading and lines have been removed it's impossible to tell what relationship controls have with each other.some users of Outlook might "like" this screenshot as a refreshing change from the excessive clutter of Outlook 2007, but the cleaner 2010 is where it should be, not taking the "back to white" look that Windows 7 introduced to its logical extreme.

Furthermore, the design isn't even metro to begin with. It's just the same UI with all the icons and shading removed, with Segoe and bold type arbitrarily introduced. If this is the direction Office is going in then I'll be sticking with 2010 (on my Win7 boxes) and 2003 (on my XP) boxes for some more time then.

A hint for "UI designers" everywhere: just because you're using Segoe in Size 28 does not make it "Metro"... it makes itretro to the days when no-one cared about usability.