App structure and navigation models for Windows Phone

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

All apps—from banking to gaming—exist to accomplish two things: present info and collect input.

In the case of a banking app, the user has info presented to them, for instance their checking account balance. The input that the app gathers from the user might be something like a balance transfer from one account to another. By comparison, in a racing game, the user is presented with a car and the road to drive on. The input from the user is used to steer the car.

To achieve a usable interaction model, you should spend the most time up front with the design of your info and how it’s navigated. The navigation model determines what’s on each screen and how you get from one screen to another. Implementing Windows Phone app design describes how you sketch out a map of screens and the connections they have from one to another. All apps should follow an interaction model that allows the user to have the best experience.

This section outlines the main categories of app interaction models that you’re likely to encounter in your Windows Phone app design. These styles dictate how info is presented and retrieved, and how the user navigates through the different areas of your app. Each style meets a particular need to make the user interaction experience as enjoyable as possible. Some styles can be combined with others; where this is the case, we’ll point it out and provide examples.

There are many types of high-level app interaction models that you can choose from, so you might want to read the overview of each to get a feel for which you’re most likely to need.

App view management

If you have a lot of screens that the user will move back and forth through, then you need some way of presenting the UI in an organized way. The more views you’ll be presenting to the user, the more critical this app view management becomes. The first few topics in this section present models for interaction for the more complex scenarios. Subsequent topics cover the models appropriate for the scenarios that require simpler single-view apps or simple lists with details discovery.

The first thing you need to do is to determine what type of app style you’re targeting. For example, if you’re developing a simple flash card app for someone to learn the 20 most common signs in American Sign Language, you’d need to read only Uniform page shuffle for Windows Phone.

The app styles

What follows are each of the interaction types. Some are used as overall app navigation designs, so with these you still need lower-level interaction design for the UI layout. As already mentioned, some of the types can be used by themselves and you’ll have a complete app. You can also combine several of these types to create your app. For example, you can choose a style for the high-level overall app navigation and then, once in a subarea of the UI, you can choose another style for the UI presentation from there.