Metro UI interaction design guidelines @Microsoft Tech.Days 2011

Microsoft Tech Days 2011 – !Metro UI / Interaction Design Guidelines !David Chen 陳文剛, 2011/09/15!

Who is David Chen?!UX Director at AJA Creative Design! AJA Creative Design / UX Director (2011~)! CyberLink User Experience Design Center / Director (2011)! AVerMedia User Experience Design Center / Manager (2008~2011)! BenQ Lifestyle Design Center / UI Lead (2003~2008)! 2010: Best Choice of Computex 2010 Award. COMPUTEX 2010, Taiwan 2008: Interactive Product Experiences Bronze Award. IDEA Award 2008, USA 2008: Communication Design Award. Reddot Design Award 2008, Germany 2006: Communication Design Award. Reddot Design Award 2006, Germany 2006: Too good to be true Award. iF Award 2006, Germany 2006: Design Award. iF China Award 2006, China 2005: 年度最佳產品. COMPUTEX 2005, Taiwan 2000: 年度最佳電子商務網站. 2000年華文網站評選, Taiwan 2000: 全國電腦動畫大賽社會組創作類第一名, Taiwan

Metro UI / Interaction Design Guidelines !•  History of User Interface Design!•  Metro Design Elements!•  Comparison between Metro UI, iOS & Android!!

40 years history of User Interface Design !

40 years history of User Interface Design !UI to access data. (Xerox Alto ﬁle manager, 1973)!

40 years history of User Interface Design !UI to control functions. (Apple MacOS 1.1, 1984)!

40 years history of User Interface Design !UI to organize things. (Microsoft Win95, 1995)!

40 years history of User Interface Design !UI to interact with. (Apple OS X Tiger, 2005)!

40 years history of User Interface Design !UI to keep in touch. (Microsoft Metro UI, 2010)!

Windows Phone 7 Designed to get you in and out  and back to life!

Windows Phone 7!Designed to get you in and out and back to life!

Metro Design Language!

Metro Design Language!Inspired from trafﬁc system, designed for quick way ﬁnding! http://www.flickr.com/photos/homemade_london/4233266672/

Metro Design Language!Inspired from trafﬁc system, designed for quick way ﬁnding! http://en.wikipedia.org/wiki/File:Seattle_Metro_4.jpg

Metro Design Elements!

Metro Design Elements!Start - A quick glance of all necessary info!

Metro Design Elements!Start - Similar idea of 「Multi-curio, 多寶格」! http://goo.gl/pblF4

Metro Design Elements!Live tiles - Similar idea of 「Collections, 收藏品」!

Metro Design Elements!Live tiles - A refresh design better than icons !

Metro Design Elements!Live tiles - A refresh design better than icons !A Tile is an easily recognizablevisual shortcut for anapplication or its content thatusers can set in the phonesStart view.!!Guidelines:!•  Surface information relevant to the application.!•  Tile images should be 173 pixels x 173 pixels at 256 dpi, and in PNG format.!•  Multiple Tile images should be visually consistent with each other and have a recognizable theme or style. !

Metro Design Elements!Panorama - Put multiple sources into one place!

Metro Design Elements!Panorama - Similar idea of 「Along the River During Qingming Festival, 清明上河圖」! http://goo.gl/RlXPd!

Metro Design Elements!Panorama - Put multiple sources into one place!

Metro Design Elements!Panorama - Put multiple sources into one place!The Panorama control displays a viewof items that can be panned side-to-side. It is a full-screen container andnavigation model for an application.!!Guidelines:!•  Use either a single color background or an image that spans the entire panorama.!•  Don’t use controls that can pan or scroll inside a Panorama control.!•  Limit yourself to 4 panels if you use the panorama control.!

Metro Design Elements!Pivot - Display a set of things in different ways!

Metro Design Elements!Pivot - Similar idea of 「Carved lanterns, 雕花燈籠」! http://detail.china.alibaba.com/buyer/offerdetail/713787499.html!

Metro Design Elements!Pivot - Similar idea of 「Carved lanterns, 雕花燈籠」!

Metro Design Elements!Pivot - Display a set of things in different ways!The Pivot control provides a quick wayto manage views or pages. It can beused for ﬁltering large datasets,viewing multiple data sets, orswitching application views!!Guidelines:!•  The Pivot control should be used only to display items or data of similar type.!•  Never place a Pivot control inside of a Panorama control, or another Pivot control.!•  Pivot pages should not be used for task ﬂow.!•  Don’t use controls that can pan or scroll inside a Pivot control. Such as Slider, Toggles, or Map Controls.!

Metro Design Elements! ?!This is Pivot or Panorama?!

Metro Design Elements! ?!This is Pivot or Panorama?! http://www.codeguru.com/dbﬁles/get_image.php?id=18413&lbl=WP7PP_PIVOT_2_JPG&ds=20110128!

Metro Design Elements!Pivots vs. Panoramas!

Comparison between Metro UI, iOS & Android!

Comparison between Metro UI, iOS & Android!3 systems, 3 ways of interaction!

Comparison between Metro UI, iOS & Android!Live & rich tiles vs. Static icons ! 4 Messages

Comparison between Metro UI, iOS & Android!Live & rich tiles vs. Static icons ! Dinner with Karen LIDIOT 2011.09.25 Calendar Fri 25

Comparison between Metro UI, iOS & Android!Integrated ﬂow vs. Isolated apps! Windows Phone 7, Android! ... 4 steps  share share on Facebook use as wallpaper 1 uniﬁed app! delete apps... ... iOS! 4+2 steps  1+1 apps!

Comparison between Metro UI, iOS & Android!Simpliﬁed menu vs. Advanced sub-options! Windows Phone 7! iOS! Android! IMAG1011.jpg View Edit ... Share share Set as share on Facebook Delete use as wallpaper delete apps... Menu 1 Menu 2 Menu 3

Comparison between Metro UI, iOS & Android!Which one is more easy-to-use ?!

In the end, A little reminding before go for developing!

A little reminding before go for developing! ?!How many passes does the team in white make?!

David Chen 陳文剛!davidwkchen@gmail.com!www.handyui.com!!Thank you.!!

http://paper.li	92
http://www.twylah.com	5
http://a0.twimg.com	4
http://strawberryj.am	3
https://twimg0-a.akamaihd.net	2
http://factoriant.dyndns.org	2
https://si0.twimg.com	1
http://us-w1.rockmelt.com	1

Metro UI interaction design guidelines @Microsoft Tech.Days 2011

by David Chen on Sep 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 110

Statistics

Metro UI interaction design guidelines @Microsoft Tech.Days 2011 — Presentation Transcript