Is Metro a Noun or a Verb?

Some languages are more slippery than others. George Orwell argued that English was the language of politics due to its high level of vagueness. In English, some words are downright unpinable.

If you have anything to do with the concept, design and development of software, I’m sure you’ve run into this with the word design. Everyone uses the word but most people can’t agree on what it means. Metro face many of the same challenges, since Metro inherits from Design. So before we analyze Metro syntax, let’s tackle the question of design.

What is Design?

Much of the frustration between designers and developers is due to a basic semantic problem. Design is both a noun and a verb.

Most people think of design as a noun. I love the design of that app. In this context, design as a noun is usually collapsed down to simply mean the visual style of the app. When they speak of design they just mean the skin and the visual ornaments tacked on at the end.

Design professionals, though, tend to think of design as a verb. I design apps peoples love. In this context, design as a verb is all about the process from the beginning. To understand what Metro is and what it isn’t, more importantly, to understand how to do Metro right, you have to understand this process.

Three Pillars of Great Design

In the Donald Norman classic, Emotional Design: Why we Love (or Hate) Everyday Things, great design can viewed as a synthesis of three targeted disciplines: visceral design, behavioral design, and reflective design.

Visceral design is all about nailing that initial, gut reaction. The goal of visceral design is to brain hack the user by directly appealing to their base, automatic reactions. We can cerebrally talk about beauty only being skin deep, but we all want to experience love at first sight.

Behavioral design is all about solving the right problem, and making sure you are solving it the right way. Is the application functional, dependable, and usable? This model embraces the consumer as a predictable, rational user fixed on performing a task.

Reflective design elevates the solution into the social and moral landscape. What does using this product say about me, my values, my goals, and my network? This product associates me with what larger movement, tribe or belief system?

Cheap design will chase a single pillar at the expense of the other two. Great design architects a solution that is properly balanced upon all three, depending on the goal of the application and the audience it serves. So where does Metro rank?

What is Metro?

At the highest level, Metro is a design philosophy that embraces five core principles:

• Pride of Craftsmanship
• Fast and Fluid
• Authentically Digital
• Do More with Less
• Win as One

When we map these principles to the three pillars of great design, we see that Metro absolutely nails Behavioral Design. With its reductivist and modernist ethos, it promotes content before chrome. It preaches form follows function and embraces the elegance of simplicity.

However, I would also argue that Metro is at the forefront of a radical shift in Reflective Design. This is perfectly encapsulated in the creed Authentically Digital. To understand the deep and significant shift in thinking that this requires, we need to zoom out and put this war cry in its context.

The Rise and Fall of Skeumorphism

When most people speak of design as a noun, they are talking about the feeling they get from the aesthetics. In this post scarcity, hyper consumer based economy, this battle for eyeballs and dollars has been fought primarily targeting this aspect of visceral design.

Unfortunately, the easiest way to nail visceral design, even at the expense of behavioral and reflective design, is to employ skeumorphism. Skeumorphism can be defined as a derivative object that retains ornamental design cues to a structure that was necessary in the original. In other words, making the app mimic the anolog world to invoke desire. Doing this well is a talent. It is also the first thing we are usually drawn to and learn as budding designers.

Skeumorphism in itself isn’t bad. It is one of several techniques at our disposal as design professionals. The Page Flip effect I created a couple posts back is a perfect example of skeumorphism. There is no actual paper, light source, or shadows in the virtual pages you flip, but by manipulating the effect of physical paper turning, the design is targeting the familiar to play upon your emotions when interacting with the digital.

Unfortunately, skeumorphism stopped being one of several ingredients in a well-balanced diet of experience design, and became our primary food group. Skeumorphism is eye candy. Skeumorphism is highly refined, blindingly white brain sugar, and who does’t like sugar? But if skeumorphism is the only trick we needed to learn, we can’t really call ourselves designers since we’re not really solving any problems. We would simply be stylists for hire. Now that may be what a particular client wants, but its not what our profession is all about. Design solves problems.

So the shift in professional design to move away from skeumorphism did not begin with Metro, but it is an emerging movement arising across the world of design and technology as a push back against this sickly sweet, analog mimicry that has saturating everything. We are waking up to a new aesthetic, and shedding crutches that were needed during the analog to digital transition, but may be gratuitous bloat today.

Through a brilliant combination of talent, hard work, luck and timing, it just so happens that Metro is coming out at exactly the right time to be the dominant operating system of this paradigm shift. This is big, deep, radical change. This is change that inspires. This is change that terrifies. This is change that forces reflection.

Please Don’t Be Boring

So while skeumorphism isn’t the only way to achieve visceral design, breaking free from it is not an easy task. It now has decades of momentum and ubiquity in the digital world. It is that easy access box of donuts at work in the morning that tempts us with filters, cow bell, and gimmicks that many of us have stuffed in our toolbox over the years for just that very reason. That tired collection of good old crowd pleasers we can crank out quickly and move on to the projects that really inspired us. We’re all guilt of this. But we should work at stopping it.

…Metro is a forcing function that can help us return to great design.

That is why Metro is hard right now for many designers, because it requires all of us to think differently about our designs from the ground up. But this is a good thing. Edward Tufte says that good design is clear thinking made visible. As such, Metro design doesn’t start with templates, it starts with questions. Are you sure you are solving the right problem? Are you solving it with laser focus and clarity? Are you solving it as fast and fluid as possible? What form would best optimize this function? Is the visual style being true to both the task at hand the desire of the audience? Or is the style treatment simply relying on eye candy to hide a weak concept or poor execution?

It is said that a design is done, not when there is nothing left to add but when there is nothing left to remove. The difference between an amateur and a professional in both design and software is that an amateur becomes obsessed with adding new objects and frameworks, even when not needed. In contrast, a mature professional thinks in terms of refining the solution down to its essence and sustainable framework. In both cases, professionalism is manifest in the ability to strip off all that is unnecessary, but nothing more.

Metro promotes visceral design through pride of craftsmanship. This is not easy to do. This requires thought and talent. Simply stripping all the chrome away down to the bones is no more metro than stuffing everything into a box and using 42 point fonts.

The design of a Metro app is focused on human centered problem solving. Enable the task to be performed quickly and efficiently, but don’t forget the human on the other end. Getting rid of skeumorphism isn’t done to remove any traces of humanity, but to provide space for the authenticity and soul of your application to breathe.

Most importantly, the amount of visceral design has to be appropriate for the task and audience. Pragmatic, task driven apps should plainly manifest the prioritization of behavioral design within Metro. As the content and goals of the application move into the visceral realm (such as luxury goods and services, entertainment experiences, gameplay or creativity products), the aesthetic should match accordingly. In both cases, though, it is the content that dictates the style. There should be no more and no less style than is required by the content and the audience. That is putting content before chrome.

So is Metro a noun or a verb?

Like Design, Metro is both. Metro design requires an investment among everyone involved in building the app, both developers and designers. And while we as designers should be drawn to the elegant simplicity the language affords, let us have no doubt about it – whatever we want to express, engineering will need it in tangible nouns. We all have to speak the same language.

So when you need a crash course in a language, there are two initial steps that are critical. The first is building up a vocabulary of nouns. The second is memorizing a few key phrases that get you up and running as fast as possible. We are in exactly the same position with Metro right now.

The templates and code samples that are available today in the preview version of Visual Studio 11 are exactly that: well executed phrases and nouns for some of the most common scenarios. Start there. Start with the nouns. Memorize those phrases. But it’s not about memory; it is about breaking these simple, entry level phrases down apart and studying them, practicing them again and again until you start to understand how the grammar works.

Even if you are a designer, start with the nouns and phrases. Especially if you are a designer, start with the nouns. It will keep you honest. Because we are so accustomed to speaking skemorphism as our default language, the tendency to want to swap out words or thinking from our current tongue to complete the phrase in Metro may be too strong to resist. But fight this tendency if you want to learn it right. Otherwise, the results will just be a poor example of both.

Languages Evolve

Metro is the dominant language of the emerging Microsoft ecosystem. If this is where we are going to live and work, we should learn to speak it well. It is not defined by those templates, but those templates are the phrase book to get you up and running as a native speaker as quick as possible.

The danger, however, comes when we start believing that those few dozen phrases constitute the entirety of the language and the limits of its ability to be expressive, to inspire, to be visceral. Those nouns and phrases are needed to understand the syntax and are a required first step. But the goal of language is expression. As designers and developers, we need to start with the nouns to work our way up to the verbs and adjectives. Don’t take short cuts, invest in them early. But pushing onward, we move up the spectrum to achieve mastery of the core principles of this new language.

Metro has the power to be a highly efficient language that both enhances and enables the people who use it. But it should not be confined to a small lookup table of compliance. If this is how you think about Metro, you are thinking about it wrong.

What Metro needs are native speakers who have invested the time and energy to understand the beauty of this language and speak it with subtle elegance. Speakers who understand what it is trying to say about technology and its place within our broader world of humanity. Like learning a new language, it will be frustrating at first and may require patience and determination. But the rewards are worth it. Invest in learning the language right. Respect the rules of grammar. But once you’re fluent, make it sing.



  1. Pingback: Three great posts on Metro style application design « 21st Century Storytelling
  2. Pingback: Weekend Reading – May 19 and 20
  3. Pingback: Windows 8 Layouts and Styles « Ibraheem Osama Mohamed (??????? ????? ????)

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>