Metro UI's influence spreading.

[vp710]

So, I see a lot of comments and articles on tech blogs criticizing the metro UI, even from knowledgeable tech writers. Microsoft apparently adopted the UI as early as 1995 and really started to push when the Zune players and software were released at the end of 2006. Everyone knows how it is now the default WP UI and it is coming to W8.

But, I'm seeing the influence of the UI everywhere these days. When Google revamped its services last year, I was surprised to see how much it took from it. If anyone's reading Time magazine, they'll have noticed how they borrow the shape and colors principles of Metro in many of their charts, and the list goes on (ads, websites...)

What I'm getting at is that on one side, the Metro UI has really not been received well, and on the other it seems it's starting to look like its principles and aesthetics are getting borrowed from a lot of companies (even competitors). I don't understand how both can coexist (not counting fanboyism).

Has anyone noticed something similar?

 

[mprice86]

So, I see a lot of comments and articles on tech blogs criticizing the metro UI, even from knowledgeable tech writers. Microsoft apparently adopted the UI as early as 1995 and really started to push when the Zune players and software were released at the end of 2006. Everyone knows how it is now the default WP UI and it is coming to W8.

But, I'm seeing the influence of the UI everywhere these days. When Google revamped its services last year, I was surprised to see how much it took from it. If anyone's reading Time magazine, they'll have noticed how they borrow the shape and colors principles of Metro in many of their charts, and the list goes on (ads, websites...)

What I'm getting at is that on one side, the Metro UI has really not been received well, and on the other it seems it's starting to look like its principles and aesthetics are getting borrowed from a lot of companies (even competitors). I don't understand how both can coexist (not counting fanboyism).

Has anyone noticed something similar?

Not really, no. I've done a lot of reading up on Metro for some college projects and the key is always in the first part of any article. "Metro is a typography based design language."

While there are some websites that mimic the tiles (like Google Play), none of them really follow the Metro principles of typography as a means to indicate to the user where they are.

Indeed, some of Microsoft's own websites follow the principles loosely at best, but they are being improved. I'm really looking forward to the redesigned live/hotmail service, from the leaked images, it's shaping up to be something special.

For more information on the principles, I would recommend anyone interested in design have a look at this blog post from Mike Kruzeniski (Creative director on Windows Phone)

How Print Design is the Future of Interaction - Mike Kruzeniski

Another article I found useful when I was writing my reports was this one:

Lessons From Swiss Style Graphic Design | Smashing Magazine

As Swiss design is where the Metro principles come from.

For me anyway, it's a really interesting topic and I'm pushing to include the principles as part of all my college projects that involve design work.

But to go back to the OP, no, I've yet to see any good implementation of the principles outside of Microsoft's own websites and software. That said, good design is seriously hard to find and I'm as amazed (and delighted) as anyone that it's Microsoft producing it.

I don't even mind if it doesn't catch on with other companies, everyone shouldn't present the same face, and for now at least Metro differentiates Microsoft products from the rest.

 

[vp710]

Thanks for those links!

 

[Reflexx]

Just FYI, Mike is no longer with Microsoft. Twitter managed to steal him away.

 

[cp2_4eva]

Have you checked the Pepsi site lately? Metro all over the place.

Pepsi - Live For Now

 

[selfcreation]

I just dont get how the same people bashing the Metro *look* can then come out with a similar look and feels as metro....

and still act as if:

* if we dint come up with it, we dont like it but we give our self's the right to copy the look and say its GREAT only for us ....**

that's what I feel does sites+Google ..etc.. are saying

feels like MS is getting under minded by the Media simply because of the BRANDING MS has ( witch is not good )

but MS (TO ME) feels like a complete revamp of what they where 2-3 years ago.. and its not fare to bash a company base on stats from 2-3 years ago..

in Multimedia if your 6 months behind you may as well be 10 years behind but people dont relies that and stick with their OLD SCHOOL mentality.

Even if they had the BEST/Most Innovative product, MS still has to work on Re-branding it self if they want to succeed in today market.

that's my 2cents

 

[bear_lx]

metro is everywhere... at least the simplistic nature of it is.

i work for fifth third bank and we have just revamped our whole look. everything is looking very metro!

www.53.com

 

[Verkunder]

Have you checked the Pepsi site lately? Metro all over the place.

Pepsi - Live For Now

I liked Pepsi before, but NOW.

 

[mprice86]

Have you checked the Pepsi site lately? Metro all over the place.

Pepsi - Live For Now

Again, not metro design. Yes, there are tiles. But tiles have pretty much nothing to do with metro as a design language/principle. It's all about typography and on the pepsi site the typography is horrendous and not used in a way that is intuitive or indicative of the hierarchy of the site; which is the key principle of metro.

And sorry to be harsh, but that banking site is just barely Metro related; but it's also so downright ugly I wish the association hadn't been made.

Microsoft Corporation: Software, Smartphones, Online, Games, Cloud Computing, IT Business Technology, Downloads
Internet Explorer - Web Browser for Microsoft Windows

Look at how the text is arranged on these sites. Specifically the navigation text. Top level text (i.e. the largest font) tells the user what page they are on or welcomes them. Second layer is placed below the first and provides options in a smaller font. The font is smaller to indicate to the user that they are options related to the heading at the top.

If you want more information, the links in my first post are still good and I would recommend them for reading up on what Metro actually means. Because it isn't tiles. It's text and the intelligent use of it.

I know that I'm coming off as severely harsh, but seriously, it's extremely frustrating to have spent a life surrounded by terrible UX and UI design only to have a genuinely good design effort entirely miss-recognized.