(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

Today’s Metro Pass is rather short (as compared to other posts). I considered combining it with another post, but I believe that the importance of having a really good, active tile for your application lets this post stand on its own.

If the eyes are the windows to your soul, then a tile is the window to your application. 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.

• 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.

I know you might be tempted to just create a brightly colored square and rectangle for your application’s tile, but I encourage you to do a bit, no a LOT, more. Think about how you can display information on your tile to engage the user from the Start screen so they’ll want to open your app to see more.

Net up, it’s always better live!

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

Contracts and extensions are the glue that binds Metro style apps together and to the system UI as well as Windows itself. A contract is like an agreement between one or more apps. Contracts define the requirements that apps must meet to participate in these unique Windows interactions. An extension on the other hand is like an agreement between an app and Windows. Extensions lets app developers extend or customize standard Windows features primarily for use in their apps and potentially for use in other apps.

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.

The three contracts you will more than likely use are the Share, Search, and File Picker 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.

• 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.

• 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.

Of course these aren’t the only contracts and extensions in Windows 8. The complete list of contracts and extensions is

• Account picture provider (extension)
• App to App Picking (contract)
• AutoPlay (extension)
• Background tasks (extension)
• Cached file updater (contract)
• Camera settings (extension)
• Contact picker (extension)
• File activation (extension)
• Game Explorer (extension)
• Play To (contract)
• Print task settings (extension)
• Protocol activation (extension)
• Search (contract)
• Settings (contract)
• Share (contract)
• SSL/certificates (extension)

Next up, you need a great tile.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

Sorry about the title, but I couldn’t resist. The title “Snapping and Scaling” just wasn’t exciting to me.

Snapping and scaling is really all about allowing users to multi tasks and creating great experiences on every form factor.

Snapping

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.

Scaling

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.

The take away here is that your apps to work great on all form factors. You don’t want to get a review in the Windows Store that says something like the following:

This app looks/runs horrible on my {insert device name}! Do not buy!

Potential buyers will see a review like this and wonder how your app will run on their device if it didn’t work so well on another device. As a result, they may not buy it.

Next up, using contracts.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

OK, I’ll admit it “Being Fast and Fluid” is getting to awfully close to marketing speak. What “Fast and Fluid” means to you, the developer, is that your applications should respond to user actions quickly AND with matching energy. If a user swipes to the left quickly, your app should scroll quickly. Making you apps fast and fluid is actually not as much work as you might think as long as you use purposeful animations, design for touch, and make heavy use of the built-in controls.

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 UI section.
• When using animation to communicate important information, be sure to also provide an alternative, accessible way to convey the information.

I think the keyword here is Purposeful. Don’t be gratuitous with your animations. Use them where the make sense within your app.

Design 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.

These are all good points. The only thing I’ll add is that, just like with Windows Phone, you should test your Windows 8 Metro apps on touch enabled hardware. The emulator is a good place to start, but it’s good try out your apps on as many pieces of hardware as possible. For example, I’ve noticed the touch experience on Samsung devices is a bit smoother than on Asus machines. You’ll want to be aware of these differences and how they impact the usability of your applications.

Built-in Controls

Leverage the built-in controls to get fluid, beautiful, consistent animations and touch-optimized behaviors baked in. Built-in controls are also accessible by default. 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.

In short, use what you get for free with Visual Studio and buy where you can instead of building custom controls. Building touch-optimized and accessible custom controls can be a costly affair that will quickly increase the cost of a development project.

Got it? Good! Coming up on Monday, snapping and scaling. Have a great weekend!

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

In the previous post in this series we learned the eight traits common to great Metro apps. In this post we’ll look at the first trait, leveraging the Metro design style, in depth.

When it comes to making use of the Metro design style, there are really two things you need to keep in mind:

1. How your app presents content to the user
2. How users interact with your app’s content

Presenting content
Design your app’s UI to focus on the content, while ensuring your UI is accessible to users with disabilities. This can be accomplished with a clean and open layout, a clear information hierarchy and utilizng the Metro style silhouette.

Clean and open layout
Minimize distraction. (It’s all about content not gradients and other visual trickery)
Use space to frame your content. (Empty space is OK!)
Limit navigational chrome that is persistently on screen. (Get rid of the buttons, tabs, etc!)

Clear information hierarchy
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.

Metro style silhouette 
Your app should align with the Metro style silhouette to provide a sense of familiarity and confidence.

Interacting with content

Direct interactions
The most natural way for people to interact with content is directly. Whenever possible, let people complete actions through direct manipulation of the content rather than indirect manipulation with controls. For example let people tap an image to view detail information rather than have to select an image then tap a button.

Leverage the edge
Some actions can’t be accomplished with direct content manipulation. For these interactions, show commands contextually, to avoid cluttering your canvas. Leverage the screen or device edge so people can confidently find commands using the app and charms bars.

That’s it for today. Next up, being fast and fluid.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920