Downloaded 56 times
Uploaded byAntony Ribot
Windows Phone UX - a 101 @ BizSpark
The document discusses principles and strategies for designing mobile user experiences, particularly for Windows Phone and other touchscreen devices. It emphasizes the importance of clean, efficient interfaces, understanding user behaviors, and designing inclusively to accommodate a diverse audience. The content also highlights the significance of hardware considerations and the impact of usability on customer satisfaction.
More Related Content
Similar to Windows Phone UX - a 101 @ BizSpark
Windows Phone UX - a 101 @ BizSpark
- 1. Mobile User Experience101 designing for Windows Phone and other touchscreen devices BizSpark 2010 - 22.06.2010 Antony, Co-founder, Ribot
- 2.
- 3. This is themost important session today
- 4. a little bitabout me
- 5. Analogue to Digitalto Human INTERACTIONS photo source: http://www.flickr.com/photos/josefstuefer/18697485/
- 6. Who wants achallenge? MOBILE UX DESIGNERS! Pressure Accelerometer Time of day Gesture Microphone Haptics ... photo source: http://www.flickr.com/photos/dunechaser/174945526
- 7.
- 8. Constraints of mobile BUTWHICH IS MOST IMPORTANT? form factor battery network latency context input mechanism memory computational power
- 9.
- 10.
- 12. PART 2 Welcome toWindows Phone 7
- 13. UX comes first OSBuilt from scratch Discoverability fixed Quality over quantity
- 14. Meet Metro the designlanguage
- 15.
- 16.
- 18. How to complimentMetro?
- 19. PART 3 Metro designprinciples
- 20. Principle 1: Clean, light,open, fast
- 21. Principle 2: Celebratetypography
- 22. Principle 3: Alivein Motion
- 23. Principle 4: Contentnot chrome
- 24. Principle 5: Authenticallydigital
- 25. PART 4 More UserExperience Details...
- 26. The Metro UX Focuson the individual + their tasks Help organise info and apps
- 27. The ‘Start’ experience Text Glance and go Get me there
- 28. Break away fromthe frame Panoramic experiences (aka Hubs)
- 29. Who is ouraudience? “Life maximisers” In their 30s Technology savvy Time poor Friends, family, work life balance
- 30. How do youfeel today?
- 31. PART 5 Lets goto a higher level...
- 32.
- 33.
- 34.
- 35.
- 37. PART 6 A successfulapp will...
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. A minimum of3 hardware buttons
- 45. Design for single-handusage whenever possible
- 46. Don’t get creativewith the back button :)
- 47.
- 48. human behaviours understand thebehaviours what finger do we use to press the doorbell with? http://www.flickr.com/photos/tscarlisle/107776922/
- 49. (changing) human behaviours understandthe behaviours what finger does the younger market press the doorbell with? http://www.flickr.com/photos/phototropism/62931265/
- 50. Time for asnack... DATA-SNACKING small snippets of info 30-60 seconds simple, but repetitive regular
- 51. Re-use learnt behaviours Re-useinteractions inherent in the device Minimise the number of surprises soft key positions colour menu navigation tone of voice http://www.flickr.com/photos/8586443@N03/1491516038/
- 52. More than justa phone WAKE UP CANON & NIKON Source: http://www.flickr.com/cameras/
- 53. Mobile is notabout making things smaller Miniaturisation vs Mobilisation http://mobilewebbook.com http://www.flickr.com/photos/tridi_animeitor/2224661744/
- 54. Simpler interfaces arebetter Minimise the subconscious questions Balance efficiency, effectiveness & satisfaction Improve glance-ability photo source: http://www.flickr.com/photos/lagiuspo/92136687/
- 55. Simpler != dumb JUSTREMEMBER TO FOCUS ON THE CORE FUNCTION an eReader app should focus on the ‘reading experience’ photo source: http://www.flickr.com/photos/lagiuspo/92136687/
- 56. Think twice aboutyour audience IT PAYS TO DO YOUR HOMEWORK Analytics Network provider Device platforms Devices Firmware versions etc... photo source: http://www.flickr.com/photos/thomashawk/155918164/
- 57.
- 58.
- 59.
- 60. Application Bar + Menucontrol
- 61.
- 62.
- 63.
- 64.
- 65. PART 10 A fewstatistics...
- 66. 1 in 7phones are returned BACK TO THE SUPPLIER Source: 2005 Which report (UK study) photo source: http://www.flickr.com/photos/andricongirl/4567650298/
- 67. Source: http://www.wdsglobal.com/news/whitepapers/20060717/MediaBulletinNFF.pdf 63%of returned phones have no hardware/software faults SO, WHAT’S THE PROBLEM? Handset configuration / settings issue Struggling with functionality / usability of device Device did not meet expectations photo source: http://www.flickr.com/photos/tom_lin/3208454911/
- 68. Source: http://www.btplc.com/inclusion/Usefuldownloads/index.htm#designs Massive market for usable phones & apps YOU NEED TO DESIGN ‘INCLUSIVELY’ By 2020, over half of the UK population will be > 65 1 in 3 Europeans can benefit from an inclusive approach 65% of americans have lost interest due to complexity photo source: http://www.elmbrook.org/UserFiles/Image/Volunteer%20Opportunities/Elderly%20Hands.jpg
- 69.
- 70. Make the mostof your platform
- 71. The little thingscount Polish makes the UX and app stand out photo source: http://www.flickr.com/photos/tom_lin/3186488124/
- 72. Passion “I haven’t workedin 3 years” Be curious. Question everything photo source: http://www.flickr.com/photos/taraethers/
- 73. thank you @ribot http://www.flickr.com/photos/ronlayters/2402199783/
Editor's Notes
- #2 hello a mix of general mobile UX and Windows Phone UX
- #4 it’s the UX that makes the platform and your app stand out Golden nuggets Quite a simple and straightforward session
- #5 7 years in mobile designer/developer/entrepreneur push ui boundaries, ideas lab for mobile user interfaces
- #6 Physical interactions e.g. Touchscreen, haptics, etc Tangible era, 20 years
- #7 So many things to consider and more so in the future...
- #8 Constraints make mobile interesting. A challenge. If you're not aware of the constraints, the UX will be poor.
- #9 Note: Constraints make mobile interesting. A challenge. If you're not aware of the constraints, the UX will be poor.
- #10 Efficiency, relevancy,
- #11 fingernail interaction rather than a finger interaction Broken app store (discoverability) Poor UX Many good lessons learnt
- #12 Past experience with Zune HD... lovely. Just make it a telephone
- #13 wohoo!
- #14 Windows phone 7 is different... raising the bar...
- #15 Modern, clean, fast, in-motion Forms the foundation of a set of principles
- #16 Highly glanceable Allows users to find their way Simple, elegant, powerful, universal Not overpowering
- #17 Chrome-less experiences You should assume that everything is touchable
- #18 this is metro
- #19 Only what you need Build apps that utilise existing behaviours and compliment the native os
- #21 Focus on the primary tasks Do a lot with very little How much should you showcase to the user? - Bit of an art “delightful” use of whitespace Feels fast and responsive “fierce reduction” on unnecessary elements
- #22 Beautiful, not just legible Weight, balance and scale
- #23 feels responsive and alive give context to improve usabily where are you going and where are you coming from transition between UI is as important as the design of the UI  
- #24 direct interaction with the content content is the UI reduce visuals that are not content  
- #25 Design for the Form Factor Don’t Try to be What it’s NOT Be Direct Simple and modern
- #27 via live tiles simple search
- #28 common behaviours glance search
- #30 Resonate with Anna and Miles
- #31 What emotion do you want to evoke? Does my app make me smile?
- #33 Higher level principles by which the Windows Phone OS is built upon. Known as Red Threads
- #34 intimate. private Phones are personal. And they should be designed to be personal. There for your memories, via camera, or social networking services, SMS, or email to discover what others are doing and telling them what you're up to. These phones should be simple and intuitive. Both the hardware and software should work the way you want, not the reverse. Delightful, fun It should make you smile
- #35 Custom glance-able content via Metro UI's live tiles, and via panoramic experiences called hubs that surface information into the phone UI and don't require you to dive deeper. Unless of course you want to. Live tiles - the things that are most important to you se things that are most important to you. Task-centric, not app centric. Organize your life around the things you want to do. Contextually relevant
- #36 connected to social networking services, other online services (email/messaging, storage). Cloud service People want to be connected, to each other. Connected to all your touch points. Most people struggle to get their photos off of their devices the phone is updating itself automatically
- #37 Game Hub personal due to avatar, relevant showing your scores, connected across multiple devices e.g. Weather abilty to add to their start screen, your city,
- #39 Delight Personalise Provide heirarchy So, you can utilise native controls and metro guidlelines, but theme the controls with a colour for the panels within an app, not system-wide. Looking above, these colours relate to the system, and i think the user can control the colour generally at the settings level.
- #40 Own customer font designed for the device... Weight, size, scale...
- #41 Very easy to overdo Helps narrative. Where from. Where To. The more you use it the less special it becomes
- #42 Familiar = easy to use Consistent and predictable ux  
- #44 Microsoft are taking control of the hardware Good idea of the level of performance
- #45 Start Search Back Camera Volume Power
- #49 understand your users
- #50 understand your users
- #51 Like a large bag of chocolate buttons single early failure - non returning user Glance and Go
- #52 Motorola Exit, Quit,
- #53 Swiss army knife. Technological advancement and usability pink: iPhone 3GS, green: iPhone 3G, the rest: single-function devices aka cameras blue: Nikon D90
- #54 Miniaturisation (shrinking things down) vs Mobilisation (process of selecting the features most important to the user given the mobile context)
- #55 If you can't get it right in 2D, don't even consider going into 3D. Complexity and poor UX for the sake of an 80s buzz word.      Simpler, more usable interfaces - consider the forgotten (and rapidly growing) markets
- #57 dig as much as possible don’t make assumptions Blackberry’s biggest market is not enterprise It’s games. Why. BBM and qwerty keyboards
- #59 Rec. touch Target size is 9mm Min touch target != < 7mm 2mm min spacing Visual size is 60-100% of the target size Makes the experience more usable &#xA0;
- #60 Tap, dbl tap, touch and hold, pan, flick, pinch and stretch consistency is key &#xA0;
- #61 Up to 4 icons Don't feel that you need to fill all 4 slots Swipe up bar to bring up menu &#xA0;
- #62 Separates multiple tasks Tap or Flick to change
- #63 should be rich, immersive, aggregate from multiple sources example 1: people &#xA0;
- #64 rich, immersive, aggregate from multiple sources example 2: Office Hub &#xA0;
- #65 Can it be a simple single page app Hubs should be special Hubs should have multiple sources of information Hubs should have a maximum of 4 sections &#xA0;
- #67 tell me more....
- #72 UX is an art and is hard minimising the number of subconscious questions the user needs to make
- #73 minimising the number of subconscious questions the user needs to make