Windows Phone UX - a 101 @ BizSpark
•Télécharger en tant que KEY, PDF•
3 j'aime•754 vues
Designing for Windows Phone and other touchscreen devices - A presentation given at the recent BizSpark Camp event at Microsoft HQ in London on design and UX considerations for the upcoming Windows Phone
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Windows Phone UX - a 101 @ BizSpark
Similaire à Windows Phone UX - a 101 @ BizSpark (20)
Dernier
Dernier (20)
Windows Phone UX - a 101 @ BizSpark
- 1. Mobile User Experience 101 designing for Windows Phone and other touchscreen devices BizSpark 2010 - 22.06.2010 Antony, Co-founder, Ribot
- 3. This is the most important session today
- 4. a little bit about me
- 5. Analogue to Digital to Human INTERACTIONS photo source: http://www.flickr.com/photos/josefstuefer/18697485/
- 6. Who wants a challenge? MOBILE UX DESIGNERS! Pressure Accelerometer Time of day Gesture Microphone Haptics ... photo source: http://www.flickr.com/photos/dunechaser/174945526
- 7. Constraints
- 8. Constraints of mobile BUT WHICH IS MOST IMPORTANT? form factor battery network latency context input mechanism memory computational power
- 12. PART 2 Welcome to Windows Phone 7
- 13. UX comes first OS Built from scratch Discoverability fixed Quality over quantity
- 14. Meet Metro the design language
- 16. Content becomes the UI
- 18. How to compliment Metro?
- 19. PART 3 Metro design principles
- 20. Principle 1: Clean, light, open, fast
- 21. Principle 2: Celebrate typography
- 22. Principle 3: Alive in Motion
- 23. Principle 4: Content not chrome
- 24. Principle 5: Authentically digital
- 25. PART 4 More User Experience Details...
- 26. The Metro UX Focus on the individual + their tasks Help organise info and apps
- 27. The ‘Start’ experience Text Glance and go Get me there
- 28. Break away from the frame Panoramic experiences (aka Hubs)
- 29. Who is our audience? “Life maximisers” In their 30s Technology savvy Time poor Friends, family, work life balance
- 30. How do you feel today?
- 31. PART 5 Lets go to a higher level...
- 33. Personal
- 34. Relevant
- 35. Connected
- 37. PART 6 A successful app will...
- 38. Colour
- 39. Typography
- 40. Motion
- 41. Easy to use
- 42. PART 7 Hardware
- 44. A minimum of 3 hardware buttons
- 45. Design for single-hand usage whenever possible
- 46. Don’t get creative with the back button :)
- 48. human behaviours understand the behaviours what finger do we use to press the doorbell with? http://www.flickr.com/photos/tscarlisle/107776922/
- 49. (changing) human behaviours understand the behaviours what finger does the younger market press the doorbell with? http://www.flickr.com/photos/phototropism/62931265/
- 50. Time for a snack... DATA-SNACKING small snippets of info 30-60 seconds simple, but repetitive regular
- 51. Re-use learnt behaviours Re-use interactions 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 just a phone WAKE UP CANON & NIKON Source: http://www.flickr.com/cameras/
- 53. Mobile is not about making things smaller Miniaturisation vs Mobilisation http://mobilewebbook.com http://www.flickr.com/photos/tridi_animeitor/2224661744/
- 54. Simpler interfaces are better Minimise the subconscious questions Balance efficiency, effectiveness & satisfaction Improve glance-ability photo source: http://www.flickr.com/photos/lagiuspo/92136687/
- 55. Simpler != dumb JUST REMEMBER 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 about your 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. PART 9 The UI
- 58. Touch targets
- 59. Gestures
- 60. Application Bar + Menu control
- 61. Tabs control
- 62. Hubs control
- 63. Hubs control
- 65. PART 10 A few statistics...
- 66. 1 in 7 phones 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
- 70. Make the most of your platform
- 71. The little things count Polish makes the UX and app stand out photo source: http://www.flickr.com/photos/tom_lin/3186488124/
- 72. Passion “I haven’t worked in 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/
Notes de l'éditeur
- hello a mix of general mobile UX and Windows Phone UX
- it’s the UX that makes the platform and your app stand out Golden nuggets Quite a simple and straightforward session
- 7 years in mobile designer/developer/entrepreneur push ui boundaries, ideas lab for mobile user interfaces
- Physical interactions e.g. Touchscreen, haptics, etc Tangible era, 20 years
- So many things to consider and more so in the future...
- Constraints make mobile interesting. A challenge. If you're not aware of the constraints, the UX will be poor.
- Note: Constraints make mobile interesting. A challenge. If you're not aware of the constraints, the UX will be poor.
- Efficiency, relevancy,
- fingernail interaction rather than a finger interaction Broken app store (discoverability) Poor UX Many good lessons learnt
- Past experience with Zune HD... lovely. Just make it a telephone
- wohoo!
- Windows phone 7 is different... raising the bar...
- Modern, clean, fast, in-motion Forms the foundation of a set of principles
- Highly glanceable Allows users to find their way Simple, elegant, powerful, universal Not overpowering
- Chrome-less experiences You should assume that everything is touchable
- this is metro
- Only what you need Build apps that utilise existing behaviours and compliment the native os
- 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
- Beautiful, not just legible Weight, balance and scale
- 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  
- direct interaction with the content content is the UI reduce visuals that are not content  
- Design for the Form Factor Don’t Try to be What it’s NOT Be Direct Simple and modern
- via live tiles simple search
- common behaviours glance search
- Resonate with Anna and Miles
- What emotion do you want to evoke? Does my app make me smile?
- Higher level principles by which the Windows Phone OS is built upon. Known as Red Threads
- 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
- 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
- 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
- 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,
- 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.
- Own customer font designed for the device... Weight, size, scale...
- Very easy to overdo Helps narrative. Where from. Where To. The more you use it the less special it becomes
- Familiar = easy to use Consistent and predictable ux  
- Microsoft are taking control of the hardware Good idea of the level of performance
- Start Search Back Camera Volume Power
- understand your users
- understand your users
- Like a large bag of chocolate buttons single early failure - non returning user Glance and Go
- Motorola Exit, Quit,
- Swiss army knife. Technological advancement and usability pink: iPhone 3GS, green: iPhone 3G, the rest: single-function devices aka cameras blue: Nikon D90
- Miniaturisation (shrinking things down) vs Mobilisation (process of selecting the features most important to the user given the mobile context)
- 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
- dig as much as possible don’t make assumptions Blackberry’s biggest market is not enterprise It’s games. Why. BBM and qwerty keyboards
- 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;
- Tap, dbl tap, touch and hold, pan, flick, pinch and stretch consistency is key &#xA0;
- Up to 4 icons Don't feel that you need to fill all 4 slots Swipe up bar to bring up menu &#xA0;
- Separates multiple tasks Tap or Flick to change
- should be rich, immersive, aggregate from multiple sources example 1: people &#xA0;
- rich, immersive, aggregate from multiple sources example 2: Office Hub &#xA0;
- 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;
- tell me more....
- UX is an art and is hard minimising the number of subconscious questions the user needs to make
- minimising the number of subconscious questions the user needs to make