Meta

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.

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.

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:

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.

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. SeeMicrosoft® 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 byThree 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 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.

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):

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.

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.

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’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 jumplists 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.”

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:

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.

3 Comments

I’m impressed, I must say. Actually rarely do I encounter a weblog that’s each educative and entertaining, and let me let you know, you’ve gotten hit the nail on the head. Your idea is outstanding; the problem is one thing that not sufficient individuals are talking intelligently about. I’m very pleased that I stumbled across this in my seek for something relating to this.