The principles of Microsoft Metro UI decoded

The phrase “authentically digital” makes me want to barf rainbow pixels. This was a quote pulled from a Windows Phone 7 reviewer when he first got a hold of the said phone. At first you could arguably rail against the concept of what Authentically Digital means and simply lock it into the yet another marketing fluff to jazz a situation in an unnecessary way.

I did, until I sat back and thought about it more.

Issues Presented.

Metro in itself has its own design language attached, they cite a bunch of commandments that the overall experience is to respect and adhere that is to say, someone has actually sat down and thought the concept through (rare inside Microsoft UX). I like what the story is pitching and I agree in most parts with the laws of Metro that is to say, I am partially onboard but not completely.

I’m on board with what Metro could be, but am not excited about where it’s at right now. I state this as I think the future around software is going through what the fashion industry has done for generations – a cultural rebirth / reboot.

Looking back at Retro not metro.

Looking at the past, back in the late 90’s the world was filled with bold flat looking user interfaces that made use of a limited color palette given the said video capabilities back then wasn’t exactly the greatest on earth. EGA was all the rage and we were seeing hints of VGA whilst hating the idea that CGA was our first real cut at graphics.

EGA eventually faded out and we found ourselves in the VGA world (color TV vs. black n white if you will), life was grand and with 32bit color vs. 16bit color wars coming to a conclusion the worlds creative space moved forward leaps and bounds. Photoshop users found themselves creating some seriously wicked UI, stuff that made you at the time thank the UI gods for plug-ins like alien ware etc as they gave birth to what I now call the glow/bevel revolution in user interface design.

Chrome inside software started to take on an interesting approach, I actually think you could probably trace its origins of birth in terms of creative new waves back to products like Winamp & Windows Media player skins. The idea that you could take a few assets and feed them into mainstream products like this and in turn create this experience on the desktop that wasn’t a typical application was interesting (not to mention Macromedia Director’s influence here either).

image

I think we all simply got on a user interface sugar induced high, we effectively went through our awkward 80’s fashion stage, where crazy weird looking outfits / music etc was pretty much served up to the world to gorge on. This feast of weird UI has probably started to wind down to thanks to the evolution of web applications, more importantly what they in turn taught us slowly.

Web taught the desktop how to design.

The first lesson we have learnt about design in user interface from the web is simple – less is more. Apple knocks this out of the park extremely well and I’d argue Apple wasn’t its creator, the Web 2.0 crowd as they use to be know was. The Web 2.0 crowd found ways to simply keep the UI basic to the point and yet visually engaging but with minimalist views in mind. It worked, and continues to work to this day – even on Apple.com

image

Companies like Microsoft have seen this approach to designing user interface and came to a fairly swift rationale that if one were to create a platform for developers & designers to work in a fashion much like the web, well desktop applications themselves could take on an entirely new approach.

History lesson is over.

I now look at Metro thinking back on the past evolution and can’t but help think that we’re going back to a reboot of EGA world, in that we are looking for an alternative to design in order to attract / differentiate from the past. Innovation is a scarce commodity in today’s software business, so we in turn are looking at ways to re-energize our thinking around software design but in a way that doesn’t create a cognitive overload – be radical, be daring but don’t be disruptive to process/task.

Inside Microsoft what I can presume, the ECG group found a way to hijack existing patterns in terms of user recognition and make use of modern signage found inside bus station, railways, elevator marshal areas etc and declared this to be the way out of the excess UI scourge.

I like it, I like this source of inspiration but my first instinct was simple – I hope your main source of success isn’t the reliance on typography, especially in this 7second attention economy of today. Sure enough, there it is, the reliance in Windows phone 7. Large typography taking over areas of where chrome used to live in order to fix what chrome once did. The removal of color / boundary textures in order to create large empty space filled with 70px+ Typography with half-seen half-hidden typography is what Microsoft’s vision of tomorrow looks like.

Metro isn’t Wp7, Metro is Microsoft Future Vision.

My immediate reaction to seeing the phone (before the public did) back inside Microsoft was "are you guys high, this is not what we should be doing, we are close but keep at it, you’re nearly there! don’t rush this!". This reaction was the equivalent of me looking at a Category 5 Tornado, demanding it turn around and seek another town to smash to bits – brave, forward thinking but foolish.

This phone has to ship, its already had two code resets, get it done, fix it later is pretty much the realistic vision behind Windows Phone 7 – NOT – Metro.

Disbelief?

Take a look at what the Industry Innovation Group has produced via a company called Oh, Hello. In this vision of tomorrow’s software (2019 to be exact) you’ll see a strong reliance on the metro laws of design.

The Principles of Metro vs. Microsoft Future Vision.

In order to start a conversation around Metro in the near future, one has to identify with the level of thinking associated with its creation. Below is the principles of metro – more to the point, these are the design objectives and creative brief if you will on what one should approach metro with.

Clean, Light, Open, Fast

  • Feels Fast and Responsive
  • Focus on Primary Tasks
  • Do a Lot with Very Little
  • Fierce Reduction of Unnecessary Elements
  • Delightful Use of Whitespace
  • Full Bleed Canvas

You could essentially distill these points down to one word – minimalist. Take a minimalist approach to your user interface and the rewards are simple – sense of responsiveness in user interface, reliance on less information (which in turn increases decision response in the end user) and a reduction in creative noise (distracting elements that add no value other than it was cool at the time).

image

In Figure 1, we I’d strongly argue you could adhere to these principles. This image is from the Microsoft Sustainability video, but inside it you’ve got a situation which respects the concept of Metro as after all given the wide open brief here under one principle you could argue either side of this.

Personally, I find the UI in question approachable. It makes use of a minimalist approach, provides the end user with a central point of focus. Chrome is in place, but its not intrusive and isn’t over bearing. Reliance on typography is there, but at the same time it approaches in a manner that befits the task at hand.

image

Microsoft’s vision of this principle comes out via the phone user interface above (Figure 2). I’m not convinced here that this I the right approach to minimalism. I state this, as the iconography within the UI is inconsistent – some are contained others are just glyphs indicating state?. The containment within the actual message isn’t as clear in terms of spacing – it feels as if the user interface is willing to sacrifice content in order to project who the message is from (Frank Miller). The subject itself has a lower visual priority along with the attachment within – more to the point, the attachment has no apparent containment line in place to highlight the message has an attachment?

image

Microsoft’s original vision of device’s future has a different look to where Windows Phone 7 today. Yet I’d state that the original vision is more in line with the principles than actual Windows Phone 7. It initially has struck a balance between the objectives provided.

The iconography is consistent and contained, typography is balanced and invites the users attention on important specifics – What happened, where and oh by the way more below… and lastly it makes use of visuals such as the photo of the said person. The UI also leverages the power of peripheral vision to give the user a sense of spatial awareness in that, its subtle but takes on the look and feel of an “airport” scenario.

Is this the best UI for a device today? No, but it’s approach is more in tune with the first principle then arguably the current Windows Phone 7’s approach which is reliance of fierce amounts of whitespace, reduction in iconography to the point where they clearly have a secondary reliance and lastly emphasis on parts of the UI which I’d argue as having the lowest importance (i.e. the screen before would of indicated who the message is from, now I’m more focused on what the message is about!).

image

image

 

Celebrate Typography

  • Type is Beautiful, Not Just Legible
  • Clear, Straightforward Information Design
  • Uncompromising Sensitivity to Weight, Balance and Scale

I love a good font as the next designer. I hoard these like my icons, in fact It’s a disease and if you’re a font lover a must see video is Helvetica. That being said, there is a balance between text and imagery, this balance is one struck often daily in a variety of mediums – mainly advertising.

Imagery will grab your attention first as it taps into a primitive component within your brain, the part that works without your realizing its working. The reason being is your brain often is in auto-pilot, constantly scanning for patterns in your every day environment. It’s programmed to identify with three primative checks, fear, food and sex. Imagery can tap into these striaght away, as if you have an image of an attractive person looking down at a beverage you can’t but help first think “that’ person’s cute (attractive bias) and what are they looking at? oh its food!…” All this happens despite there being text on the said image prior to your brain actually taking time to analyse the said image. To put it bluntly, we do judge a book by its cover with extrem amount of prejudice. We are shallow, we do prefer to view attractive people over ugly unless we are conveying a fear focused point “If you smoke, your teeth will turn into this guys – eewwww” (Notice why anti-cigarette companies don’t use attractive people?)

Back to the point at hand, celebrating typography. The flaw in this beast despite my passion for fonts, is that given we are living in a 7 second attention economy (we scan faster than we have before) reliance on typography can be a slippery slope.

image

In Figure 6, a typical futuristic newspaper that has multi-touch (oh but I dream), you’ll notice the various levels of usage of typography (no secret to news papers today). The headings on purpose approach the user with both different font types, font weight, uppercase vs lowercase and for those of you out there really paying attention, at times different kerning / spacing.

The point being, the objective is that typography is in actuality processed first via your brain as a glyph, a pattern to decode. You’ve all seen that link online somewhere where the wrod is jumbled in a way that you first are able to read but then straight away identify the spelling / order of the siad words. The fact I just did it then along with poor grammar / spelling within this blog, indicates you agree to that point. You are forgiving majority of the time towards this as given you’ve established a base understanding of the english language and combine that with your attention span being so fast paced – you are more focused on absorbing the information than picking apart how it got to you.

Typography can work in favor of this, but it comes at a price between balancing imagery / glyphs with words.

image

The above image (Figure 7) is an example of Metro in the wild. Typography here is in not to bad of a shape, except for a few things. The first being the “Pictures” text is making use of a large amount of the canvas, to the point where the background image and heading are probably duking it out for your attention. The second part of this is the part that irritates me the most, in that the size of the secondary heading with the list items is quite close in terms of scale. Aside from the font weight being a little bolder, there is no real sense of separation here compared to what it should or could be if one was to respect the principle of celebrating typography.

Is Segoe UI the vision of the only font allowed? I hope not. Is the font weight “light” and “regular” the only two weights attached to the UI? what relevance does the background hold to the area – pictures? ok, flimsy at best contextual relevance but in comparison to the Figure 3 above a subtle usage of watermarks etc. to tap into your peripheral vision would provide you more basis to grapple onto – pattern wise that is. Take these opinions and combine the reality that there is no sense of containment and I’m just not convinced this is in tune with the principle. It’s like the designers of metro on windows phone 7 took 5% of the objectives and just ran with it.

image

Comparisons between Figure7 and Figure8, the contrast in usage of typography is different but yet both using the same one and only font – Segoe UI. The introduction of color helps you separate the elements within the user interface, the difference in scale is obvious along with weight and transforms (uppercase / lowercase). Almost 80% of this User Interface is typography driven yet the difference in both is what I hope to be obvious.

image

Don’t despair, it’s not all dark and gloom for the Windows Phone 7 future. Figure 9 (Above) is probably one of the strongest hints of “yes!” moment for the siad phone I could find. Typography is used but add visual elements and approach the design of typography slightly differently and you may just have a stake in this principle. The downside is the choice of color, orange and light gray on white is ok for situations that have increased scale, but on a device where lighting can be hit/miss, probably need to approach this with more bolder colors. The picture in the background also creeps into your field of view over the text, especially in the far right panel.

image

Alive in motion

  • Feels Responsive and Alive
  • Creates a System
  • Gives Context to Improve Usability
  • Transition Between UI is as Important as the Design of the UI
  • Adds Dimension and Depth

I can’t really talk to these principles via  text on a blog, but what I would say is that the Windows Phone attacks this relatively ok. I still think the FlipToBack transition is to tacky and the reality between how the screens transition in and out at times isn’t as attractive as for example the iPhone (ie I really dig how the iphone zooms the UI back and to the front?). The usage of kinetic scrolling is also one that gives you the sense of control, like there are some really well oiled ball bearings under the UI’s plane that if you flick it up, down, right or left the sense of velocity and friction is there.

If you zoom in and out of the UI, the sense that the UI will expand and contract in a fluid nature also gives you the element of discovery  (Progressive disclosure) but can also give you a sense of less work attached.

image

image

Taking Figure 11 & Figure 12 (start and end) one could imagine a lot of possibilities here in terms of the transition were to work. The reality that Reptile Node expands out to give way to types of reptiles is hopefully obvious whilst at the same time the focus is on reptile is also in place (via a simple gradient / drop shadow to illustrate depth). Everything could snap together in under a second or maybe two but it’s something you approach with a degree of purpose driven direction. The direction is “keep your eye on what I’m about to change, but make note of these other areas I’m now introducing” – you have to move with the right speed, right transition effect and at the same time don’t distract to heavily in areas that aren’t important.

Content, Not Chrome

  • Delight through Content Instead of Decoration
  • Reduce Visuals that are Not Content
  • Content is the UI
  • Direct interaction with the Content

Chrome is important as content. I dare anyone to provide any hint of scientific data to highlight the negative effects of grouping in user interface design. Chrome can be over used, but at the same time it can be a life saver especially when the content becomes over bearing (most line of business applications today suffer from this).

Having chrome serves a purpose, that is to provide the end user a boundary of content within a larger canvas. An example is below

image

image

image

I could list more examples but because I’m taking advantage of Microsoft Sustainability video, I figure this would be sufficient examples of how chrome is able to breakup the user interface into contextual relevance. Chrome provides a boundary, the areas of control if you will in order to separate content into piles of semantic action(s). Specifically in Figure 15, the brown chrome is much like your dashboard on the car ie you’re main focus is the road ahead, that’s your content of focus but at the same time having access to other pieces of information can be vital to your successful outcome. Chrome also provides you access to actions in which you can carry out other principles of human interaction – e.g., adjustment of window placement and separation from within other areas offers the end user a chance of tucking the UI into an area for later resurrection (perspective memory).

Windows Phone 7 for example prefers to levearge the power of Typography and background imagery as its “chrome” of choice. I’m in stern disagreement with this as the phone itself projects what I can only describe as uncontained vast piles of emptiness and less on actual content. The biggest culprit of all for me is the actual Outlook client within the said phone.

image

The Outlook UI for me is like this itch I have to scratch, I want the messages to have subtle separation and lastly I want the typography to have a balance between “chrome” and “whitespace”.

image

Chrome can also not just be about the outer regions of a window/UI, it has to do with the internal components of the user interface – especially in the input areas. The above (Figure 17) is an example of Windows Phone 7 / Metro keyboard(s). At first glance they are simple, clean and open, but the part that captures my attention the most is the lack of chrome or more to the point separation. I say lack, as the purpose of chrome here would be to simulate tactile touch without actually giving you tactile touch. The keyboard to the right has ok height, but the width feels cramped and when I type on the said device It feels like I’m going to accidently hit the other keys (so I’m now more cautious as a result).

image

The above (Figure 18) offers the same concept but now with “chrome” if you will. Nice even spacing, solid use of principles of the Typography and clear defined separation in terms of actions below.

image

iPhone has found a way to also strike a balance between chrome and the previous stated principles. The thing that struck me the most about the two keyboards is not which is better, but more how the same problem was thought about differently.  Firstly as you type an enlarged character shows – indicating you hit that character (reward), secondly the actual keys have a similar scale in terms of height/width proportions yet the key itself having a drop shadow (indicates depth) to me is more inviting to touch then a flat – (its like which do you prefer? a holographic keyboard or one with tactile touch, physical embodiment?). If you were to also combine both sound and vibration as the user types it can also help trick the end users sense into a comfortable input.

I digress from Chrome, but the point I’m making is chrome serves a purpose and don’t be quick to declare the principles of Metro as being the “yes!” moment as I’d argue the jury is still not able to formulate a definitive answer either way.

Authentically Digital

  • Design for the Form Factor
  • Don’t Try to be What It’s NOT
  • Be Direct

I can’t talk to this to much other than to say this isn’t a principle its more marketing fluff (the only one with a tenuous at best attachment to design principles would be “design for the form factor” meaning don’t try and scale down a desktop user interface into a device. Make the user interface react to the device not the other way around.

Summary

Metro is a concept, Microsoft has had a number of goes at this concept and I for one am not on board with its current incarnation inside the Windows Phone 7 device. I think the team have lost sight of the principles they themselves have put forward and given the Industry Innovation Group have painted the above picture as to what’s possible, it’s not like the company itself hasn’t a clue. There is a balance to be struck here between what Metro could be and is today. There are parts of Windows Phone 7 that are attractive and then there are parts where I feel it’s either been rushed or engineering overtook design in terms of reasons for what is going on the way it is (maybe the design team couldn’t be bothered arguing to have more time/money spent on propping up areas where it falls short).

People around the world will have mixed opinions about what metro is or isn’t and lastly what makes a good design vs what doesn’t. We each pass our own judgement on what is attractive and what isn’t that’s nothing new to you. What is new to you is the rationale that software design is taking a step back into the past in order to propel itself into the future. That is, the industry is rebooting itself again but this time the focus is on simplicity and by approaching metro with the Microsoft Future’s vision vs the Windows Phone 7 today, I have high hopes for this proposed design language.

If the future is taking Zune Desktop + Windows Phone 7 today and simply rinse / repeating, then all this will become is a design fad, one that really doesn’t offer much depth other than limited respite from the typical desktop / device UI we’ve become used to. If this is enough, then in reality all it takes is a newer design methodology to hit our computer screens and we’re off chasing the next evolution without consistency in our approach (we simply are just chasing shiny objects).

I’ve got a limited time on this earth and I’d like to live in a world where the future is about breaking down large amounts of unreadable / unattractive information into parts that propel our race forward and not stifle it into bureaucratic filled celebrations of mediocrity.

Apple as a company has kick started a design evolution, and say what you will about the brand but the iphone has dared everyone to simply approach things differently. Windows Phone team were paralyzed at times with a sense of “not good enough” when it came to releasing the vnext phone, it went through a number of UI and code resets to get it to the point it’s at now. It had everything to do with the iPhone, it had to dominate its market share again and it had to attract consumers in a more direct fashion. It may not have the entire world locked to the device, but it’s made a strong amount of interruption into what’s possible. It did not do this via the Metro design language, they simply made up their own internally (who knows what that really looks like under the covers).

Microsoft has responded and declared metro design as its alternative to the Apple culture, the question really now is can the company maintain the right amount of discipline required in order to respect the proposed principles.

I’d argue so far, they haven’t but I am hopeful of Windows 8.

Lead with design, engineer second.

Related Posts:

  • mstrobel

    @MossyBlog “The phrase “authentically digital” makes me want to barf rainbow pixels.” LOL!!

  • Great article. I completely agree. WP7 is an experiment in what’s to come. I do believe the principles stated in metro are better realized in the concept videos you showcased above. Seriously every single WP7 app looks exactly the same and it drives me insane.

    The problem with Windows Phone for me is it over-reliance on typography. To the point where you don’t know what is what. The Microsoft Word document example you showed above doesn’t even looked finished.

    May aspects of the UI look unfinished to me. Like something was left out or missing and I can’t pin point what, but it feels off. There are some good parts though. Potential as they say.

    I think reduce the reliance on typography while maintaining the flat shades of color, all while continuing to think about proper layout and you’re on to something. There’s balance and I’m too very excited about the prospects of the next version of Windows.

  • @ Michael Dorian Bach:
    Love this quote:

    I think reduce the reliance on typography while maintaining the flat shades of color, all while continuing to think about proper layout and you’re on to something. There’s balance and I’m too very excited about the prospects of the next version of Windows

    Couldn’t of said it better myself. These were the Ruby’s Diner covos mike.. damn i miss them! talking design is a rare thing nowdays 🙁

  • longzheng

    @MossyBlog interesting observations about “Metro”, 2019 and WP7. you’re right, they’re not all the same.

  • @longzheng I want my 2019 metro and i want it now.. 😀

  • MBR

    Fantastic article!

    I’d had it w/Apple, and I waited for and wanted to like WP7, but I’ve chosen droid for the moment, because I couldn’t stand wasting all that space on such a small device! There’s almost no content provided for do-or-die task pages. And after the iPhone’s dead chicklets, I’m loving actual active widgets.
    Some of the screens are artfull in their own way and woulld make nice looking magazine pages, but I want all my pixels on such a small screen giving me data and context – design ethic is secondary – though if we can have both, that’s great.

  • Hey mate,

    This time I’m writing my reply in notepad first! argh!

    I really enjoyed this post, and I think you touch on some great areas, but I just wanted to investigate a couple of things a little further…

    On the surface (as in the saying, not the device!) most of what you say can be seen as true – example being that the text in a panorama takes up a little too much space etc. Whilst this may be true, it’s like that for a good reason.

    Metro is the design language, but it’s designed to be read in conjuction with the platform specific advice. How to use controls etc. Metro may well see the light of day on say a tablet, or even larger form facors, and it’s usage will change again…

    I think the panorama example highlights this. The large text is part of the what makes the Panorama work. This text, right hand edge hints and the parallex scrolling all point towards the fact that there is more there than just one screen… Take that large text out and the panorama loses a lot of impact. Hand this thing to a 7 year old and they will instantly know how to navigate around what could potentially be a complex menu system.

    This leads in to my second point… it shouldn’t matter that some screen realestate is taken up anyway. WP7 is built around many levels of interaction – it’s UX depends on it, and it’s done very well. Starting at icons on the the lock screen, to active tiles with weather updates etc… both very basic quick view interactons. The next level of interaction is when the user launches the app/hub. This is typically where you’d expect to see the Panorama. Normally this is the detail of the app… or at least a menu of some kind. Now, my point here is that the panorama is meant to once more be an overview of “what this app can do”… still allowing fleeting interaction and easy access to the deeper interaction levels that the application provides.

    I reckon that it’s been absused by a lot of application developers who don’t understand this concept of multiple UX interaction levels. Wack as much shit as you can, cause it’s multi screen you can fit it anyway! NO!!! It’s an overview people! If you can’t fit what you need in here, then you’re doing it wrong.

    And this is all before you realise that with this design you can get rid of other bulky items like back buttons etc… because it’s all more natural, you don’t need these other crappy interface artifacts.

    Another little niggle is with your example comparison between Figure 7 and 8. Fig 8 is a much larger form facter. Try to squeeze that display on the phone, and you’d be looking at panorama or pivot even. It kind of reminds me of when you switch the iPad mail client to landscape mode and you see more junk… this mode doesn’t work in portrait orientation, even though it’s a far superior view.

    Just one more little thing around your comments on chrome – I think that for the most part you are right… but 🙂

    Once again the larger format display allows this to work… but I wont bang on about this! But.. figure 14 is crying for a pivot on a WP7 – I don’t think that “carousel” style display is any good on a mobile device – it’s quirky, but really… did anyone every browse by carousel on their iPhone? Anyway, minor complaint 🙂

    My main point is that taking away the “look” of metro a bit, and swinging back to the multiple levels of UX it’s actually really good when viewed in conjunction with the platform… realestate is king on a small format device and any time you can move an interaction from a button to an intuitive motion then it’s a winner with me.

    I reckon if we see metro on another format screen this argument could get very interesting indeed!

    …and a whole bunch of other stuff I forgot when your blog ATE MY POST!!! :/

    P.S. WP7 font is Segoe WP not UI 😛

    @jakkaj

  • longzheng

    @MossyBlog i think you might have to wait, 8 years or so

  • @Jordan
    Oh how you think you’re so damn smart because you actually read this post and metro + windows phone 7 brochure… actually, smart ass, you have some valid points. None the less, being augmentative ass that I am i simply can’t let you go without a proportional rebuttal! 😀

    RE: Typography leading the user left/right.
    It sounds great to hear that text is like a young hot girl with her skirt half way up her hip, teasing, enticing yes, but in reality she was always hot to begin with – so its moot. Had the same 7 year old the iPhone with out left / right enticement and they to will scroll up and down. We humans are good at experimentation, we don’t mind the odd level of complexity here or there, it gives us more excitement in our lives to try and fail or succeed.

    While I can subscribe to the idea that the text leads you down this path, I also subscribe to the notion that it could still be a success with or without it and the comparison between the two is purely academic until we get a score that settles this – ie “Microsoft research found 1 inf 9 house wives were able to identify the left/right due to large typography half in half on the screen” this needs to occur before I truly concede that point.

    RE: Application Hubs.
    I don’t agree with the existence of Screen/App Hubs for what it’s worth. I think they can be made redundant as to me its a stalling point in grouping the semantics of what the app represents. In that creating a sub-menu structure within a master menu structure to me is an obvious attempt to cram alot into nothing. It also executes in a manner that at times feels like a stepping stone / or holding point for easier access to areas where its probably not really necessary. iPhone for example does this, it uses the grouping icon where you obviously approach the problem in a same way but i find that its approach is more rapid vs window phone’s. Its subjective but at the same time I just feel its break-away from the concept to be a little to far to the right for my liking (personally).

    RE: Typography size
    I choose the pictures screen as an example, but the consistency in scale / font weight etc in the screens to me is a waste of space and is doing the same thing it stands to hate – chrome. Its like removing a person’s nose and putting a face mask in its place because you hate noses.. (hope that metaphor held together)…the problem just got shifted slightly but it never went away.

    RE: Form Factor.
    I was careful in choosing those as examples, as who said you can’t rotate the phone horizontal. I often fluctuate with both Windows Phone 7 and my iPhone in terms of portrait vs landscape mode depending on the need. I prefer for example horizontal when typing, it feels more natural to hold and i prefer portrait for “at a glance” more so than landscape etc. The point is, you could easily cram those screens onto the very phone we are talking about and i’m willing to go a pepsi challenge on that 😀 hehehe

    RE: Metro vs WP7.
    I agree its unfair to hold WP7 hostage to the above entirely, but I only cite it as an example simply because it’s the only living publicly viewable version of metro from Microsoft’s perspective. I think its fair to call it on its own failings and inconsistency, more so because the expectation is that the general public buy into the discussion more via their apps etc. Microsoft needs to show more than just a phone here, they need to dig deep provide some virtual concepts of how metro in both device, desktop and beyond is to be used. We need to draw a line between where Wp7 is today and how the future plays into the overall experience.

    I also think they need to start unloading more research data onto the table, i’m all for “build it -> deploy it -> wait and see” when it comes to user experience (I love the UX bleeding edge) but if i’m to sit here and swallow the metro way of life end to end, I want to be able to walk into a discussion armed on both sides of the isle to make a balanced but fair call.

    Right now, all i have to go on is “Metro is authentically digital, cause Microsoft said so”

    😛

  • I agree 100%.

    I want the 2019 looking apps today, and what’s so upsetting is that we can build those with WPF/Silverlight!!!

    This is one of the reasons I’m dying to get my hands on the latest WinCE7 with managed Silverlight, to completely skin the OS UI to look like a 2019 app!!! Unfortunately the beta of WinCE7 is a bastard to get running and working properly!

  • @longzheng to which I respond “I have photoshop, blend and L1 Visa still open between Microsoft and Me..i will fix this if others wont!”

  • jeffwilcox

    @MossyBlog I can haz some 2019 aftereffects videos?

  • @jeffwilcox if you can do it in AE you can do it in real life. Thats my benchmark for success in UX 😀

  • Lovely decoding of design principles, but as you say it’s hard to discuss the design absent the experience. I’ve been complaining about losing information density in the Outlook client since I first saw WP7; when I got to use it I stopped complaining very quickly because the combination of the clarity of the ui, the incredibly smooth scrolling and the utterly functional options like checkbox select means that it actually works – the white space is providing the space and clarity that white space is there for in designs. Metro and the Neville Brody redesign of the BBC site are some of the nicest digital designs I’ve seen in the last year; they’re not gratuitous or shiny for the sake of it, they use design principles we’ve developed for paper and cinema and photography for decades. I wonder if the application of so many physical, analogue principles is why they feel so nice?

  • Interesting read, though I both agree and disagree with you in equal measure. However, in terms of the big picture about metro design v/s 2019 vision v/s apple’s UI – I think metro wins big (despite numerous issues with it). And I’m speaking both through expertise and experience, especially as I’ve actually xaml’fied all three approaches. There are many things that make metro win such as content-centralism, fluidity, clarity, etc. – however, for me the decisive win comes from how the experience is actualized on screen, that is something static analysis of pictures (esp. of mismatched contexts) won’t give you. The user-experience component to design is often abstruse and therefore easy to discount – case in point, what’s superior wp7’s text-rich pivots or apple’s bottom-docked tabs?

    Also, personally I’ve learned to differentiate between two types of metro-design – one a monochromatic realization like in figure 4, and other a more color-spectrum rich like in xbox. I think that’s more interesting tug of war than a substantially different realization of metro design.

  • Pingback: Sites Wednesday, 9 February 2011-Angry Birds coming to Kinect-Dance Central 2-Malvertizing on Facebook-Word jargon demystified-John Huchra’s universe on WWT « webDotWiz talks Windows Live()

  • Hey mate,

    On the sexy girl comment, how am I supposed to retort that 🙂

    I don’t think we need a survey with figures etc, think back to the first time you saw a Panorama in action, followed closely by the unfolding of what you might be able to do with it as you process it… not sure about you but I was a little excited – not only cause it’s a cool concept, but the realisation that MS managed to make something new that didn’t copy the rest… not an easy task – at the end of the day, setting out with the goal to make something that is differnt and just as good as the competition is extremely difficult.

    I think the point of the hubs/panorama intro screen is slightly missed here. At its most basic form, yes it is a re-invisioned main menu – a much better one if you ask me… but the real idea here is to change the semantic of how one puts together an application, the quick overview and dive in to content idea… it works in very well with the hardware back button for example… it’s almost like a mix of web browsing with application goodness. All the little subtle hints that the simple/detailed mix of screens should be followed are present in the metroie design of the hub. It’s like inherent application design enforcement… or some shit 🙂

    On Typography size… Golden Ratio baby!!

    On form factor… when you flip iPhone to the side in email client, you don’t see a drastically differnt view, on the iPad however with the larger screen – it really opens up the possiblities here. I don’t reckon those examples/comparisons are particularly fair on the mobile device, but… as I say, can’t wait to have a debate again when we see metro on a larger screen!

    On your final point – couldn’t agree more. Would love to see some design concepts and more research stuff to help us build things. I’m basically driven by those FUI videos and scouring the web for cool looking shit – it’s half the reason I quit my job was so I could find the cool stuff to build and just do it!

  • nitro52

    Great article. reading it made me realize another problem. to be good at getting that balance you need to either train the thousands of developers and designers so that they can identify that balance but this can be very hard. The other option is for the tools they use should help to guide them into making the right choice.

    this isn’t the case at the moment.

  • Pingback: Metro UI - Windows Phone Forums at wpcentral.com()

  • Pingback: Metro UI, réflexions autour de la nouvelle identité visuelle de Microsoft. « sharpexecutive()

  • TBW

    Hello Scott i poked around on this blog and though i may not agree with some of the things you said i do agree with that metro can be better and not rely so much on Typography. I do like the idea of balanced icon and words. Honestly you may have heard that Windows phone mango has been in development and on the blog they have been listing things they have been doing, what i’m saying here do you think that windows phone mango or WP 7.5 will makes it step to the metro UI being as best as it can?

  • Samuel

    @ Michael Dorian Bach:
    Michael Dorian Bach wrote:

    Seriously every single WP7 app looks exactly the same…

    I could say the same about iOS apps! 🙂

  • Pingback: Metro UI – A brief story | SpaceForFreedom()

  • Pingback: Please, call a spade a spade()

  • Pingback: Kevin Zheng » The principles of Microsoft Metro UI decoded()

  • Pingback: Skype for Windows 8 UI - Wil believes it()

  • Pingback: Windows 8-Metro UI 不是一套Skin()