Why Metro now rules at Microsoft

The tile-based user interface created for Windows Phone has moved to the core of Microsoft's consumer offerings. Now, Microsoft has to make sure it doesn't muddy Metro's clear design.

Bill Flora, a key leader on the team that created Microsoft's Metro interface. Jay Greene/CNET

Microsoft chief executive Steve Ballmer told you all you really need to know about the importance of the company's Metro user interface at the Consumer Electronics Show in Las Vegas last month.

Ballmer's keynote speech was a virtual Metro-palooza. He showed the sleek, tile-based interface in Windows Phones. And then he displayed it again in the upcoming Windows 8 operating system. It made another appearance in a demo of the released version of Xbox Live. The Metro rectangles even found their way in his Power Point slides.

"Metro will drive the new magic across all of our user experiences," Ballmer said in Las Vegas. "So, in 2012 what's next? Metro, Metro, Metro."

Not bad for a user interface that really came together in roughly a month in early 2009 when Microsoft decided to ditch its uninspired Windows Mobile business and try something new. The company assembled a team of top user experience designers at the company to come up with something that could compete with appeal of Apple's iOS and Google's Android, while being uniquely Microsoft.

The group, though, didn't just piece together the core of the new Windows Phone interface. It came up with design principles that have become the cornerstone of the new look and feel of Microsoft's key consumer offerings.

"It's an ethos," said Albert Shum, general manager of Windows Phone Brand & Design Studio.

The Metro interface in Windows Phone. Microsoft

The fact that Metro has moved far beyond Windows Phone is all the more remarkable since its lineage can be traced back to the much-maligned Zune digital music player, which foundered against the oceanic force of Apple's iPod. But the sleek and simple user interface won kudos from reviewers when the Zune HD debuted, even if consumers largely ignored the product. The Metro designers also drew on work done years earlier in Microsoft's Encarta encyclopedia software and its Windows Media Center interface.

Microsoft still has a battle to get consumers, who continue to buy boatloads more iPhones and Android devices, to embrace Windows Phones. In the fourth quarter, it lost a point of market share, accounting for a paltry 4.7 percent of sales in the United States, according to ComScore. But reviewers have praised the Metro look as being different, not derivative.

"It was fresh," said Bill Flora, one of the key leaders on the team that created Metro. "It wasn't Apple."

Metro takes its design cues from way-finding graphics used in transportation signs. The bold, clear lettering and iconography are key to helping commuters find their way to subways and air travelers navigate to their boarding gates. Shum, Flora, and the others on the team believed that focus on clarity and readability would be crucial to the new interface.

The group came up with a look with plenty of white space, recognizing that clutter only confuses users. It also did away with chrome, the frame that separates one app from another on a screen, realizing that the decoration around the app detracts from the experience of using the program. It used a Microsoft-developed typeface called Segoe that forgoes flourishes and is easy to read. And it relies on animations that roll screens away as users navigate through the interface, for example, giving them context about where they're going or where they've been.

The new home screen for the Xbox 360 dashboard. Microsoft

"For consumers used to iPhones and iPads, trying to go with a subpar experience isn't going to work," said Michael Gartenberg, research director at industry analyst Gartner. "Microsoft needed to up its game and it has. It has an extremely functional design and it doesn't look like anything on the market."

That's high praise for a company that's long had an engineering culture and left design to the tail end of the development process. But market dynamics have changed, and Apple, more than any other company, has proven that design matters.

"To make great products, you've got to connect with consumers," Shum said.

Metro: 'A design revolution at Microsoft'
The clarity of Metro gave Microsoft a new way to think about approaching all of its consumer offerings. Microsoft executives quickly latched onto the design as a way to create a familiar experience across all of its offerings. It's a point the team pushed in a book they handed out to Microsoft employees and partners in 2010 to help guide them in using Metro in their own applications.

"What you hold in your hands is a new beginning," the book reads. "Think of it as a design revolution at Microsoft. These are our principles and our assets, together in one place for the first time."

Managers in other Microsoft groups embraced the new design language.

"They really craved some leadership, some guidance," said Flora, an 19-year Microsoft vet who left the software giant in September to start Tectonic, a user experience design firm in Seattle.

Metro made its debut outside of Windows Phone in Xbox Live two months ago . The Xbox team incorporated the Live Tiles, animated blocks that take the place of application icons, into the new interface. The various hubs on the service--such as "video," "games," and "music"--are written in Segoe. And they've added gesture controls, similar to the swipes the Windows Phone customers use to navigate their devices, to the Xbox interface when gamers interact with it using the motion-sensing Kinect controller.

The biggest bet on Metro , though, will come later this year when Microsoft is expected to launch Windows 8. The company's franchise product has put Metro at its core. Users will still be able to find the traditional Windows user interface in Windows 8 on PCs. But users of touch screen devices running the operating system will have Metro front and center. What's more, Microsoft is encouraging developers to create applications using the Metro principles for the new PC operating system.

Microsoft is gambling that it can claw its way into the tablet business, in large part on the strength of Metro's touch interface. There is little that's more important at Microsoft. PC sales are slowing. And tablets, notably Apple's iPad, are experiencing huge growth and handling tasks that had once been the province of PCs. Microsoft needs Metro to succeed for it to be a factor in the tablet business.

"The question is how well is it going to work on a tablet device," Gartner's Gartenberg said. The answer is still unclear.

As Metro rolls out widely, it faces another challenge--the risk that the clear design principles that Microsoft imbued it with will get muddied by those jumping onto the bandwagon. Internally, there may be pressure to grasp onto Metro to help push products forward, even if developers don't fully appreciate the Metro philosophy. After all, Ballmer has positioned Metro as what's next for the company.

At the same time, external developers will bring their own interpretations to Metro, for better and worse. While Metro apps will go through a review process, Microsoft has incentive not to be overly draconian about restricting developers. That's because the platform still has a long way to go to catch up with competing offerings from Apple and Google.

The company is working hard to be crystal clear about the design principles, even as it lets developers interpret the design language in a way that suits their applications. The Metro principles aren't rigid. But Microsoft is clear about what Metro isn't. It's not a bunch of rectangles with big type, said Sam Moreau, director of user experience for Windows, Windows Live and Internet Explorer.

"We think of it as a philosophy," Moreau said. "We think we're at the beginning of something."

The Metro interface in an early build of Windows 8 that was shown to developers in September 2011. Microsoft
 

Join the discussion

Conversation powered by Livefyre

Show Comments Hide Comments
Latest Galleries from CNET
Best mobile games of 2014
Nissan gives new Murano bold style (pictures)
Top great space moments in 2014 (pictures)
This is it: The Audiophiliac's top in-ear headphones of 2014 (pictures)
ZTE's wallet-friendly Grand X (pictures)
Lenovo reprises clever design for the Yoga Tablet 2 (Pictures)