Sunday, August 12, 2012

Guidelines for developing metro style Apps

Design principles for Windows 8 Metro style apps

"Being a good developer, we need to have the conceptual knowledge of metro UI design principles while trying to develop a application based on windows 8 metro UI. Its a good practice to choose the right surface for the right application. Here I am giving a brief description that will help you as I hope and you might feel better"

Layout and navigation

Focus on content

When creating the Metro style app, our first goal was to remove all UI elements that were not directly relevant to the core functionality of the app. For example, the top navigation bar, pagination controls, and the bottom control bar can all be removed.
Metro UI layout navigation

Use App bars

Outside of the app page, the app bar is the primary command interface for your app. Use the app bar to present navigation, commands, and tools to users. 

Use direct manipulation to navigate

When designing the Metro style app, always use direct manipulation whenever possible, using built-in controls like Semantic Zoom, which lets users navigate more efficiently.

Use View states

People can snap your app so that they can use another app, or snap another app so they can use your app.

Commands and actions

Keep app contextual actions in the app bar

This way the app design surface isn't cluttered with controls, and no matter where a user is, they can swipe the app bar from the bottom or top of the screen to see relevant actions. All Metro style apps can use the app bar for their commands. Because users will be familiar with app bar interactions, it also increases the usability of our app and makes the whole system feel cohesive.


Use Search contract to centralize the search experience

By using the Search contract, users can invoke the Search charm from anywhere in the system to look for content from apps that support the contract.
Windows 8 Metro UI search contract

  • The user opens the charm bar and accesses the Search charm. The Photo journal app is selected by default because the user is currently inside the app.
  • When the user starts typing, the app supplies search suggestions to the pane. This way users can quickly see which terms will generate search results. After the user submits their query, they see a search results view and select the result they want.


Edge swiping for app and system commands

Using Windows 8, a user can swipe from edges to access commands and navigate between apps.
edge-swiping-metro ui-apps
  • App commands are revealed by swiping from the bottom or top edge of the screen. The app bar should always be used to display app commands.
  • Swiping from the right edge of the screen reveals the charms bar that contains system commands.
  • Swiping from the left edge switches to previously used apps.
  • Swiping from the top edge toward the bottom edge of the screen lets you dock or close apps.

Pinch and stretch to semantic zoom

 Semantic zoom enables the user to zoom out to see data in related groups and provides a quick way to dive back in. Instead of providing navigation for reviewing long lists of content, use semantic zoom when possible for this type of interaction.

Orientation and views

Design adaptive layout for orientation and screen sizes

When redesigning the Photo journal app, we considered how the app would look in two device orientations, taking into account screen resolutions and device sizes. The grid layout makes it easy to scale the design for both portrait layout and high resolution screens
Orientation view for metro UI

Use snap view to engage your users

Windows 8 lets users multitask by "snapping" an app next to another app. The snapped view is a great way to increase the app's time on screen and engage users for longer periods.


Use tiles for persistent and dynamic updates

Unlike the notifications in iOS which have a fixed format, Metro style app tiles have a rich collection of templates for designers to choose from.

Use toasts for app notifications

It's best to let users opt-in to notifications during their first run of the app. If applicable, show recent toast notifications on tiles while they are still relevant.
Notification design guidelines for metro UI

Source: MSDN


Twitter Delicious Facebook Digg Stumbleupon Favorites More

Powered by Code Imagine