8 Traits of Great Metro Style Apps

These are my notes from Jensen Harris session at Build Windows conference on Tuesday September 13th, 2011. Jensen is the Director of Program Management for the Microsoft Windows User Experience Team.

Metro style design

• There are no apps yet. Opportunity.
• Sidebars are for the system, top and bottom are for the app
• Win32 vs Metro apps
• Content before Chrome
• Apps re-imagined

Fast and Fluid

• Touch faster than GUI, GUI faster than command line
• Touch first approach
• Beautiful, fast, and fluid vs crap
• Most controls support animation
• Touch has its own language, don’t mimic the mouse
• Semantic zoom: not only does the content change, but also the meaning (e.g. show categories rather than details)
• Don’t separate touch and mouse interfaces
• A screen without touch is a broken screen - in a few years

Snap and Scale beautifully (form factor)

• minimal: 1024x768
• widescreen: 1366x768+
• snap view (required)
• portrait (optional)

Use the right contracts

• Binds metro style apps together
• Share, Search, and Picker
• Share content with other apps (e-mail, social network)
• Search: each app implements its own view
• Picker: select a picture from file system or the web (sample: change user profile picture from a picture in Facebook without having to do the intermediate step of saving picture in my hard drive first)

Invest in a great Tile

• Icons are yesterday’s way of representing apps
• The Tile should be an extension of the app
• You can also create tiles from content of the app (e.g. tile your favorite photos album or weather from SCE)

Feel connected

• “Windows is alive with activity”
• Live tiles
• We don’t have folders, we have groups
• Folders put stuff down one level, it’s hard to name them
• People do love to make groups
• Notifications are displayed for a small period of time, after that update the tile

Roam to the cloud

• Every app gets per-user cloud storage for settings, state, and small amount of user content (via Live ID)
• Applications preserve state as they go, do not require explicit save
• Roam settings (favorite cities, last level on game played)

Metro style design principles

• Other sessions to check out: 207, 211, 391, 395, 396, 405, 406