The document discusses best practices for designing applications for Windows phones using the Metro design philosophy. It covers principles like clean and minimalist design, using typography and white space to guide users. Specific guidelines addressed include a hub and spoke navigation model, avoiding confusing elements, and designing for touch. The document emphasizes making the interface intuitive so users can accomplish their goals with ease.

1. application design for windows
phone
me paul laberge
developer advisor
microsoft canada
@plaberge
paul.laberge@microsoft.com

2. AGENDA
what we will talk about today
METRO THE RIGHT WAY
MAKING USERS AWESOME IN THE MOMENT

3. metro awesom
metro principles tweaking existing concepts
system navigation and hierarchy the design philosophy of g
page structure
visual design
creating a user journey
attract, delight, retain
paving the cowpaths
…

4. METRO THE RIGHT WAY
iconographic vs infographic
was iconographic
real world tools and objects are used as metaphors
hyper realism is the dominant aesthetic
translation of content from analog to digital
focus on techniques for manipulating and organizing content
our digital things
now infographic
content represented as it exists
content is assumed to be interactive
augment people, objects, places and data with relevant information
focus on seamless overlay of information and thoughtless interaction
our digital selves

5. METRO THE RIGHT WAY
metro principles
clean, light, open, fast
celebrate typography
alive and in motion
content not chrome
authentically digital

6. METRO THE RIGHT WAY
system navigation and hierarchy
hub and spoke model
trust the hardware
avoid traps loops, phantom pages
be predictable
integrated experiences

7. METRO THE RIGHT WAY
system navigation and hierarchy
hub and spoke model
trust the hardware
avoid traps loops, phantom pages
be predictable
integrated experiences

8. METRO THE RIGHT WAY
system navigation and hierarchy
hub and spoke model
trust the hardware
avoid traps, loops and phantom pages
be predictable
integrated experiences

9. METRO THE RIGHT WAY
system navigation and hierarchy
hub and spoke model
trust the hardware
avoid traps, loops and phantom pages
be predictable
integrated experiences

10. METRO THE RIGHT WAY
system navigation and hierarchy
hub and spoke model
trust the hardware
avoid traps, loops and phantom pages
be predictable
integrated experiences

11. METRO THE RIGHT WAY
visual design
apply metro first, then inject brand
design on a grid
reduce clutter
match negative space and margins
utilize white space, typographic scale to guide the eye
use native apps as a guide
don’t re-invent the wheel
a platform on which to innovate
design for touch

12. METRO THE RIGHT WAY
pivot and panorama
pivots are
efficient
focused
habitual
deep and data-driven
panoramas are
expansive
explorative
dynamic
shallow and artful

13. awesome metro
metro principles
tweaking existing concepts
system navigation a
the design philosophy of great apps
page structure
visual design
creating a user jour
attract, delight, reta
paving the cowpath
…

14. MAKING USERS AWESOME IN THE MOMENT
Sometimes all you need is a disguise – tweak existing
concepts
here’s a dirty little secret: fighting games like street fighter and mortal kombat
are essentially rock-paper-scissors.

15. MAKING USERS AWESOME IN THE MOMENT
The design philosophy of great apps…
…isn’t all that different across the competitive mobile platforms.
great apps:
don’t make us think about their interfaces
deal with complex tasks, but insulate us from that complexity
make accomplishing our goals easier
help users be awesome in the moment

16. go-do’s
• Download the free tools at http://create.msdn.com
• Sign up for an App Hub Membership (also at http://create.msdn.com)
• Check out MS Canada’s WP7.5 Dev Resource Page:
http://blogs.msdn.com/b/cdnmobiledevs/p/wpdevres.aspx
• Build and publish 2 apps by December 15, get a free Windows Phone!
Details at http://microsoft.ca/mangoappchallenge
• Canadian Developer Connection LinkedIn Group:
http://www.linkedin.com/groups/Canadian-Developer-Connection-
3398140?gid=3398140&trk=hb_side_g

17. Here’s the deal:
Build and publish 2 new, quality
Windows Phone apps to the
Marketplace by December 15, 2011 and
we will give you a phone. It’s that
simple.
https://microsoft.ca/mangoappchallenge
a.k.a.
http://bit.ly/o572Jt
1
7

18. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.