Metro (design language)

Last updated

The Music+Video hub on Windows Phone Music+Video hub on Windows Phone 7.jpg
The Music+Video hub on Windows Phone

Microsoft Design Language (or MDL), [1] previously known as Metro, is a design language created by Microsoft. This design language is focused on typography and simplified icons, absence of clutter, increased content to chrome ratio ("content before chrome"), and basic geometric shapes. Early examples of MDL 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. It has since been incorporated into several of the company's other products, including the Xbox 360 system software and the Xbox One system software, Windows 8, Windows Phone, and Outlook.com. [4] [5] Before the "Microsoft design language" title became official, Microsoft executive Qi Lu referred to it as the modern UI design language in his MIXX conference keynote 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]

Contents

Microsoft Design Language 2 (MDL2) was developed alongside Windows 10. [7] [8] In 2017, the Fluent Design language extended it.

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, [9] which favored text as the primary form of navigation, as well as early concepts of Neptune. [10] 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. [11] 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. [12]

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. [7] [8]

Principles

Segoe UI Revision Differences.svg
Segoe UI font in Windows Vista and Windows 7 (top); and Windows 8, Windows 8.1, and Windows 10 (bottom)
Start81.png
Windows10abstract.png
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

Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems. [13] 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. [14] 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, [15] 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. [16]

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.

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". [17] [18]

Reception

On mobile

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." [19] 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." [20]

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. [21] [22] Isabel Ancona, the User Experience Consultant at IDSA, explained why Windows Phone won: [23]

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. [24]

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." [25]

On Windows 8 desktop

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. [26] 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." [27]

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. [28]

Name change

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". [29] Technology news outlets Ars Technica , [30] TechRadar , [31] CNET , [32] Engadget [33] and Network World [34] and mainstream press Bits Blog from The New York Times Company [35] and the BBC News Online [36] 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, [37] despite having heavily promoted the brand to the public. [38] 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. [39]

In September 2012, "Microsoft design language" was adopted as the official name for the design style. [1] [40] The term was used on Microsoft Developer Network documentation [41] [42] [43] [44] and at the 2012 Microsoft Build conference to refer to the design language. [1] [45]

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

See also

Related Research Articles

Windows Embedded Compact, formerly Windows Embedded CE, Windows Powered and Windows CE, is a discontinued operating system developed by Microsoft for mobile and embedded devices. It was part of the Windows Embedded family and served as the foundation of several classes of devices including the Handheld PC, Pocket PC, Auto PC, Windows Mobile, Windows Phone 7 and others.

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

Windows Presentation Foundation (WPF) is a free and open-source user interface framework for Windows-based desktop applications. WPF applications are based in .NET, and are primarily developed using C# and XAML.

Segoe is a typeface, or family of fonts, that is best known for its use by Microsoft. The company uses Segoe in its online and printed marketing materials, including recent logos for a number of products. Additionally, the Segoe UI font sub-family is used by numerous Microsoft applications, and may be installed by applications. It was adopted as Microsoft's default operating system font, and is also used on Outlook.com, Microsoft's web-based email service. On August 23, 2012, Microsoft unveiled its new corporate logo typeset in Segoe, replacing the logo it had used for the previous 25 years.

<span class="mw-page-title-main">Windows Media Center</span> Digital video recorder and media player created by Microsoft

Windows Media Center (WMC) is a digital video recorder and media player created by Microsoft. Media Center was first introduced to Windows in 2002 on Windows XP Media Center Edition (MCE). It was included in Home Premium and Ultimate editions of Windows Vista, as well as all editions of Windows 7 except Starter and Home Basic. It was also available on Windows 8 Pro and Windows 8.1 Pro as a paid add-on. It was discontinued as of Windows 10 and the operating system also removes all of Windows Media Center during an upgrade from previous versions of Windows, although it can reportedly be unofficially reinstalled using a series of Command Prompt commands.

<span class="mw-page-title-main">Windows Aero</span> Design language by Microsoft

Windows Aero is the design language introduced in the Microsoft Windows Vista operating system. The changes introduced by Windows Aero encompassed many elements of the Windows interface, with the introduction of a new visual style with an emphasis on animation, glass, and translucency; interface guidelines for phrasing and tone of instructions and other text in applications were available. New cursors and sounds based on Windows Aero design principles were also introduced.

<span class="mw-page-title-main">Zune</span> Microsofts former digital media brand

Zune is a defunct brand of digital media products and services that was marketed by Microsoft from November 2006 until it was discontinued in June 2012. Zune consisted of a line of portable media players, a music subscription service known as Zune Music Pass plus Zune Marketplace for music, TV and movies, streaming services for the Xbox 360 game console, and the Zune software media player for Windows PCs which also acted as desktop sync software for Windows Phone.

<span class="mw-page-title-main">Windows Phone</span> Family of mobile operating systems developed by Microsoft

Windows Phone (WP) is a discontinued mobile operating system developed by Microsoft for smartphones as the replacement successor to Windows Mobile and Zune. Windows Phone featured a new user interface derived from the Metro design language. Unlike Windows Mobile, it was primarily aimed at the consumer market rather than the enterprise market.

<span class="mw-page-title-main">Zune HD</span> 2009 portable media player by Microsoft

The Zune HD is a portable media player in the Zune product family released on September 15, 2009, by Microsoft. It was a direct competitor with Apple's iPod Touch series of mobile devices. It was initially released in 16 and 32 GB capacities. A 64 GB version was released on April 9, 2010. It has a touchscreen interface for navigation and included Wi-Fi for synchronization, access to the Zune Marketplace and Web browsing.

<span class="mw-page-title-main">Windows 8</span> Operating system released by Microsoft in 2012

Windows 8 is a major release of the Windows NT operating system developed by Microsoft. It was released to manufacturing on August 1, 2012, and was made available for download via MSDN and TechNet on August 15, 2012. Nearly three months after its initial release, it finally made its first retail appearance on October 26, 2012.

The transition from Windows 7 to Windows 8 introduced a number of new features across various aspects of the operating system. These include a greater focus on optimizing the operating system for touchscreen-based devices and cloud computing.

Windows Runtime (WinRT) is a platform-agnostic component and application architecture first introduced in Windows 8 and Windows Server 2012 in 2012. It is implemented in C++ and officially supports development in C++, Rust/WinRT, Python/WinRT, JavaScript-TypeScript, and the managed code languages C# and Visual Basic (.NET) (VB.NET).

<span class="mw-page-title-main">Windows Phone 7</span> First generation of Microsofts Windows Phone mobile operating system

Windows Phone 7 is the first release of the Windows Phone mobile client operating system, released worldwide on October 21, 2010, and in the United States on November 8, 2010. It runs on the Windows CE 6.0 kernel.

<span class="mw-page-title-main">Windows 8.1</span> 2013 release of Windows NT

Windows 8.1 is a release of the Windows NT operating system developed by Microsoft. It was released to manufacturing on August 27, 2013, and broadly released for retail sale on October 17, 2013, about a year after the retail release of its predecessor, and succeeded by Windows 10 on July 29, 2015. Windows 8.1 was made available for download via MSDN and Technet and available as a free upgrade for retail copies of Windows 8 and Windows RT users via the Windows Store. A server version, Windows Server 2012 R2, was released on October 18, 2013.

Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI), and also in graphical materials such as posters, arts, guide documents and publishing products.

<span class="mw-page-title-main">Universal Windows Platform apps</span> Applications usable across all compatible Microsoft Windows devices

Universal Windows Platform (UWP) apps are applications that can be used across all compatible Microsoft Windows devices. They are primarily purchased and downloaded via the Microsoft Store, Microsoft's digital application storefront.

<span class="mw-page-title-main">Windows 10 Mobile</span> Mobile operating system developed by Microsoft

Windows 10 Mobile is a discontinued mobile operating system developed by Microsoft. First released in 2015, it is a successor to Windows Phone 8.1, but was marketed by Microsoft as being an edition of its PC operating system Windows 10.

<span class="mw-page-title-main">Nirmala UI</span> Sans-serif typeface

Nirmala UI is an Indic scripts typeface created by Tiro Typeworks and commissioned by Microsoft. It was first released with Windows 8 in 2012 as a UI font and currently supports languages using Bengali–Assamese, Devanagari, Kannada, Gujarati, Gurmukhi, Malayalam, Meitei, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil and Telugu. It also has support for Latin, with glyphs matching Segoe UI. It is also packaged with Microsoft Office 2013 and later versions of Windows. It has 3 weights : Regular, Bold and SemiLight.

<span class="mw-page-title-main">Settings (Windows)</span> Configuration interface of Windows 8 or later

Windows Settings, or simply Settings app, is a component of Microsoft Windows. It allows users to adjust their user preferences, configure their operating system, and manage their connected devices. Microsoft introduced Settings with Windows Server 2012 and Windows 8, and initially intended it to replace the Windows Control Panel, something that has not happened after a decade.

<span class="mw-page-title-main">Fluent Design System</span> Design system created by Microsoft in 2017

Fluent Design System, officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale. The new design language includes more prominent use of motion, depth, and translucency effects.

References

  1. 1 2 3 Foley, Mary Jo (29 October 2012). "Microsoft Design Language: The newest official way to refer to 'Metro'". ZDNet . CBS Interactive.
  2. ↑ Green, Jay (8 February 2012). "Why Metro now rules at Microsoft". CNET . CBS Interactive.
  3. ↑ Massey, Stephane (15 February 2012). "Metro Ui[sic] Design Principles". stephanemassey.com. Self-published. Archived from the original on 2 August 2018. Retrieved 17 February 2012.
  4. 1 2 Chang, Alexandra (8 August 2012). "Microsoft Doesn't Need a Name for Its User Interface". Wired . Condé Nast.
  5. ↑ Kruzeniski, Mike (11 April 2011). "How Print Design is the Future of Interaction". Kruzeniski.com. Self-published. Archived from the original on 14 March 2012. Retrieved 27 August 2011.
  6. ↑ Lu, Qi (1 October 2012). "Qi Lu: IAB MIXX Conference Keynote". News Center. Microsoft.
  7. 1 2 Sams, Brad (21 April 2015). "From Metro to Microsoft Design Language 2: a side-by-side comparison". Neowin .
  8. 1 2 Rubino, Daniel (21 April 2015). "What's new in Microsoft Design Language 2 for Windows 10". Windows Central. Mobile Nations.
  9. ↑ Lefevers, Jason (15 September 2013). "A Walkthrough the History of the Metro UI". Windows Phone Metro. Self-published. Archived from the original on 22 May 2013. Retrieved 15 September 2013.
  10. ↑ "SuperSite Flashback: Neptune". 6 August 2013.
  11. ↑ "Windows Phone Design System: Codenamed 'Metro'". Archived from the original (PDF) on 27 November 2014. Retrieved 9 October 2010.
  12. ↑ "Sometimes, Microsoft Designs Great Things. Here's Why It Doesn't Ever Matter". 25 January 2014.
  13. ↑ "Design Language of Windows Phone 7". .toolbox. Microsoft. Archived from the original on 9 October 2012. Retrieved 5 October 2012.
  14. ↑ Hamburger, Ellis (27 April 2011). "Metro". Business Insider . Archived from the original on 23 April 2013.
  15. ↑ Zheng, Long (14 November 2007). ""Zegoe", the new Zune font". i started something. Self-published.
  16. ↑ "Building a different kind of UI".
  17. ↑ Roberts, Chad; Shum, Albert; Smuga, Michael (15 March 2010). "Windows Phone UI and Design Language". MIX 2010 . Microsoft.
  18. ↑ Kruzeniski, Mike (17 February 2011). "From Transportation to Pixels". Windows Phone Developer Blog. Microsoft. Archived from the original on 18 February 2011.
  19. ↑ Topolsky, Joshua (17 September 2009). "Zune HD review". Engadget . AOL.
  20. ↑ "Zune HD 64GB Review". CNET . CBS Interactive. 17 September 2009.
  21. ↑ Warren, Tom (18 September 2011). "Windows Phone wins IDEA 2011 – people's choice design award". WinRumors. Archived from the original on 3 March 2012.
  22. ↑ "IDEA 2011 Best in Show". Industrial Designers Society of America. idsa.org. 23 September 2011. Archived from the original on 25 February 2014.
  23. ↑ "Windows Phone 7". Industrial Designers Society of America. idsa.org. 8 June 2011. Archived from the original on 15 May 2013. Retrieved 20 September 2011.
  24. ↑ "Building a different kind of UI".
  25. ↑ Hutchinson, Lee (12 July 2014). "The software design trends that we love to hate". Ars Technica . Condé Nast.
  26. ↑ Bright, Peter (25 April 2012). "Windows 8 on the desktop—an awkward hybrid". Ars Technica . Condé Nast Digital. pp. 1–5.
  27. ↑ Leonhard, Woody (15 August 2012). "Windows 8 review: Yes, it's that bad". InfoWorld . IDG.
  28. ↑ Barney, Doug (17 August 2012). "Windows 8's done, time to worry". Redmond Magazine. 1105 Media.
  29. ↑ Warren, Tom (2 August 2013). "Exclusive: Microsoft's Metro branding to be replaced 'this week' according to internal memo". The Verge . Vox Media.
  30. ↑ Bright, Peter (3 August 2012). "Microsoft: "Metro" out, "Windows 8-style UI" in, amid rumors of a trademark dispute". Ars Technica . Condé Nast.
  31. ↑ Smith, Chris (3 August 2012). "Microsoft ditching 'Metro' name for Windows 8 amid trademark fears". TechRadar . Retrieved 24 September 2013.
  32. ↑ Whitney, Lance (10 August 2012). "Why did Microsoft kill the name 'Metro'?". CNET . CBS Interactive.
  33. ↑ Fingas, Jon (2 August 2012). "Microsoft downplays Metro design name, might face a lawsuit over all that street lingo". Engadget . AOL.
  34. ↑ Patrizio, Andy (6 August 2012). "Source confirms Microsoft abandoned Metro due to trademark gaffe". Network World . IDG.
  35. ↑ Wingfield, Nick (3 August 2012). "Microsoft Drops Metro Name for New Product Look". Bits Blog. The New York Times Company.
  36. ↑ "Microsoft to drop 'Metro' name for Windows". BBC News Online . BBC. 3 August 2012.
  37. ↑ Foley, Mary Jo (2 August 2012). "Is 'Metro' now a banned word at Microsoft?". ZDNet . CBS Interactive.
  38. ↑ Humphries, Matthew (3 August 2012). "Microsoft discontinues use of Metro name". Geek.com . Archived from the original on 16 June 2015. Retrieved 13 June 2015.
  39. ↑ Keizer, Gregg (10 August 2012). "Microsoft replaces 'Metro' with 'Windows 8' and 'Modern' labels". Computerworld. Retrieved 30 January 2020.
  40. 1 2 "Microsoft finally comes clean(er) on post-Metro naming plans". ZDNet . CBS Interactive. 12 September 2012.
  41. ↑ "Make great Windows Store apps". MSDN . Microsoft . Retrieved 5 August 2017.
  42. ↑ "Design case study: iPad to Windows Store app". MSDN . Microsoft . Retrieved 28 May 2013.
  43. ↑ "Guidelines for typography". MSDN . Microsoft . Retrieved 28 May 2013.
  44. ↑ "Roadmap for Windows Store apps using DirectX and C++". MSDN . Microsoft . Retrieved 28 May 2013.
  45. ↑ Tschumy, Will (16 November 2012). "The Microsoft design language". Channel 9 . Microsoft.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.