Metro (design language)
Microsoft Design Language (or MDL),
Microsoft Design Language 2 (MDL2) was developed alongside Windows 10.
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
Principles
Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems.
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
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,
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 "
See also
- Carbon Design System by IBM
- Flat design
- Skeuomorph design
- Human interface guidelines
- Windows Aero
- Universal Windows Platform apps
References
- ^ CBS Interactive.
- CBS Interactive.
- Self-published. Archived from the originalon 2 August 2018. Retrieved 17 February 2012.
- ^ Wired. Condé Nast.
- Self-published. Archived from the originalon 14 March 2012. Retrieved 27 August 2011.
- ^ Lu, Qi (1 October 2012). "Qi Lu: IAB MIXX Conference Keynote". News Center. Microsoft.
- ^ a b Sams, Brad (21 April 2015). "From Metro to Microsoft Design Language 2: a side-by-side comparison". Neowin.
- ^ a b Rubino, Daniel (21 April 2015). "What's new in Microsoft Design Language 2 for Windows 10". Windows Central. Mobile Nations.
- Self-published. Archived from the originalon 22 May 2013. Retrieved 15 September 2013.
- ^ "SuperSite Flashback: Neptune". 6 August 2013.
- ^ "Windows Phone Design System: Codenamed 'Metro'". Archived from the original (PDF) on 27 November 2014. Retrieved 9 October 2010.
- ^ "Sometimes, Microsoft Designs Great Things. Here's Why It Doesn't Ever Matter". 25 January 2014.
- ^ "Design Language of Windows Phone 7". .toolbox. Microsoft. Archived from the original on 9 October 2012. Retrieved 5 October 2012.
- ^ Hamburger, Ellis (27 April 2011). "Metro". Business Insider. Archived from the original on 23 April 2013.
- Self-published.
- ^ "Building a different kind of UI".
- ^ Roberts, Chad; Shum, Albert; Smuga, Michael (15 March 2010). "Windows Phone UI and Design Language". MIX 2010. Microsoft.
- ^ Kruzeniski, Mike (17 February 2011). "From Transportation to Pixels". Windows Phone Developer Blog. Microsoft. Archived from the original on 18 February 2011.
- ^ Topolsky, Joshua (17 September 2009). "Zune HD review". Engadget. AOL.
- CBS Interactive. 17 September 2009.
- ^ Warren, Tom (18 September 2011). "Windows Phone wins IDEA 2011 – people's choice design award". WinRumors. Archived from the original on 3 March 2012.
- ^ "IDEA 2011 Best in Show". Industrial Designers Society of America. idsa.org. 23 September 2011. Archived from the original on 25 February 2014.
- ^ "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.
- ^ "Building a different kind of UI".
- ^ Hutchinson, Lee (12 July 2014). "The software design trends that we love to hate". Ars Technica. Condé Nast.
- Condé Nast Digital. pp. 1–5.
- IDG.
- ^ Barney, Doug (17 August 2012). "Windows 8's done, time to worry". Redmond Magazine. 1105 Media.
- ^ Warren, Tom (2 August 2013). "Exclusive: Microsoft's Metro branding to be replaced 'this week' according to internal memo". The Verge. Vox Media.
- ^ Bright, Peter (3 August 2012). "Microsoft: "Metro" out, "Windows 8-style UI" in, amid rumors of a trademark dispute". Ars Technica. Condé Nast.
- ^ Smith, Chris (3 August 2012). "Microsoft ditching 'Metro' name for Windows 8 amid trademark fears". TechRadar. Retrieved 24 September 2013.
- CBS Interactive.
- ^ Fingas, Jon (2 August 2012). "Microsoft downplays Metro design name, might face a lawsuit over all that street lingo". Engadget. AOL.
- IDG.
- ^ Wingfield, Nick (3 August 2012). "Microsoft Drops Metro Name for New Product Look". Bits Blog. The New York Times Company.
- ^ "Microsoft to drop 'Metro' name for Windows". BBC News Online. BBC. 3 August 2012.
- CBS Interactive.
- ^ 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.
- ^ Keizer, Gregg (10 August 2012). "Microsoft replaces 'Metro' with 'Windows 8' and 'Modern' labels". Computerworld. Retrieved 30 January 2020.
- ^ CBS Interactive. 12 September 2012.
- MSDN. Microsoft. Retrieved 5 August 2017.
- MSDN. Microsoft. Retrieved 28 May 2013.
- MSDN. Microsoft. Retrieved 28 May 2013.
- MSDN. Microsoft. Retrieved 28 May 2013.
- ^ Tschumy, Will (16 November 2012). "The Microsoft design language". Channel 9. Microsoft.