Jump to content

Metro (design language): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
Codename Lisa (talk | contribs)
55,077 edits
Checked and corrected some of the citations. Some, because I am running out of time. (edited with ProveIt)
you broke stuff :-(
Line 2: Line 2:
[[File:Wp7 musicvideo.jpg|thumb|The Music+Video hub on Windows Phone]]
[[File:Wp7 musicvideo.jpg|thumb|The Music+Video hub on Windows Phone]]
[[File:Outlook.com inbox and message view.png|thumb|right|[[Outlook.com]] features a web implementation of Metro]]
[[File:Outlook.com inbox and message view.png|thumb|right|[[Outlook.com]] features a web implementation of Metro]]
'''Metro''' (officially known as '''Microsoft design language''') is the commonly used name and former codename of a [[typography]]-based [[design language]] by [[Microsoft]], originally for use in [[Windows Phone]]. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics ("content before chrome"). Early uses of the Metro principles began as early as [[Microsoft Encarta|Microsoft Encarta 95]] and [[MSN#MSN 2.0|MSN 2.0]],<ref>{{cite web | url=http://news.cnet.com/8301-10805_3-57370910-75/why-metro-now-rules-at-microsoft/ | title=Why Metro now rules at Microsoft | publisher=[[CBS Interactive]] | work=[[CNET]] | accessdate=15 September 2013 | author=8 February 2012 | first=Jay | last=Green}}</ref><ref>{{cite web | url=http://stephanemassey.com/metro-design-principles/ | title=Metro Ui Design Principles | publisher=[[WP:SPS|Self-published]] | work=stephanemassey.com | date=15 February 2012 | accessdate=15 September 2013 | last=Massey | first=Stephane}}</ref> and later evolved into [[Windows Media Center]] and [[Zune]].<ref>{{cite web | url=http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/ | title=How Print Design is the Future of Interaction | publisher=[[WP:SPS|Self-published]] | work=Kruzeniski.com | date=11 April 2011 | accessdate=15 September 2013 | first=Mike | last=Kruzeniski}}</ref> Later the principles of Metro were included in [[Windows Phone]], [[Microsoft.com]], the [[Xbox 360]] dashboard update, [[Windows Server 2012]] and [[Windows 8]].<ref name="WindowsPhone7UI">{{cite web | url=http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx | title=Windows Phone 7 Series UI Design & Interaction Guide | publisher=[[Microsoft]] | work=Windows Phone Developer Blog | date=18 March 2010 | accessdate=15 September 2013 | first=Charlie | last=Kindel}}</ref>
'''Metro''' (officially known as '''Microsoft design language''') is the commonly used name and former codename of a [[typography]]-based [[design language]] by [[Microsoft]], originally for use in [[Windows Phone]]. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics ("content before chrome"). Early uses of the Metro principles began as early as [[Microsoft Encarta|Microsoft Encarta 95]] and [[MSN#MSN 2.0|MSN 2.0]],<ref>{{cite web | url=http://news.cnet.com/8301-10805_3-57370910-75/why-metro-now-rules-at-microsoft/ | title=Why Metro now rules at Microsoft | publisher=[[CBS Interactive]] | work=[[CNET]] | accessdate=15 September 2013 | first=Jay | last=Green}}</ref><ref>{{cite web | url=http://stephanemassey.com/metro-design-principles/ | title=Metro Ui Design Principles | publisher=[[WP:SPS|Self-published]] | work=stephanemassey.com | date=15 February 2012 | accessdate=15 September 2013 | last=Massey | first=Stephane}}</ref> and later evolved into [[Windows Media Center]] and [[Zune]].<ref>{{cite web | url=http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/ | title=How Print Design is the Future of Interaction | publisher=[[WP:SPS|Self-published]] | work=Kruzeniski.com | date=11 April 2011 | accessdate=15 September 2013 | first=Mike | last=Kruzeniski}}</ref> Later the principles of Metro were included in [[Windows Phone]], [[Microsoft.com]], the [[Xbox 360]] dashboard update, [[Windows Server 2012]] and [[Windows 8]].<ref name="WindowsPhone7UI">{{cite web | url=http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx | title=Windows Phone 7 Series UI Design & Interaction Guide | publisher=[[Microsoft]] | work=Windows Phone Developer Blog | date=18 March 2010 | accessdate=15 September 2013 | first=Charlie | last=Kindel}}</ref>


==History==
==History==

Revision as of 02:32, 15 September 2013

File:Microsoft-METRO-UI-Description.svg
Microsoft's description of the Metro
File:Wp7 musicvideo.jpg
The Music+Video hub on Windows Phone
File:Outlook.com inbox and message view.png
Outlook.com features a web implementation of Metro

Metro (officially known as Microsoft design language) is the commonly used name and former codename of a typography-based design language by Microsoft, originally for use in Windows Phone. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics ("content before chrome"). Early uses of the Metro principles began as early as Microsoft Encarta 95 and MSN 2.0,[1][2] and later evolved into Windows Media Center and Zune.[3] Later the principles of Metro were included in Windows Phone, Microsoft.com, the Xbox 360 dashboard update, Windows Server 2012 and Windows 8.[4]

History

"Metro" 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,[5] 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.[6][dead link] 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. Microsoft has begun integrating these elements of the design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger, Live Mesh, and Windows 8.[4]

Principles

Segoe UI font in Windows 7 (top) and Windows 8 (bottom)
Windows 8 Start Screen, uses flat colored live tiles and a laterally scrolling canvas as used in Windows Phone and Xbox 360 Dashboard.

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,[7][failed verification] 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.[8] 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,[9] 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."[10][11]

Microsoft has compiled a list of principles considered core to the design language.[7]

Response

Before Windows 8

Early response to Metro 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."[12] 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."[13]

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.[14] Isabel Ancona, the User Experience Consultant at IDEA, explained why Windows Phone won this award:[15]

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.

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 screen of Windows 8 (which built upon Metro design language) and its previous version in Windows 7 and earlier. Recounting their pros and cons, Peter Bright concluded that the Start screen, though not devoid of problems, is a clear winner.[16]

After Windows 8

While the Metro-style interface introduced in Windows 8 was designed to be user-friendly on tablets, critics have argued that is less accommodating for desktops and less customizable than its predecessors.[according to whom?] Users have particularly disapproved of the removal of the Start menu that users are acclimated to as it has been featured in all versions of Windows since Windows 95. In previous versions of Windows, the Start menu provided a more convenient way for novice and experienced users alike to launch programs and applications.[16] Some reviews 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[17] and to prolong battery life, in order to target tablet market rather than its traditional desktop user base.[18][19] 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.[20]

Naming issues

In August 2012, rumors began circulating that one of Microsoft's retail partners, German company Metro AG, had threatened legal action against the software giant for infringing on the "Metro" trademark. A memo was sent out to developers and Microsoft employees to stop using the term "Metro" until a replacement term is established or the legal case is settled.[21][22] On August 4, 2012, PC World reported Microsoft is temporarily referring to the design language as Windows 8 Style UI to fill the void.[23] Alexandra Chang of Wired suggested that Microsoft should drop use of a separate name altogether and use "Windows 8" as descriptor.[24] On August 9, 2012, it emerged that Microsoft was planning to use the term "Windows 8" to replace Metro in consumer marketing materials. The "Modern UI" term appears to be intended for developers who plan to build software based on Redmond's new design principles.[25]

Since September 2012, the term "Microsoft design language" is used on Microsoft Developer Network (MSDN) documentation[26][27][28][29] as well as in Build 2012 conference to refer to the design language.[30][31]

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

  1. ^ Green, Jay. "Why Metro now rules at Microsoft". CNET. CBS Interactive. Retrieved 15 September 2013.
  2. ^ Massey, Stephane (15 February 2012). "Metro Ui Design Principles". stephanemassey.com. Self-published. Retrieved 15 September 2013.
  3. ^ Kruzeniski, Mike (11 April 2011). "How Print Design is the Future of Interaction". Kruzeniski.com. Self-published. Retrieved 15 September 2013.
  4. ^ a b Kindel, Charlie (18 March 2010). "Windows Phone 7 Series UI Design & Interaction Guide". Windows Phone Developer Blog. Microsoft. Retrieved 15 September 2013.
  5. ^ Lefevers, Jason (15 September 2013). "A Walkthrough the History of the Metro UI". Windows Phone Metro. Self-published. Archived from the original on 28 April 2013. Retrieved 11 July 2011. {{cite web}}: Unknown parameter |Agency= ignored (|agency= suggested) (help)
  6. ^ "Windows Phone Design System: Codenamed 'Metro'" (PDF). Retrieved 9 October 2010.[dead link]
  7. ^ a b "Design Language of Windows Phone 7". .toolbox. Microsoft. Archived from the original on 7 September 2012. Retrieved 5 October 2012.
  8. ^ Hamburger, Ellis (27 April 2011). "Metro". Blackboard. Business Insider. Retrieved 3 November 2011.
  9. ^ Zheng, Long (14 Novemver 2007). ""Zegoe", the new Zune font". i started something. Self-published. Retrieved 15 Septmber 2013. {{cite web}}: Check date values in: |accessdate= and |date= (help)
  10. ^ Roberts, Chad; Shum, Albert; Smuga, Michael (15 March 2010). "Windows Phone UI and Design Language". MIX 2010. Microsoft. Retrieved 15 September 2013.
  11. ^ Kruzeniski, Mike (17 February 2011). "From Transportation to Pixels". Windows Phone Developer Blog. Microsoft.
  12. ^ Topolsky, Joshua (17 September 2009). "Zune HD review". Engadget. Aol. Retrieved 19 February 2013.
  13. ^ "Zune HD 64GB Review". CNET. CBS Interactive. 17 September 2009. Retrieved 19 February 2013.
  14. ^ Warren, Tom (18 September 2011). "Windows Phone wins IDEA 2011 – people's choice design award". WinRumors. Retrieved 19 February 2013.
  15. ^ "Windows Phone 7". Industrial Designers Society of America. idsa.org. 8 June 2011. Retrieved 15 September 2013.
  16. ^ a b Bright, Peter (25 April 2012). "Windows 8 on the desktop—an awkward hybrid". Ars Technica. Condé Nast Digital. Retrieved 19 February 2013.
  17. ^ "Microsoft To Drop Aero From Windows 8 User Interface". Forbes. 5/19/2012. Retrieved 10/10/2012. {{cite web}}: Check date values in: |accessdate= and |date= (help)
  18. ^ "Windows 8 Release Preview: RIP, Aero (2003-2012)". Paul Thurrott's Supersite for Windows. May 19, 2012. Retrieved 10/10/2012. {{cite web}}: Check date values in: |accessdate= (help)
  19. ^ "Microsoft Drops 'Aero Glass' User Interface in Windows 8". Wired. May 21, 2012. Retrieved 10/10/2012. {{cite web}}: Check date values in: |accessdate= (help)
  20. ^ "Windows 8's Done, Time To Worry". Redmondmag. 08/17/2012. Retrieved 10/8/2012. {{cite web}}: Check date values in: |accessdate= and |date= (help)
  21. ^ Warren, Tom (2 August 2013). "Exclusive: Microsoft's Metro branding to be replaced 'this week' according to internal memo". The Verge. Vox Media. Retrieved 29 May 2013.
  22. ^ "Microsoft to drop 'Metro' name for Windows". BBC. 3 August 2012. Retrieved 28 May 2012.
  23. ^ Bradley, Tony (4 August 2012). "Windows 8 'Metro' Is Dead, But UI Still Needs a Name". PC World. IDG. Retrieved 10 August 2012.
  24. ^ Chang, Alexandra (8 August 2012). "Microsoft Doesn't Need a Name for Its User Interface". Wired. Condé Nast. Retrieved 28 May 2013.
  25. ^ McAllister, Neil (10 August 2012). "Microsoft: It was never 'Metro,' it was always 'Modern UI'". The Register. Retrieved 28 May 2013.
  26. ^ "Make great Windows Store apps". MSDN. Microsoft. Retrieved 28 May 2013.
  27. ^ "Design case study: iPad to Windows Store app". MSDN. Microsoft. Retrieved 28 May 2013.
  28. ^ "Guidelines for typography". MSDN. Microsoft. Retrieved 28 May 2013.
  29. ^ "Roadmap for Windows Store apps using DirectX and C++". MSDN. Microsoft. Retrieved 28 May 2013.
  30. ^ "The Microsoft design language". Channel9. Microsoft. Retrieved 28 May 2013.
  31. ^ Foley, Mary Jo. "Microsoft Design Language: The newest official way to refer to 'Metro'". ZDNet. CBS Interactive. Retrieved 28 May 2013.
  32. ^ "Microsoft finally comes clean(er) on post-Metro naming plans". ZDNet. CBS Interactive. 12 September 2012. Retrieved 28 May 2013.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Metro_(design_language)&oldid=572965154"