Channels ▼
RSS

The Design Principles of Metro Apps


A Metro-style app uniquely leverages the features of Microsoft Windows 8. For example, a Metro-style app is touch-enabled (but not limited to touch), and it displays in a single, plain, borderless window devoid of any adornment such as resizable edges, caption bar, or icons. At the same time, a Metro-style app adapts to the effective size and shape of the screen and offers a fluid rendering experience because the content adapts smoothly and intelligently to whatever layout the physical screen may have. Finally, a Metro-style app integrates with the surrounding environment via new facilities such as the app-bar (a sort of hidden top menu), live tiles (a smart replacement for desktop icons), and charms (quick buttons to interact with other apps through well-known contracts).

If you stop at appearances, then the Metro UI guidelines are solely for new Windows 8 Metro-style applications and cannot be adapted to Windows 7, Web, or mobile apps — nor to Windows 8 applications not specifically designed for Metro. If you take a deeper look at the Metro initiative, though, you can't help but recognize several new design principles at play. They describe concisely and precisely the vision behind Microsoft applications for the future.

As discussed in this explanation of Metro design principles, the Metro vision is driven by the following guiding aims:

  • Show pride in craftsmanship
  • Be fast and fluid
  • Be authentically digital
  • Do more with less
  • Win as one

How do you turn these guidelines into concrete action? Reading through the document, each principle is expanded in more detail to give the sense of modern applications for today's users. I selected seven aspects that can really make any application — and not just upcoming Windows 8 Metro-style applications — much more attractive.

The Seven Virtues of Modern Applications

For too many years, users were forced to think about how the application was designed to operate. Software is a formalism and needs strict rules and logic, but human behavior is by nature looser and not always based on logic. The first virtue of a modern application can be summarized with end users in mind as, "Design for touch and intuitive interaction." Touch is what makes an app immediate accessible; however, touch doesn't have to be the only way of interacting with the application. A good selling point will be offering the mouse or keyboard to classic users and touch to younger (or just more immediate) users. Beyond touch, however, intuitiveness of the interaction is key. A goal of the application should just be making it clear at any step what the next operation should be.

The second virtue is then expressed as, "Be responsive to user interaction and ready for the next interaction." For many years, redundancy in the user interface of an application was considered a good thing. A UI is defined as redundant if it allows performing the same task in more than one way. Keyboard and mouse navigation, slightly different menu items (Save, Save All, Save As), and keyboard shortcuts all produce the same result in many of today's applications. In a UI that is essentially touch-based, all these methods have no reason to exist. Subsequently, "Reduce redundancy in your UI" is the third virtue of Metro apps. This is a design consideration that emerges quite clearly also in many successful mobile applications and is tightly connected to a growing need for simplicity — like being able to do more things (or just the same things) with fewer options and tools.

Another long-standing pillar of software development that Metro brings into question is the overall user interface model. For various reasons, some applications made a point of providing a custom user interface. Sometimes this was done to make the application shine in comparison to other applications of the same type. Under Metro, however, all applications should fit themselves into the same user interface model — the model dictated by the host platform. "Fit into the UI model," is the fourth virtue and it is another principle that will be familiar to authors of mobile applications. For iOS and Windows Phone (and, to lesser extent, also for Android and BlackBerry), applications may be rejected if they clash with UI guidelines.

The fifth virtue is a corollary of the fourth and promotes the use of native tools and templates to achieve more consistency. "Full integration with the host platform" is a key point of Metro design as it will make users feel at home with just about any application and it enables distinct applications to interact and exchange data.

The sixth virtue can be summarized as, "Work with other apps to complete scenarios by participating in app contracts." In Metro, applications can support standard contracts such as Search and Share to retrieve information from within other apps and share their content with (or import content from) other applications.

Finally, the seventh virtue is "Connect to the cloud so that your users can stay connected to each other." Ensuring a continuous connection between the user and the application has been achieved for years by saving personal data to cookies and local settings. The cloud just adds another dimension by hosting personal data and making that information available to others for social software interaction.

Summary

If you're interested in Windows 8 programming capabilities, then you should start by reading the previously referenced introduction to the principles of the Metro UI. The five core Metro design principles expressed there might be a little quirky in wording and abstract in their presentation, but they are the drivers for the next generation of Windows applications.


— Dino Esposito is a frequent contributor to Dr. Dobb's. His most recent book, Programming Microsoft ASP.NET MVC was published by Microsoft Press.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Video