Select a language to translate this page!
Powered by Microsoft® Translator
This post is a summary of a talk the Windows Phone Design Team has given a couple times recently, on the history and the future of the Metro design language.
In November, myself and Albert Shum drove a few hours north to visit our friends at the Vancouver User Experience Meetup, to talk about Metro and the design philosophy behind Windows Phone. The beginning of the presentation traced the roots of the Windows Phone Metro design language, a topic we’ve spoken about at a number of developer conferences (Watch Albert at MIX 2010). From there, we decided to push the discussion a bit further this time, to look at where we see Metro going next. As you can imagine, this was a lot of fun. Our presentation was over an hour long and covered a lot of material, so rather than just posting the slides up, I’ll describe the talk in its four parts. First, the story of Metro. Second, a look back at the history of UI design. Third, visions of future UI design in Science Fiction. Fourth and finally, where we see UI (and Metro) headed in the future.
The story of Metro
A couple years ago the Windows Phone design team realized that the design path that Windows Mobile was on was not sustainable. Once we decided to reset the direction, we didn’t look towards other mobile or PC user interfaces for inspiration. Instead, we surrounded ourselves by what we considered to be the best examples of design work, from Josef Müller-Brockmann and other pioneers of the International Style, Massimo Vignelli’s design systems for the NY Subway Map and brands like American Airlines, to conceptual work by Experimental Jetset. Similar inspiration was being used in Windows Media Center, Zune, and Xbox. In addition to this visual inspiration for our art direction, we create a series of principles to guide the interaction design, motion design, and overall experience for the phone.
Our design principles were, and still are:
Clean, Light, Open and Fast We took an approach that we call “Fierce Reduction” to remove any elements in the UI that we felt were unnecessary; both visual elements and feature bloat. It allows us to shine a focus on the primary tasks of the UI, and makes the UI feel smart, open, fast, and responsive. Alive in Motion The transitions between screens in a UI are as important the design of the screens themselves. Motion gives character to a UI, but also communicates the navigation system, which helps to improve usability. Celebrate Typography Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful. Content, Not Chrome It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content. Authentically Digital Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects.
Clean, Light, Open and Fast
We took an approach that we call “Fierce Reduction” to remove any elements in the UI that we felt were unnecessary; both visual elements and feature bloat. It allows us to shine a focus on the primary tasks of the UI, and makes the UI feel smart, open, fast, and responsive.
Alive in Motion
The transitions between screens in a UI are as important the design of the screens themselves. Motion gives character to a UI, but also communicates the navigation system, which helps to improve usability.
Celebrate Typography
Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful.
Content, Not Chrome
It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content.
Authentically Digital
Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects.
So now that we’ve established Metro, where do we go next? To help us think about what the future of our experience is, we need to understand where we’ve come from.
Looking back
Before Metro, the UI of Windows Mobile 6.5 looked like most other software interfaces. How is it that most UI’s use the exact same metaphors and basically look the same? Well, we like to look back. Way back.
If we trace the history of modern User Interface, it all begins with Vannevar Bush’s Memex machine. In a 1945 letter to the editor in The Atlantic Monthly, Bush described a machine built in to a desk, that would allow its owner to store, annotate, and link documents and media. The interface to the desk was two displays; one would display information, and the other was a surface for taking notes, annotations, or linking to other material. The machine would help humans organize larger collections of knowledge, and is regarded by some as one of the original blueprints for the modern web. At the very least, the Memex was an important inspiration for the first computer designs at SRI and Xerox PARC, which are the foundation for the PC’s we use and live with today. In 1973, the first graphical user interface was built at PARC, using the desktop as a metaphor. The UI introduced windows, icons, menus, file management, and tool palettes. Looking back at the first screenshots of this first GUI, the designs feel familiar even now. In 1974 PARC developed a What-You-See-Is-What-You-Get cut & paste interface, and in 1975 the demonstrated pop-up menus. The desktop concept was pushed quite a bit further by 1981 in the commercial Xerox Star PC interface, which was an important influence for the PC UI’s created at Microsoft, Apple, NeXT, and Sun Microsystems in the 80’s and 90’s.
Fast forward years later to modern PC interfaces and you can see those same initial metaphors and design patterns have firmly cemented themselves. Icons - some which represent objects from the real world, and some which don’t - are rendered in increasingly greater detail. Media, like books, photos and music, are packaged and presented with outdated details, shading or textures to simulate the look and feel of real world artifacts. Some concept interfaces like Bumptop push the desktop metaphor deeper by adding a 3rd dimension to the desktop, and physics to the icons to allow them to move more realistically across the desk plane.
So here we are. The first interfaces were built on a need to communicate what they were. They were like a desk, but better. They were completely new, so an approach of direct representation was appropriate. Today it’s not necessary, and yet, it’s the path that most software interfaces seem to continue to follow. We don’t need to make an eBook look like a book for people to understand how to use it. The book isn’t the cover and binding, it’s the images and the text that make the story. With an increasing amount of digital content, we don’t have a good metaphor to render anymore - just information, text and images. What do you make a UI look like when it’s just information? That’s where we go next.
Design Fiction
It’s probably not surprising that most of the designers in our studio are fans of Science Fiction movies. Aside from the characters and plots, designers in our studio (myself included) get really excited at the user interfaces that are visualized in films. There’s been a lot of great discussion recently in the design community at large on this topic of Design Fiction: the design of products, interfaces, and other artifacts that we see in Science Fiction. The product and UI’s that are designed for film are important because by imagining the future without the constraints of current technology, the film-makers are really visualizing idealized interfaces for our present culture. These visions serve as a target for engineers to build towards, and educate audiences for the kinds of experiences they will have in the future.
When we look at the interfaces that Hollywood has forecast for us over the past 20 years, there are three clear trends. First, computer interfaces are no longer something that needs to be carefully explained to audiences, rather, they should push the imagination. Second, the time between a technology appearing and film and being available commercially is shrinking considerably. And third, the user interface becomes increasingly invisible. By that I mean, the interfaces in Science Fiction move away from existing on a computer to being layered over the environment. With that, the desktop metaphors and shaded buttons disappear. The interface surrounds us, lives with us, and augments our spaces. It’s just…information. When that information is an object, it’s an object. When it’s text, it’s text. There are no unnecessary elements.
Where Next
We believe that different inspiration leads to different results. Already we see how the interfaces in movies have inspired new products or interfaces that are currently being researched and developed. There’s the Microsoft Surface computer, which aimed to move software experiences on to the surfaces of more casual environments. In 2008, Esquire magazine published the first magazine with an e-ink cover; a nod to the digital newspaper in Minority Report (2002). The 3D table in the first Xmen movie (2000) was built by Xenotran in 2004. John Underkoffler, one of the visionaries behind the Minority Report interfaces, founded a company soon after to develop the gesture UI. Microsoft Kinect puts controller free gesture interaction in the living room for $149. Qwiki creates an information storytelling experience similar to the Artificial Intelligence aboard the ship in Pixar’s Wall-e, and Zebra Imaging is building 3D displays and prints that are a step towards those seen in the movie Avatar. For us, our inspiration for the future of interface lies in the information experiences visualized in films like Minority Report, Avatar, Star Trek, and Iron Man 2. We like the idea of information existing as it is without embellishment, seamlessly overlaying itself and complementing our environment, present when it needs to be and invisible when it doesn’t. It’s a vision that resonates well with the philosophy behind Metro.
Now back to the present
While we made a giant leap from Windows Mobile 6.5 to Windows Phone 7, our approach to where we go next with the design of Metro in the next few years will be a careful and considered evolution. Metro isn’t a new style designed for the sake of being different. It’s a foundation to build on for a long time to come. It’s our starting point for what we believe is the next era of user interface design, one that is focused on content over metaphors, information over tools, and movement over static pages. It’s a language designed to clearly augment the information around you, by removing the clutter around it.
The interfaces that we see in Science Fiction like Avatar and Iron Man 2 might be a few years off, but Metro feels like a good starting point to get us there.
Follow me on Twitter here
Follow the Windows Phone Design Team on Twitter here
"Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects."
Nice jab at the Windows UI...when will you MS teams stop fighting with each other?
I agree that the Metro design philosophy is a step forward in interface design. Now you guys have to convince the Windows Team to build a 100% WPF, 100% Metro Windows 8 Explorer :) !
I agree with quentez ;D would love to see Metro integrated into Windows 8 ;O
@Aethec It wasn't a jab at the Windows UI. It was a jab at the norm UI as a whole in todays world. Everyone tries to mimic real world objects with glossyness, until now ;)
Its amazing that it takes a small group within an enormous company like Microsoft to really push the idea of a chrome-less, information-dominated design language to the entire technology industry. Metro is absolutely amazing and obviously the future of where things are going.
I can only hope this astonishing design language get make into Windows 8, its been used in almost every other Microsoft product in one way or another, its needs to live within an Operating System that will power hundreds of millions tablet devices. It has to happen.
Cannot wait to see how Metro evolves, and for the WP design team : you guys are doing not just amazing work; but work that will inspire an entire industry to better understand where UI design needs to go and why its so critical to move away from the conventional thinking of typical PC UIs. Don't let anyone tell you guys otherwise, because they would just be lying or being ignorant.
I got interested in user interface design as soon as I saw the metro language, But I just have one problem which is the app menu when you swipe right, I mean its not in any way good design to put thousands of apps one by one in a vertical scroll its just a waste of space and also there is no intuitive way to search those apps anyways still loving the wp7 look compared to any other mobile os.
The programs list on WP7 would be great in a pivot, with pivotitems for "name", "category", etc. and then using a LongListSelector inside each pivot item so you can jump by first letter of name or by category.
I think the Metro UI is a really interesting and bold road to go down.
But for me, (I've never touched a WP7 phone BTW) a spartan UI style can be boring to look at - humans like to look at beautiful detail texture, etc. One of the wonders of high density displays is how great 'stuff' looks on them. Flat areas of colour are a waste of that capability.
3d effects although 'corny', take advantage of cues that we're used to from the real world - humans are physical beings designed to manipulate physical objects and physical objects are 3 dimensional. Making everything flat in a virtual reality isn't necessarily being 'honest', since there's no 'honest' virtual reality to aim for. And making everything flat deliberately misses out on exploiting how humans analyse what we see, to help them determine how to interact with it.
Making the UI take a back seat to the content - by all means do this, but if this means that my 'home page' is a bunch of boring flat detail all the same shade of lime green, with a friend's badly-taken camera-phone facebook-sourced photo stuck in the middle then I am looking at something that isn't beautiful. The point here is that the content isn't necessarily going to make the UI beautiful to look at, even if the UI gets out of the way. Perhaps the purpose of my piece of high end tech is not to show me a facebook picture but rather to allow me to 'ooh and aah' over its lovely icons, gradients, and background picture every now and then.
@innesm I think I speak for everyone here when I say that you absolutely need to see Windows Phone 7 in action, with your own eyes.
You will be utterly blown away by how something with such little graphical and gimmicky effects/style (ie. shiny chrome) can be so authentically beautiful and elegant. You are only hurting yourself by looking at the Metro design language through a static picture on a regular screen.
Witness Windows Phone 7 on an AMOLED display and you will completely change your opinion. Period.
I have to agree with innesm, The concept of Content first is great but we do need to remember that we are human and we have evolved in a world that is rich with colour and form. Because of this our brain works in a way that will immediately pick up differences ins shapes, colours and depths. On the other side if you have 100 items all with similar shape, colours and depth it becomes very difficult to locate one particular item, especially once you give meaning to each item. for example i have 15 tiles on my start screen that all have the Blue and White theme. Now its fine if you used them on a day to day bases because your brain memories the position. How ever when you attempt to use an app that doesn't get used as much, like the maps for me, i end up flicking up and down a few times then find myself having to stop and think about it properly before finding the right one, this to me is not a natural design. Now if these tiles had different colours , shape and depth your brain would be able to identify them without any issue, in the end this is what it has evolved to do in day to day life.
In real life examples above the common themed (coloured) icons generally are grouped into one meaning. The baggage claim sign has to icons the same colour, this works in this context becuse the colour represents an attribute of the bigger baggage claim meaning. With the WP7 tiles thought the commonly themed (coloured) tiles have completely different meanings.
Not only this but we as humans enjoys visually pleasing things. If we didn't there would be no such thing as Art, and things like the Zune Player would not look so appealing. Remember the people who are buying these devices are spending their hard earned cash on a device that they can really make their own. If i had to pay my hard earned cash on a painting that you can place in your living room for everyone to see, then you are going to want something that is visually pleasing to you, not something that is plan and boring.
No one disagrees with the fact that the idea is great but it has to work in the right context. In this case i don't think it's the best fit.
" (I've never touched a WP7 phone BTW)"
Well there's your problem right there. Flat does not mean boring. Life can be achieved without contours
@nitro52 Apparenlty someone here has not hurt of minimalism ;) There are paintings and art that are so simplistic and plain yet sell for hundreds to thousands of dollars. I have a WP7 and Metro is the best UI I have used on a mobile device hands down. And yes I have owned an iPhone running iOS 4. The gloss and detail makes it seem cluttered, it is just unecessary. WP7 is simple and beautiful.
heard* jeez my speeling is terrible lately
"Minimalism"? - never heard of it!
Shouldn't that be "skeuomorphic?"
@DesignTeam I am great fan of Metro. But sometimes I think the ideas are not executed 100%. If you have time, you can read some PRODUCTIVE criticisem here: www.riagenic.com/.../487
Thanks!
@James You are right but that is not the problem. Those minimalist paintings generally contain one meaning. when you chuck that into a UI you begin to throw multiple meanings into the one interface that your brain needs to comprehend. Also those art pieces do not sell for their minimalist appearance. They normally sell for a symbolic representation of something in life, or sometimes for the well known artist. Not only this but the average person that is not interest in art and its symbolism probably would not enjoy these pieces
All i'm saying is there there is a place that this sort of concept is best used and i don't believe Interfaces that require comprehension of many different human made meanings is one of them. For example this icon represents this application and its features, once you gain a collection of these if there is no easy visual way to differentiate them then it becomes task every time you want to do something rather than being natural in the way you interact with it.
@galaxyprune interesting article and i have to agree with its examples and augments. It also makes me realize that to be good at Metro style UI based on the examples given you either need to have a good understanding of the methodology and good design skills. This can be hard to teach the thousands of developers out there so it comes down to the tools that they use being able to help them make the right choice. If WP7 followed the examples listed in this article it would be a lot better.
i'll be very blunt!!!! we want the promised adobe flash, the windows7 phone is nice, but that's just it, it's nice, your competition, android has adobe flash, i love windows but without, "flash" the windows phone is just like a nintendo dsi gameboy. when i bought this phone my first question was "does it have flash capability?" i was told it would on an update, stupid me believed that . all the apps you have, the competition has, copy and paste???? wake up!!!! if i wanted to do work, i would do it when i work on my lappie or desktop. i need a phone that would be my outlet, my escape, my stress reliever especially at work, during my break, lunch, while waiting for my wife while she's shopping.
i am starting to regret purchasing "2" not 1 but "2" windows7 phones because it still doesn't have flash!!!!! even my 6, 9 yr old children and wife ask why some things on the internet are not working on the phone..... because it does not have FLASH!!!!!! frankly i want to change my phones already because it doesn't do what i want.... and frankly one more time Android does!!!!!!
when will you wake up and give us what we want..... the windows7 phone is just another phone that will get passed on if there is no Flash, get it????
not everybody has an xbox, enough on trying to sell the phone as an xbox gadget, if i wanted an xbox i would have bought one, it took xbox developers 5-6 years to finally accept that the nintendo Wii platform is what people want, sony too... that's why they released their fix to imitate the nintendo Wii.
will it take you just as long to figure out that we want flash???? android is outselling you because of that bullheadedness. maybe it's Balmer's bullheadedness as well.
do us a favor and give us flash before i give up on you and join the android bandwagon, i'm stuck with a 2 year contract with these phones but it won't stop me from shelling out money to purchase the android phones. renew my belief in microsoft and give us flash, make this phone GREAT, Fantastic, a phone that i can't live without, my connection to the internet while i'm away from home, a phone that would make my day go by fast at the office.
Was there any pushback from Sr. Microsoft management to follow the traditional iPhone/Droid design path? If there was, you certainly provided the argument to counter it. The design path is inspired. It takes a bold gamble that the public will appreciate it and adopt it. If Microsoft caves to pressure and allows carriers such as Verizon or AT&T, or manufacturers such as HTC or Samsung the opportunity to brand the UI with their design flavor, I think you'll be in serious trouble.