D'Arcy from Winnipeg
Solution Architecture, Business & Entrepreneurship, Microsoft, and Adoption

//Build/ Day 1–How to Create a Successful Metro App with Jensen Harris

Tuesday, September 13, 2011 5:58 PM

Fantastic afternoon session by Jensen Harris on how to create a successful metro app. One of the big pushes will be the Windows 8 marketplace. Part of having a successful app is ensuring it adheres to best practices on design and usability to ensure a fantastic user experience. Because Windows 8 will have such a different approach to UX, including touch-first, its important that considerations are made up front. Here are my notes.

Metro Style Design

Use the Templates and Guidelines
Templates will be provided in Visual Studio for making Metro applications, and the recommendation is to leverage them as much as possible. The built in features and guidelines are your first step in creating a great Metro-styled app.

Content before Chrome
This is a term we heard often throughout today. It speaks to the extra framing in an application, like toolbars, menus, etc. Metro apps have no “chrome” – the pixels are all for your app and what its supposed to do. You also should be conscious not to clutter your canvas with controls for a metro app – limit it to commands that are common, important, and frequently used.

Also design for comfort. Microsoft did research to see where people typically touched the screen, and where they could do it comfortably. What they found was that it takes a posture change to reach the center of the screen, so if possible put frequently used interaction items near the edges.

Fast and Fluid

Everything Comes from Somewhere and Goes Somewhere
Nothing should be static or just clunkily appear. Things fade in, fade out. They have a life cycle on the screen.

Use the Animation Library
All of the controls that come built in with the templates are hooked up to the Animation Library which provides great effects that can be incorporated into your application.

A Language for Touch
Command line and mouse/keyboards have their own “language” – you right click to get a context menu, you click and drag something around, we double click to open a file, we use keyboard shortcuts to do something, etc. But Touch is different than just a different mouse cursor – it’s a new interface type with its own language. So gestures become a huge part of the experience, not as an add od or option but as a first class way to interact with the system.

With that said, don’t separate the mouse/touch interfaces. I think of it like Quebec and France versions of French – similar, yet very different.

Know to Scale
XAML will allow for scaling, but considering also providing different sizes of assets (read: images0 and remember that portrait and landscape are in place for Windows 8.

Also Metro apps have a “snap” view mode, and you should create a usable, compelling snap view that’s different from your regular view.

Use the Right Contracts

Contracts are the glue that bind applications together. They let any app share data with another app through common formats of data interchange. Apps can be a source or a target, and generally your app should be built to be a source; apps which publish, store, or transform shared data are good candidates to be a target application. Contracts power the experience (for example, you can use the built in search app to search for things within your own app).

Have a Great Tile

Tiles are not icons. Icons are just an image, while tiles communicate information and become an extension of the application. Notifications are available to pop up discardable alerts, but important alerts that should be persisted should be communicated through the live tile.

Roam the Cloud

Biggest note from this is that users will log in with their Live ID. I need to confirm this as it opens up a lot of potential issues and questions (What if there’s no internet? What if they don’t’ have a Live ID and don’t want one?)

This was a fantastic session, and there were some things that I missed capturing here, so make sure to check out the Build site and watch the session in its entirety.



No comments posted yet.

Post a comment