Windows Phone: Key Themes, Part 1: Metro

Windows Phone: Key Themes
Part 1: Metro

In the preparatory work for my next book, Windows Phone Secrets, I've been studying how Microsoft communicates its goals for its next smart phone platform and the ways in which it plans to differentiate this product line from the competition. Part of this work involves an ongoing blog, also called Windows Phone Secrets, where I'm documenting my discoveries about Windows Phone and discussing the writing process. This week, I posted about the key themes that Microsoft is using as it designs and develops Windows Phone. But this topic bears further discussion, as there's a lot more going on here than the high-level information I posted on the blog.

Microsoft's intentions for Windows Phone are spelled out in a basic way in a document that the company provided to the press at the MIX'10 trade show last month. In this document, Microsoft outlines three key ways in which it will set Windows Phone apart from the competition: The Metro user experience, a set of seven high-level differentiators, and a set of guiding principles. Let examine each of these in turn. First up, Metro.

Metro

Metro is the codename for the Windows Phone user experience (UX) or, as most would think of it, user interface (UI). It consists of both text and graphical elements, and is basically the most recent rendition of the user interface that Microsoft previously developed for the Zune HD and other products. (Indeed, the team responsible for Zune was brought over to develop the Windows Phone UI.)

Microsoft describes Metro as "a dramatic new user experience paradigm." As with a super hero, there's an origin story, but the part you need to know about is that, as its name suggests, Metro is based on the design language of transportation graphics, and not on Windows or PCs, or on other devices. This is, I think, a very important distinction, and it certainly places Metro well ahead of, say, Android, which is basically an iPhone rip-off.

Transportation graphics are, of course, universal. As Microsoft's Albert Shum noted at MIX'10 last month, you can use the London Tube, get off a train in Madrid, or arrive at the Las Vegas airport, and very simple graphics will help you get where you want to go. "It's simple, elegant, and powerful," he said. "And that's why we call it Metro."

The transportation graphics influence isn't just about the basic design of the UI, but also about the use of bold colors and typography. These are key themes we'll address more in the next part of this overview, as is the Metro design itself, which gets out of the way and doesn't overpower the experience.

Metro also has a sense of motion, via transitional animations. "Movement brings content to life," he said.

Pointing to work that Microsoft had done before in Media Center and Zune, Shum notes that the company wanted a similar immersive experience for Windows Phone. So when you're playing music, it's not just music playback but also rich artist imagery and links to other music you may like. And with the Zune HD, Microsoft discovered how intimate a touch-based device can be, especially one that you bring around with you every day.

Pull this all together and you get a sense for what Microsoft is trying to accomplish with Metro. The company summarizes this via a somewhat nauseating marketing poster. (Hey, it's marketing after all.)

Broken into parts, this message starts to make more sense. That is, Metro is explained by the following principles:

Modern, clean, light, open, fast

The Metro UI is designed to feel fast and responsive, which seems as obvious as it is desirable. But the big point here is that Metro breaks with conventional UI design thinking and provides, as Shum put it, "only what you need." The experience is simple, by design. It is a UI with white space, one that, as Apple fans love to point out about that company's products (accurately or not), "gets out of the way." Here, it's not just hyperbole. Microsoft has undertaken what it calls a "fierce reduction of unnecessary elements" in the UI. It has been stripped down so far, in fact, that some power users may find it off-putting.

In case it isn't obvious, this is not the way Microsoft designs products. In fact, it so contrary to the typical "kitchen sink" Microsoft product design approach that it's amazing the Windows Phone team is getting away with it. (My guess: Windows Mobile has stumbled so badly in the market that Microsoft was willing to try anything.)

This design focus also works to further emphasize Microsoft's point that a Windows Phone is not a tiny PC, as were all previous Windows Mobile, Pocket PC, and Windows CE devices. This is a new way of looking at the phone, something even the apps-driven iPhone and Android devices don't provide.

Fast and in motion

Motion--or what many of us would term "animation"--is used in many UIs today. Consider Windows 7, where the act of minimizing a window is accompanied by a subtle animation of the window getting smaller and appearing to fall into its taskbar-based button, providing a visual cue about where the window "went." In Windows Phone, Microsoft is using animations, or motion, in a more profound way. Yes, motion will be used to provide visual feedback, as in Windows. But motion is also being used to help users understand where they are.

These types of animations are, of course, transitions, and they're particularly important for a UI that, as explained previously, has been stripped down to the bare minimum. They provide a context for what you are doing, and where you are going in the UI.

The Live Tiles in the Windows Phone Start screen uses motion in a different way. They can act as a "tease" for what will happen if you the user taps one, but providing a moving kaleidoscopic view of what lies underneath. They can animate with notification information as well. "Live Tiles use motion to engage the [user], to pull them in," Shum said. "It's a new way to use motion, use it to help people navigate and make the experience better."

As Microsoft puts it in the Metro documentation, motion brings Metro to life. It feels good, adds dimension and depth, and is as important to the overall user experience as is the actual design of the UI. And it's a preview, of sorts, to the sorts of motion we're going to see as all of our interactive systems move to a 3D and natural interfaces future.

About content

Yet another area where Windows Phone breaks with the UI metaphors of the past (and present, really) is that it puts content front and center. When you think about it, this makes a lot of sense in the context of the UI itself being deemphasized and simplified. (And it explains, I think, why Mac OS X has always struck me as a barren, Spartan place: That UI is simple, yes, but it's also stark and plain looking, even a bit forbidding. Why? The UI isn't front and center, and neither is anything else. When everything gets out of the way, you're just left with nothing.)

In Windows Phone, by contrast, Microsoft understands that a phone is a personal, intimate device, or a "companion to life," as Shum put it. With such a device, people want to do certain things, so the thinking is, let's let that content be the interface. So you don't have to think about which application to launch when you want to access a favorite photo. You tap on a photo instead, or access an experience called Pictures that combines functionality from a number of applications and online services that, go figure, are contain your own photos (and photos of your friends and family too).

In this kind of UI paradigm, all of the user interface "chrome"--the surround window frame, borders, and so on--is stripped away and the content, in effect, becomes the UI. This paradigm is the key, too, to Microsoft's rich and immersive panoramic experiences, like the Pictures hub. The content is the UI, again, and you interact directly with that content. The device works the way you think, instead of forcing you to think--as the iPhone does--about the way the device organizes things.

About typography

Somewhat controversially, Microsoft is basing the Metro UI heavily on the use of typography. This again is something we don't see in any competing phone systems, let alone consumer electronics products or PCs of any kind. "We celebrate type," Shum said. "We bring type to the foreground and say, hey, type is beautiful, use it in a new way to pull the audience in."

Type can also be expressive, as Shum noted, and anyone who is familiar with the Zune HD today has an early experience with how the use of textual menus can be made to be both beautiful and usable.

Entirely authentic

Of all the Metro principles, this is the one that immediately set off a negative reaction in my head. It's hard to explain why, exactly. But I think it's because this phrase is like saying that you're cool, or that you're having a good time at a party. In both of these cases, you either are or you aren't, and if you have to say you are, you're not. But actually, when you come to understand what Microsoft is trying to communicate here, it makes sense. There's just gotta be a better way to say it.

I would state this as, "It's a phone, not a PC." The idea is that Windows Phone is authentic to the devices on which it runs. It's not an attempt to re-do the PC interfaces of the past on a smaller screen. It's not an attempt to me-too the iPhone, as is Android. It is, instead, a bold and promising attempt to "redefine the future of mobile," a digital mulligan if you will, a chance to set things right. And in doing so, Microsoft has broken with the past and made a UI that makes sense for the devices on which it will run, for the people that will use it, and for the circumstances in which these things will occur.

So the "authenticity" of Metro, if you will, is true to the device. The hardware is naturally simple and modern and so too is the software. There's no decoration and no ornamentation, and no need for either. And ... on that note, it makes plenty of sense. But again, I just think there might be a better way to express it.

Looking ahead

Principles are valuable. But of course, you have to put these principles to work, so to speak, and build and design a product that embodies the principles to which you've committed. Microsoft spent about a year doing just that. And in the process it created both the Windows Phone platform and the first generation version of the Metro user experience. With Metro, there are general ways to express how these things come together--Metro puts the individual at the center and focuses on what they want to do, for example. But at a deeper level, there are a number of specific things that really set Windows Phone apart from the competition. These are what Microsoft identifies as its seven areas of differentiation. And this is the topic I'm going to examine in part two of this series.

Stay tuned.