Rehash: 8 great traits of Metro style apps

One of the most impactful presentations at the BUILD conference was Jensen Harris’ 8 great traits talk.  In this talk, Jensen locks down on the 8 most important things for developers and designers to be aware of when creating and porting apps to Windows 8.  This post tries to summarize the various points made in the talk based on the 8 traits:

  1. Metro style design
  2. Fast and fluid
  3. Snap and scale
  4. Use the right contracts
  5. Invest in great tile
  6. Feel connected and alive
  7. Roam to the cloud
  8. Embrace metro principles

Metro style design

What Metro style design means is that specific look and feel
is adhered to by applications.  This
means several things but most notably:

  • Content before chrome
  • Metro layout
  • Edges
  • Swipes and gestures

Content before chrome

No unnecessary decorations should exist in your app. What you should see in your app is a focus on the actual content.  If you have a photos app, show the photos, if  you have a stock app, show the stocks.  Present the user with their content first, as opposed to controls or dialogs.

Metro layout

Consistent look and feel across apps is going to be a key feature of Windows 8.  This means that applications should have consistent placement of features and layout.  By using the application templates, you will get this for free.

Edges

  • Left and right are for system-wide things
    (switch apps / charms)
  • Top and bottom (app bar) are for commands
    • Be conscious about hiding  / showing the bars (e.g. PaintPlay vs. Blog reader)

Swipes and gestures

Swiping in “the direction” of content should move it.  Going opposite the direction of content should perform selection / control of content. Typically direction of content will be in the “longer” axis of the on-page content.  If you have a web page, the content would be top-bottom, if you had something like a blog reader, columns would represent blogs so content should scroll left-right.

Fast and fluid

When we talk about fast and fluid, we’re referring to the following principles:

  • Performance
  • Animations
  • Touch first

Performance

Applications should be responsive.  Measure this to maintain a high quality bar for perf.

Animations

Use the built-in animations to get various styling for free.  Use animations consistently and sparingly.  Should be used to prevent the user from being startled or surprised.
For example, images should “come in” from the edges in a photo app.

Touch First

“A screen without touch is a broken screen” – people will be using touch first on many device form-factors.  Assume that this is the primary experience and make sure that gestures are correctly mapped within your app.

Snap and scale

Apps should run on a every device from 7-in slate to television screen sized displays.

In order to be a good citizen in the Windows 8 application ecosystem, your app should at a minimum support a number of things:

  • 300 pixel wide snap view
  • 1024×768 view for when shown with snap and also as the minimum supported resolution

Microsoft anticipates that the most popular form-factor for slates running Windows 8 will be a wider resolution format and that a typical resolution will be 1366×768.  For this reason, the next recommended resolution is going to be 1366×768, the most common view that your app will run in.

Support for scaling should be provided by giving various resolution resources for non-vector graphics in 3 scales:

  • 100%
  • 140%
  • 180%

In some cases, you should support portrait view as well.

Use the right contracts

Windows 8 now has integrated contracts for:

  • Search
  • Share
  • Connect
    • Play-to
    • Print
    • Settings

Invest in a great tile

Your title is your opportunity to keep your users engaged with your app from the start screen.  Embrace the principle of “alive and connected” by having updates happening on the tiles.  Tiles are an extension of your app, makes it feel always running, connects with people emotionally.

Secondary tiles can be created, e.g. can pin weather for multiple cities, can pin alerts from multiple blogs, etc.

Connected and Alive

Should “add life” to your application with notifications, live tiles, and animation.  Applications should have a “personality” to them and this personality should be exposed
throughout the application including but not just limited to its tile.

Notifications – flyouts.  These should appear briefly and should not be intrusive to the user’s experience.  In other words, you should not be popping up toast notifications every time the user receives an email, but maybe for meetings it makes sense. In other words, a notification is something that will cause the a problem for the user should they not receive the message.  If there are not negative consequences, you should use the tile for exposing information to the user.

Missed notifications should also appear on the tile.

Roam to the cloud

Applications should behave in the following ways:

  • When you come back to an app, it should be as if you never left
  • When an app state is changed on one device in a way that it should be changed on all devices, you should be able to go to another device and pick up where you left off
  • Settings should roam with applications to other devices

This is possible through Live ID synchronization to the cloud.  In addition, this means that apps should embrace the rich Windows Live ecosystem.  Why recreate the calendar, cloud storage, and so on when these tools already exist and can be easily integrated with apps?

Embrace Metro principles

There’s more though:

  • Light and dark content templates
  • Authentically digital – this means that your app doesn’t try to be something it’s not – a slate is not a “pen and notebook” it’s not a slide rule.  Take advantage and embrace the fact that this is a digital medium and you can present things better than you’re limited in the real world.
  • Do more with less – “perfection is not achieved when there’s nothing more to add but nothing left to take away”

 

That’s it.  A brief glean over the points talked about but hopefully helpful if you’re looking for the list or want a summary of what makes a great app.