Metro (design language)

The Metro style, as shown on the "Music + Video" hub on the Windows Phone operating system, incorporates the use of typographical elements, a horizontally panning layout, and large thumbnails of content used to access them

Metro is an internal code name for a typography-based design language created by Microsoft, originally for use in Windows Phone 7. Early uses of the Metro principles, such as the typography, began as early as Microsoft Encarta 95, and later evolved into products such as Windows Media Center and Zune.^[1] Later the principles of Metro were included in Microsoft's mobile operating system, Windows Phone, the Xbox 360 dashboard update, and Windows 8.^[2] A specially-made version of Microsoft's Segoe font family, Segoe WP, is used as the main font family for all typographical elements.^[2] It was confirmed by Microsoft at Computex that Windows 8, the successor to Windows 7, takes inspiration from Metro.^[3] Microsoft also plans to add the Metro design principles to other products and services, like the Xbox 360 and Windows Live, in order to create a unified and distinctive look across its consumer products and services.^[4]

History

"Metro" is based on the design principles of classic Swiss graphic design. Early glimpses of this style could be seen in Windows Media Center for Windows XP Media Center Edition^{[citation needed]}, which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Zune refreshed its interface using these Metro principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome.^[5] The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune's previous Portable Media Center based UI. Flat colored "live tiles" were introduced into the Metro design language during the early Windows Phone's studies. ^[6] Microsoft has begun integrating these elements of the Metro design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger and Live Mesh.^[2]

Development

A King County Metro Airport and metro sign—signage partly inspired the language due to its readability and cleanness.

Microsoft's design team says that the Metro UI is partly inspired by signs commonly found at public transport systems, for instance on the King County Metro Transit^[5], a public transit system that serves the Seattle metropolitan area where Microsoft is headquartered. Metro places a large focus on typography and has large text that catches the eye. Microsoft says that Metro is designed to be "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Android and iOS^[7]

All instances use fonts based on the Segoe font family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. For the Zune, Microsoft created a custom version called Zegoe UI, and for Windows Phone, they created the "Segoe WP" font family; apart from minor differences, the fonts are largely the same.

Response

Response to Metro has been generally positive. Engadget said, "Microsoft continues its push towards big, big typography here, providing a sophisticated, neatly designed layout that's almost as functional as it is attractive."^[8] CNET complimented the Metro design, saying, "it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."^[9]

The Industrial Designers Society of America (IDEA) awarded Windows Phone, which uses Metro, the "People's Choice Design" gold award as well as the "Best in Show" award.^[10] Isabel Ancona, the User Experience Consultant at IDEA, explained why Windows Phone won this award and explains the user experience of Metro:^[11]

“

The innovation here is the fluidity of experience and focus on the data, without using tradition user interface conventions of windows and frames. Data becomes the visual elements and controls. Simple gestures and transitions guide the user deeper into content. A truly elegant and unique experience.

”

Principles

Microsoft's basic description of Metro.

The new Windows 8 Start Screen, making use of flat, colored live tiles and a full bleed canvas as used in Windows Phone and Xbox 360 Dashboard.

The Metro design language was designed specifically to consolidate groups of common tasks to speed up usage. This is accomplished by excluding superfluous graphics and instead relying on the actual content to also function as the main UI. The resulting interfaces favour larger hubs over smaller buttons and often feature laterally scrolling full bleed canvases. Page titles are usually large and consequently also take advantage of lateral scrolling.

Animation plays a large part, with transitions, and user interactions such as presses or swipes recommended to always be acknowledged by some form of natural animation or motion. This is intended to give the user the impression that the UI is "alive" and responsive, with "an added sense of depth."^[12][13]

Internally, Microsoft has compiled a list of principles as core to the Metro Design Language.^[14]

References

1. ^ "Mike Kruzeniski – How Print Design is the Future of Interaction". Kruzeniski.com. http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/. Retrieved 2011-09-08. 
2. ^ ^{a b c} "Windows Phone 7 Series UI Design & Interaction Guide". March 18, 2010. http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx. Retrieved 2010-10-09. 
3. ^ "Video: Windows 8 Uses WP7 Design, Runs from USB Stick". Published Friday 15 April 2011. Retrieved Friday 15 April 2011.
4. ^ "E3: Xbox 360 getting TV tuner, Bing search, Metro interface | The Microsoft Blog - seattlepi.com". Blog.seattlepi.com. 2011-06-06. http://blog.seattlepi.com/microsoft/2011/06/06/e3-xbox-360-getting-tv-tuner-bing-search-metro-interface. Retrieved 2011-09-08. 
5. ^ ^{a b} "Windows Phone Design System: Codenamed ‘Metro’" (PDF). http://go.microsoft.com/fwlink/?LinkID=189338. Retrieved 2010-10-09. 
6. ^ [1]^{[dead link]}
7. ^ Browse Blackboard Home (2011-04-25). "Metro - Blackboard". Businessinsider.com. http://www.businessinsider.com/blackboard/metro. Retrieved 2011-11-03. 
8. ^ Zune HD (2009-09-17). "Zune HD review". Engadget. http://www.engadget.com/2009/09/17/zune-hd-review/11. Retrieved 2011-11-03. 
9. ^ "Zune HD 64GB Review". CNET. http://reviews.cnet.com/mp3-players/zune-hd-64gb/4505-6490_7-34060884.html?tag=rvwBody#reviewPage1. Retrieved 27 July 2011. 
10. ^ Tom Warren (2011-09-15). "Windows Phone wins IDEA 2011 – people’s choice design award". WinRumors. http://www.winrumors.com/windows-phone-wins-idea-2011-peoples-choice-design-award/. Retrieved 2011-11-03. 
11. ^ "Windows Phone 7 | Industrial Designers Society of America". IDSA. 2011-06-08. http://www.idsa.org/windows-phone-7. Retrieved 2011-11-03. 
12. ^ "Windows Phone UI and Design Language". http://live.visitmix.com/MIX10/Sessions/CL14. Retrieved 2010-10-09. 
13. ^ From Transportation to Pixels, Windows team blog, 2011-2-16, http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx 
14. ^ "Metro Design Language of Windows Phone 7 | Microsoft Design .toolbox". Microsoft.com. http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/. Retrieved 2011-09-08. 

External links

• Metro Design Language of Windows Phone 7, Microsoft