metro (design language)

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,{{Cite web |url=http://windowsphonemetro.com/2011/07/11/a-walkthrough-the-history-of-the-metro-ui/ |title=A Walkthrough the History of the Metro UI |last=Lefevers |first=Jason |date=15 September 2013 |website=Windows Phone Metro |publisher=Self-published |access-date=15 September 2013 |archive-url=https://web.archive.org/web/20130522125028/http://windowsphonemetro.com/2011/07/11/a-walkthrough-the-history-of-the-metro-ui/ |archive-date=22 May 2013 |url-status=dead }} which favored text as the primary form of navigation, as well as early concepts of Neptune.{{Cite web|url=https://www.itprotoday.com/windows-server/supersite-flashback-neptune|title=SuperSite Flashback: Neptune|date=6 August 2013}} 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.{{cite web|url=http://download.microsoft.com/download/F/F/C/FFCF79B1-C2EB-42C2-8E2D-665705380DA0/Windows%20Phone%20Design%20System%20-%20Codename%20Metro.PDF|archive-url=https://web.archive.org/web/20101115052944/http://download.microsoft.com/download/F/F/C/FFCF79B1-C2EB-42C2-8E2D-665705380DA0/Windows%20Phone%20Design%20System%20-%20Codename%20Metro.PDF|url-status=dead|archive-date=15 November 2010|title=Windows Phone Design System: Codenamed 'Metro'|access-date=9 October 2010}} These principles and the new Zune UI were carried over to Windows Phone first released in 2010 (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 Phones studies.

In an interview it was explained that different Microsoft divisions use each other's products, and the extension of Metro was not a company-wide approach but instead teams such as Xbox liking Metro and adapting it for its own products. Many of Microsoft's divisions ended up adopting Metro.{{Cite web|url=https://www.fastcompany.com/1665814/sometimes-microsoft-designs-great-things-heres-why-it-doesnt-ever-matter|title=Sometimes, Microsoft Designs Great Things. Here's Why It Doesn't Ever Matter|work=Fast Company |date=25 January 2014 |last1=Carr |first1=Austin }}

Microsoft Design Language 2 (MDL2) was developed alongside Windows 10. This version introduced a new set of widgets, including date pickers, toggles and switches, and reduced the border thicknesses for all user interface elements.

{{Multiple image

| image1 = Segoe UI Revision Differences.svg

| image2 = Start81.png

| image3 = Windows10abstract.png

| caption1 = Segoe UI font in Windows Vista and Windows 7 (top); and Windows 8, Windows 8.1, and Windows 10 (bottom)| caption3 = Microsoft design language design principles behind the Start screen in Windows 8 and Xbox One (top) and Windows 10 "Threshold" (bottom), that is also used in Windows Store, Xbox Music and Xbox Video: Tiles represent atomic units of information

| direction = vertical

}}

Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems.{{cite web | url=http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ | title=Design Language of Windows Phone 7 | publisher=Microsoft | work=.toolbox | access-date=5 October 2012 |archive-url=https://web.archive.org/web/20121009185343/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ |archive-date=9 October 2012}} The design language places emphasis on good typography and has large text that catches the eye. Microsoft saw the design language as "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Windows, Android, and iOS.{{Cite web |url=http://www.businessinsider.com/blackboard/metro |title=Metro |last=Hamburger |first=Ellis |date=27 April 2011 |website=Business Insider |url-status=dead |archive-url=https://web.archive.org/web/20130423174401/http://www.businessinsider.com/blackboard/metro |archive-date=23 April 2013 |df=dmy-all }} 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,{{Cite web |url=http://www.istartedsomething.com/20071114/zegoe-zune-font/ |title="Zegoe", the new Zune font |last=Zheng |first=Long |date=14 November 2007 |website=i started something |publisher=Self-published}} 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 font 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.

Joe Belfiore was one of the architects of Metro. At Nokia World 2011, Belfiore explained that the UI aims to be "artistic" in textual elements and iconography. He also mentioned the "motion" of the UI, specifically in Windows Phone, of the Live Tiles, moving dots, and kinetic scrolling.{{Cite web|url=http://allaboutwindowsphone.com/features/item/13479_Building_a_different_kind_of_U.php|title = Building a different kind of UI| date=28 October 2011 }}

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 favor larger hubs over smaller buttons and often feature laterally scrolling canvases. Page titles are usually large and consequently also take advantage of lateral scrolling. {{Citation needed|date=April 2025}}

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".{{Cite web |url=http://channel9.msdn.com/Events/MIX/MIX10/CL14 |title=Windows Phone UI and Design Language |last1=Roberts |first1=Chad |last2=Shum |first2=Albert |date=15 March 2010 |website=MIX 2010 |publisher=Microsoft |last3=Smuga |first3=Michael}}{{Cite web |url=http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx |title=From Transportation to Pixels |last=Kruzeniski |first=Mike |date=17 February 2011 |website=Windows Phone Developer Blog |publisher=Microsoft |url-status=dead |archive-url=https://web.archive.org/web/20110218070259/http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx |archive-date=18 February 2011 |df=dmy-all }}

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."{{Cite web |url=https://www.engadget.com/2009/09/17/zune-hd-review/ |title=Zune HD review |last=Topolsky |first=Joshua |date=17 September 2009 |website=Engadget |publisher=AOL}} 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."{{Cite web |url=http://reviews.cnet.com/mp3-players/zune-hd-64gb/4505-6490_7-34060884.html?tag=rvwBody#reviewPage1 |title=Zune HD 64GB Review |date=17 September 2009 |website=CNET |publisher=CBS Interactive}}

At its IDEA 2011 Ceremony, the Industrial Designers Society of America (IDSA) gave Windows Phone 7, which uses the UI, its "Gold Interactive" award, its "People's Choice Award", and a "Best in Show" award.{{Cite web |url=http://www.winrumors.com/windows-phone-wins-idea-2011-peoples-choice-design-award/ |title=Windows Phone wins IDEA 2011 – people's choice design award |last=Warren |first=Tom |date=18 September 2011 |website=WinRumors |url-status=dead |archive-url=https://web.archive.org/web/20120303140034/http://www.winrumors.com/windows-phone-wins-idea-2011-peoples-choice-design-award/ |archive-date=3 March 2012 |df=dmy-all }}{{Cite web |url=http://www.idsa.org/idea-2011-best-show |title=IDEA 2011 Best in Show |date=23 September 2011 |website=Industrial Designers Society of America |publisher=idsa.org |archive-url=https://web.archive.org/web/20140225034619/http://www.idsa.org/idea-2011-best-show |archive-date=25 February 2014 |url-status=dead}} Isabel Ancona, the User Experience Consultant at IDSA, explained why Windows Phone won:{{Cite web |url=http://www.idsa.org/windows-phone-7 |title=Windows Phone 7 |date=8 June 2011 |website=Industrial Designers Society of America |publisher=idsa.org |access-date=20 September 2011 |archive-date=15 May 2013 |archive-url=https://web.archive.org/web/20130515072744/http://www.idsa.org/windows-phone-7 |url-status=dead }}

{{quote|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.}}

It was reported that the UI was better received by women and first-time users.{{Cite web|url=http://allaboutwindowsphone.com/features/item/13479_Building_a_different_kind_of_U.php|title = Building a different kind of UI| date=28 October 2011 }}

Criticism particularly focused on the use of all caps text. With the rise of Internet usage, critics have compared this to a computer program shouting at its user. IT journalist Lee Hutchinson described Microsoft's use of the practice in the macOS version of OneNote as terrible, claiming that it is "cursed with insane, non-standard application window menus IN ALL CAPS that doesn't so much violate OS X's design conventions as it does take them out behind the shed, pour gasoline on them, and set them on fire."{{Cite web |url=https://arstechnica.com/gadgets/2014/07/the-software-design-trends-that-we-love-to-hate/ |title=The software design trends that we love to hate |last=Hutchinson |first=Lee |date=12 July 2014 |website=Ars Technica |publisher=Condé Nast}}

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 menu in Windows 8 (dubbed 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 did not work well together.{{Cite web |url=https://arstechnica.com/information-technology/2012/04/windows-8-on-the-desktopan-awkward-hybrid/ |title=Windows 8 on the desktop—an awkward hybrid |last=Bright |first=Peter |date=25 April 2012 |website=Ars Technica |publisher=Condé Nast Digital |pages=1–5}} 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."{{Cite web |url=http://www.infoworld.com/d/microsoft-windows/windows-8-review-yes-its-bad-200113 |title=Windows 8 review: Yes, it's that bad |last=Leonhard |first=Woody |date=15 August 2012 |website=InfoWorld |publisher=IDG}}

In addition to the changes to 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.{{Cite web |url=http://redmondmag.com/blogs/doug-barney/2012/08/windows-8s-done.aspx |title=Windows 8's done, time to worry |last=Barney |first=Doug |date=17 August 2012 |website=Redmond Magazine |publisher=1105 Media }}

In August 2012, The Verge announced that an internal memorandum 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".{{Cite web |url=https://www.theverge.com/2012/8/2/3216545/microsoft-metro-branding-memo-european-partner |title=Exclusive: Microsoft's Metro branding to be replaced 'this week' according to internal memo |last=Warren |first=Tom |date=2 August 2013 |website=The Verge |publisher=Vox Media}} Technology news outlets Ars Technica,{{Cite web |url=https://arstechnica.com/information-technology/2012/08/microsoft-metro-out-windows-8-style-ui-in-amid-rumors-of-a-trademark-dispute/ |title=Microsoft: "Metro" out, "Windows 8-style UI" in, amid rumors of a trademark dispute |last=Bright |first=Peter |date=3 August 2012 |website=Ars Technica |publisher=Condé Nast}} TechRadar,{{Cite web |url=http://www.techradar.com/news/software/operating-systems/microsoft-ditching-metro-name-for-windows-8-amid-trademark-fears-1091018 |title=Microsoft ditching 'Metro' name for Windows 8 amid trademark fears |last=Smith |first=Chris |date=3 August 2012 |website=TechRadar |access-date=24 September 2013}} CNET,{{Cite web |url=https://www.cnet.com/news/why-did-microsoft-kill-the-name-metro/ |title=Why did Microsoft kill the name 'Metro'? |last=Whitney |first=Lance |date=10 August 2012 |website=CNET |publisher=CBS Interactive}} Engadget{{Cite web |url=https://www.engadget.com/2012/08/02/microsoft-downplays-metro-design-name-might-be-facing-a-lawsuit/ |title=Microsoft downplays Metro design name, might face a lawsuit over all that street lingo |last=Fingas |first=Jon |date=2 August 2012 |website=Engadget |publisher=AOL}} and Network World{{Cite web |url=https://www.networkworld.com/article/742262/microsoft-subnet-source-confirms-microsoft-abandoned-metro-due-to-trademark-gaffe.html |title=Source confirms Microsoft abandoned Metro due to trademark gaffe |last=Patrizio |first=Andy |date=6 August 2012 |website=Network World |publisher=IDG}} and mainstream press Bits Blog from The New York Times Company{{Cite web |url=http://bits.blogs.nytimes.com/2012/08/03/microsoft-drops-metro-name-for-new-product-look/ |title=Microsoft Drops Metro Name for New Product Look |last=Wingfield |first=Nick |date=3 August 2012 |website=Bits Blog |publisher=The New York Times Company}} and the BBC News Online{{Cite web |url=https://www.bbc.com/news/technology-19108952 |title=Microsoft to drop 'Metro' name for Windows |date=3 August 2012 |website=BBC News Online |publisher=BBC}} 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 only an internal project codename,{{Cite web |url=https://www.zdnet.com/article/is-metro-now-a-banned-word-at-microsoft/ |title=Is 'Metro' now a banned word at Microsoft? |last=Foley |first=Mary Jo |author-link=Mary Jo Foley |date=2 August 2012 |website=ZDNet |publisher=CBS Interactive}} despite having heavily promoted the brand to the public.{{Cite web |url=http://www.geek.com/news/microsoft-discontinues-use-of-metro-name-1507263/ |title=Microsoft discontinues use of Metro name |last=Humphries |first=Matthew |date=3 August 2012 |website=Geek.com |access-date=13 June 2015 |archive-date=16 June 2015 |archive-url=https://web.archive.org/web/20150616044701/http://www.geek.com/news/microsoft-discontinues-use-of-metro-name-1507263/ |url-status=dead }} In some contexts, the company began using the term "Modern" or the more generic "Windows 8" modifier to refer to the new design, possibly as a placeholder.{{Cite web|url=https://www.computerworld.com/article/2505676/microsoft-replaces--metro--with--windows-8--and--modern--labels.html|title=Microsoft replaces 'Metro' with 'Windows 8' and 'Modern' labels|last=Keizer|first=Gregg|date=2012-08-10|website=Computerworld|language=en|access-date=2020-01-30}}

In September 2012, "Microsoft design language" was adopted as the official name for the design style.{{Cite web |url=https://www.zdnet.com/article/microsoft-design-language-the-newest-official-way-to-refer-to-metro/ |title=Microsoft Design Language: The newest official way to refer to 'Metro' |last=Foley |first=Mary Jo |author-link=Mary Jo Foley |date=29 October 2012 |website=ZDNet |publisher=CBS Interactive}}{{Cite web |url=https://www.zdnet.com/article/microsoft-finally-comes-cleaner-on-post-metro-naming-plans/ |title=Microsoft finally comes clean(er) on post-Metro naming plans |date=12 September 2012 |website=ZDNet |publisher=CBS Interactive}} The term was used on Microsoft Developer Network documentation{{Cite web |url=http://msdn.microsoft.com/library/windows/apps/hh464920.aspx |title=Make great Windows Store apps |website=MSDN |publisher=Microsoft |access-date=5 August 2017}}{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx | title=Design case study: iPad to Windows Store app | publisher=Microsoft | work=MSDN | access-date=28 May 2013}}{{Cite web |url=http://msdn.microsoft.com/en-us/library/windows/apps/jj553415.aspx |title=Guidelines for typography |website=MSDN |publisher=Microsoft |access-date=28 May 2013}}{{Cite web |url=http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj126138.aspx |title=Roadmap for Windows Store apps using DirectX and C++ |website=MSDN |publisher=Microsoft |access-date=28 May 2013}} and at the 2012 Microsoft Build conference to refer to the design language.{{Cite web |url=http://channel9.msdn.com/Events/Build/2012/2-116 |title=The Microsoft design language |last=Tschumy |first=Will |date=16 November 2012 |website=Channel 9 |publisher=Microsoft}}

In a related change, Microsoft dropped use of the phrase "Metro-style apps" to refer to mobile apps distributed via Windows Store.

• Flat design
• Skeuomorph design
• Human interface guidelines
• Windows Aero
• Universal Windows Platform apps

{{Reflist|30em}}

• [https://web.archive.org/web/*/https://news.microsoft.com/bythenumbers/ Microsoft by the Numbers website]
• [https://web.archive.org/web/20230307034347/http://www.microsoft.com/en-us/stories/design/ Modern Design at Microsoft] (Archive)
• [https://msdn.microsoft.com/library/windows/apps/hh465424.aspx UX guidelines for Windows Store apps] on MSDN
• [https://msdn.microsoft.com/library/windows/apps/fa00461b-abe1-41d1-be87-0b0fe3d3389d(v=vs.105).aspx Design Guidelines for Windows Phone] on MSDN

{{Microsoft Windows family}}

{{Microsoft}}

{{Microsoft FOSS}}

Category:Design languages

Category:Graphical user interfaces

Category:Touch user interfaces

Category:Windows 8

Category:Windows Phone

Category:Xbox 360

Category:Xbox One