Missing the Beauty of Metro UI

When Microsoft released Windows Phone 7, it introduced revolutionary user experiences that are far ahead of its time. Well, "far ahead of its time" meant that the target users were not ready for it. Regardless, Metro UI, as it was called, was beautiful!

Metro UI or Metro Design Language (MDL) was designed around the many new concepts and techniques of modern and contemporary print layout strategies popular at that time. Some early adoptions of the design language were found in Microsoft's Media Center and Zune applications.

In general, Metro was flat and two-dimensional. In Windows Phone 7, the start screen featured tiles instead of icons. The tiles can be of different sizes. Each tile can be "live", called live tiles, occasionally changing what its showing instead of just the app's icon. A typical start screen by itself can be very much "alive", never static, always dynamic.

Metro suggested that content can go beyond the available screen. Besides the common flick up and down gestures to scroll up and down, Metro made use of the flick left and right gestures to extend content discovery.

The left and right scrolling gestures were extensively used in what were called hubs. Generally, a hub was like a portal for related apps and content. By following the specific hub implementation requirements, an application could blend in to the hub and be part of the overall experience.

Granted for example that the application's navigation was horizontal, like in a hub, once the user has reached a desired section or content in the screen, the navigation would then go vertical. But what if the user wanted to see the same content in different styles of views? What if from a list the user wanted it narrowed to groups or expanded to show more details?

Adding a third dimension to the experience, Metro had what it called the semantic zoom, where pinching in or out on the content could provide the user with new views that zoom in or out of the available data. An example of this was with the Photo Hub. From a list of photos, pinching in would show the photos grouped by week, pinch some more by month, and another pinch to view by year. Pinching out steps back to by month, then another by week and finally to the default list. Pinching out some more can zoom in to a specific photo, where the regular photo zooming gestures can kick in.

The semantic zoom was a mesmerizing experience. It was perhaps the best feature of Metro. Imagine those zoom ins and outs applied to interactive reports to drill down and drill up data. Navigating forms and reports would never be the same. Navigating your collection of music and videos would never be the same. Navigating content and data would never be the same. In fact, combined with all those flicks in all directions, navigating apps would never be the same!

And then the Metro died.

Darn!

What happened?!

We'll try to break it down tomorrow...

Comments