Five ways to improve the Windows Phone 7 UIs

When I started working with Windows Phone 7 (WP7) applications, I had very little experience with mobile applications or Silverlight; as a result, it has been quite a learning curve for me on many fronts.

UI design has been one of my biggest struggles with WP7 development. I know a lot about the principles of usability, but my UIs have always been utilitarian and rather bland; I count on working with a good designer to pep them up, and I put things in a way that makes it easy for the designer to do her job. So it has been no surprise to me that I’ve learned quite a lot about writing WP7 apps from the UI angle. Here are five things I’ve learned that may help you write WP7 apps.

1: Use the Panorama control judiciously

The Panorama control is one of the most definitively Windows Phone experience items available. When people think of WP7, the Panorama control, along with the Live Titles, come to mind.

In case you are not familiar with the Panorama control, it allows a page to contain a group of sub-pages that appear to be a wide, horizontal area that the user pans across to see one section at a time. Panorama is great for two to four pages of related items, but beyond that, it starts to get ugly, and makes life hard for the user who has to pan through what feels like endless pages to get where they want to go. Plus, it is difficult for the user to remember where to go or what his options are, since only one page title is visible at a time.

2: ListBox controls need more than just text

When I created my Local Crime Rate application, I made the mistake of putting the state and the city selection into ListBox controls with nothing more than plain text. Scrolling through endless lists of data with no way to quickly get where you want stinks. Even worse, it was entirely possible that the user wouldn’t even notice the lists were scrollable. I now believe that a ListBox control should have the following characteristics for the best design:

• A way to quickly get around, like the way the “People” application does, or to have letters/number/group selectors at the top of the page.
• It should fill the bulk of the screen, use large fonts, and have visual cues for each item.
• Selecting an item should take you to the previous screen or to a details screen.
• It should be obvious from the initial load that there is additional data below; use an arrow indicator, “more” textual cues, load so that half of the last item is cut off, add scroll bars… anything to make it clear.

3: Forget the modal dialogs

I struggled with a good way to recreate the modal dialogs that my desktop apps relied upon for such a long time. Eventually I came to terms with the fact that I wasn’t going to get them. Sure, there are third-party controls that replicate them, but the dialogs are not nearly as necessary as I had originally thought. Many of the notifications that I wanted dialogs for could be handled through “toast” (such as feedback on asynchronous operations like file transfers). In other cases like input validation, it was better to have a feedback message next to the control that would expand when the validation failed. The WP7 team took a lot of cues from the Web, and this is one place that it really shows.

4: The emulator’s size (and Visual Studio’s Design Mode) is deceptive

Things that look way too big on the emulator and in Visual Studio turn out to be just about the right size; items that look a little too big are actually too small. It isn’t that the emulator’s proportions are all wrong, it’s that using the tools on any modern monitor makes everything much too big. This is why it’s important to have a real device involved in the testing process.

Also, you’ll find that control schemes that worked well with the mouse don’t do well with fingers, and that things you hate working with via the mouse turn out to be great with an actual device. The “flick” gesture is a great example; it’s miserable to “flick” through long lists with the mouse, but it’s painless on a phone.

5: Forget the “exit” button

Microsoft has made it virtually impossible to write an “exit” button for your application; this is part of WP7’s UI trying to be a more Web-like experience. So instead of trying to beat the dead horse of wanting an “exit” function, learn about how to leverage tombstoning for a great app experience.