Metro & Ribbon–The real difference and how they can blend

What’s the difference?

In recent years, Microsoft has been pushing two very different types of solutions for user interfacing: the Ribbon and Metro. To be more accurate, ‘Metro’ is not really a GUI-type per se; it’s actually what is considered to be a design language, meaning it refers to how the overall style and how it looks and feels consistently through an application . However, the ‘Ribbon’ is an actual graphical user interface (GUI), meaning it refers to a specific way the design is laid out. So these two things are not actually competing in anyway; you can have one or the other, or even both.

As an example, think of a cereal box. The specific placement of elements such as information (like ingredients, nutritional info., name, company info.), graphics, and other stuff in the way they are is similar to a graphical user interface. The types of colors, text, graphic style of these elements are very much the theme, or design language of the box.

Overview of Metro

This design language first appeared in Windows XP Media Center Edition, showing the basic works of Metro where simple navigation through text and content made a very nice TV watching experience. Since then, it has started to find it’s way into other Microsoft products like the Zune, Zune desktop software, Windows Live Messenger, Microsoft’s main website (fairly recently), and now Windows Phone 7. Supposedly, Windows 8, the version after Windows 7, will take some elements of Metro.

Metro has evolved into a brilliant design language that really revolves around four things: modern, clean, content, and typography.

It’s modern in that it takes a much new approach to design than most people have not seen so comprehensively. It’s unique and offers the simplicity that we associate with contemporary ideas.

It’s clean in that menus and content blend in to the background, and bring content to the the foreground. It doesn’t go over the top with gimmicky visual effects. Stuff like space-wasting ‘wet floor effects’, glossy 3D icons, attempts to emulate the look of real-life objects (a Notes app looking exactly like a real notepad) and all that other stuff are generally not in Metro. Icons generally have a universal feel where virtually anyone who has looked at a map legend, symbols on road signs, or at metro transit stations (hence the name…) might be able to recognize easily. The only real ‘effects’ come in through transitional movement, like getting from one screen to another, and it’s done in the most fluid, swiftest motion that feels so natural and not a time-waster.

image

It puts a major focus on bringing content to the foreground, instead of the commands and navigation around it. Album art, photos, video thumbnails, e-mail message, contacts, etc. seem to pop out front and center thanks to the understated typography and endless background.

image

Typography is also another key bit, where the font (officially Segoe WP) seems very clear, crisp and to-the-point. The big words make it very easy to read and quick to digest as you move through the interface. Typography also moves around as necessary to give you a visual indicator of where you are on the screen, as the interface goes off the screen (literally outside the box) to better disperse everything, rather than cram it into one spot.

image

Overview of the Ribbon

The Ribbon (officially called ‘Fluent’ by Microsoft) really first appeared in Office 2007. Since then, we’ve seen it more integrated in built-in Windows 7 applications (like Paint and Wordpad) and Windows Live Essentials applications (Wave 4: Photo Gallery, Movie Maker, Writer, etc.).

However, some will argue that ‘the ribbon’ is not really a Microsoft original and has appeared in other desktop applications in the form of tabbed ribbons. Basically all the tabs are really just headers that could have been found in files menus.

182504-ribbons-2010-2007-2_slide

This is very true, but in my opinion, Microsoft pretty much redid the ribbon the right way, like how Apple rethought a smartphone could look when they launched their iPhone. It’s Microsoft’s implementation where they used a nicer font, more pleasant gradients, nicer icons, and other stuff that made the ribbon feel something modern rather than something from the 1990s.

Anyhow, the ribbon isn’t great for everything. It’s wonderful for applications heavy with lots of commands and controls.Instead of hunting through endless drop-down menus and squinting at toolbar icons, the Ribbon helps group things in a more visually-pleasing hierarchy where each tab encases similar items or functionality, then separated into clusters/groups for more specification, and then you finally get to the commands. Essentially, from biggest to smallest hierarchy: tabs > clusters > commands. It’s a getting-stuff-done type of interface.

There’s still a file button, though it’s masked as the application’s icon, and there is a Quick Access Toolbar for frequent commands. There may be also hidden tabs, called ‘contextual’ tabs that only appear when you activate the need for those functions (like clicking on a picture brings up a pictures tool tab). It goes away once you navigate away from it.

Now that we’ve examined the two, can you really argue one is better than the other, given they’re not mutually exclusive? They may be like apples to oranges (design language v. GUI) but they have appeared to be competing approaches Microsoft has for user interaction with software. In the end, they somewhat exist for different purposes. Metro is designed for simplicity in mind where there are few commands that need organizing, while the Ribbon is more for heavy-duty command-filled uses. However, I think it’s time Microsoft changes that.

Can they blend together?

As I pointed out in the very beginning, despite their unique visual appearances and layout in many applications, they’re not exactly polar opposites as many would like to think. Metro is basically a distinct visual style, while the Ribbon is basically how it’s all arranged. So it’s not like it’s impossible for those two to combine, is it? How about a Ribbon with a Metro look to it?

The ribbon in Office 2010 could probably match a Metro look with a few modifications:

metro ribbon 2

Basically all Microsoft would need to do to convert the 2010 style Ribbon to a more Metro look would be:

  • Have almost no visual gradients on both the background of the ribbon, as well as within icons
  • Use the Segoe WP font in all text on the commands.
  • Convert each tab into its own header like on the Zune desktop software (see pic above)
  • Make borders less sharp, but sharp enough to distinguish between groups under headers
  • Make most icons grayscale and create primary/secondary accent colors for the icons within the program. Primary and secondary colors can be dropped on icons so that it will offer some helpful contrast that makes it go together. Maybe the primary/secondary colors will blend with the app by default (like green is Excel, blue is Word, etc.) but maybe users can mess with it.

Perhaps Microsoft is working on fusing the Metro design language gradually into the GUI of the next versions of Windows. It won’t be a rapid change of course, because generally people don’t like big changes (case in point: Vista), so it should be a pretty slow evolutionary change in each version of Windows.

It’s not as unlikely as it sounds. Microsoft had released clips of their ‘vision’ of the future (2019 it seems) of how they expect for technology to work, and virtually every bit of software in the video follows the Metro design language. Could this be an indication of where they expect Windows to go? Pause exactly at 0:38 in the video below to see what Windows on a desktop level might be like with Metro.

Pause at 0:38 to see what Windows OS based on Metro could look like.

If you do want to see a higher resolution video, this link is straight from Microsoft and will directly open up Windows Media Player to view [WMV]

In a similar video, the Senior Vice President of Microsoft’s Online Audience Business, Yusuf Medhi, present the ‘next-gen Office wall’ at the Interactive Advertising Bureau MIXX 2009 conference. We had a sneak peak of this in the 2019 Vision videos, but this is the real deal. [istartedsomething.com]

Further evidence of a possible merge of Windows and Metro

 

Or maybe Microsoft might actually develop a full-scale Metro theme for Windows 7/8 to go in conjunction with the next generation of Windows tablets that Microsoft seems intent on competing with the likes of iPad and Android-based tablets with.

So what do you think? Does the Ribbon or Metro interest you, and do you think either will have a larger presence in future Windows OS’s?

http://www.proprofs.com/polls/widget/?title=metro-or-ribbon&theme=grey&width=300

Useful links:

Metro Design booklet – The entire Metro design booklet by a team from Microsoft nicely captured page by page thanks to Long Zheng.

Office User Interface Blog – Many detailed posts by Jensen Harris who goes over the design decisions when they started the Ribbon in Office 2007

Wikipedia article of Ribbon – Good overview

Wikipedia article of Metro – Good rundown

Advertisements

One thought on “Metro & Ribbon–The real difference and how they can blend

  1. Though I think the animation you did doesn’t Metro UI – hehe – but kudos to you for at least having such an idea. I myself thought office will sport metro-yish ribbon, but I couldn’t imagine how. That is quite challenging. And I’m surprised no one on the whole wide internet has goit such an idea. :/O

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s