Build Windows 2011: 8 Traits of Great Metrol Style Apps

Speaker: Jensen Harris

The Start Screen is very personalized. It is a huge opportunity for developers to create apps to fill that space. Windows Store is not available in the developer preview. The apps that will succeed and earn lots of money will be good Metro apps.


1) Metro Style Design

The Metro style app has “less chrome” than the traditional MMC style app. Think of the silhouette. Things should be spaced identically as you move between apps. There is a lot of emphasis here on UI design and aesthetics. I can’t say I’ve heard this from MSFT before, but I’m not a dev.

Get rid of the scroll stuff, etc, where you can. Example of exception: Photoshop requires it. It is a tool. Basically you make better use of the pixels so content can be better displayed or has more space.

Left and right edges are for system UI. Left edge is for “back”. Right edge is for “charms”.

The UI was designed based on the comfort of the reach of peoples hands (they got people with different sized hands to finger paint with their thumbs based on levels of comfort and then measured hands to scientifically design). That’s where the touch first concept comes in. This is why system UI features are on the sides. That’s why there is a split virtual keyboard (one of the options).

Needless lines are gone. Navigation bits are gone. Commands are moved to the App Bar. Anything like a charm moves to the Charms bar. All that remains is content, which is re-aligned to a grid, leading with a pleasant or descriptive image. Content leads the way.

2) Fast and Fluid

Touch is direct and feedback is visceral. App lag is not acceptable with this UI.

Interesting comment: we already use mouse for touch. We point, we hold and drag, etc. However, multi touch is actually a quicker. It offers more because we have two hands VS one mouse.

Touch commands need to be consistent, restricted in number, feature direct manipulation, be reversible, a limit the number of timed gestures (e.g. hold something for x seconds).

Semantic Zoom is used not just for zooming objects but also for navigation, e.g. zoom out the Start Screen and scroll a small distance, and select or zoom in again. Should be a feature of apps as well.

Don’t create a different UI for mouse/keyboard. Many of the lessons are transferable. And screens with touch will be the norm in a few years. Apps should be ready.

Snap and Scale Beautifully

Beware of different screen sizes for scaling. Really high DPI screens are on the way as the norm. Devs need to design for small screens, current large screens, and future high res/DPI screens (100%, 140%, and 180%).

Smallest res you need to support is 1024*768. Widescreen is 1366*768 and gives side by side. The app is required to have snap and portrait views. Snap is when the app is taking up just 1/3 or 1/4 of the screen. It’s a condensed view of the app in side-by-side.

They are the glue that bind apps together. Two apps that complete a contract can work together to complete a scenario. The contract shows up as a Charm. You should enable sharing from your app. Not every app should be a target – relevance. Social and collaboration apps are good targets. The search contract allows your app to be searched from the search UI. This allows content to be searched and filtered via its UI.

Note that apps like Photo will include content from many sources such as online or network/homegroup. I LIKE that. This is via a Picker Contract. Files stay in their source location, rather than locally cahced "turds" of files clinging on.

Icons are yesterdays non interesting and not alive ways of representing apps. Tiles are much more, alive and informing. They represent and should draw in the user. They should make the app interesting. Or like weather, they should tell you enough that you can avoid going in there needlessly. They are an extension of your app. You can publish results or features of apps as tiles on you Start Screen, e.g. weather for a city, a stock, a social network contact.

Windows is Alive With Activity
This is about bringing the activity of the net into Windows. It’s not a static screen full of icons. Live Tiles and notifcations is the concept. A tile is updating, refreshing, scrolling between recent events, etc. More alive tiles will be featured on the first page of the Start Screen. There are no folders like on IOS. Hides apps and hard to name. Instead we have groups. Groups don’t have to be named. Don’t use ads as the live content. Users will place those at the back.

Notifications allow an urgent message to popup. There isn’t a system tray. The notification appars in bottom right. Will disappear after a certain time. User can hide it. User can disable all notifications. Apps should be silent by default, and users can opt-in for notifications. Notifications are interruptions, so be polite.

Roam to the Cloud
When you leave an app, it should be the same when you come back to it. You should never have to replay a level of a game, even on a different device. When you change a setting, you shouldn’t have to change it again. Same experience across all of your devices. The cloud is what makes this possible: Live ID. Every app gets limited storage for settings and user data.

Embrace Metro Principles
– Price in craftsmentship

– Be fast and fluid

– Authentically digital

– Do more ith less

– Win as one

One thought on “Build Windows 2011: 8 Traits of Great Metrol Style Apps”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.