Metro (design language)

The Music+Video hub on Windows Phone

Outlook.com features a web implementation of Microsoft's design language

Metro is the codename of a typography-based design language by Microsoft.^[1] A key design principle is better focus on the content of applications, relying more on typography and less on graphics ("content before chrome"). Early examples of Metro principles can be found in Encarta 95 and MSN 2.0.^[2][3] The design language evolved in Windows Media Center and Zune and was formally introduced as "Metro" during the unveiling of Windows Phone 7. Under the name Microsoft design language,^[1] it has since been incorporated into several of the company's other products, including the Xbox 360 system software, Xbox One, Windows 8, Windows Phone, and Outlook.com.^[4][5]

History

The design language 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,^[6] 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 principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome.^[7] These principles and the new Zune UI were carried over to Windows Phone (from which much was drawn for Windows 8). 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 design language during the early Windows Phone's studies.

Principles

Segoe UI font in Windows 7 (top) and Windows 8 (bottom)

Metro design principle behind the Start screen in Windows 8 and Xbox One that is also used in Windows Store, Xbox Music and Xbox Video: Tiles represent atomic units of information

Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems; for instance, those found on the King County Metro transit system,^[8] which serves the greater Seattle area where Microsoft has its headquarters. The design language places emphasis on good typography and has large text that catches the eye. Microsoft sees the design language as "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Windows, Android, and iOS.^[9] 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,^[10] and for Windows Phone Microsoft created the "Segoe WP" font-family. The fonts mostly differ only in minor details. More obvious differences between Segoe UI and Segoe WP are apparent in their respective numerical characters. The Segoe UI in Windows 8 had obvious differences - similar to Segoe WP. Characters with notable typographic changes included 1, 2, 4, 5, 7, 8, I, and Q.

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

Animation plays a large part. Microsoft recommends consistent acknowledgement of transitions, and user interactions (such as presses or swipes) by some form of natural animation or motion. This aims to give the user the impression of an "alive" and responsive UI with "an added sense of depth."^[11][12]

Reception

Before Windows 8

Early response to the language was generally positive. In a review of the Zune HD, 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."^[13] CNET complimented the design language, saying, "it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."^[14]

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

The innovation here is the fluidity of experience and focus on the data, without using traditional 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.

After Windows 8

With the arrival of Windows 8, the operating system's user interface and its use of the design language drew generally negative critical responses. On 25 August 2012, Peter Bright of Ars Technica reviewed the preview release of Windows 8, dedicating the first part of the review to a comparison between the Start menu designs used by Windows 8 and Windows 7. Recounting their pros and cons, Peter Bright concluded that the Start screen, though not devoid of problems, was a clear winner. However, he concluded that Windows 8's user interface was frustrating and that the various aspects of the user interface do not work well together.^[17] Woody Leonhard was even more critical when he said, "From the user's standpoint, Windows 8 is a failure -- an awkward mishmash that pulls the user in two directions at once."^[18]

Some critics argue that Microsoft's decision to ditch Aero is the result of a conscious effort to reduce usage of system graphics processing unit (GPU) resources^[19] and to prolong battery life, in order to target the tablet market rather than its traditional desktop user base.^[20][21] In addition to removing the Start Menu, Windows 8 takes a more modal approach with its use of full-screen apps that steer away from reliance on the icon-based desktop interface. In doing so; however, Microsoft has shifted its focus away from multitasking and business productivity.^[22]

Name change

In August 2012, The Verge announced that an internal memo had been sent out to developers and Microsoft employees announcing the decision to "discontinue the use" of the term "Metro" because of "discussions with an important European partner", and that they were "working on a replacement term".^[23] Several technological news outlets like Ars Technica,^[24] TechRadar, ^[25] CNET, ^[26] Engadget, ^[27] IDG's Network World, ^[28] and mainstream press like The New York Times ^[29] and the BBC,^[30] published that the partner mentioned in the memo could be one of Microsoft's retail partners, German company Metro AG, as the name had the potential to infringe on their "Metro" trademark. Microsoft later stated that the reason for de-emphasizing the name was not related to any current litigation, and that "Metro" was an internal project codename.^[31]

Alexandra Chang of Wired suggested that Microsoft should drop use of a separate name altogether and use "Windows 8" as descriptor.^[4]

In September 2012, "Microsoft design language" was adopted as the official name for the design style.^[1][32] The term was used on Microsoft Developer Network (MSDN) documentation^{[33][34][35][36]} as well as in Build 2012 conference to refer to the design language.^[1][37]

In a related change, Microsoft dropped the use of "Metro-style apps" phrase to refer to Windows Runtime-based applications developed according to the design language; Microsoft temporarily used "Modern apps" before starting to use "Windows Store apps" and "Windows 8 apps".^[32]

References

External links

• Modern Design at Microsoft
• UX guidelines for Windows Store apps on MSDN
• Design Guidelines for Windows Phone on MSDN

v t e Microsoft Windows family Components History Timeline Criticism DOS-based Windows 1.0 Windows 2.0 Windows 2.1x Windows 3.0 Windows 3.1x Windows 9x Windows 95 Windows 98 Windows ME Windows NT Early versions Windows NT 3.1 Windows NT 3.5 Windows NT 3.51 Windows NT 4.0 Windows 2000 Client releases Windows XP editions x64 Media Center Fundamentals Windows Vista editions Windows 7 editions Windows 8 editions RT 8.1 Windows Server Server 2003 Home Server Server 2008 EBS 2008 HPC Server 2008 Server 2008 R2 Home Server 2011 Server 2012 MultiPoint Server Server Essentials Specialized Windows Preinstallation Environment Windows Embedded Embedded Compact CE 5.0 Embedded CE 6.0 Embedded Compact 7 Embedded Automotive Embedded Industry Embedded 8 Windows Mobile Pocket PC 2000 Pocket PC 2002 Mobile 2003 Mobile 5.0 Mobile 6.0 Mobile 6.1 Mobile 6.5 Windows Phone Phone 7 Phone 8 Cancelled Cairo Nashville Neptune Odyssey List of versions Comparison Category Commons