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
Tweet

More Decks by Daron Yondem

Other Decks in Technology

Transcript

  1. View Slide

  2. View Slide

  3. User Experience Best Practices
    for Building Applications on
    Windows Phone 7
    Daron Yöndem
    Microsoft Regional Director | Silverlight MVP

    View Slide

  4. View Slide

  5. A different kind of phone

    View Slide

  6. View Slide

  7. A different kind of phone

    View Slide

  8. Integrated experiences
    Focus on the individual and their content
    Help organize information from multiple sources

    View Slide

  9. Metro

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. First design, then code!
    Sketch it!

    View Slide

  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.”

    View Slide

  15. View Slide

  16. Weather
    Personal
    Weather surfaced on the live tile in Start
    Relevant
    Weather updated based on your location
    Connected
    Weather for your contacts

    View Slide

  17. View Slide

  18. View Slide

  19. Hubs
    Rich experience
    Aggregate multiple sources

    View Slide

  20. Sailing hub

    View Slide

  21. Personal Finances hub

    View Slide

  22. Pivots

    View Slide

  23. Pivots and panoramas
    Panoramas are:
    Expansive
    Explorative
    Dynamic
    Examples: games,
    photos
    Pivots are:
    Efficient
    Focused
    Habitual
    Examples: email,
    calendar

    View Slide

  24. DEMO TIME!

    View Slide

  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

    View Slide

  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.

    View Slide

  27. Not every app needs to
    have panorama or pivot!

    View Slide

  28. Keep in motion!
    Do no overuse it!

    View Slide

  29. DEMO TIME!
    Move move move!

    View Slide

  30. Things to remember!
    Tips / Trick

    View Slide

  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.

    View Slide

  32. Live tiles on Start

    View Slide

  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.

    View Slide

  34. Create a splash screen
    correct incorrect
    No indication to user
    what is happening.
    Login here

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  40. No home buttons
    Creating new mechanisms for
    moving through the UI will
    interfere with the back stack.
    incorrect

    View Slide

  41. View Slide

  42. THANKS!
    Daron Yöndem
    http://daron.yondem.com
    [email protected]

    View Slide