Implementing Windows Phone app design

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

This topic helps you design an app that looks and feels integrated into the Windows Phone platform. The design principles and strategies in this and other design process topics are key to making your app stand out in the growing Windows Phone Store. Following them also makes it easier to solve usability problems you may discover as you iterate. High-quality design supports a good customer experience and reviews, which are critical in distinguishing your app from the competition.

For info about brainstorming and planning, see App conceptualization for Windows Phone.

This topic contains the following sections.

• Prototype key aspects of your design
• Usability testing
• Create final mockups

Prototype key aspects of your design

Designing a prototype involves pulling together all the brainstorming you’ve done so far. In this section, you’ll learn how to sketch mockups of your app’s appearance and use them to test key aspects of your design.

Blend for Visual Studio is useful for doing rapid, realistic prototyping. With Blend, you can sketch mockups and create interactive prototypes. Interactive prototypes are helpful for areas of apps that need a custom UI, animation, or transition, to make the experience understandable to users. This interaction, often essential to the success of an app, allows users to “feel” it during usability testing. Blend also allows you to create real, working designs directly from prototypes. To read more about Blend, visit the Microsoft Expression home page.

PowerPoint Storyboarding, available with Microsoft Visual Studio 2012, is another tool that you can use for sketching. With this tool, you can build a storyboard from a collection of pre-defined storyboard shapes and capture existing user interfaces. For more info, see Storyboard a User Story or Requirement Using PowerPoint.

Sketching concepts

In this section, you’ll learn how to create mockups of your app.

The first stage of prototyping your design should start with pencil and paper, and move quickly to sketching on a PC. Sketching out an app for a mobile device is different from doing so for desktop software. Here, storyboards are less useful, since these apps have shallower navigation hierarchies and narrower scope. The challenge with mobile UI is presenting operations and data in an intuitive and dynamic way.

If your app involves expert tasks, storyboard those individually to ensure they take place in as few (and as simple) steps as possible. The following is a series of prototype sketches of a generic streaming radio app.

1. Sketch the static screens that users will see or use the most. For example, the following figure shows preliminary drawings of the streaming radio app below. You’ll see mockups of the home screen, categories, the artist info view, and a list of favorite stations.

   

   Main screens

2. If your app will show certain transitory states to the user, sketch how these will look. In the example, if you’re building a music player app, draw a view of the settings and splash screens.

   

   A few states

3. Sketch any important controls that you may customize. Think about how custom controls can be used to simplify your taxonomy of screens. This mockup shows detailed controls for playback, and a special landscape view with controls.

   

   Important controls

4. Now you can put together some of the screens as a sequence of steps to accomplish a task. Plan the steps that users will need to complete important tasks or operations. Draw in order the static screens that will be involved in each step of a task. The following figure shows a mockup that maps the flow of a search operation all the way through to the viewing of artist info.

   

   Common search task

   To accomplish this step, first you need to list all of the tasks that a user would accomplish with your app: for example, searching for a genre of music or adding a new station to your favorites list. Then draw a map for each of your identified tasks. These maps show the paths through the screens to accomplish a given task.

5. Try to sketch out the full relationship between static screens in all parts of your app. Work on making related screens look and function in a way that creates a sense of progress as the user moves through a task. The following figure shows a full information architecture map of a simple streaming radio app.

   

   Master map

   The master map is different from the task map. On the static master map, you aren’t showing the flow to accomplish a given task, but are simply showing every screen and the hierarchical relationship between them. In the preceding example, you can see that from the home screen you can get to the favorites, categories and search results screens.

   Once you’ve pinned some drawings to the wall, begin prototyping by opening a new project in Blend.

Identifying key areas to prototype or mock up

Mobile apps can be prototyped rapidly by selecting specific areas of focus. It’s not generally necessary to prototype every aspect of your app to a high level of detail. Choose what is most important or most challenging and focus your prototyping there. Typically, a designer should prioritize new technologies or functions, or anything that departs from the usual expertise of the development team.

For most apps, this means mocking up tasks or operations that present value to the user. Consider the statements of purpose you envisioned for your app. Prototype them as you imagine them happening, step by step, and note where custom controls can reduce steps or otherwise speed things up.

In general, bringing an app from the web or another platform to Windows Phone requires app screens to present fewer controls and graphics and cut clutter. It also may be necessary to distribute tasks throughout several screens in a taxonomy that makes sense, whereas on the web, controls are more likely to be nestled together in large groups. Be sure you’re aware of whether you need to scale up graphics, content, or photographs that your app will feature. Be sure to prototype with native controls, and as few WebBrowser controls as possible.

Decide ahead of time how many iterations are practical.

Deciding the level of prototype detail

To prototype rapidly and move on to building, decide which elements of your app deserve top priority as you iterate. This involves deciding how deeply you’ll prototype the following parts of your app:

• Level of Visual Detail

  If art and appearance are top priority to the stakeholders of this app, then be sure to create a highly detailed series of drawings of features, functions, screens, or states. You should also mock up custom controls and their states.

Visual detail mockups should include:

1.  Styles and Themes

2.  Splash Screen

3.  App Tile

• Level of Functional Detail

  Are functions or features the centerpiece of your app? If so, you may want to build a prototype that’s interactive and semi-functional. Start with a static screen, or group of static screens, and build interactions between them, one by one. Consider how to streamline functions and reduce controls or the necessity for input.

• Level of Content Detail

  If the stakeholders of your app are primarily concerned with presenting content, you may want to decide how to create the most accurate placeholders possible while you build your UI. If your content is text, mock up your designs with serious attention to typography and use filler text, not blocks or other abstractions, to represent where content will go.

  If your app is going to present visual media, you may want to add paper and pencil back into the prototyping process. Draw detailed sketches of your app’s content as it would look during playback, and include both landscape and portrait orientation in your drawings. Remember to consider customizing your controls or changing their layout when orientation changes.

  If you plan to localize your app, then this is where you would want to make sure to allow adequate room for languages that require it and also to prepare for globalization issues. There are other references you can read to understand localization and globalization issues.

• Level of Branding Detail

  If you’re building your app for commercial purposes and branding is managed, make comprehensive, branded visual prototypes with granular attention to detail. This ensures that your final product won’t diverge from the company’s standard colors, layouts, and logos.

Customizing with consistency

Custom visual elements can impart a quality, originality, or branding in an app. Decide ahead of time how much of your app’s visual design will be customized, and plan those elements accordingly. It can be difficult to introduce custom art and branding later in the app design process.

Some elements you should customize are themes, templates, controls, and styles.

Whenever you customize visual elements in Windows Phone, follow these guidelines:

Favor practical operation over realism

Generally speaking, apps shouldn’t have custom controls that seek to mimic real life. For example, the FM Radio feature in the Windows Phone Music + Videos hub doesn’t use a dial, knob, or series of buttons to control the choice of station. Instead, it uses a slider control to adjust the frequency, a Play/Pause button to toggle the radio on and off, and a Favorites button to save preset stations.

*FM Radio in Windows Phone OS 7.1 *

In the interest of practical use, it’s also wise to fade out or remove some or all controls, the App Bar, and the Status Bar when your app is displaying content or gameplay in full-screen mode.

Plan interaction of custom controls in groups

To achieve consistency and reliability in an app with custom controls, take care to ensure that your app contains an underlying design style where symbols, shapes, words, and colors have consistent meanings.

If you plan on presenting groups of interrelated custom controls that affect one another, take care to ensure that all possible combinations of controls make sense and operate in the intended way.

If practical, draw out possible interactions between custom controls to ensure that all the possible operations are reasonable. If some combinations force confusing scenarios upon the user, use an alternative design.

Usability testing

Now that your prototype is becoming refined, stop designing and check that it hasn’t wandered outside the parameters of Windows Phone design. Review whether your device is making full use of the platform and OS by asking the following questions.

Review questions for prototype

• Does your app design make it obvious how it employs Windows Phone hardware?

• Are your app’s tasks going to be comfortable to operate?

• Will your app present too much info or functionality? Perhaps too little info?

• Does your app allow the user to perform tasks or operations that they would find valuable?

• Are you coming from another mobile platform? Windows Phone users will expect fewer taps, clearer views, large typography, and the use of contrast and color.

• Are you using both axes of scrolling (the X and Y axes) and orientation (Portrait and Landscape)? Depending on the purpose of your app, users may expect both.

• Can fingertips easily operate controls? Is control text legible?

• Does your UI give feedback on touch and progress?

• Have you accounted for use of the hardware Back button?

• Do you use embedded web content (and the WebBrowser control) sparingly?

• Does your app fade out the Status Bar, Controls, and App Bar when in full-screen content playback?

• Do you use Pivot and Panorama controls effectively and correctly?

Testing custom UI elements

Once you have mocked up custom UI elements, be sure to test them yourself. If you’re working in Blend, you can actually verify that your controls are working in XAML, using the code that the app writes for you in the background as you design.

Consulting users

As soon as you begin prototyping, find a small group of trusted people in your app’s target audience. As soon as you are comfortable, begin showing prototypes to your trusted users. Don’t explain how they are supposed to work; instead, wait and see how easily the user understands what your app does, and how it operates.

Talk to customers early

If you are designing an app for business, be sure to test the needs and priorities of managers and non-experts in addition to your target users. For example, project management software should be useful to the people working on a project, as well as to their superiors who may want to use your app to check the progress of a project.

Create final mockups

By this point in the design process, your app should already satisfy the Windows Phone usability guidelines laid out earlier. When evaluating your final mockups, take the following steps:

1. Determine whether your prototype meets the needs and standards you planned with Gathering Your Ideas.

2. Next, decide whether your mockups satisfy the level of detail required by your final app review process. Recall the level of detail you determined your prototype would need after reading Prototype Key Aspects of Your Design.

3. Final mockups should include proper levels of detail for:

   • Visual elements – Are typography and content presented clearly, legibly, and concisely? Is your app visually appealing?

   • Functional elements – Are tasks intuitive in both purpose and operation? Is it clear what your app does, and how to operate it?

   • Control elements – Do all custom controls function according to a consistent internal design language? Are they sized and spaced for easy touch operation?

   • Branding Elements – Have you accurately reproduced colors and logos? Is all art compliant with copyright stipulations?

4. Make sure that you’ve preserved the interactions you mapped out during prototyping. Check that the most common or vital tasks and operations look and flow the way you want.

5. Once designs are finalized and building can begin, consult How to create your first app for Windows Phone 8 to begin preparing your app to meet the design requirements for submission.