Recently I got my hands on the Nokia Lumia 900 running Windows Phone with the Metro UI. Also, through internal channels at Citrix, I got a fairly deep one-day primer on designing for Metro via MSFT evangelist-led seminar and related team-based workshops afterwards. So, I’m certainly ramping up on my Metro IQ! Lots to discover, interpret, and apply. Those devs and designers unfamiliar should not naively presume Metro is simply “flat icons” and “big boxes”…there’s quite a well-thought out and clearly defined system for maximum visual and behavioral coherence across multiple screen and device formats (Small, medium, large). Big kudos to MSFT for pulling this off. According to the evangelist I heard, this is the first time in MSFT history to attempt and achieve such a broad-based UI coalescence across multiple business units and devices at nearly the same time. Wow!

The following links offer valuable info straight from MSFT on designing for Metro; definitely worth spending some time studying and re-visiting:

> Case Study of iPad to Win8 Metro

> UX Guidelines for Metro style apps

> UI Patterns for Metro style apps

> Metro design principles


And also slides/talks by Mike Kruzeniski, former Creative Director at MSFT who led the Metro design effort, explaining the rationale and inspirations–highly rec watching!

YouTube video of talk:
Slideshare slides:


For now, I just wanted to share some of my own personal thoughts on Windows Metro, as I’ve experienced it thus far on a phone device (not yet tablet). I also have experienced the recent Metro variant for XBOX 360, which is qualitatively different being as a large-screen, 10 foot entertainment experience.

Metro is, as many others have noted publicly, a refreshingly bold vivid sharp crisply defined novel visual design system and language that successfully avoids yet another “me too” iteration of Apple’s iOS visual style (sorry Android and WebOS, although each has their own, er, charms as well ;-) Again, kudos for pushing a different angle on UI style. The typography is stunning and clear. The panoramic parallax imagery/motion is gorgeously compelling. The semantic zoom (for tablet only now) is slick and smart. The live tiles are interesting, supporting a glanceable UI.

So, after about 6 weeks of varying usage (along with my iPhone and iPad and Kindle Fire ;-), here’s my following observations:

– As Matt Gemmell noted, Metro embodies a strong tone of “information asceticism”: pure starkness of content. Some say content first is great, kill the chrome. Yet I feel it’s so content first that I’ve become lost inside an info graphic, losing my anchors for navigation, at times.

– The “live tiles” makes for a very visually compelling dashboard yet it’s not quite as useful as I’d thought. With iOS Notifications I know immediately the sender and content of emails. With Metro I only know that I got 4 new messages, but no idea of urgency, sender, context, content, etc. Perhaps something to improve?

– The Application list is one long vertically scrolling list of names…Maybe not the best effective or efficient use of the real estate? Why not app icons in a grid? Or rolodex of cards? Hmm.

– Is there too much typography?? I love the direction as said above, but there’s quite a bit to read, just a pinch more cognitive load and processing, I think ;-) Perhaps needs more finessing with the spacing and introducing more visual elements to break up the textuality of text. In some cases I wonder if the type is simply too large and dominant.

– Flat icons fit the overall ascetic aesthetic overall, but becomes somewhat cryptic at times. Of course you can tap the ellipse to get a gentle bump that shows the text labels underneath. But how can we avoid that?

– Love the quirky, whimsical little movements and animations on taps and holds and actions. Some may find them gratuitous (like the emails being sent out or photos sliding laterally across panoramic panes) but again, adds delightful, useful feedback. Also gives the info space a “feel” that’s reactive and alive. Not just static elements but “digitally tangible” in a sense. This makes the interface come alive truly.

– Overall flatness of the space and basic color scheme leaves much to be desired IMHO. As someone who likes texture and yes some skeumorphic elements gracefully done well, there’s a stark monotony to the space that leaves me feeling empty, wanting more…character? identity? soul? Hmm.

– The fluidity and speed overall is wonderful, just as immediately responsive, if not more than, iOS on iPhone. Definitely feels slick and powerful and useable. No issues there!

– Same problem as with Android…the damn physical hard key back button on the device! Argh. As an iOS user it’s very hard to remember that key as the perpetual “get me out” button. Keep wanting to tap out some gesture or tap a dedicated soft navi button.

These are just a few initial thoughts…will keep building on as I continue exploring Metro on other devices as well. But overall a positive fresh direction, with great potential. Eager to see how it evolves further, particularly for desktop and tablet contexts.