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 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).
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.
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.
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.
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
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.
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.
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.
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
For 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.
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.
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.
Great examples of Metro
Here are some other examples of vibrant Metro experiences that I think have done a great job.
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.
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.