WP7 Design Guidelines

After randomly searching through the WP7 MSDN webpages on http://msdn.microsoft.com/en-us/library/gg680270%28v=pandp.11%29.aspx, I had found a very useful design guideline which WP7 developers should follow: -

Design Guideline

Navigation, frames and pages

• Make sure to consider the Back button and user interactions with the Application Bar when creating your navigation map.

Application Bar

• Use the Application Bar for common application tasks.
• You are limited to four Application Bar buttons.
• Place less frequently performed actions in the Application Bar menu.
• If the action is difficult to clearly convey with an icon, place it in the Application Bar menu instead of as a button.
• You are limited to five Application Bar menu items to prevent scrolling.

Back button

• You should only implement Back button behaviors that navigate back or dismiss context menus or modal dialog boxes. All other implementations are prohibited.

Screen orientations

• Portrait is the default application view. To support landscape view, you must add code.
• If an application supports landscape, it cannot specify only left or only right landscape views. Both left and right landscape views must be supported.
• If your application supports text input, you should support landscape orientation because of the possibility of a hardware keyboard.

Themes

• Avoid using too much white in applications, such as white backgrounds, as this may have an impact on battery life for devices that have organic LED displays.
• If the foreground or background color of a control is explicitly set, verify that the content is visible in both dark and light themes. If the specified color is not visible, also explicitly set the background or foreground color to maintain contrast or choose a more appropriate color.

Application settings

• Application actions that overwrite or delete data, or are irreversible must have a cancel button.
• When using additional screens with commit and cancel buttons, clicking those buttons should perform the associated action and return the user to the main settings screen.

Touch input

• All basic or common tasks should be completed using a single finger.
• Touch controls should respond to touch immediately. A touch control that lags or that seems slow when transitioning will have a negative impact on the user experience.
• For time consuming processes, developers should provide feedback to indicate that something is happening by using content to indicate progress, or consider using a progress bar or raw notification as a last resort. For example, show more and more of the content as it is being downloaded.
• The touch and hold gesture should generally be used to display a context menu or options page for an item.

On-screen keyboard

• You should set the input scope property for a text box or other edit controls to define the keyboard type and enable the appropriate typing aids.

Canvas and Grid controls for layout

• The Canvas control uses a pixel-based layout and can provide better layout performance than the Grid control for deeply embedded or nested controls in applications that do not change orientations.
• The Grid control is the best choice when the application frame needs to grow, shrink, or rotate.

Panorama and Pivot controls

• Both Panorama and Pivot controls provide horizontal navigation through phone content, enabling the user to flick and pan as necessary.
• Use Panorama elements as the starting point for more detailed experiences.
• Use a Pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same data.
• Do not use the Pivot control for task-based navigation, like in a wizard application.
• Vertical scrolling through a list or grid in Panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll.
• Never place a Pivot control inside of another Pivot control.
• Never place a Pivot control inside of a Panorama control.
• Applications should minimize the number of Pivot pages.
• The Pivot control should only be used to display items or data of similar type.
• You should not use Application Bar buttons to provide navigation in a Pivot control. If the Pivot requires navigation aids, you are probably misusing it.

Text

• You should primarily use the Segoe font. Use alternative fonts sparingly.
• Avoid using font sizes that are smaller than 15 points.
• Maintain consistent capitalization practices to prevent a disjointed or jagged reading experience.
• The application title in the title bar should be all capitals.
• Use all lower case letters for most other application text including page titles and list titles. In the Application Bar, any text you include is automatically displayed in all lowercase.