Why has Microsoft's Metro design language captured the essence of modern interface design? 5 key elements.

Monday, March 05, 2012 gc 6 Comments

What is Metro?
Metro is a typography-based design language. Metro style is guiding a new unified experience on Windows 8, Xbox, Windows phone 7, and can even be experience on Windows 7 in the form of Zune, and Windows Live. A design language, such as Metro, is used to guide the architecture of a group of products by capturing the principles and elements of a design approach into a single concise set. Metro gets its name from way finding systems found in metropolitan areas such as airports, subways, and urban areas. Metro gets its inspiration from modern design (reductionism), Swiss design (clear, honest, and beautiful), and motion design (the force of time—the way we experience the world).

In my view, great interface design gets out of the way and Metro gets out of the way by focusing on the content. Metro has captured the essence of modern interface design based on five key elements. 

The 5 key elements

1. Typography
Metro is founded upon clean beautiful typography.
Proper color, weight, and size can help eliminate all of the chrome, color, and graphically over manipulated design elements. Even hierarchy can be easily and cleanly shown with just typography. It is not just about typography, it is about the content.

2. Authentically Digital (Inversion of Focus)
With Metro, the user is not focused on the chrome elements such as menus, buttons, panels, and color images with in the chrome that are shaded, the user is focused on the content.

With Metro, there has been an inversion of focus. Great interfaces get out of the way.

Metro is not just about typography, it is about content. By removing all chrome, it helps put the focus on the content whether it is text, images, or video.

With a modern interface, we do not need chrome to indicate what can be pressed or manipulated. Now, the content can be manipulated. After 40 years of WIMP based interfaces, we all know how to use a computer.

3. Spacing with thoughtful reduction
Spacing is important—and made possible with the removal of all of the chrome and over-manipulated design elements. Even if there is room for another button or feature, it certainly does not mean that you should add it. In fact the opposite, you should challenge every element. It takes focus. From a visual design perspective, no longer do we need chrome on top of chrome nested in chrome.

4. Motion (fast and fluid)
Motion, used properly, can create a fun fluid interface. It brings the experience to life. In my view, motion is more important than graphic design. Metro uses animation in the right places and for the right reasons:

     Delight the user
     Simplify the task
     Hint towards interaction
     Provide a feeling of moving forward
     Respond to user behavior
     Teach the user how to interact

5. Asynchrony and intelligence
It is easy to overlook the importance of this element just as Steve Jobs admittedly missed object-oriented programming when he visited Xerox Parc where he became inspired to produce the Mac. It is easy to miss Async Programming in the same way.

Asynchrony helps make an experience fluid.

Closing
Originally developed by Xerox over 40 years ago, the traditional desktop metaphor is a bit tired at least from a design and metaphor perspective. In addition, analog design elements and metaphors are not what digital design needs today. We know that live elements can be tapped or swiped. We do not need 10 pixels of shading and blasted with color inside of a box that is further shaded wrapped in a panel with indentation—you get the idea.

There is a design revolution at Microsoft. In my view, Microsoft is leading Apple at interface design—I know sounds like heresy. Metro and Windows 8 are not perfect, but the direction is game changing. It is easy and safe to jump on the Apple design bandwagon because mostly their designs are great. But I am not afraid to point out that Apple is not the only company that is doing great design and appreciates great designers. Now, it seems that almost every company cares about great design. Design matters.

In my view, the Metro design language has captured the essence of modern interface design. Metro is modern and clean—fierce reductionism, simple, and fluid. 

Enjoy the pursuit.