Dec
19

When Metro design falls off the tracks

By kellabyte  //  User Experience  //  25 Comments

I’m a big fan of the Metro design language and many of its principles. However, I think in the hands of a developer it arms them with a lot of outs to ignore graphic design, citing the principles as justification for a lack of a vibrant user interface. Microsoft also sets a bad example in a lot of cases which doesn’t help raise the bar of applications on it’s platforms. The evolving use of Metro across Microsoft’s product line-up brings a lot of positive benefits to these platforms. The challenge is to reach the level of consistent quality with Metro in all the different divisions, groups and teams at the level Apple does with its designs.

With any post like this it’s important to keep in mind it is my point of view based on what I enjoy or don’t enjoy from Metro. Your opinions may differ. Also keep in mind I’m disregarding the Metro design guidelines from Windows Phone 7 in this post.

The three pillars of Metro

In my opinion Metro has 3 pillars of strength and if you leave any one of the 3 out the experience falls apart. These 3 pillars are typography, simplicity and… the one usually left out…

Typography

A0CCFE2377BCA85ED89378A66BFD1

 

 

 

 

Typography is emphasized in Metro and this benefits the user in many ways. We had a saying,

If the user can’t walk down stairs with their eyes alternating between the device and where they are going while navigating with their thumb the design isn’t ready.

The large text in the screenshot above makes it easy to consume and navigate on the go. It also ensures the content you want the user to consume is front and center because it’s difficult for anything to dominate it. Steve Streza pointed out on Twitter that Metro scales well to different form factors and I agree.The focus on typography scales well from phones to tablets and consoles (Xbox).

Simplicity

GamesChannel-Xbox-Metro-Dahsboard

The emphasis on typography already contributes to the level of simplicity. The other areas where simplicity appears in Metro is shapes and icons. Single colour square boxes contain flat single colour icons, both of which are prominent on the screen. When the emphasis on typography and the focus on simplicity are combined with the last pillar of strength, the content pops out at you.

Live tiles are a great example of simplicity. They generally don’t have a lot of content crammed within them but they are usually oversized squares that have quite a lot of padding around the icon within them (if there is an icon). The icon itself is one colour and a simple 2D shape.

The screenshot above of the new metrofied Xbox 360 dashboard could be on a tablet and you wouldn’t know the difference because it’s so simple it can scale to different form factors. The same interface could be slightly tweaked to be more vertical and offered on a phone experience. Squares and big text is easy to move around.

In contrast one of the older dashboard implementations isn’t so flexible.

world-record-dashboard

Although this dashboard contains some similar aspects with the Metro inspired dashboard, the interface wouldn’t scale as well to a phone, especially the text based menus since they are close together and some of them difficult to read as they fade into the background.

 

image_4

Another example of simplicity is the application bar on Windows Phone 7. For phones, the content should consume the screen real estate. You could argue this is important for many other form factors, but it is especially important on phones. You need menus and navigation but in a minimal fashion.

 

Navigation_ApplicationBarLabelsThe app bar uses simple to understand icons but can still offer additional options while educating the user what the icons mean in case of any confusion.

 

 

 

 

Vibrant

Vibrant is the last of what I consider the 3 pillars of Metro and the one which is often missing. The best Metro experiences, those that really set them apart from other platforms, are the ones that are alive and colourful while at the same time emphasize typography and simplicity.

When I think of Metro I think of this

and this

and this

Metro is not an excuse to stop graphic design

When only 2 of the 3 pillars of what I consider a great Metro experience are present, it is usually the vibrant pillar that is left out, leaving us with just typography and simplicity. When vibrant is missing you’re left with an interface that more closely resembles a unix shell experience and that doesn’t offer much to engage the user.

ScreenDump_2011-16-31-10-16-01-3160-PM

In all those videos of great Metro experiences what we don’t see much of is this type of experience on the right. Unfortunately it’s all over the place in Windows Phone 7 and 7.5 “Mango”.

Some apps or screens make sense to be plain text but not as many as we see in the marketplace or in the Windows Phone operating system itself.

 

homescreens_wp7

 

 

Live tiles are amazing but swipe to the side and all elegance goes away. What happened?

We can’t have an infinite list of live tile screens but I’m pretty sure some design could have went into this beyond a list with search. Maybe static tiles?

These are just 2 examples of what happens when vibrant is left out.

 

screen2

699c387d-4013-4037-a0d4-58f4f1861262

 

 

 

 

 

 

 

 

 

 

Which one of the above pops out more? I’m guessing the right (Newsroom).

It’s no secret that the Apple community has had a lot of design influence within their developer ecosystem and I think Microsoft has made some gains with investments in designer tooling that work along side the developer workflow (Expression Blend) but Metro opens a big door to creating black background with white text interfaces and calling it a day. It’s really easy as a developer just to place some solid colour rectangles and oversized text. Maybe it is Metro but its not engaging anyone.

I like that Microsoft as a company is jumping on board in a unified effort to adopt Metro but at times it seems like there are no real designers involved in implementing the Metro experience and that the deltas between one divisions designs and another divisions designs are really far apart.

Metro offenses on the web

windows-azure-01For example, take the Windows Azure website. I’m not sure where this Metro experience was inspired from but it doesn’t resemble the others and if I was a startup it certainly isn’t getting me jazzed about the platform.

 

 

windows-azure-02

 

 

Navigate to the developer download page and you experience an even worse page that is slightly better than finger paint.

Windows Azure supports a great list of development platforms (.net, node.js, java, php) tell that story in a compelling Metro experience!

 

 

Engage and excite the user. Show your product off. Two examples of developer tooling websites with great user experiences are Xamarin and the MassTransit websites. Obviously these are not Metro inspired but the point here is even developer tooling should get great user experiences. Good experiences matter.

xamarin-01

masstransit-01

 

 

 

 

 

 

I decided to take a crack at redesigning the Windows Azure developer tools download page with more focus on the aspects of Metro that I enjoy most. In the image below you can see the content is heavily influenced from the current page but includes a background that is a little more alive.

windows-azure-03

Great examples of Metro

Here are some other examples of vibrant Metro experiences that I think have done a great job.

Hub9-21-2010-8-42-52-PM

 

 

4th-Mayor

windows-phone-01

 

 

 

What I like most about these experiences is how alive they feel but don’t sacrifice simplicity. The large text, simple shapes and solid colours on the important content doesn’t get overshadowed. Many of those interfaces have active animations and make for a unique experience in comparison to other platforms that usually only animate based on user interaction.

 

Conclusion

These days I’m seeing a wide gap between good Metro and bad Metro experiences. I really like Metro but I think no matter what design principles you’re following, when designing a user experience you should sweat every last pixel and make the best user experience you can.

  • http://www.theleagueofpaul.com/ Paul Jenkins (@aeoth)

    I certainly agree that Microsoft aren’t helping Metro with poor UI’s of their own (see: http://www.theleagueofpaul.com/how-not-to-do-metro), part of the problem is that design should still be left to designers, just like coding should be left to developers.

    It doesn’t help that there aren’t that many starting resources for making metro stuff on the desktop and web, so we’re faced with a lot of reinvention of the wheel. I’ve (tried) to alleviate that problem for WPF a little with my MahApps.Metro toolkit (http://www.theleagueofpaul.com/metro), but there isn’t the equivalent to ‘Twitter’s Bootstrap’ for Metro.

  • ct

    While I totally agree just having typography and keeping it simple makes it bland, I’m not sure that just slapping a background is a good way to make it more “vibrant”.

    While I think your Windows Azure redesign is interesting and I do like the contrast of the whiter text vs. the darker background over the original less text/background contrast, from the ultimate business goal of getting the most people to sign up and try/buy Azure don’t you think having a background detracts a bit from the text/message by the user looking at the details of the background thus losing the reader? Same goes for the examples of Metro that you like.

    For a TV ad, movie, etc. it’s great as it’s flashy, but although something looks cool on TV or in a movie, it doesn’t really make for a great user interface in reality.

    Maybe an in-between option is to blur the background so that you have something besides just a solid color background, but also doesn’t detract too much from the text.

    I do however agree we need to somehow rethink Metro to make apps look a bit more appealing instead of being bland and too focused on content, since consumers are mainly visual people and just want the flashiest thing regardless of usability. And if WP7/W8 wants to make a dent in the consumer market it may have to discard some of the content pureness in favor of something a bit more flashy just to satisfy the “oooh it’s shiny” lizard brain we all have.

  • http://www.riagenic.com Scott Barnes (@MossyBlog)

    I have an extended view on Metro + Typography via my blog, but i’ll shorten it down here.

    Typography is actually the opposite effect in mobile device navigation, that is to say we are hardwired visual thinkers and rely on glyphs to decipher patterns not collections of glyphs as this in turn maxes out our internal CPU’s to process (its first peripheral vision, fixated positioning and then rinse/repeat – intrinsic vs extraneous cognitive load)

    That aside, I think Kelly’s touching on a much bigger point and that is Microsoft needs to reign in their design teams under a better branding / consistency in their approach. If they want to prove to the world that the concept of Metro is their face in a familiar crowd, then they really need to be better custodians of the experience(s) and create a sense of uniform / balance.

    They also need to provide their customers better insights in how to partition data density as right now all that Kelly and many others are doing is stating what we all assume is obvious but also have growing concerns that we’re stating it outloud – “err..you know this right Microsoft….MIcrosoft?….Oh dear….I dont think they know this…”

  • http://blog.syntaxc4.net Cory Fowler

    I, for one, enjoy the new Windows Azure page. Sure you can call it childish, but it still fits into your three pillars of metro design.

    It uses Typography to bring focus to the available pages of the current section that is selected.

    It has a Simplistic design which is considerate of white space and uses icons and images to tell a story (example: http://www.windowsazure.com/en-us/home/tour/overview/) of what your experience is like with the plaform.

    There are also two elements which make it both vibrant and simplistic. The images aren’t overly complex and are easily identified as platform features. The second example, using different shades of a the same colour allow elements to be highlighted while still being simple and elegant.

    In your example of a re-implemented page there are a few design elements that you don’t consider in your design. The background image, while an interesting and fits the lingo and mood of the text on the page actually takes away from the simplicity. The lines conflict with the content of the page, the buttons look out of place and there is a lack of contrast which I think the metro design should incorporate in order to provide the ability to “glace-and-go”. The lack of contrast added to the blended colour in the textures of your background image are very distracting, almost gloomy.

    I believe that you do hit on some key points of Metro design, I just think that some of your design aspects are misguided in the need for “vibrancy” in your design.

    The one aspect of the metro design in the Windows Phone live tiles that could be used in the Windows Azure site is providing a minimalistic first view of some detail, but then providing some motion with additional information on a particular item.

    Great Post, and I respect your opinion of elements in Metro design, but I would be careful saying a spade isn’t a spade because it’s not black.

    ~Cory()

  • Eduardo

    I really like the new Windows Azure, and don’t agree that you need to have a big photo background to make things vibrant. Granted that is a more calm approach than other sites, but the info in the site is easy to find, the nav is inviting to explore, the call-to-action buttons are prominent.

  • http://mywebdesign.cz/ rADk

    For me, this page is perfect, great navigation, colors, simplicity:
    http://www.windowsazure.com/en-us/develop/downloads/

    What *you* did is awful.

    I do not want to see clouds, road, text with low contrast and some other stuff when downloading PHP / Azure libraries:
    http://kellabyte.com/wp-content/uploads/2011/12/windows-azure-03.jpg

    Unless you ment it as a joke -> your page is great example of poorly designed “Metro” page…

  • Pingback: When Metro design falls off the tracks - Windows Phone Forums at wpcentral.com

  • http://LightSwitchHelpWebsite.com Michael Washington

    Yes your design defiantly rocks. So I guess I agree with everything you are saying :)

  • http://www.coderox.se Johan Lindfors

    Interesting approach and something I can totally relate to. As a middle-tier developer I find that it’s, maybe not easy, but at least understandable to build applications which are simple and celebrate typography. But the last aspect of “vibrant” is extremely hard to envision and be creative about.

    I do find that Colin Eberhardt’s “Metro In Motion” samples are worth examining to simplify some of the native experiences in Windows Phone.

    Have you seen them?

    http://www.scottlogic.co.uk/blog/colin/tag/metro/

    Have a great Christmas and happy holidays!

    Johan

  • http://www.divinglog.de Sven

    Thank you for mentioning Diving Log in the “Great examples of Metro” section! :-)

  • Walter

    I’ve been with Windows mobile for a while now. The latest (big) transition I made was from Windows Mobile 6.5 to Windows Phone. At first I missed the diverse functionality of the previous windows device, anything I wanted to do with my little pocket pc I could find a way to do (except make and receive phone calls at times). The beauty of the Windows Phone IS it’s simplicity ant it’s ability to draw your attention where it needs to be. If I want to see pretty pictures I will go to my pictures hub, when I want information I go to any of several information hubs and the pretty pictures are tucked away where they are supposed to be. Don’t forget the Windows Phone was designed to keep you off the phone more. The windows Phone just works, it’s uncluttered and seamless in it’s operation and the Metro UI is attractive and functional.

  • george

    I guess I must be in the minority because looking at those two newsreader apps I’d definitely choose the one one the left. It gives more information at a glance. It would take me about 4 seconds the get fed up with an app that decides to waste that much room letting me know what app I’m using.

    Also, the BG image looks cheap. Most WP7 apps I’ve used that try to fix problems using the ‘throw a bg image at it’ approach end up looking worse. A mediocre bg image is worse than solid black.

  • http://jonathan.dickinsons.co.za/blog/ Jonathan Dickinson

    Another aspect of metro is in the name: your design should be inspired by the design of the signage in the metro subway system; the WP7 design team spent a lot of time grokking this.

  • banko

    Reading this, one gets the impression that anything with no picture background is inherently bad design. Yes, you can accuse the Azure page of some sins: it is utilitarian; the big suitcase is somewhat childish and maybe the page is too busy. However, I wouldn’t go as far as calling it an “offence”. And unless you are without sin, you shouldn’t cast the first stone.

    I would argue that your redesign is guilty of just as many sins, if not more.

    You want an image background – very good. But this particular one? Dark clouds in the sky and dead yellow grass on the ground. The overall mood of the page is depressing.

    What is the dominant color? Warm gray / off brown. You have 6 different foreground colors and not all of them look good against this background. There are ways of dealing with that: desaturate, tint or split tone the image. Did you try any of these? The Zune player (which I agree has a great design) uses tinting to deal with the same issue.

    “Unlimited servers, unlimited possibilities, unlimited storage, always up , always on”. Say that four times fast. A bit repetitive, isn’t it? Also, begins to resemble the Microsoft Redesign: http://www.youtube.com/watch?v=EUXnJraKM3k

    “Open road to the cloud”. Isn’t that what the background says? Just as you wouldn’t explain a joke, you shouldn’t have to explain what your design conveys.

    Why is “you” blue? Sounds like the Microsoft Redesign again. “Needs to be more personal” – make “you” blue – done.

    The Azure logo and “Windows Azure” brand: how big is big enough? That blue blob completely dominates the page. It’s not content and carries no additional information. Wasn’t Metro about emphasizing content and deemphasizing everything else? In that respect the original page is closer to the Metro idea.

    Because design and taste are hard to quantify, everybody is a critic. Very few people are good at it. Of those, only a small percentage are in the Microsoft community, where design has been traditionally frowned upon. We will be seeing bad UI design, Metro or no Metro, because of the culture that Microsoft cultivated for decades. Anything can be bastardized and Metro is no exception.

  • http://TypeCastException.com xivSolutions

    Nice article!
    I agree, the initial aesthetics of the Metro UI show promise, and I also agree with your “three pillars” of good Metro design.

    I disagee somewhat with the last part of the comment left by ct. While there are obviously consumers who are driven by “flashy/shiny” I think Apple has proven that elegant simplicity reaches a wider demographic. Further, through careful, inspired design and a willingness to go the extra mile, one can create an appealing yet simple, slick yet functional UI without sacrificing purity of content.

    Of course, design is an art of compromise, and one person’s “simple, slick and elegant” is another person’s “not enough features” implementation. Still, it would be to Microsoft’s advantage to encourage some real brilliance here, and avoid the historical tendency towards pedestrian, “enterprisey” UI.

    Keep up the great work. I really enjoy your writing style . . .

  • Pingback: Windows Client Developer Roundup 086 for 1/11/2012 - Pete Brown's 10rem.net

  • n8

    Design is pretty subjective and it’s rather presumptuous to label pages that don’t incorporate photographs, which seems to be your preference, as poor. I, personally, usually prefer illustration rather than photos and I think the Unlimited Possibilities design you pick on is fine, maybe even better, than your suggestion.

  • http://www.seblc.me SebLC

    Awesome article, especially I like wha tyou say about having to care about UI design even with Metro. I did a post myself about the importance of Metro UI for Microsoft. It goes beyond a pretty face. http://seblc.me/2012/01/20/metroui/

  • Pingback: The Metro Design Language | bSix12 - By Rainer Falle

  • Can’t Be Named

    Here’s the thing. If you want “beauty” or “art”, a stupid phone is the worst place to look. May I suggest an art gallery? Or good old Mother Earth and Nature?

    When I use a phone, I really dont care if it has a background. Is the first screen of my expenses app allowing me to enter my expenses? Check. End of story. Work done. Now onto the bigger and better things in life.

    None of this is to say that designers aren’t needed. But their “need” in my opinion is limited to how to make the application easier and faster to use. The less time I spend on a phone, the happier I am.

  • Pingback: When Metro design falls off the tracks « Silverlight News

  • http://mildrandomness.com Adam

    I have to say I absolutely love your version of the Azure website. That is fantastic.

  • http://twitter.com/jakescott Jake Scott

    Have you seen the work this Kiwi crew have been doing..

    https://twitter.com/markermetro
    http://www.markermetro.com/portfolio/

    The New Zealand Herald app they have built on a Big screen TV is amazing!
    http://www.markermetro.com/portfolio/nzherald/

    Cheers
    Jake

  • Pingback: Kevin Schaefer | WinPhone Info Redesign

  • Pingback: Herding Code