windows phone 7 ux

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/

V1 57

THANK YOUShane MorrisAutomatic Studio

shane@automaticstudio.com.auTwitter/shanemo

WINDOWS PHONE 7 UX - METRO