Windows Phone 7 App User Experience Checklist

Here’s a list of things (non-exhaustive) to check when you are doing your wp7 apps (Also serve as a reminder for myself for future apps). I will also talk about if you are using phonegap for wp7 app development, what are some of the things to look out for.

  1. Element Alignment and Spacing
    General Principles of alignment applies. For the case of double columns, both column should be properly aligned both on the horizontally and vertically (the gap between rows of elements should be equal)
     
  2. Control Feedback on Tap
    Controls should use the Windows Phone tilt effect. No background, foreground, or border color changes are permitted.
    Note: If you are using a 3rd party framework to help you build wp7 apps e.g. Phonegap, there might be a problem with this point since you can’t really do tilt effect using Javascript (at least not that I know of) but from my experience, they probably wont enforce this very harshly. That said, wp7 apps built using silverlight instead of phonegap definitely have better user experience.
  3. List adorners (or Tableview Accessory if you are more familiar iOS terms)
    There should be no  list adorners. I think microsoft wants to make it such that it looked different from iOS.
  4. Pivot/Panorama Control
    1. There should be at least 2 pages in them for pivot and maximum of 5 panes for panorama.
      If there is more than 5 panes for panorama the performance will be significantly affected. E.g. when you transit from a detail page back to the main panorama page, you will notice that it take a while to render the screen.
    2. Toggle switches, Sliders, Map controls (unless they are static i.e. pinch/zoom/pan are disabled etc), Browser controls (again unless they are static) are not permitted in pivots/panorama
    3. Master-detail view
      The pivot control should never be used as a master-detail, filter-results view or as steps in a wizard. Changing controls/performing actions on a pivot page should not affect the other pages in the pivot.
    4. Application bar
      Common actions such as refresh, search, and settings should be placed in an application bar. Floating button on the panorama should be avoided.
    5. Scrollable Panes
      Panorama panes should either scroll vertically or horizontally. Not both.
  5. Gesture Competition
    Controls that provide a horizontally scrollable area or take a horizontal swipe gesture are not permitted in the pivot/panorama control as the horizontal swipe gesture is reserved for changing pivot pages/Panorama
  6. Buttons
    As far as possible, buttons should be placed in the application bar. A good gauge when to do this is to see other wp7 apps to decide when it should be placed in the application bar, when it should be just a button on a canvas.
  7. Close and Back buttons
    Windows Phone app should not have close buttons (I think you can’t programmatically close the app also, unless it crashed).
    Similar to the Android case, there shouldn’t be a Back button should on the screen.
    If you are using phonegap + jquery mobile or if you are a season iPhone developer, this is something to take note!
  8. Start Tiles
    Start tiles should not have rounded corners or 3d look.
  9. Color theme
    Since windows phone support both dark and light theme. You have to make sure that the app works well with both themes. Take special note to cases where you “hardcode” the color of text but keep the background as the default. It is very likely that if you set the color of text to be white, you can’t see it on light theme.
  10. Does the app work on Airplane mode?
    The app should not crash when no internet connectivity is available.
  11. Test app using Visual Studio’s Marketplace Test Kit!
    Under the menubar, Project -> Open Marketplace Test Kit and follow through the instructions

Adapted from the Windows Phone Depth Partner Support User Experience Bar document

First look at Win8 Consumer Preview

Had a chance to find a laptop to install the win8 consumer preview and try out visual studio 2011 beta

Perhaps the most prominent new addition is the metro UI

The user interface is similar to that of Windows Phone 7.

As you can see from the screenshot above, the option to have the good old desktop is still available.

The desktop is similar to windows 7 desktop. However, there’s no start menu and software/apps can be executed from the desktop shortcuts or from the metro UI dashboard.

Together with the metro UI, there is now metro-based app on top of the usual windows software. The old software which worked on win7 still work perfectly on win 8 but you don’t get the metro UI.

Like the Mac App Store, there’s also a windows store for windows 8 apps. But unlike the Mac App Store which provides a centralized place  download Mac Apps, this store is only for metro apps only. There’s not much apps on the consumer preview store yet so can’t say much but all the apps are free for now before win8 launch officially but it seems like quite a big market considering there are much more PC users.

Navigability: Windows8 is a hybrid OS that’s meant to be used on both tablet and desktop so the modes of control is using touch based or mouse/keyboard. I don’t have a tablet which is finger-touch capable so I’m using the mouse to do more of the controls. So far, it feels rather unnatural to navigate in this manner.

Live Tiles: But one thing I like is the live tiles UI you see on wp7, where each app is given a tile and contents can be updated directly on the tile without opening the app.

Speed: Speed wise, it’s rather smooth on my elitebook 2730p.