windows phone 7 ux
DESCRIPTION
Slides from Windows Phone 7 Workshop in Melbourne, October 2011TRANSCRIPT
V1 1
Shane MorrisAutomatic Studio
WINDOWS PHONE 7 USER EXPERIENCE
V1 2WINDOWS PHONE 7 UX - METRO
WINDOWS PHONE 7 USER EXPERIENCEAttributes
Elements
V1 3WINDOWS PHONE 7 UX - METRO
Thanks MIX10!http://channel9.msdn.com/Events/MIX/MIX10/CL14
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
Metro
WINDOWS PHONE 7 UX - METRO 9
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
Metro Principles
WINDOWS PHONE 7 UX - METRO 15
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
Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale
WINDOWS PHONE 7 UX - METRO 17
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
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
Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct
WINDOWS PHONE 7 UX - METRO 20
Principles
Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically 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 experienceBuild delightful experiencesBuild experiences that are easy to use
Michael Smuga – Studio Director
WINDOWS PHONE 7 UX - METRO 27
RED THREADS.
THESE ARETHE PRINCIPLESTHAT GUIDE THE EXPERIENCES
WINDOWS PHONE 7 UX - METRO 29
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
Build delightful experience
Be inspired by Metro
…but look for balance between the Metroprinciples and your own style
WINDOWS PHONE 7 UX - METRO 31
WINDOWS PHONE 7 UX - METRO 32
Color
Use color to delight the userUse color to personalize experienceUse 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
Gestures
WINDOWS PHONE 7 UX - METRO 41
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
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 upthe menuTrigger
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
Panoramas (Hubs)
Rich experience
Aggregate multiple sources
WINDOWS PHONE 7 UX - METRO 46
Hubs vs. Single-Page Apps
WINDOWS PHONE 7 UX - METRO 47
Iconography
Icons in the application menu should be consistent
Test icons with users(pay attention to context)
WINDOWS PHONE 7 UX - METRO 48
Summary
Metro
Personas
Red Threads
Focus on designing the experience
Make applications delightful and easy to use
WINDOWS PHONE 7 UX - METRO 50
V1 54
EXPRESSION BLEND
Design tool for XAML platform
(for now)
WYSIWYG
Designer friendly
WINDOWS PHONE 7 UX - METRO
V1 55
EXPRESSION BLENDSKETCHFLOW
Prototyping for XAML applications
wp7sketchflow.codeplex.com/
WINDOWS PHONE 7 UX - METRO
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/
