Microsoft Design Language (orMDL),[1] previously known asMetro, is adesign language created byMicrosoft, and is based onflat design style. This design language is focused ontypography and simplifiedicons, absence of clutter, increased content tochrome ratio ("content before chrome"), and basic geometric shapes.
Early examples of MDL principles can be found inEncarta 95 andMSN 2.0.[2][3] The design language evolved inWindows Media Center andZune and was formally introduced as Metro during the unveiling ofWindows Phone 7 in 2010, after which it was incorporated into several of the company's other products, including theXbox 360 system software and theXbox One system software,Windows 8,Windows Phone, andOutlook.com.[4][5] Before the "Microsoft design language" title became official, Microsoft executiveQi Lu referred to it as themodern UI design language in his MIXX conferencekeynote speech.[6] According to Microsoft, "Metro" has always been a codename and was never meant as a final product, but news websites attribute this change to trademark issues.[4]
Microsoft Design Language 2 (MDL2) was developed alongsideWindows 10, making a number of adjustments.[7][8] In 2017, Microsoft introduced theFluent Design language which gradually replaced Metro in the years following.[9]
The design language is based on the design principles of classicSwiss graphic design. Early glimpses of this style could be seen inWindows Media Center forWindows XP Media Center Edition,[10] which favored text as the primary form of navigation, as well as early concepts ofNeptune.[11] 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.[12] These principles and the new Zune UI were carried over toWindows 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 previousPortable 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 asXbox liking Metro and adapting it for its own products. Many of Microsoft's divisions ended up adopting Metro.[13]
Microsoft Design Language 2 (MDL2) was developed alongside Windows 10. This version introduced a new set ofwidgets, including date pickers, toggles and switches, and reduced the border thicknesses for all user interface elements.[7][8] Other changes includehamburger buttons to access views instead of panorama/carousel of the original Metro.[14]
Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems.[15] 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 theicon-based interfaces of Windows,Android, andiOS.[16] All instances use fonts based on theSegoe font family designed bySteve Matteson atAgfa Monotype and licensed to Microsoft. For the Zune, Microsoft created a custom version called Zegoe UI,[17] and forWindows 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. AtNokia World 2011, Belfiore explained that the UI aims to be "artistic" in textual elements andiconography. He also mentioned the "motion" of the UI, specifically in Windows Phone, of the Live Tiles, moving dots, and kinetic scrolling.[18]
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]
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".[19][20]
Early response to the language was generally positive. In a review of theZune 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."[21]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."[22]
At its IDEA 2011 Ceremony, theIndustrial 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.[23][24] Isabel Ancona, the User Experience Consultant at IDSA, explained why Windows Phone won:[25]
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.[26]
Criticism particularly focused on the use ofall 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 themacOS version ofOneNote 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."[27]
With the arrival ofWindows 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 ofArs Technica reviewed the preview release of Windows 8, dedicating the first part of the review to a comparison between theStart 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.[28] 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."[29]
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.[30]
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".[31] Technology news outletsArs Technica,[32]TechRadar,[33]CNET,[34]Engadget[35] andNetwork World[36] and mainstream pressBits Blog fromThe New York Times Company[37] and theBBC News Online[38] published that the partner mentioned in the memo could be one of Microsoft's retail partners, German companyMetro 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,[39] despite having heavily promoted the brand to the public.[40] 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.[41]
In September 2012, "Microsoft design language" was adopted as the official name for the design style.[1][42] The term was used onMicrosoft Developer Network documentation[43][44][45][46] and at the 2012Microsoft Build conference to refer to the design language.[1][47]
In a related change, Microsoft dropped use of the phrase "Metro-style apps" to refer tomobile apps distributed viaWindows Store.[42]
| MS-DOS-based | |||||
|---|---|---|---|---|---|
| Windows NT |
| ||||
| Specialized | |||||
| Windows IoT |
| ||||
| Windows Mobile | |||||
| Windows Phone | |||||
| Cancelled | |||||
| Related | |||||
| Overview | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Software |
| ||||||||||||
| Licenses | |||||||||||||
| Forges | |||||||||||||
| Related | |||||||||||||
