Microsoft’s Design Language

Microsoft’s new typography-based design language(internal codename Metro), originally for use in Windows Phone 7 is based upon the design principles of classic Swiss graphics design. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics (“content before chrome”). Early uses of the Metro principles began as early as Microsoft Encarta 95 and MSN 2.0, and later evolved into Windows Media Center and Zune. Later the principles of Metro were included in Windows Phone, Microsoft’s website, the Xbox 360 dashboard update, and Windows 8.

Metro

The evolution of Metro UI / Modern UI / Microsoft’s new Design Language:

The story goes back to the mid 1990′s. We can actually see the design philosophy evolve through Microsoft’s products. Early glimpses of this style could be seen in Windows Media Center for Windows XP Media Center Edition, which favoured text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Zune refreshed its interface using these principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome. The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune’s previous Portable Media Center based UI. Flat colored “live tiles” were introduced into the design language during the early Windows Phone’s studies. Microsoft has begun integrating these elements of the design language into its other products, with direct influence being seen in Windows 8, Windows Server 2012, Windows Phone 7.8, Windows Phone 8, Skype, Xbox dashboard, Office 2013, and all* of Microsoft’s websites (bing, MSN, Xbox, Store, Outlook, Windows Phone, Windows, Office  MSDN etc.)

Evolution Of Microsoft's Design Language 02

Quick History:

Before Windows Phone 7 was released in late 2010, Windows Mobile 6.5 looked like most other software interfaces. Most software interfaces basically looked the same as they used the exact same metaphors. 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.

Xerox Star UI

 

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 of which represent objects from the real world, and some 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. Apple’s skewmorphic design approach for most of its UI demonstrates this the best.  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?

mountain_lion_notes app

 

Metro enters the scene:

At some point Microsoft realized that it needed to dump Windows Mobile and start afresh with Windows Phone. When it was decided to reset the design path, the Windows Phone team didn’t look at the existing mobile or PC User Interfaces; instead took inspiration from the best works by the pioneers in the International Style. This even included the designs inspired by the NY Subway. This could be one of the reasons why the internal code name for the new design language was  Metro.

Metro inspired from subway

Enough History!

Here are the Metro Design Principles:

In words of Mike Kruzeniski [Former principal design lead (Windows Phone)], the following are the key Design Principles of Microsoft’s Design Language:

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.

 

Panoramas

“Panoramas are like Magazine Covers. They expose only a few top pieces of content.”

Panorma

Panoramas are for content consumption. From both a visual and user experience point of view, the panoramas in Metro’s style are intuitive and allow a developer to attractively bundle up content.  The hint of content horizontally beyond the screen provokes a user to naturally navigate web stores, infographics, and so on without limiting itself into a narrow column or taking up screen real-estate with unnecessary arrow buttons.

To design Panoramas, think of them as full spreads of content, not as single Pages but as a whole large spread. For inspiration, look at well designed magazine covers.

Pivots

“Pivots are data friendly. You have large lists of information to present to the user? Use Pivots, not Panoramas.”

Pivot00

Pivots are mostly for content consumption and in some cases for content input.Pivots are another UI interface that are essentially nicely animated tabs. But they allow a developer to provide a great deal of information and lists under headings, which can be easier to navigate through than a huge panorama.

Pages

“Pages are best for content input and content generation. ”

Pages are for one dimensional (one view) content consumption scenarios (whether lists or video, audio, images/photos…), great for content input and great for content generation.

Pivots and Panoramas are great for content consumption. Pages are best for content input and content generation.

Pages are the best for receiving input from users. Think of a calculator (multiple buttons), forms that users will fill out with information and other heavy input scenarios. Perhaps configuration or settings and other scenarios with a number of input controls like sliders, text boxes, checkboxes, radio buttons.

01 RunKeeper

Pages are great for content generation. Think of note taking apps, drawing or sketching, chat or communication apps and games as well.

03 FantasiaPainter

If you only need to present a set of data without multiple views use a Page. If you need multiple views, a Pivot might work much better, or a Page linking to other Pages.

02 PageListOneView

Pages are great for showing details of a previously selected item in a list or another object in a Panorama or Pivot.

04 Details_Small

Pages are like pawns in chess, there are many of them, they are usually not the star the show but, they are essential for an app to function.

Motion

When accessing an app, the user is presented with a “turnstile” animation similar to a page flipping over. This not only provides a good sense of change to the user, but also naturally leads into the horizontal scrolling motion of panoramas.

When designing navigation through content, the design team also encourages developers to keep elements a page somewhat fixed, while the rest of the content wipes away. This provides continuity of headings and other elements, while still giving the strong message of motion through the content.

A Suggestion, not a Requirement

All in all, Metro is a baseline for designing and developing apps. If it makes sense to use it, then following the pure metro principles can create an intuitive, seamless experience. That being said there are no requirements to follow these principles– and there are plenty of apps, like games, that should create their own experience.

Apps Demonstrating Microsoft’s Design Language:

Note: Credit for these apps/designs/mock ups go to the original creators.

3 Comments Microsoft’s Design Language

  1. pastel de limon

    Thanks for some other informative blog. The place else may I get that kind of information written in such an ideal manner? I’ve a challenge that I am just now operating on, and I’ve been at the glance out for such information.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

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