Metro Design Language By Prashant Tiwari

Metro is an internal code name of a typography-based

design language created by Microsoft, originally for

use in Windows Phone. 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

Microsoft's design team says that the design language is partly inspired by signs commonly

found at public transport systems; for instance, those found on the King County Metro transit

system, which serves the greater

Seattle area where Microsoft is

headquartered. The design

language places emphasis on good

typography and has large text that

catches the eye. Microsoft says that

the design language is designed to be "sleek, quick, modern" and a "refresh" from the icon-

based interfaces of Windows, Android, and iOS. All instances use fonts based on the Segoe

font family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. For the

Zune, Microsoft created a custom version called Zegoe UI, and for Windows Phone, Microsoft

created the "Segoe WP" font family. The fonts mostly differ only in minor details. More obvious

differences between Segoe UI and Segoe WP are apparent in their respective numerical

characters. The Segoe UI in Windows 8 had an obvious differences as being similar to Segoe

WP. Notable characters had a typographic changes of the characters 1, 2, 4, 5, 7, 8, I, and Q.

The new Windows 8 Start Screen, making use of flat, colored live tiles and a laterally scrolling

canvas as used in Windows Phone and Xbox 360 Dashboard.

DESIGNED TO BE "SLEEK, QUICK, MODERN"

AND A "REFRESH" FROM THE ICON-BASED

INTERFACES.

Clean, Light, Open, Fast

Typography

Alive In Motion

Content, Not Chrome

FIGURE 1: WINDOWS 8 START SCREEN

The design language was designed specifically to consolidate groups of common tasks to

speed up usage. This is accomplished by excluding superfluous graphics and instead relying

on the actual content to also function as the main UI. The resulting interfaces favor larger hubs

over smaller buttons and often feature laterally scrolling canvases. Page titles are usually large

and consequently also take advantage of lateral scrolling.

Animation plays a large part, with transitions, and user

interactions such as presses or swipes recommended to

always be acknowledged by some form of natural

animation or motion. This is intended to give the user

the impression that the UI is "alive" and responsive, with

"an added sense of depth. “ Internally, Microsoft has

compiled a list of principles as core to the design

language.

Close to the official launch date of Windows 8 (October

26, 2012), more developers and Microsoft partners

started working on creating new Metro applications, and

many websites with resources related to this topic have

been created, as well as the Microsoft's UX guidelines for

Windows Store Apps. Early response to Metro was

generally positive. In a review of the Zune HD, Engadget

said, "Microsoft continues its push towards big, big

typography here, providing a sophisticated, neatly designed layout that's almost as functional

FIGURE 2: WINDOWS PHONE 8 START SCREEN

as it is attractive." CNET complimented the design language, saying, "It’s a bit more daring and

informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."

The Industrial Designers Society of America (IDEA) awarded Windows Phone, which uses the

UI, the "People's Choice Design" gold award as well as the "Best in Show" award. Isabel Ancona,

the User Experience Consultant at IDEA, explained why Windows Phone won this award and

explains the user experience of Metro:

While the Metro-style interface introduced in Windows 8 was designed to be user-friendly on

tablets, it is less accommodating for

a desktop, and less customizable

than its predecessors. Users have

particularly disapproved of the

removal of the Windows Start menu

that users are acclimated to as it has

been featured in all versions of

Windows since Windows 95. In

previous versions of Windows, the

Start menu provided a more

convenient way for novice and

experienced users alike to launch

programs and applications. Some

reviews argue that Microsoft's decision to ditch Aero is the result of a conscious effort to reduce

usage of system GPU resources and to prolong battery life, in order to target tablet market

rather than its traditional desktop user base. In addition to removing the Start Menu, Windows

8 takes a more modal approach with its use of full-screen apps that steer away from reliance

on the icon-based desktop interface. In doing so; however, Microsoft has shifted its focus away

from multitasking and business productivity.

THE INNOVATION HERE IS THE FLUIDITY OF

EXPERIENCE AND FOCUS ON THE DATA,

WITHOUT USING TRADITIONAL USER

INTERFACE CONVENTIONS OF WINDOWS

AND FRAMES. DATA BECOMES THE VISUAL

ELEMENTS AND CONTROLS. SIMPLE

GESTURES AND TRANSITIONS GUIDE THE

USER DEEPER INTO CONTENT. A TRULY

ELEGANT AND UNIQUE EXPERIENCE.