Metro is a design interface invented by Microsoft. It depend more on typography rather than visual decorations. Its heavy reliance on text-based interface is a bold, but surprisingly beautiful refresh from the commonly seen icon-based interface.
You never know from whom or where you can get inspiration from. According to Microsoft’s design team, the Metro UI is inspired by signs commonly found at public transport systems. They usually show large texts to convey information as soon and clearly as possible.
- Focus on text and the design of text. Metro UI revolves around dominating the user interface with clean, neat, sleek, and beautiful text.
If you look at the above image, it contains only text; nothing else. Yet, it looks so clean. It soothes your eyes. This is the charm of Metro – beautiful text. Metro uses Segoe font family.
- Focus more on content rather than chrome. Metro has done away with all the extra decorations like shades, gradients, etc., around the content. The content is brought to attention by using large text titles.
As seen in the above figure, the content is emphasized more using large texts. The only decoration used is the boxes; and, too, only to separate the content. The decoration itself has only one intent – to make the content more readable. It is surprising to see how even such a simple design can look so clear, readable and beautiful.
- Navigate content smoothly and consistently. Another major focus in Metro is how the interface responds to the user interactions. Consistent animations are used to change the displayed content. Consider a restaurant menu app, for example. The content could be shown this way:
- The main categories like Chinese, Indian, Mexican, etc., are shown horizontally, in form of tabs. This level of content can be navigated by using horizontal swipes.
- Each main category might have sub-categories. Say, Indian has sub-categories like South-Indian, Punjabi. This inner level of content can be accessed by tapping on the sub-category, listed under a main category.
- The food items in a sub-category can be navigated through a vertical swipe.
Thus, this creates a consistency in navigation for different levels of content.
Adaptation of Metro
Metro has been around since a long time. But, it was used only in a few apps. Initial usage was seen in Windows Media Center. The interaction and interface of Windows Media Center followed the Metro principles. The metro interface later found its way in the relatively more famous Zune application.
It gained traction when Microsoft launched its new mobile platform – Windows Phone OS. This operating system is all about Metro interface. The advantages of Metro design can truly be seen in the touch enabled Windows Phone smart phones.
Now, Microsoft has completely revamped the interface of its desktop Windows OS by deeply integrating Metro in it. Using metro is an extremely pleasant experience in touch-based interfaces. It remains to be seen how much the desktop users embrace it.