Windows Phone UX - a 101 @ BizSpark

2,266 views

Published on

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

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,266
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
56
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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
     
  • Tap, dbl tap, touch and hold, pan, flick, pinch and stretch
    consistency is key
     
  • Up to 4 icons
    Don't feel that you need to fill all 4 slots
    Swipe up bar to bring up menu
     
  • Separates multiple tasks
    Tap or Flick to change
  • should be rich, immersive, aggregate from multiple sources

    example 1: people
     
  • rich, immersive, aggregate from multiple sources

    example 2: Office Hub
     
  • 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
     

  • 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

  • Windows Phone UX - a 101 @ BizSpark

    1. 1. Mobile User Experience 101 designing for Windows Phone and other touchscreen devices BizSpark 2010 - 22.06.2010 Antony, Co-founder, Ribot
    2. 2. PART 1 Introduction
    3. 3. This is the most important session today
    4. 4. a little bit about me
    5. 5. Analogue to Digital to Human INTERACTIONS photo source: http://www.flickr.com/photos/josefstuefer/18697485/
    6. 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. 7. Constraints
    8. 8. Constraints of mobile BUT WHICH IS MOST IMPORTANT? form factor battery network latency context input mechanism memory computational power
    9. 9. Context of use
    10. 10. Windows mobile was important
    11. 11. PART 2 Welcome to Windows Phone 7
    12. 12. UX comes first OS Built from scratch Discoverability fixed Quality over quantity
    13. 13. Meet Metro the design language
    14. 14. Inspired by transportation graphics
    15. 15. Content becomes the UI
    16. 16. How to compliment Metro?
    17. 17. PART 3 Metro design principles
    18. 18. Principle 1: Clean, light, open, fast
    19. 19. Principle 2: Celebrate typography
    20. 20. Principle 3: Alive in Motion
    21. 21. Principle 4: Content not chrome
    22. 22. Principle 5: Authentically digital
    23. 23. PART 4 More User Experience Details...
    24. 24. The Metro UX Focus on the individual + their tasks Help organise info and apps
    25. 25. The ‘Start’ experience Text Glance and go Get me there
    26. 26. Break away from the frame Panoramic experiences (aka Hubs)
    27. 27. Who is our audience? “Life maximisers” In their 30s Technology savvy Time poor Friends, family, work life balance
    28. 28. How do you feel today?
    29. 29. PART 5 Lets go to a higher level...
    30. 30. Additional guideance Personal Relevant Connected
    31. 31. Personal
    32. 32. Relevant
    33. 33. Connected
    34. 34. PART 6 A successful app will...
    35. 35. Colour
    36. 36. Typography
    37. 37. Motion
    38. 38. Easy to use
    39. 39. PART 7 Hardware
    40. 40. Standardized hardware
    41. 41. A minimum of 3 hardware buttons
    42. 42. Design for single-hand usage whenever possible
    43. 43. Don’t get creative with the back button :)
    44. 44. PART 8 Behaviours
    45. 45. human behaviours understand the behaviours what finger do we use to press the doorbell with? http://www.flickr.com/photos/tscarlisle/107776922/
    46. 46. (changing) human behaviours understand the behaviours what finger does the younger market press the doorbell with? http://www.flickr.com/photos/phototropism/62931265/
    47. 47. Time for a snack... DATA-SNACKING small snippets of info 30-60 seconds simple, but repetitive regular
    48. 48. 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/
    49. 49. More than just a phone WAKE UP CANON & NIKON Source: http://www.flickr.com/cameras/
    50. 50. Mobile is not about making things smaller Miniaturisation vs Mobilisation http://mobilewebbook.com http://www.flickr.com/photos/tridi_animeitor/2224661744/
    51. 51. Simpler interfaces are better Minimise the subconscious questions Balance efficiency, effectiveness & satisfaction Improve glance-ability photo source: http://www.flickr.com/photos/lagiuspo/92136687/
    52. 52. 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/
    53. 53. 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/
    54. 54. PART 9 The UI
    55. 55. Touch targets
    56. 56. Gestures
    57. 57. Application Bar + Menu control
    58. 58. Tabs control
    59. 59. Hubs control
    60. 60. Hubs control
    61. 61. Hubs vs single-page apps
    62. 62. PART 10 A few statistics...
    63. 63. 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/
    64. 64. 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/
    65. 65. 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
    66. 66. PART 11 Wrapping up
    67. 67. Make the most of your platform
    68. 68. The little things count Polish makes the UX and app stand out photo source: http://www.flickr.com/photos/tom_lin/3186488124/
    69. 69. Passion “I haven’t worked in 3 years” Be curious. Question everything photo source: http://www.flickr.com/photos/taraethers/
    70. 70. thank you @ribot http://www.flickr.com/photos/ronlayters/2402199783/

    ×