10 quick notes to design polished Metro Apps

I went to a UX workshop recently for Windows 8 and thought it would be cool to share my notes and take-aways from the event.

Besides a few tips and concepts, I have also added a few things I think are important to keep in mind when designing your application so you don’t run into and road blocks down the track.

And just remember, these are just some quick notes and things to keep in mind and I may have doubled up on a few items in other posts, sorry about that

1. Skeuomorphism is out.

I have written about this before so I won’t dwell, but your application is running on a screen, its digital, its pixels on a surface. Let’s leverage it and see it for what it really is. We are moving past the need to make users comfortable by making UI’s look realistic and familiar. We are well into the digital age now.

Examples of Skeuomorphic design

2. Type Ramp

There is a suggested type ramp for your Metro Apps and follow it will provide a consistent flow for all the type in your app.

These are the sizes I use, and I think they are pretty close to Microsoft’s recommendation. This is just a guide though, use your best judgement.

Check out this type ramp post for more info 

3. Fonts

Segoe is Metro. This font family has been designed for use in metro applications. It’s clear, clean and doesn’t muck around.

It’s suggested the only time you move away from this font family is to meet branding guidelines. There are some concessions around these though, for example, if you make a eBook/Reading application, you can use a Cambria or Calibri. Calibri is also suggested to be used when creating a writting app.

4. Grids

Designing your app on a grid is one of the most important parts of making a really polished Metro app. Make sure all your elements line up to the pixel.

A good trick is to set up a custom grid in photoshop when designing your app. You can do this by going to View > Show > Grid to turn on the grid, and then change its measurments by going to Edit > Preferences > Guides, Grids & Slices.

Set your Grid settings to:

Grideline Every: 20 Pixels
Subdivisions: 4

This will make make nice 20 pixel boxes with 5px sub divisions to work with.

5. Designing for touch 

Windows 8 and Windows Phone are very focused on touch as being a main point of interaction. There are a few things to keep in mind to support this.

7mm is the perfect size for touch targets

Uncritical items can be smaller.

Make sure padding between items is no less than 10px.

Visual feedback for items is really important for touch because you lose the haptic feedback you get from a physical keyboard. Use animations to show that buttons have been pressed and items have been interacted with.

6. Panoramas

Panoramas are a long list of items, intended to show off your app. Make sure they contain a few feature items that people might be interested in and then allow the user to dig deeper into the app to find/refine the content.

7. Semantic Zoom

When creating semantic view for your app, remember it’s an overview for users to quickly jump from section to section in your panoramas and lists.

The user should only be able to select groups of content in the list and not specific items.

Semantic view can look very different to your standard list so use this to your advantage, for example, instead of showing all the content items, just show a heading and how many items are under that section.

8. Tiles

Creating meaningful tiles one of the most important elements of your app. It’s the front door and if used well, will encourage users to return to you app.

Make sure the content pushed to your tile is useful, relative and always fresh. Not only will it keep people interested in your app, but will make them want your tile front and centre on their start screen.

Also consider the ability to pin more than one tile for your app. If you have different sections that you feel people might want to deeplink into, allow them to pin those items to their start screen as well.

9. Animations

I mentioned before the importance of using animation to show feedback, but Metro considers animation as a first class citizen to be used in every part of your app.

Use it to make your content feel alive. The way items flick into place and fly out. Use animation to create a mental model to help users know where they are in the app. By making the content fly off to the left, it makes users feel like the next page is just right of the last content. It’s arbitrary, seeing as the content is not actually there at all, but can really help users understand the app and navigate easier.

Direct manipulation has become a very important part of touch applications as well these days. Real time gestures are powerful and allow the user to feel in control. Use them to your advantage.

10. Screen size

Windows 8 supports a huge array of screen resolutions. Design your app to accommodate and use the screen wisely. Make sure you content adapts and fills the available real estate.

Windows 8 also supports different pixel densities or DPI. It has been limited to 3, so if you have art work, make sure you create it at 100% 140% and 180% to avoid pixelation on denser screens. Windows will handle the images and change them when needed.  It will also make sure your fonts and vector graphics are scaled accordingly so everything looks nice.

For a whole lot more info on screen capabilities in win8 check out this post 

Some other things to check out

Here are a few links that have some great info about creating apps for Metro.

Great post from Arturo Toledo on Metro 

Helpful content from Microsoft

Interesting case study about redesigning an iPad app for Metro 

Conclusion

Well that’s about it for the moment. Hope this has helped out a bit  and you are on your way to creating some awesome apps.

Thanks

Alex

About these ads
  1. June 19th, 2012
  2. June 19th, 2012

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: