windows phone 7 ux
DESCRIPTION
Slides from Windows Phone 7 Workshop in Melbourne, October 2011TRANSCRIPT
![Page 1: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/1.jpg)
V1 1
Shane MorrisAutomatic Studio
WINDOWS PHONE 7 USER EXPERIENCE
![Page 2: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/2.jpg)
V1 2WINDOWS PHONE 7 UX - METRO
WINDOWS PHONE 7 USER EXPERIENCEAttributes
Elements
![Page 3: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/3.jpg)
V1 3WINDOWS PHONE 7 UX - METRO
Thanks MIX10!http://channel9.msdn.com/Events/MIX/MIX10/CL14
![Page 4: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/4.jpg)
![Page 5: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/5.jpg)
Designing Windows Phone 7 Series
Albert Shum – That Dude
Michael Smuga – Studio Director
Chad Roberts – UX Design Lead
http://channel9.msdn.com/Events/MIX/MIX10/CL14
6
![Page 6: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/6.jpg)
Metro
WINDOWS PHONE 7 UX - METRO 9
![Page 7: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/7.jpg)
![Page 8: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/8.jpg)
ETRO
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.
WINDOWS PHONE 7 UX - METRO 14
![Page 9: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/9.jpg)
Metro Principles
WINDOWS PHONE 7 UX - METRO 15
![Page 10: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/10.jpg)
Principle: Clean, Light, Open, FastFeels Fast and ResponsiveFocus on Primary TasksDo a Lot with Very LittleFierce Reduction of Unnecessary ElementsDelightful Use of WhitespaceFull Bleed Canvas
WINDOWS PHONE 7 UX - METRO 16
![Page 11: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/11.jpg)
Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale
WINDOWS PHONE 7 UX - METRO 17
![Page 12: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/12.jpg)
Principle: Alive in Motion
Feels Responsive and AliveCreates a SystemGives Context to Improve UsabilityTransition Between UI is as Important as the Design of the UIAdds Dimension and Depth
WINDOWS PHONE 7 UX - METRO 18
![Page 13: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/13.jpg)
Principle: Content, Not ChromeDelight through Content Instead of DecorationReduce Visuals that are Not ContentContents is the UIDirect interaction with the Content Directly
WINDOWS PHONE 7 UX - METRO 19
![Page 14: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/14.jpg)
Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct
WINDOWS PHONE 7 UX - METRO 20
![Page 15: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/15.jpg)
Principles
Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital
WINDOWS PHONE 7 UX - METRO 21
![Page 16: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/16.jpg)
WINDOWS PHONE 7 UX - METRO 22
![Page 17: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/17.jpg)
Metro User Experience
Focuses on the individual and their tasks
Helps organize information and applications
WINDOWS PHONE 7 UX - METRO 23
![Page 18: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/18.jpg)
Start
Glance & Go
Get Me There
WINDOWS PHONE 7 UX - METRO 24
![Page 19: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/19.jpg)
WINDOWS PHONE 7 UX - METRO 25
![Page 20: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/20.jpg)
Metro
WINDOWS PHONE 7 UX - METRO 26
![Page 21: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/21.jpg)
Building Great Windows PhoneApplications
Focus on designing the experienceBuild delightful experiencesBuild experiences that are easy to use
Michael Smuga – Studio Director
WINDOWS PHONE 7 UX - METRO 27
![Page 22: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/22.jpg)
RED THREADS.
THESE ARETHE PRINCIPLESTHAT GUIDE THE EXPERIENCES
WINDOWS PHONE 7 UX - METRO 29
![Page 23: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/23.jpg)
Weather
PersonalWeather surfaced on the live tile in Start
RelevantWeather updated based on your location
ConnectedWeather for your contacts
WINDOWS PHONE 7 UX - METRO 30
![Page 24: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/24.jpg)
Build delightful experience
Be inspired by Metro
…but look for balance between the Metroprinciples and your own style
WINDOWS PHONE 7 UX - METRO 31
![Page 25: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/25.jpg)
WINDOWS PHONE 7 UX - METRO 32
![Page 26: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/26.jpg)
Color
Use color to delight the userUse color to personalize experienceUse color to emphasize hierarchy
WINDOWS PHONE 7 UX - METRO 33
![Page 27: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/27.jpg)
WINDOWS PHONE 7 UX - METRO 34
![Page 28: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/28.jpg)
WINDOWS PHONE 7 UX - METRO 35
![Page 29: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/29.jpg)
Typography
Make words feel welcome
Pay attention to balance, weight & scale
WINDOWS PHONE 7 UX - METRO 36
![Page 30: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/30.jpg)
WINDOWS PHONE 7 UX - METRO 37
![Page 31: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/31.jpg)
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
![Page 32: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/32.jpg)
Make It Easy to Use
Familiar = Easy to use
Provide consistent and predictable experience
WINDOWS PHONE 7 UX - METRO 39
![Page 33: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/33.jpg)
Gestures
WINDOWS PHONE 7 UX - METRO 41
![Page 34: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/34.jpg)
Touch
Recommended touch target size is 9mm
Minimum touch target size is 7mm
Minimum spacing betweenelements is 2mm
Visual size is 60-100% of the touchtarget size
WINDOWS PHONE 7 UX - METRO 42
![Page 35: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/35.jpg)
Common controls
WINDOWS PHONE 7 UX - METRO 43
![Page 36: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/36.jpg)
Application Bar + Menu
Up to 4 icons
Don’t fill all 4 slots if not needed
Swipe up the bar to bring upthe menuTrigger
WINDOWS PHONE 7 UX - METRO 44
![Page 37: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/37.jpg)
Pivots (Tabs)
Separate multiple tasks
Tap or flick tabs to change them
Trigger
WINDOWS PHONE 7 UX - METRO 45
![Page 38: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/38.jpg)
Panoramas (Hubs)
Rich experience
Aggregate multiple sources
WINDOWS PHONE 7 UX - METRO 46
![Page 39: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/39.jpg)
Hubs vs. Single-Page Apps
WINDOWS PHONE 7 UX - METRO 47
![Page 40: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/40.jpg)
Iconography
Icons in the application menu should be consistent
Test icons with users(pay attention to context)
WINDOWS PHONE 7 UX - METRO 48
![Page 41: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/41.jpg)
Summary
Metro
Personas
Red Threads
Focus on designing the experience
Make applications delightful and easy to use
WINDOWS PHONE 7 UX - METRO 50
![Page 42: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/42.jpg)
V1 54
EXPRESSION BLEND
Design tool for XAML platform
(for now)
WYSIWYG
Designer friendly
WINDOWS PHONE 7 UX - METRO
![Page 43: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/43.jpg)
V1 55
EXPRESSION BLENDSKETCHFLOW
Prototyping for XAML applications
wp7sketchflow.codeplex.com/
WINDOWS PHONE 7 UX - METRO
![Page 44: WIndows Phone 7 UX](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c8f3ce4a7959bc328b45ed/html5/thumbnails/44.jpg)
V1 56WINDOWS PHONE 7 UX - METRO
ResourcesUser Experience Design Guidelines for Windows PhoneMSDN http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx
User Experience and User InterfaceAppHub http://create.msdn.com/en-US/education/basics/ux_ui
Windows Phone Expression Blend and SketchFlow TutorialsMicrosoft .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
IconsTemplarian http://templarian.com/2011/08/14/wp_icons_up_to_105/
Windows Phone 7 Design TemplatesPhotoshop http://wp7designtemplates.codeplex.com/