SlideShare a Scribd company logo
Shane Morris Automatic Studio Windows Phone 7 User Experience 1
Windows Phone 7 UserExperience Attributes Elements 2 WINDOWS PHONE 7 UX - METRO
Thanks MIX10! http://channel9.msdn.com/Events/MIX/MIX10/CL14 3 WINDOWS PHONE 7 UX - METRO
Windows Phone 7 User Experience Design language (codenamed Metro) Designing delightful applications for Windows Phone Shane Morris – Automatic Studio WINDOWS PHONE 7 UX - METRO 5
Designing Windows Phone 7 Series http://channel9.msdn.com/Events/MIX/MIX10/CL14 Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead 6
Story of Metro WINDOWS PHONE 7 UX - METRO 7
WINDOWS PHONE 7 UX - METRO 8
Metro WINDOWS PHONE 7 UX - METRO 9
WINDOWS PHONE 7 UX - METRO 11
WINDOWS PHONE 7 UX - METRO 12
WINDOWS PHONE 7 UX - METRO 13
METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC. ETRO WINDOWS PHONE 7 UX - METRO 14
Metro Principles WINDOWS PHONE 7 UX - METRO 15
Principle: Clean, Light, Open, Fast Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Delightful Use of Whitespace Full Bleed Canvas WINDOWS PHONE 7 UX - METRO 16
Principle: Celebrate Typography Type is Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale WINDOWS PHONE 7 UX - METRO 17
Principle: Alive in Motion Feels Responsive and Alive Creates a System Gives Context to Improve Usability Transition Between UI is as Important as the Design of the UI Adds Dimension and Depth WINDOWS PHONE 7 UX - METRO 18
Principle: Content, Not Chrome Delight through Content Instead of Decoration Reduce Visuals that are Not Content Contents is the UI Direct interaction with the Content Directly WINDOWS PHONE 7 UX - METRO 19
Principle: Authentically Digital Design for the Form Factor Don’t Try to be What It’s NOT Be Direct WINDOWS PHONE 7 UX - METRO 20
Principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital WINDOWS PHONE 7 UX - METRO 21
WINDOWS PHONE 7 UX - METRO 22
Metro User Experience Focuses on the individual and their tasks Helps organize information and applications WINDOWS PHONE 7 UX - METRO 23
Start Glance & Go Get Me There WINDOWS PHONE 7 UX - METRO 24
WINDOWS PHONE 7 UX - METRO 25
Metro WINDOWS PHONE 7 UX - METRO 26
Building Great Windows PhoneApplications Focus on designing the experience Build delightful experiences Build experiences that are easy to use Michael Smuga – Studio Director WINDOWS PHONE 7 UX - METRO 27
Who we design for: Anna + Miles Anna Part time PR professional and busy mom “My life is a balancing act between work, family, friends, and my own personal needs.” Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.” WINDOWS PHONE 7 UX - METRO 28
RED THREADS. THESE ARE THE PRINCIPLESTHAT GUIDE THE EXPERIENCES WINDOWS PHONE 7 UX - METRO 29
Weather Personal Weather surfaced on the live tile in Start Relevant Weather updated based on your location Connected Weather for your contacts WINDOWS PHONE 7 UX - METRO 30
Build delightful experience Be inspired by Metro …but look for balance between the Metro principles and your own style  WINDOWS PHONE 7 UX - METRO 31
WINDOWS PHONE 7 UX - METRO 32
Color Use color to delight the user Use color to personalize experience Use color to emphasize hierarchy WINDOWS PHONE 7 UX - METRO 33
WINDOWS PHONE 7 UX - METRO 34
WINDOWS PHONE 7 UX - METRO 35
Typography Make words feel welcome Pay attention to balance,  weight & scale WINDOWS PHONE 7 UX - METRO 36
WINDOWS PHONE 7 UX - METRO 37
Motion Use motion to delight the user Remember that pacing is important: the more you use it, the less special it becomes WINDOWS PHONE 7 UX - METRO 38
Make It Easy to Use Familiar = Easy to use Provide consistent and predictable experience WINDOWS PHONE 7 UX - METRO 39
Hardware Implications Hardware buttons Optional landscape keyboards Design for one hand usage whenever possible WINDOWS PHONE 7 UX - METRO 40
Gestures WINDOWS PHONE 7 UX - METRO 41
Touch Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size WINDOWS PHONE 7 UX - METRO 42
Common controls WINDOWS PHONE 7 UX - METRO 43
Application Bar + Menu Up to 4 icons Don’t fill all 4 slots if not needed Swipe up the bar to bring up the menu Trigger WINDOWS PHONE 7 UX - METRO 44
Pivots (Tabs) Separate multiple tasks Tap or flick tabs to change them Trigger WINDOWS PHONE 7 UX - METRO 45

More Related Content

Viewers also liked

My Head Hurts
My  Head HurtsMy  Head Hurts
My Head HurtsHpanik
 
V O C A B U L A R Y J A N 29 F E B 2
V O C A B U L A R Y  J A N 29    F E B 2V O C A B U L A R Y  J A N 29    F E B 2
V O C A B U L A R Y J A N 29 F E B 2Brent Daigle, Ph.D.
 
Customer Experience and the 3 F's
Customer Experience and the 3 F'sCustomer Experience and the 3 F's
Customer Experience and the 3 F's
Shane Morris
 
El Dibuix I El Paper
El Dibuix I El PaperEl Dibuix I El Paper
El Dibuix I El Paper
lunadan
 
I N V E R N O N A F I N L A N D I A
I N V E R N O  N A  F I N L A N D I AI N V E R N O  N A  F I N L A N D I A
I N V E R N O N A F I N L A N D I ATVPortugal
 
My Sons Presentation
My Sons PresentationMy Sons Presentation
My Sons Presentationmarvypina
 
Funky Footprints, a visual excarvation.
Funky Footprints, a visual excarvation.Funky Footprints, a visual excarvation.
Funky Footprints, a visual excarvation.
smuemd
 
E C O S Y S T E M 2007
E C O S Y S T E M 2007E C O S Y S T E M 2007
E C O S Y S T E M 2007
Brent Daigle, Ph.D.
 
Defining the recipient journey ux
Defining the recipient journey uxDefining the recipient journey ux
Defining the recipient journey ux
Shane Morris
 
The Science of Professional Development
The Science of Professional DevelopmentThe Science of Professional Development
The Science of Professional Development
Brent Daigle, Ph.D.
 
01 Thesis Project stefanmueller
01 Thesis Project stefanmueller01 Thesis Project stefanmueller
01 Thesis Project stefanmuellersmuemd
 
Special Education Policies & Practices
Special Education Policies & PracticesSpecial Education Policies & Practices
Special Education Policies & PracticesBrent Daigle, Ph.D.
 
Gogreen NC
Gogreen NCGogreen NC
Gogreen NCnicurry
 

Viewers also liked (20)

My Head Hurts
My  Head HurtsMy  Head Hurts
My Head Hurts
 
V O C A B U L A R Y J A N 29 F E B 2
V O C A B U L A R Y  J A N 29    F E B 2V O C A B U L A R Y  J A N 29    F E B 2
V O C A B U L A R Y J A N 29 F E B 2
 
Capitalization rules
Capitalization rulesCapitalization rules
Capitalization rules
 
Customer Experience and the 3 F's
Customer Experience and the 3 F'sCustomer Experience and the 3 F's
Customer Experience and the 3 F's
 
Synonyms
SynonymsSynonyms
Synonyms
 
Top 100 High Schools In The Usa
Top 100 High Schools In The UsaTop 100 High Schools In The Usa
Top 100 High Schools In The Usa
 
Vitrais
VitraisVitrais
Vitrais
 
El Dibuix I El Paper
El Dibuix I El PaperEl Dibuix I El Paper
El Dibuix I El Paper
 
I N V E R N O N A F I N L A N D I A
I N V E R N O  N A  F I N L A N D I AI N V E R N O  N A  F I N L A N D I A
I N V E R N O N A F I N L A N D I A
 
Attendance, Truancy, And Success
Attendance, Truancy, And SuccessAttendance, Truancy, And Success
Attendance, Truancy, And Success
 
My Sons Presentation
My Sons PresentationMy Sons Presentation
My Sons Presentation
 
Funky Footprints, a visual excarvation.
Funky Footprints, a visual excarvation.Funky Footprints, a visual excarvation.
Funky Footprints, a visual excarvation.
 
2008 Louisiana Leap Test Results
2008 Louisiana Leap Test Results2008 Louisiana Leap Test Results
2008 Louisiana Leap Test Results
 
Autism Spectrum Disorders
Autism Spectrum DisordersAutism Spectrum Disorders
Autism Spectrum Disorders
 
E C O S Y S T E M 2007
E C O S Y S T E M 2007E C O S Y S T E M 2007
E C O S Y S T E M 2007
 
Defining the recipient journey ux
Defining the recipient journey uxDefining the recipient journey ux
Defining the recipient journey ux
 
The Science of Professional Development
The Science of Professional DevelopmentThe Science of Professional Development
The Science of Professional Development
 
01 Thesis Project stefanmueller
01 Thesis Project stefanmueller01 Thesis Project stefanmueller
01 Thesis Project stefanmueller
 
Special Education Policies & Practices
Special Education Policies & PracticesSpecial Education Policies & Practices
Special Education Policies & Practices
 
Gogreen NC
Gogreen NCGogreen NC
Gogreen NC
 

Similar to WIndows Phone 7 UX

Metro Design Language
Metro Design LanguageMetro Design Language
Metro Design Language
Shane Morris
 
Windows Phone UI and Design Language
Windows Phone UI and Design LanguageWindows Phone UI and Design Language
Windows Phone UI and Design Language
Steve Clayton
 
Windows 8 quick start ux
Windows 8 quick start uxWindows 8 quick start ux
Windows 8 quick start ux
Alexandre Marreiros
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
Nikita Lukianets
 
When Games Go Small
When Games Go SmallWhen Games Go Small
When Games Go Small
Sharon Boller
 
The Age Of User Experience
The Age Of User ExperienceThe Age Of User Experience
The Age Of User Experience
MS Innovation Days
 
Windows Phone 7- The Metro design
Windows Phone 7- The Metro designWindows Phone 7- The Metro design
Windows Phone 7- The Metro designcarolineberman99
 
Metro designing concepts
Metro designing conceptsMetro designing concepts
Metro designing concepts
Pavan Pareta
 
Windows Phone 7 Platform Overview
Windows Phone 7 Platform OverviewWindows Phone 7 Platform Overview
Windows Phone 7 Platform OverviewNguyên Phạm
 
uiux.pptx
uiux.pptxuiux.pptx
uiux.pptx
KartikBhagwat5
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
Menusha Pathirana
 
Windows Developer Preview - Windows 8 Guide
Windows Developer Preview - Windows 8 GuideWindows Developer Preview - Windows 8 Guide
Windows Developer Preview - Windows 8 Guide
Boris Loukanov
 
Computer project work
Computer project workComputer project work
Computer project work
S.L.B.S Engineering College
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
Durgesh Pandey
 
WP7 Study 발표 - WinMoDev
WP7 Study 발표 - WinMoDevWP7 Study 발표 - WinMoDev
WP7 Study 발표 - WinMoDev
Seo Jinho
 
Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012
Madhava Enros
 
Ppt on windows 8
Ppt on windows 8Ppt on windows 8
Ppt on windows 8
Vijaykumar Nishad
 
Windows Phone 7.5 Overview
Windows Phone 7.5 Overview Windows Phone 7.5 Overview
Windows Phone 7.5 Overview Nguyên Phạm
 

Similar to WIndows Phone 7 UX (20)

Metro Design Language
Metro Design LanguageMetro Design Language
Metro Design Language
 
Windows Phone UI and Design Language
Windows Phone UI and Design LanguageWindows Phone UI and Design Language
Windows Phone UI and Design Language
 
Windows 8 quick start ux
Windows 8 quick start uxWindows 8 quick start ux
Windows 8 quick start ux
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
When Games Go Small
When Games Go SmallWhen Games Go Small
When Games Go Small
 
The Age Of User Experience
The Age Of User ExperienceThe Age Of User Experience
The Age Of User Experience
 
Windows Phone 7- The Metro design
Windows Phone 7- The Metro designWindows Phone 7- The Metro design
Windows Phone 7- The Metro design
 
Metro designing concepts
Metro designing conceptsMetro designing concepts
Metro designing concepts
 
Prototyping
PrototypingPrototyping
Prototyping
 
Windows Phone 7 Platform Overview
Windows Phone 7 Platform OverviewWindows Phone 7 Platform Overview
Windows Phone 7 Platform Overview
 
uiux.pptx
uiux.pptxuiux.pptx
uiux.pptx
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
 
Windows Developer Preview - Windows 8 Guide
Windows Developer Preview - Windows 8 GuideWindows Developer Preview - Windows 8 Guide
Windows Developer Preview - Windows 8 Guide
 
Computer project work
Computer project workComputer project work
Computer project work
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
 
WP7 Study 발표 - WinMoDev
WP7 Study 발표 - WinMoDevWP7 Study 발표 - WinMoDev
WP7 Study 발표 - WinMoDev
 
Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012
 
Ppt on windows 8
Ppt on windows 8Ppt on windows 8
Ppt on windows 8
 
Windows Phone 7.5 Overview
Windows Phone 7.5 Overview Windows Phone 7.5 Overview
Windows Phone 7.5 Overview
 
Metro design language
Metro design languageMetro design language
Metro design language
 

More from Shane Morris

What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest SydneyWhat makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest Sydney
Shane Morris
 
Morris prototyping - oredev - share
Morris   prototyping - oredev - shareMorris   prototyping - oredev - share
Morris prototyping - oredev - share
Shane Morris
 
Metro Design Language - WebDU
Metro Design Language - WebDUMetro Design Language - WebDU
Metro Design Language - WebDUShane Morris
 
Prototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesPrototypes, Prototypes, Prototypes
Prototypes, Prototypes, Prototypes
Shane Morris
 
Expression Blend for Windows Phone
Expression Blend for Windows PhoneExpression Blend for Windows Phone
Expression Blend for Windows Phone
Shane Morris
 
101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South
Shane Morris
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
Shane Morris
 
Design For Multiple Touchpoints
Design For Multiple TouchpointsDesign For Multiple Touchpoints
Design For Multiple Touchpoints
Shane Morris
 
Design In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for SurfaceDesign In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for Surface
Shane Morris
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
Shane Morris
 
Web311 Designing Compelling Silverlight User Experiences With Expression St...
Web311   Designing Compelling Silverlight User Experiences With Expression St...Web311   Designing Compelling Silverlight User Experiences With Expression St...
Web311 Designing Compelling Silverlight User Experiences With Expression St...
Shane Morris
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane Morris
Shane Morris
 
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User ExperiencesUsing Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
Shane Morris
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane Morris
Shane Morris
 
Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712
Shane Morris
 
Silverlight Splashes Out
Silverlight Splashes OutSilverlight Splashes Out
Silverlight Splashes Out
Shane Morris
 

More from Shane Morris (16)

What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest SydneyWhat makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest Sydney
 
Morris prototyping - oredev - share
Morris   prototyping - oredev - shareMorris   prototyping - oredev - share
Morris prototyping - oredev - share
 
Metro Design Language - WebDU
Metro Design Language - WebDUMetro Design Language - WebDU
Metro Design Language - WebDU
 
Prototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesPrototypes, Prototypes, Prototypes
Prototypes, Prototypes, Prototypes
 
Expression Blend for Windows Phone
Expression Blend for Windows PhoneExpression Blend for Windows Phone
Expression Blend for Windows Phone
 
101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
 
Design For Multiple Touchpoints
Design For Multiple TouchpointsDesign For Multiple Touchpoints
Design For Multiple Touchpoints
 
Design In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for SurfaceDesign In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for Surface
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 
Web311 Designing Compelling Silverlight User Experiences With Expression St...
Web311   Designing Compelling Silverlight User Experiences With Expression St...Web311   Designing Compelling Silverlight User Experiences With Expression St...
Web311 Designing Compelling Silverlight User Experiences With Expression St...
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane Morris
 
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User ExperiencesUsing Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane Morris
 
Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712
 
Silverlight Splashes Out
Silverlight Splashes OutSilverlight Splashes Out
Silverlight Splashes Out
 

Recently uploaded

一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 

Recently uploaded (20)

一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 

WIndows Phone 7 UX

  • 1. Shane Morris Automatic Studio Windows Phone 7 User Experience 1
  • 2. Windows Phone 7 UserExperience Attributes Elements 2 WINDOWS PHONE 7 UX - METRO
  • 4.
  • 5. Windows Phone 7 User Experience Design language (codenamed Metro) Designing delightful applications for Windows Phone Shane Morris – Automatic Studio WINDOWS PHONE 7 UX - METRO 5
  • 6. Designing Windows Phone 7 Series http://channel9.msdn.com/Events/MIX/MIX10/CL14 Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead 6
  • 7. Story of Metro WINDOWS PHONE 7 UX - METRO 7
  • 8. WINDOWS PHONE 7 UX - METRO 8
  • 9. Metro WINDOWS PHONE 7 UX - METRO 9
  • 10.
  • 11. WINDOWS PHONE 7 UX - METRO 11
  • 12. WINDOWS PHONE 7 UX - METRO 12
  • 13. WINDOWS PHONE 7 UX - METRO 13
  • 14. METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC. ETRO WINDOWS PHONE 7 UX - METRO 14
  • 15. Metro Principles WINDOWS PHONE 7 UX - METRO 15
  • 16. Principle: Clean, Light, Open, Fast Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Delightful Use of Whitespace Full Bleed Canvas WINDOWS PHONE 7 UX - METRO 16
  • 17. Principle: Celebrate Typography Type is Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale WINDOWS PHONE 7 UX - METRO 17
  • 18. Principle: Alive in Motion Feels Responsive and Alive Creates a System Gives Context to Improve Usability Transition Between UI is as Important as the Design of the UI Adds Dimension and Depth WINDOWS PHONE 7 UX - METRO 18
  • 19. Principle: Content, Not Chrome Delight through Content Instead of Decoration Reduce Visuals that are Not Content Contents is the UI Direct interaction with the Content Directly WINDOWS PHONE 7 UX - METRO 19
  • 20. Principle: Authentically Digital Design for the Form Factor Don’t Try to be What It’s NOT Be Direct WINDOWS PHONE 7 UX - METRO 20
  • 21. Principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital WINDOWS PHONE 7 UX - METRO 21
  • 22. WINDOWS PHONE 7 UX - METRO 22
  • 23. Metro User Experience Focuses on the individual and their tasks Helps organize information and applications WINDOWS PHONE 7 UX - METRO 23
  • 24. Start Glance & Go Get Me There WINDOWS PHONE 7 UX - METRO 24
  • 25. WINDOWS PHONE 7 UX - METRO 25
  • 26. Metro WINDOWS PHONE 7 UX - METRO 26
  • 27. Building Great Windows PhoneApplications Focus on designing the experience Build delightful experiences Build experiences that are easy to use Michael Smuga – Studio Director WINDOWS PHONE 7 UX - METRO 27
  • 28. Who we design for: Anna + Miles Anna Part time PR professional and busy mom “My life is a balancing act between work, family, friends, and my own personal needs.” Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.” WINDOWS PHONE 7 UX - METRO 28
  • 29. RED THREADS. THESE ARE THE PRINCIPLESTHAT GUIDE THE EXPERIENCES WINDOWS PHONE 7 UX - METRO 29
  • 30. Weather Personal Weather surfaced on the live tile in Start Relevant Weather updated based on your location Connected Weather for your contacts WINDOWS PHONE 7 UX - METRO 30
  • 31. Build delightful experience Be inspired by Metro …but look for balance between the Metro principles and your own style WINDOWS PHONE 7 UX - METRO 31
  • 32. WINDOWS PHONE 7 UX - METRO 32
  • 33. Color Use color to delight the user Use color to personalize experience Use color to emphasize hierarchy WINDOWS PHONE 7 UX - METRO 33
  • 34. WINDOWS PHONE 7 UX - METRO 34
  • 35. WINDOWS PHONE 7 UX - METRO 35
  • 36. Typography Make words feel welcome Pay attention to balance, weight & scale WINDOWS PHONE 7 UX - METRO 36
  • 37. WINDOWS PHONE 7 UX - METRO 37
  • 38. Motion Use motion to delight the user Remember that pacing is important: the more you use it, the less special it becomes WINDOWS PHONE 7 UX - METRO 38
  • 39. Make It Easy to Use Familiar = Easy to use Provide consistent and predictable experience WINDOWS PHONE 7 UX - METRO 39
  • 40. Hardware Implications Hardware buttons Optional landscape keyboards Design for one hand usage whenever possible WINDOWS PHONE 7 UX - METRO 40
  • 41. Gestures WINDOWS PHONE 7 UX - METRO 41
  • 42. Touch Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size WINDOWS PHONE 7 UX - METRO 42
  • 43. Common controls WINDOWS PHONE 7 UX - METRO 43
  • 44. Application Bar + Menu Up to 4 icons Don’t fill all 4 slots if not needed Swipe up the bar to bring up the menu Trigger WINDOWS PHONE 7 UX - METRO 44
  • 45. Pivots (Tabs) Separate multiple tasks Tap or flick tabs to change them Trigger WINDOWS PHONE 7 UX - METRO 45
  • 46. Panoramas (Hubs) Rich experience Aggregate multiple sources WINDOWS PHONE 7 UX - METRO 46
  • 47. Hubs vs. Single-Page Apps WINDOWS PHONE 7 UX - METRO 47
  • 48. Iconography Icons in the application menu should be consistent Test icons with users (pay attention to context) WINDOWS PHONE 7 UX - METRO 48
  • 49. Call to Action Familiarize yourself with Metro Stay Connected & Get Informed Download & Start Creating Chad Roberts – UX Design Lead WINDOWS PHONE 7 UX - METRO 49
  • 50. Summary Metro Personas Red Threads Focus on designing the experience Make applications delightful and easy to use WINDOWS PHONE 7 UX - METRO 50
  • 51. Stay Connected & Be Informed Attend “An Introduction to Developing Applications for Microsoft Silverlight”. Watch “Authoring for Microsoft Silverlight 4 with Microsoft Expression Blend. Read about design on Christian Schormann’s blog. http://electricbeach.org WINDOWS PHONE 7 UX - METRO 51
  • 52. Download & Start Creating Get the Windows Phone Developer Tools Download the UI Design and Interaction Guide Interact with the design tools when Available http://developer.windowsphone.com WINDOWS PHONE 7 UX - METRO 52
  • 53. Thank you! Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead WINDOWS PHONE 7 UX - METRO 53
  • 54. Expression Blend Design tool for XAML platform (for now) WYSIWYG Designer friendly WINDOWS PHONE 7 UX - METRO 54
  • 55. Expression BlendSketchFlow Prototyping for XAML applications wp7sketchflow.codeplex.com/ 55 WINDOWS PHONE 7 UX - METRO
  • 56. Resources User Experience Design Guidelines for Windows Phone MSDN http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx User Experience and User Interface AppHub http://create.msdn.com/en-US/education/basics/ux_ui Windows Phone Expression Blend and SketchFlow Tutorials Microsoft .toolbox http://www.microsoft.com/design/toolbox/school/tutorials.aspx Silverlight TV 81: Four Great Windows Phone UX Tips http://www.silverlightshow.net/news/Silverlight-TV-81-Four-Great-Windows-Phone-UX-Tips.aspx Designing for Windows Phone Icons Templarian http://templarian.com/2011/08/14/wp_icons_up_to_105/ Windows Phone 7 Design Templates Photoshop http://wp7designtemplates.codeplex.com/ 56 WINDOWS PHONE 7 UX - METRO
  • 57. Thank you Shane MorrisAutomatic Studio shane@automaticstudio.com.auTwitter/shanemo 57 WINDOWS PHONE 7 UX - METRO