A Walkthrough the History of the Metro UI

Many users now know the Metro UI design language because of its use in Windows Phone. The inclusion of the Metro paradigm into Microsoft’s mobile platform reboot was both an much-needed and risky product bet. Most people praise Microsoft for their Metro user interface, but in most cases, products using the Metro UI haven’t fared too well in the market. In cases like the Zune HD, which brought about the modern version of this UI, Microsoft built a simplistic, chrome-less user interface which is reliant on typography and easy on the eyes. While an excellent music player, the Zune HD has only garnered a small percent of the PMP market.

Windows Phone then took its cue from the Zune HD, but many may not know how Microsoft got to this point. Starting with Media Center in Windows XP in 2005 Microsoft began applying Metro to their products and now Metro is beginning to show up in nearly everything they do. From its early days in Media Center to the new Windows 8 Start screen, here’s a look back at Metro and how it has arrived to where it is today:

Media Center

Microsoft originally started using the Metro design language in their Windows XP Media Center product in 2005. The idea was to build an interface which relies more on typography and less on chrome and buttons. Vista and Windows 7 improved on Media Center making it an acceptable living room solution for media playback on the television.

Zune PC Software

The Zune PC software has always worked in conjunction with Zune hardware devices and is now the primary method for managing media both on your PC and on your Zune and Windows Phone devices. The original Zune PC software v1.0 (pictured below –  top left) was essentially Windows Media Player 11 with a different skin and not as many features. Version 2.0 (top right) brought about many changes and a complete redesign similar to the modern day Zune software client. The completely rewritten 2.0 software made the process of managing devices and music a much better experiences for users. Version 3.0 (bottom left) took the popular 2.0 experience and added features and even more stability. Zune 4.7 (bottom right) was given its name because of the Windows Phone 7 devices it would now interact with. Internally, 4.7 meant “for seven” as in for Windows Phone 7. The Zune software is now fully mature and easily the best piece of software for managing a media collection. The PC software also acts as a windows to the Zune Marketplace where music, video, apps and podcasts can be browsed and downloaded.

Xbox 360

The Xbox 360 was introduced in 2005 and is the primary competitor to the Playstation 3 and Nintendo’s Wii console. The original interface used on the 360 was dubbed “Blades” (not pictured) and was not Metro in design. In 2008, Microsoft redesigned the Blades interface to a more Metro-like, Media Center design called “New Xbox Experience” or NXE (top left). In 2010, Microsoft redesigned the interface (top right) again to flatten out the menu options into a more Metro-like design. In 2011, at the E3 show, Microsoft introduced the next update to the Xbox 360 Dashboard (bottom center). The coming update completely takes hold of the Metro paradigm and is very reminiscent of the current Zune PC software and the upcoming Start screen for Windows 8.

Zune Devices

The Zune 30 device debuted in 2006 with the first generation of music players coming from Microsoft (Left). The first device was done in collaboration with Toshiba, but the software was Microsoft’s and early Metro in design. Microsoft then followed up with the second generations Zunes (4, 8 and 80) and debuted the touch navigation pad. The second generation devices were introduced along with v2.0 of the Zune PC software. Third generation devices used nearly the same UI, but now played games using Microsoft’s XNA framework and added a few different models to the mix. The Zune HD was introduced in Fall 2009 (right) and featured the first fully touchscreen enabled device in the Zune family. The device was lauded for both build quality and software. The Zune HD is the forerunner to Windows Phone in its Metro UI. Microsoft has not officially committed to continue making Zune hardware, but has publicly backed the Zune services.

Windows Phone

Windows Phone became Microsoft’s mobile reboot in 2010. taking its cue from the Zune HD and the Metro UI, Windows Phone 7 Series as it was originally called infused many of Microsoft products and services into one cohesive unit. The word “Series” was then dropped from the name and leaving the first generation to be called simply, “Windows Phone”. The UI is completely Metro and features a home screen where live tiles point the user to apps and hubs. Live tiles also bring information straight to the forefront so users don’t have to navigate into apps and hubs in most cases. The original update to Windows Phone brought Copy & Paste and various improvements to apps, games and the Marketplace. The first major update is slated for Fall 2011 and is codenamed “Mango”. Windows Phone shipped along side Zune PC software v4.7.

Windows 8

Microsoft has decided to take the company in a direction towards the Metro UI. In early 2010, Microsoft Window’s Chief, Steven Sinofsky revealed the new Start screen for the upcoming release of the latest Windows OS codenamed “Windows 8”. The new Start screen borrows heavily from the Windows Phone tile home screen and will replace the classic desktop as the primary user interface, although the classic desktop will be present. In moving their flagship product to the Metro UI, this marks the first time that all of the company’s major products are using the same design language and solidifies Metro as the preferred user interface for the company.

Windows Live/Websites

Microsoft has also begun deploying the Metro UI across its other products and services. Both Windows Live and some of the products websites for Microsoft have seen a shift to a Metro-esque style.

As you can see, Microsoft has been deploying the Metro language throughout their products and services for years, but it has really come to people’s attention with the change from Windows Mobile to Windows Phone. The modern and clean design has been positively received across many forums and looks to be the future of Microsoft. As Windows Phone grows in market and mind share, we should begin to see others realize the positive and potential of the Metro design language.


2 responses to “A Walkthrough the History of the Metro UI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s