Next-generation cloud client experiences based on the Metro design language

There is a whole series of evidences that Microsoft is going to introduce a unified cloud client experience in its upcoming personal cloud based layered software for its cloud client devices. The latest evidence from last week (see below) is even indicating that the same style of design might be introduced in the latest redesign of the company’s web pages. This is even more intriguing as it is indicating a direction when everything on the next-generation web, i.e. the cloud could be based on the same design language.

The new system software layer in question might come, however, as late as by the final version of Internet Explorer 9, i.e. this April at the latest. Nevertheless it is worth to examine these evidences since they might also point to the way how Microsoft is planning to address the growing issue of the coverage of its own upcoming tablet PC offerings with much more effective touch based user interface as well as the same for the growing number of 3d party devices from Apple and from partners of Google which Microsoft cannot otherwise integrate into its crucial, three screens and a cloud strategy.

The latest addition: Metro styled new entertainment experience on Xbox 360 [June 6, 2011]

The Tablet PC (Windows Slate) evidence

First, take a look at the Entertaining meets enterprising with the most powerful tablet [Jan 4, 2011] promo page in the US for the ASUS Eee Slate EP121 launched on CES 2011 (also click here for the complete coverage of CES 2011 from Microsoft point of view). What you see there is the user interface of the Windows Media Center which is coming with the Windows 7 Home Premium version installed on every Eee Slate EP121:

And this user interface is just the source of allmost all new interface designs introduced by Microsoft in the last couple of years as well explained in the wikipedia entry about the so called Metro Design Language (emphasis is mine):

The first roots of Metro’s heritage were planted in Windows Media Center for Windows XP Media Center Edition, which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Microsoft’s R&D department wanted to refresh the Zune interface for its second wave of devices. Microsoft executive Robbie Bach 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; this new design eventually became known as “Metro” during Windows Phone 7’s development. Microsoft has also begun integrating elements of the Metro design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger and Live Mesh.

Paul Thurrott has even a kind of historical reporting about Metro on his SuperSite For Windows which he is referring to in his recent More work on Chapter 4 and notes about the origins of Metro [April 4, 2010] as (emphasis is mine):

I spent an hour or two this morning on Chapter 4 [for his upcoming Windows Phone 7 Secrets book made later available from Wiley on Nov 9, 2010]. Most of what I’ve written so far is background material, by necessity, and I have been thinking a bit about the origins of Metro, which dates back to Freestyle [Sept 3, 2002] /Media Center [Oct 9, 2002], Portable Media Center [Sept 2, 2004], Origami [Nov 4, 2007]/UMPC [Nov 4, 2007], and of course Zune [Nov 13, 2006]/Zune HD [Sept 26, 2009]. (Some of those links are like a history lesson.)

This is an interesting thing about Metro: It’s brand new, sort of. And will be “new” to lots of people. But it’s really something that’s been in the works for over a decade, and as Microsoft veered from its original Freestyle plans (provide a 10-foot UI for Windows), it stumbled onto something wonderful: This stuff isn’t about the remote control, as originally envisioned. It’s really about alternative (non-mouse, non-keyboard) interactions. And that has evolved over time to include pen/stylus, touch, and then multi-touch. And Microsoft has suggested that further enhancements along the lines of its Natal/natural user interface work is on the way. (As is the expansion of Metro to non-phone systems.)

The Microsoft Surface evidence

No wonder that Microsoft’s only new product for CES 2011, Microsoft Surface 2.0 is now starting to support the Metro Design Language. See the following reports:

Hands-on with the new Surface 2.0 – Samsung SUR40 [Jan 8, 2011] (emphasis is mine):

The OS software has also been drastically improved. Blurry-looking graphics has been replaced with high-fidelity counterparts to compliment the higher resolution screen. For Metro fans, there’s also a splash of solid colored blocks and focus on text in the UI controls and bundled Microsoft applications.

Bing and Social Stream for Microsoft Surface v2 [Jan 14, 2011] from Josh Santangelo, technical director of Stimulant doing Surface subcontract (and lately HTML5 subcontract) work for Microsoft (emphasis is mine):

At CES, Microsoft announced the second version of the Microsoft Surface product. Part of their demos included two apps that I’ve been working on.

The first is Social Stream (née Live Stream [see Microsoft Surface Live Stream [Sept, 2010]), which has been reworked for the HD display of the v2 hardware.

The second is a Bing application. Currently you’re able to use their image search API to bring up images of pretty much anything. By the time it launches you’ll be able to do… other cool things. This is mostly what I’m working on lately.

Surface v2 and these applications will launch this summer. Learn more at surface.com.

It is also important to add that the version preceding Social Stream, what was called Live Stream has been made available back in July 2010 in source code form. See Microsoft® Surface® Live Stream Code Sample [July 29, 2010]. It is worth to read the main page since there you can find very good illustrations of the user experience. This is also the only code sample which represents Microsoft’s next generation cloud client experience as noted by Three new Microsoft Surface Code Samples [Oct 4, 2010] (emphasis is mine):

Live Stream demonstrates an elegant, simplified, interface designed for touch from the ground up, and based on the Metro design language. It is a great reference for those interested in advanced touch application design.

The benefit of this code sample is well described Josh Santangelo in his Photo [Sept 9, 2010] post as:

The last project I worked on at Stimulant for the Surface team at Microsoft was Live Stream, a multi-user social media reader. An administrator can configure it to pull specific feeds from Twitter, Flickr, and RSS services, which are then displayed in a never-ending, scrollable stream across the display.

Multiple users can pull interesting content toward them, where it will scale and orient to them for easy reading. They can take the content with them by flipping the items over and taking a photo of the Microsoft Tag on the back with their mobile phone, which resolves to the URL of that item.

This project was the inspiration for the SurfaceScrollViewer behaviors, ManipulationViewport, flipping ScatterViewItems, and Plane. Each of these components are free for download from the preceding links, and the entire project’s source code is available on the MSDN code gallery.

And now look at a comprehensive presentation video of the whole Surface 2.0 experience as demonstrated by Chip Wood, senior director of the Surface team (responsible for the business development) shown to Rob Wolf from the Social Media team:

Bing image search you can see from 4:00 but there are Metro style things all around, see for example the kind of main menu shown from 1:40.

More information is also available in a couple of excellent articles (with embedded videos) on the overall experiences (most of them are with Chip Wood interviews/demonstrations again):

What’s Next for Microsoft Surface [Jan 6, 2011] (emphasis is mine)

You can find out a ton more on the new Surface website but I’ll give you my experience as I got ten quiet minutes to play with it this morning. One of the apps on the device was a Bing search app so I tapped in my name and back came a bunch of photos of me and all the other Steve Clayton’s on the web. As you’d expected, I could move the images, pinch, stretch and al that goodness. That’s what you’d expect – but here is the thing that sets Surface apart – my pal Somanna could use the screen a the same time and was busy performing another search. Yep, Surface 2.0 can take over 50 simultaneous inputs so we could both use the screen at the same time. In retail and entertainment environments this is killer.

Samsung SUR40 for Microsoft Surface hands-on with video! (update) [Jan 7, 2011] which is quite extensively showing the Bing application from 1:50 of the embedded video in the end of the article

Hands on with Microsoft’s Surface 2 [Jan 8, 2011]

Up close with Microsoft’s next-generation Surface touchscreen tables (video) [Jan 9, 2011]

To close the Surface user experience here is a less than 2 minutes video record of the TouchTones freeware application by Stimulant which is very well pointing to the extent of the possibilities (a trial version is also available for Windows Phone 7):

TouchTones lets up to four people create music collaboratively on Microsoft Surface. You don’t need to know anything about music to make something that sounds beautiful. Start an instrument playing by touching a colored spinner, change the arrow directions on the grid to change the melody, and that’s about it! TouchTones provides an immediate and enjoyable musical experience for any small group. TouchTones can be learned with only a few seconds of exploration or by viewing its integrated help video. From there, additional features emerge through play. Create tricky melody paths through the note grid, or use multiple fingers and play TouchTones like a keyboard. Tested with users from age 4 to age 60, TouchTones opens up either minutes or hours of enjoyment, for as few as one user or even a whole family. Touchtones is a collaborative, multi-touch, multi-user, grid-based music sequencer that is being released as freeware for Microsoft Surface. It has four instruments distributed across four octaves, all playing to a master tempo. Sounds can be triggered by user- controlled animated “sprites” or by simply pressing a colored button and pressing one of the icons on the grid at the same time. The patterns on the grid produce melody, and anyone can alter the melody, even while it’s playing. Volume and reset controls help to round out the simple and wholly visual user interface. While TouchTones comes with a clean, modern design and a set of pleasant sounds, it has been designed to be reskinnable. Both the sounds and visuals can be completely customized to match any brand, mood, or theme.

by
Darren David , Stimulant
Lee Granas , Stimulant
Jules Konig , Stimulant
Nathan Moody , Stimulant
Joshua Santangelo , Stimulant

And this is leading to the very broad area of possibilities under the umbrella of Natural User Interfaces:

Natural user interfaces, or NUIs, are perfect for multi-touch and gestural interaction. How are they actually created? What hardware is available to support such interactions? How are they different from graphical user interfaces, or GUIs? Stimulant is one of the world’s few interaction design and development agencies whose mission is focused on creating such experiences. From custom hardware to Microsoft Surface, Stimulant will talk about their process, deliverables, experiences, successes, and failures from working towards a more natural way to interact with computers and other devices.

Darren David and Nathan Moody are the founding principles of Stimulant, a San Francisco based boutique agency that conceives, designs, and develops digital experiences that inspire wonder for places, contexts, and devices where none usually exists. From multi-touch to mobile, from the biggest custom touchwalls to the smallest consumer devices, they focus on making beauty bulletproof and machines magical. Their most recent clients have included HP, McKesson, Microsoft, and General Motors.

The Microsoft homepage preview evidence

Even Microsoft’s home page is being now redesigned using this same style as Dan Grady, West Coast Premier Field Engineering (PFE) Director at Microsoft  reported on his http://twitter.com/snosnap [Jan 18, 2010] that:

microsoft.com launches preview of new look today: http://www.microsoft.com/en-us/preview/ 5:51 PM Jan 18th via Seesmic Web

Just 40 minutes later the news appeared already on the winrumors site as Microsoft previews new Metro UI homepage design [Jan 18, 6:30 pm, 2011] (emphasis is mine)

Microsoft’s new front page is clearly inspired by the company’s Metro UI design. Windows Phone 7 and Zune both use the Metro UI and the software giant is hedging its bets that users will appreciate the slick look on the web.

Microsoft’s new homepage also features Internet Explorer 9 integration. The new site features jump lists and pinning support, both new features of Internet Explorer 9. Microsoft has also included its new tagline, “Be what’s next”, on the website. Microsoft revealed the new motto at the company’s employee only Global Exchange (MGX) event last year in Atlanta. The new tagline was officially shown in a video which emphasised a new flexibility between the various brands of Microsoft. The tagline replaces Microsoft’s aging “your potential, our passion” tagline which has been used in recent years.

It’s not yet clear when the software giant plans to switch to the newly designed site. A Microsoft spokesperson confirmed to WinRumors that the company doesn’t have a specific date for the switchover:

“We will continue to collect feedback during the preview period and that will help determine the final release date.  We want to make sure that we are meeting the needs of our customers and reviewing and considering all feedback received.”

(See also the Evolution of Microsoft.com [Dec 21, 2010] for comparison).

Somewhat later and by another root Michael Gillett, a student and an ardent “Microsoft follower & tech blogger + enthusiast” got a similar kind of message from another Microsoftie (Larry Hryb from the Xbox team, alias majornelson) which he not only retweeted but also decided (after looking into the new design for just a minute) that it is a Metro style design which he tweeted immediately:

majornelson Microsoft.com is being redesigned. Get a preview here: http://mjr.mn/dFdhZ3 6:58 PM Jan 18th via TweetDeck from Studio A, East Seattle Retweeted by MichaelGillett and 100+ others

Micorosft.com is going Metro! http://www.microsoft.com/en-us/preview/default.aspx 7:00 PM Jan 18th via web

Since Michael Gillett is also reporting for Neowin on Microsoft related news this could well be the cause of Neowin’s news editor Andrew Lyle releasing two hours later a detailed news item that Microsoft shows off newly redesigned homepage [Jan 18, 2011] which:

features a Windows Phone 7 style Metro UI

The Windows Phone 7 evidence

So how the Windows Phone 7 style Metro UI is looking like? The following very practical videos from the Australian APC Magazine are giving the easiest way of understanding that:

Windows Phone 7 – User Interface and Basics [Oct 12, 2010]

We grabbed a Windows Phone 7 mobile from Samsung to do a quick and dirty run-through of the WP7 OS

wp games [Oct 12, 2010]

Windows Phone 7 – Aussie third party apps [Oct 12, 2010]

The Microsoft MSDN news article Build Beautiful Apps and Games [Oct 11, 2010] is describing this as (emphasis is mine):

The Windows Phone OS 7 User Interface (UI) is based on a design that is internally named Metro, and echoes the visual language of airport and metro system signage in its design and typeface. The goal is to create contextual relevance through content – the user’s own content – so that using the phone is a personal experience. Metro design interfaces embody harmonious, functional, and attractive visual elements that encourage playful exploration so that the user feels a sense of wonder and excitement. A clear, straightforward design not only makes an application legible, it also encourages usage and can lead to delight.

The Metro design was developed using the five following principles:
1) Clean, light, open, and fast: It is visually distinctive, contains ample white space, reduces clutter and elevates typography as a key design element.
2) Content, not chrome: It accentuates focus on the content that the user cares most about, making the product simple and approachable for everyone.
3) Integrated hardware and software: Hardware and software blend into each other and creates a seamless user experience from single-button access to Search, Start, Back and the camera to on-board sensor integration.
4) World-class motion: The Windows Phone 7 touch and gesture experiences on capacitive screens are consistent with Windows 7 on the desktop and include hardware-accelerated animations and transitions to enhance the user’s experience at every turn.
5) Soulful and alive: A personalized, automatically updated view into the information that matters most to the user is enabled and brings to life a cinematic photo and video experience by having a fully integrated Zune media player experience.

These design principles are based around the concept that UI elements should be authentically digital and embody harmonious, functional, and attractive visual elements. Applications should engage users by promoting navigation, exploration, and exciting visuals in their design.

Read the UI Design and Interaction Guide for Windows Phone 7 to learn more.

There are a couple of other videos which are highly recommended:

Windows Phone 7 Promotional Video [HD] [Oct 1, 2010]

Windows Phone 7 Features [Oct 11, 2010]

Windows Phone Design Days – Metro [Aug 13, 2010] where Jeff Fong, the Design lead for Windows Phone kicks-off Windows Phone Design Days with his overview of Metro. This video is part of the Windows Phone Design Days Series.

Metro Design Language of Windows Phone 7 [Dec 3, 2010] which is the first tutorial in the Microsoft’s Design Toolbox for Windows Phone 7. In this tutorial you can find three videos about the:
– Guiding Principles of the Design Language
– Unique Components of the Interface
– Signature Examples of Motion

You can also read a very recent article Metro, Windows Phone 7 design language [Jan 5, 2011] by Andrew Spooner who is “Creative Technologist” in the Developer Evangelism team of Microsoft UK.

Hands-on with the new Surface 2.0 – Samsung SUR40