Metro Style App Design style

Metro style apps are the focal point of the user experience on Windows 8 Release Preview, and great Metro style apps share an important set of traits that provide a consistent, elegant, and compelling user experience.

This video explains how using Metro design style principles helps you create great apps.

Leverage Metro design style

Content is the heart of Metro style apps, and putting content before chrome is fundamental to the design of Metro style apps. Everything else is accessory—or chrome—that helps present and enable interaction with the content.

Presenting content

Design your app's UI to showcase the content, and make your UI accessible for users with disabilities.

Clean and open layout

·         Minimize distraction and help people get immersed in the content by leaving only the most relevant elements on screen.

·         Give content breathing room by removing lines, boxes, and unnecessary graphical effects like blurs and gradients. Use open space to frame the content.

·         Limit navigational chrome that is persistently on screen, such as tabs. Let people focus on the current content, and avoid distracting them with way-finding chrome.

Clear information hierarchy   The Metro design language is founded on clean, beautiful typography that helps users understand the hierarchy of the content. Use typography in place of lines and boxes to help establish structure and hierarchy.

·         Use size, weight, and color in text consistently to convey information on a piece of content's importance. The set of variations should be small, so people can easily see how content fits together in the overall hierarchy. See Guidelines for text and typography.

·         Use the default stylesheet to get the predefined type ramp for your text.

Metro style silhouette  When people focus on content, the composition of that content forms the identity of the application. A familiar silhouette helps people to instinctively recognize your app as Metro style (as opposed to, for example, a webpage).

·         Align with the Metro style silhouette to provide a sense of familiarity and confidence.

·         Start with the Visual Studio Grid or Split project templates to get the layout. See the guidelines on the Visual Studio JavaScript project templates for Metro style apps.

Interacting with content

Use interactions that keep the user in control and confident.

Direct interactions  The most natural way for people to interact with content is directly, without intermediary chrome.

·         Whenever possible, let people complete actions through direct manipulation of the content rather than indirect manipulation with controls.

For example, let people tap an item to see more of its details, cross-slide to select it, drag to move it around, zoom out to see the full context—instead of adding buttons on screen to perform these actions.

·         Leverage Semantic Zoom as a fast, fluid, and content-first way of navigating a long list of content.

·         Keep in mind how screen readers and users who depend on keyboards will interact with the content.

Leverage the edge   Some actions can't be accomplished with direct manipulation. For those, show commands contextually, only as needed, to avoid cluttering your canvas. Leverage the screen or device edge so people can confidently find commands.

·         Place commands in the app bar, which can be brought up on demand through a swipe from the top or bottom edge, and can be dismissed when users have completed their actions.

·         Leverage the charms, which can be brought up on demand through a swipe from the right edge, for invoking the Search, Share, Devices, or Settings charms.

·         Avoid placing commands persistently on screen, and avoid showing duplicate entry points for contracts that are accessed with charms.

·         Design for comfort and put frequently used interaction surfaces near the edges.

See Commanding design for more info.

Be fast and fluid

Respond to user actions quickly with matching energy.

Purposeful animations  

Motion is a core part of the Metro design language. Well designed animations bring apps to life and make the experience feel crafted and polished.

·         Use purposeful animations to visually tie experiences together and tell a story. Everything comes from somewhere and goes somewhere in a fluid interface.

·         Leverage the Animation Library's set of scenario-specific animations, designed to convey information. Familiar motions reinforce concepts, help people know what to expect, and build a sense of confidence. See the guidelines for animations in the Animating your UIsection.

·         When using animation to communicate important information, be sure to also provide an alternative, accessible way to convey the information.

Designed for touch  

Metro style apps are designed to be touch first. They leverage the hands and fingers for what they are great at, with comfort and ergonomics in mind.

·         Embrace the Windows 8 Touch Language and use the prescribed gesture set to let people naturally and consistently manipulate content. See Touch interaction design for more info.

·         Let content directly follow your fingers. Think beyond tap and use sliding interactions, such as Semantic Zoom, to let people quickly and effortlessly navigate and interact with content.

·         Provide immediate visual feedback on touch so people can confidently know if they have hit the intended target. Keep interactions reversible, and commit only when people let go to give room for errors and encourage explorations.

·         Do not build separate touch and mouse interactions.

·         For accessibility, ensure that all interactive elements are accessible programmatically.

Built-in controls  

Leverage the built-in controls to get fluid, beautiful, consistent animations and touch-optimized behaviors baked in. To name a few examples:

·         Selection through the swipe gesture (cross-slide) is built into the ListView control. It can be extended with Semantic Zoom to let people quickly and fluidly navigate within a long list. See the guidelines on the ListView control.

·         The FlipView control lets users drag to move between items, and has transition animations built-in.

·         The button, toggle, checkbox, radio button, rating, and slider controls all provide visual feedback on touch down, commit only on touch up, and allow users to reverse their action by dragging away to cancel. See the guidelines on button, toggle, checkbox, radio button, date and time pickers, rating, and slider controls.

Remember that built-in controls are accessible by default, which can lower the cost of developing an accessible app. See the list detailed user experience (UX) guidelines for built-in controls.

Snap and scale beautifully

Create a great experience on every form factor and every viewing option open to your users.

Scaling to multiple form factors   Your app has the opportunity to be used on hundreds of millions of PCs running Windows 8. These PCs will have a wide range of screen sizes and resolution, ranging from <10" tablets to >27" screens.

·         Make the best use of on-screen real estate by using the fluid layout support built into platform controls. For example, the ListView will automatically reflow content based on available space.

·         The platform provides automatic scaling based on device screen size and resolution. Provide 3 sizes of assets, or use scalar vector graphics to ensure your app always looks crisp and polished. See the Guidelines for scaling to screens and Guidelines for scaling to pixel density.

·         Keep in mind that turning on Make everything bigger in Ease of Access effectively lowers the current resolution and you need to ensure that all UI is still visible and usable.

·         Use the simulator in Microsoft Visual Studio to see how your app will look on different form factors.

Designing for view states  People naturally multitask, and they can run two apps side by side through snapping. All apps must implement a snapped state, and a great snapped state invites users to keep your app on screen longer. See the Guidelines for snapped and fill views.

·         Design a useful Snap view that provides a functional view of the app. Preserve users' context when they switch between view states.

·         When snapped, the width of the app is fixed at 320 pixels but the height is variable. Pan vertically to avoid conflict with the edge and snap gutter.

·         Other apps can be snapped as well when your app is on screen, so design your app to reflow fluidly from a minimum width of 1024 pixels.

Use the right contracts

Contracts are the glue that binds Metro style apps together and to the system UI. Two apps that have implemented the same contract can work together to complete a broad or complex scenario.

·         For some of the most common contracts such as search, share, and file pickers, start with the corresponding Visual Studio item templates.

·         Rely on charms for a consistent invocation model that users can confidently rely on. Avoid creating alternative UI on the app canvas to invoke the contracts; that could confuse users.

·         See a complete list of app contracts.

Share   The share contracts let people share data from one app with another app. A source app is one which provides something to share, and a target app receives the shared content, using a set of common data formats. See the See Guidelines for sharing content.

·         Every app should be a sharing source and implement the broadest set of formats possible.

·         Apps that publish, store, or transform the shared data are good candidates to be a sharing target. Examples include communication, social networking, and device-connected apps.

Search   The search contracts let people search an app's content from anywhere in Windows. Results are provided by the app, and displayed within the app's own UI. See Guidelines and checklist for search.

·         Use the search charm in place of a custom in-app search, especially when the scope is across the app's full content set (like searching for a product in a shopping app). Do not use search as an in-place "Find" feature, when the scope is limited to the current view (like locating a word within a document).

·         Provide search suggestions to help people find something quickly.

·         Provide a way to navigate between the result page and the app's main UI.

File pickers    The file picker contracts let people access an app's content from another app. When the file picker is invoked, users can browse and select files from either the local storage or another app that supports the file picker contract. See the Guidelines for file pickers.

·         Leverage this contract if your app accesses or stores files that would be useful to users from another context.

·         Leverage the ListView control to get the built-in fluid layout and selection behavior.

Invest in a great tile

A tile is the front door into an app. Sitting on the Start screen, it is an extension of the app and can provide much more personal and engaging information than a traditional icon. Invest in designing a great tile to draw people into your app. See the Guidelines for tiles.

·         Tailor the content displayed on the tile to the users, and keep it fresh by updating it as app content changes. There is a wide variety of pre-designed tile templates available—select the design that best suits your content type.

·         Reference content that lives on your app's home page, so that users can find it easily after launching the app.

·         Use secondary tiles to let people promote interesting, frequently updated sub-sections of content in your app on their Start screen. SeeGuidelines for secondary tiles.

Feel connected and alive

Provide fresh content through live tiles and notifications to let people feel connected to your app. Both live tiles and notifications use the same infrastructure, and can be updated at any time using the Windows Push Notification Service, locally while the app is running, or at a pre-scheduled time.

Live tiles   Draw people in continually with dynamic, relevant, personalized content on your app tile. Fresh tile content gives people a reason to place the tile in a prominent position on the Start screen, and to launch the app time and again.

·         A live tile can cycle through up to 5 updates. For example, a news app's live tile can cycle through multiple stories each day.

·         Content shown in live updates should be accessible from the home page of your app. Remove outdated notifications if they are no longer relevant or accessible from the home page

·         Use badges to show simple numeric or glyph information.

Notifications   Apps can use notifications to briefly show people time-sensitive messages that need to be interruptive from anywhere in Windows. See the Guidelines for toast notifications.

·         Most apps should be silent—people should opt-in to enable notifications in an app.

·         People have control over app's notification capability, so raise notifications only if they are truly time sensitive and relevant. Show missed notifications, if they are critical, on the app's tile.

·         Combine notifications if there are multiple updates occurring within a short period of time.

·         Do not use notifications to show errors or warnings. Errors should appear inline or in flyouts and message dialogs instead.

Roam to the cloud

Roaming   Create a continuous experience across devices by roaming data that lets people pick up a task right where they left off. Read theGuidelines for roaming app data.

·         Leverage Microsoft accounts and the per-user cloud storage to store and roam settings, state, and a small amount of user content.

·         Examples of app settings that are good to roam:

·         Cities, and Celsius-versus-Fahrenheit preferences in a weather app

·         RSS feeds that users subscribed to in a news app

·         Favorite teams in a sports app

·         Examples of app states that are good to roam:

·         The furthest position read in a reading app

·         The last checkpoint or move completed in a game

·         The last track played in a music app

Process Lifetime Management (app lifecycle)   Ensure a continuous experience by preserving state for your users without requiring an explicit save. Read the Guidelines for app suspend and resume.

·         In general, resume the app as people left it rather than starting it fresh. People should be able to switch away to another app, and come back to a shopping cart, an unfinished email, or a paused game as they have left it.

·         Start the app fresh if a long period of time has elapsed since the user last accessed it and the previous context is no longer relevant. For example, in a news app, bring people to the home page if it has been a long time since they last opened an article that has now become stale.

·         Do not terminate the app when it is moved off screen. Leave the app lifecycle to the system to ensure that your users can return to your app as efficiently as possible. Do not offer users ways to terminate your app.

Embrace Metro design style principles

Use these principles to help guide your design.

Show pride in craftsmanship

·         Devote time and energy to small things that are seen often by many.

·         Engineer the experience to be complete and polished at every stage.

Do more with less

·         Solve for distractions, not discoverability. Let people be immersed in what they love and they will explore the rest.

·         Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.

Be fast and fluid

·         Let people interact directly with content, and respond to actions quickly with matching energy.

·         Bring life to the experience, create a sense of continuity and tell a story through meaningful use of motion.

Be authentically digital

·         Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality.

·         Embrace the fact that we are pixels on a screen. Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material.

Win as one

·         Leverage the ecosystem and work together with other apps, devices and the system to complete scenarios for people.

·         Fit into the UI model to reduce redundancy. Take advantage of what people already know to provide a sense of familiarity, control, and confidence.

For more info visit http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

Comments are always welcome

Vinod