Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User Experience Best Practices for Building Applications on Windows Phone 7

User Experience Best Practices for Building Applications on Windows Phone 7

The WP7 Presentation I used at MSDays 2011 Bulgaria.


Daron Yondem

March 20, 2011


  1. None
  2. None
  3. User Experience Best Practices for Building Applications on Windows Phone

    7 Daron Yöndem Microsoft Regional Director | Silverlight MVP
  4. None
  5. A different kind of phone

  6. None
  7. A different kind of phone

  8. Integrated experiences Focus on the individual and their content Help

    organize information from multiple sources
  9. Metro

  10. None
  11. None
  12. None
  13. First design, then code! Sketch it!

  14. Find your persona! Anna Part time PR professional and busy

    mom “My life is a balancing act between work, family, friends, and my own personal needs.” Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.”
  15. None
  16. Weather Personal Weather surfaced on the live tile in Start

    Relevant Weather updated based on your location Connected Weather for your contacts
  17. None
  18. None
  19. Hubs Rich experience Aggregate multiple sources

  20. Sailing hub

  21. Personal Finances hub

  22. Pivots

  23. Pivots and panoramas Panoramas are: Expansive Explorative Dynamic Examples: games,

    photos Pivots are: Efficient Focused Habitual Examples: email, calendar
  24. DEMO TIME!

  25. Avoid common panorama mistakes my crowded panorama Lorem ipsum dolor

    sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumea commodo consequat. Duis aute irure dolor - Content overflow - Using app bars - Background too noisy - Multiple scrolling incorrect
  26. Correct panorama usage Entice the user to explore, provide a

    small set of tasks at this level that are fresh, dynamic and compelling. Exploration turns to focused task.
  27. Not every app needs to have panorama or pivot!

  28. Keep in motion! Do no overuse it!

  29. DEMO TIME! Move move move!

  30. Things to remember! Tips / Trick

  31. Start Tile Design correct incorrect AVOID • 3D type •

    Gradients • Rounded corners • Black on white color ways • Using non descript icons • Make sure logo is readable on light and dark themes Your ignored app Fits within Metro design principles with branding.
  32. Live tiles on Start

  33. Buttons hidden under keyboard correct incorrect Login here AVOID Putting

    buttons anywhere that when the SIP is activated will hide the button to complete the task.
  34. Create a splash screen correct incorrect No indication to user

    what is happening. Login here
  35. Layout misalignment correct incorrect Login here Metro is a grid

    system - all onscreen font has to adhere to a 24 pixel left screen margin that is left justified. This is for pivots and panoramas Templates are provided to illustrate various examples of list items that can be used. Pivots content is optimized to screen size and should be vertically aligned.
  36. Design for theme color changes correct incorrect Login here Be

    sure to test that your design and color used will work both in the core device theme colors of light and dark. Make sure your controls and content are respecting the core theme color. If your app has a strong dependency on a color palette, lock it to a specific color. white When the core device theme color is changed from dark to light certain colors will no longer be readable. Is readable on a dark background
  37. Design for touch correct incorrect Login here Minimum font size

    is 15 pt. Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size Provide feedback when an item is touched. hte When the core device thme color is changed from dak to light certain colors will no longer be readable. Is readable on a dark background 1) Sheraton New York Hotel 2) Sheraton Manhattan Hotel 3) Sheraton Tribeca
  38. Embedded web content behaving as web browser content incorrect Use

    our Silverlight controls and refrain from using embedded web content. If you must embed web content in your application: 1) Do not enable pinching, zooming, or panning. 2) Ensure that it is completely readable.
  39. Misuse of common controls incorrect Use the WP7 common controls

    appropriately. sliders, toggles or map controls under panoramas or pivots –as they both need the same gestures to work.
  40. No home buttons Creating new mechanisms for moving through the

    UI will interfere with the back stack. incorrect
  41. None
  42. THANKS! Daron Yöndem http://daron.yondem.com daron@yondem.com