Design Principles for Metro Apps

Randy Guthrie – Microsoft Academic Developer Evangelist

Beyond coming up with an idea for a Windows Phone or Windows 8 app, the Metro interface encourages a visual design approach for apps that reflects the OS.  Design of a great-looking app is non-trivial, and while the majority of apps are created by someone with programming skills, most programmers do not have formal design training, and so there is often a lot of room for improvement when it comes to the appearance and functionality of the User Interface.

Microsoft’s Metro UI strives to excel in ease of use and intuitiveness.  Apps built for Metro devices (re: Zune player, Windows Phone and forthcoming Windows 8) should mirror the Metro design principles manifested in OS.  People who have used a Metro device generally agree it is a nice interface, few have the skills to recognize why (me included) without some coaching. While downloading Visual Studio 2011 beta today, I noticed some nice Metro documentation on MSDN, and thought I would share (think copy/paste) some of what I found:

Metro style design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Metro style apps. Consider these principles as you plan your app, and always ensure your design and development choices live up to these principles.

Show pride in craftsmanship

Devote time and energy to small things that are seen often by many of your users, and engineer the experience to be complete and polished at every stage.

  • Sweat the details.
  • Make using apps safe and reliable.
  • Use balance, symmetry, and hierarchy to foster trust and a sense of integrity.
  • Align your app layout to the grid, the classic Metro style layout for apps.
Be fast and fluid

Let people interact directly with content, and respond to actions quickly with matching energy. Bring life to the experience by creating a sense of continuity and telling a story through meaningful use of motion.

  • Be responsive to user interaction and ready for the next interaction.
  • Design for touch and intuitive interaction.
  • Delight your users with motion.
  • Create a UI that is immersive and compelling.
Be authentically digital

Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Being authentically digital means embracing the fact that apps are pixels on a screen and designing with colors and images that go beyond the limits of the real world.

  • Connect to the cloud so that your users can stay connected to each other.
  • Be dynamic and alive with communication.
  • Use typography beautifully.
  • Use bold, vibrant colors.
  • Use motion meaningfully.
Do more with less

You can do more with less by reducing your design to its essence, and solving for distractions, not discoverability. Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.

  • Be great at something instead of mediocre at many things.
  • Put content before chrome.
  • Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
  • Inspire confidence in users.

Desktop browsers have quite a lot of chrome (menus, options, status bars, and so on) that is only sometimes useful. Typically, however, users open a browser to see a webpage, not to interact with the browser. Moving commands off the browser chrome and into the app bar or into charms helps users focus on what they care about.

Win as one

Work with other apps, devices, and the system to complete scenarios for people, like picking content from one app and sharing it with another. Take advantage of what people already know, like standard touch gestures and charms, to provide a sense of familiarity, control, and confidence.

  • Fit into the UI model.
  • Reduce redundancy in your UI.
  • Work with other apps to complete scenarios by participating in app contracts.
  • Use our tools and templates to promote consistency.

Following these five Metro style design principles will help you make the best choices when designing your app.


Twitter: @RandyGuthrie

Comments (0)

Skip to main content